Rocket Ship – Détails, épisodes et analyse

In this episode, Simon Grimm welcomes Evan Bacon, the manager of DevTools at Expo, to discuss the latest developments in Expo, including the Expo Router, Expo Web, and the new React Server Components. Evan shares insights on the adoption of Expo Router, the future of Expo Web, and the exciting potential of DOM components. The conversation highlights the challenges and innovations in building universal apps and the importance of making app development accessible to all. In this conversation, Simon and Evan Bacon delve into the evolving landscape of app development with a focus on Expo, React Native, and the introduction of new technologies like RSC and EAS hosting. They discuss the challenges developers face with App Store reviews, the skepticism surrounding new features, and the future of server components. The conversation also highlights the potential of Expo targets for Apple and the exciting possibilities of building widgets and live activities. As they look ahead, they express optimism about the advancements in Expo and the broader React Native ecosystem.

Learn React Native - https://galaxies.dev

Evan Bacon

• Twitter: https://twitter.com/Baconbrix
• Github: https://github.com/evanbacon
• Blog: https://evanbacon.dev/

Links

• RSC Code Example App: https://github.com/EvanBacon/expo-rsc-movies
• Expo RSC: https://docs.expo.dev/guides/server-components/
• EAS Hosting: https://expo.dev/eas

Takeaways

• Expo Router has been well received in the React Native community.
• The goal of Expo Router is to enable server-driven UI for developers.
• Expo Web has improved significantly with features like tree shaking and API routes..
• Expo Router version 4 is set to finalize the core features of the router.
• Expo Web is being actively used in new projects at Expo.
• DOM components allow for easier migration from web to native apps.
• React Server Components are currently in developer preview, with exciting potential.
• Skepticism towards new technologies is common but can change over time.
• RSC allows for running JavaScript not currently on the client.
• OTA updates are useful for caching and background fetching.
• EAS hosting provides a flexible solution for deploying apps.
• Expo targets for Apple enable the creation of various extensions.
• Widgets can communicate with apps via NSUser defaults.
• Real-time updates in widgets require clever workarounds.
• Expo's future includes more components and improved UI design.
• The integration of AI tools will enhance the development experience.

In this conversation, Simon Grimm interviews Ben Awad, a successful YouTuber and co-founder of the app Voidpet. They discuss Ben's journey from content creation to app development, the challenges and successes he faced, and the technical aspects of building his applications. The conversation also touches on the importance of user experience, monetization strategies, and the evolution of Ben's career in the tech industry. In this conversation, Ben Awad discusses his experiences and insights into React Native, game development, and the integration of AI tools in programming. He shares his journey from Android development to embracing React Native, the challenges of real-time gaming, and the evolution of the developer experience. Ben also touches on animation techniques in game development, his literary interests, and the future of his projects, including Voidpet and the Voidlog series.

Learn React Native - https://galaxies.dev

Ben Awad

• Ben X: https://x.com/benawad
• Ben YouTube: https://www.youtube.com/@bawad
• Ben Github: https://github.com/benawad

Links

• Voidpet: https://voidpet.com
• Voidpet garden: https://voidpet.com/o/garden
• Hands of Greed book: https://handsofgreed.com
• 
  

Takeaways

• Ben Awad transitioned from YouTube content creation to app development.
• Voidpet gained popularity on TikTok before any code was written.
• He has learned from both successful and failed projects.
• The Voidpet app focuses on mental health themes.
• Ben's cooking app, Saffron, is still active and successful.
• He emphasizes the importance of user experience in app development.
• Ben uses a simple tech stack for his apps to avoid over-engineering.
• He believes that offline capabilities in apps are not always necessary.
• Ben prefers native styling in React Native over other styles.
• A time API is essential for validating timestamps in games.
• Ben's early experiences with Android development were frustrating.
• React Native's developer experience has significantly improved over the years.
• Real-time gaming in React Native presents unique challenges.
• Animation techniques are crucial for enhancing game visuals.
• Choosing React Native for game development was a strategic decision.
• AI tools have become integral to Ben's coding workflow.

Steve Galili, lead software engineer at MyWheels, discusses the transition from the React Native Community CLI to Expo for their car-sharing platform. He highlights the benefits of Expo, such as easier development and maintenance, and the challenges of convincing the team and management to make the switch. Steve also shares insights into the technology stack of the MyWheels app, including a back office admin tool, a B2B portal, and the core app. He mentions the future plan to migrate to Expo router and the importance of prioritizing core functionality during the migration process. Steve also shares the benefits of using Expo, such as faster builds and easier onboarding for web developers. He then highlights the importance of testing in React Native and introduces the React Native Testing repository he created. Steve expresses his excitement for React Server Components in React Native and the potential improvements they can bring to the MyWheels app.

Learn React Native - https://galaxies.dev

Steve Galili

• Steve X: https://x.com/vanGalilea
• Steve website: https://stevegalili.com/
• Steve GitHub: https://github.com/vanGalilea/

Links

• MyWheels' Journey from RNC CLI to Expo: https://expo.dev/blog/from-rnc-cli-to-expo
• MyWheels: https://mywheels.nl/en
• React Native Testing: https://github.com/vanGalilea/react-native-testing
• Mock Service Worker: https://mswjs.io/

Takeaways

• The transition from React Native Community CLI to Expo can bring benefits such as easier development and maintenance.
• Convincing the team and management to make the switch to Expo can be a challenge, but highlighting the issues with the current setup and the potential improvements can help.
• During the migration process, it's important to prioritize core functionality and make decisions based on the impact on users and other apps. Expo offers benefits such as faster builds and easier onboarding for web developers.
• Front-end Innovation Days provide dedicated time for developers to work on innovative projects.
• Testing is important in React Native, and the React Native Testing repository provides practical examples and resources.
• Maestro and MSW are useful tools for testing and mocking API calls in React Native.
• React Server Components in React Native have the potential to improve app performance and security.

In this conversation, Simon Grimm interviews Gant Laborde, CIO at Infinite Red, about his role, his sci-fi novel, and the React Native Paradox. Gant explores the reasons behind React Native's success and its consistency and care as key factors. They also touch on the competition between React Native and Flutter, and the challenges faced by Google in maintaining consistency and community support. In this conversation, Gant Laborde discusses the future of AI and its integration into mobile and web projects. He highlights the importance of understanding the business logic and using AI as a feature to enhance the user experience. Gant also explains ML Kit, a Google initiative that provides pre-trained models for image and text recognition, face detection, and more. He emphasizes the need for developers to explore and experiment with AI to discover innovative ways to improve their products. Gant encourages developers to think about how AI can add value and increase the quality of life for users.

Learn React Native - https://galaxies.dev

Gant Laborde

• Gant X: https://x.com/GantLaborde
• Gant website: https://gantlaborde.com
• Gant GitHub: https://github.com/GantMan

Links

• The React Native Paradox (Chain React 2024): https://www.youtube.com/watch?v=jo2LjKJp0aA&list=PLFHvL21g9bk0XOO9XK6d6S9w1jBU6Dz_U&index=6
• React Native Ignite: Building an AI app: https://www.youtube.com/watch?v=ivfXKYPS6Xw&list=PLSk21zn8fFZDMGB9UCnqz4WqLbnOgLnp5&index=3
• Infinite Red React Native ML Kit template: https://github.com/infinitered/react-native-mlkit 
• Google ML Kit: https://developers.google.com/ml-kit

Takeaways

• As CIO at Infinite Red, Gant's role is to drive innovation and explore new technologies for the company.
• The React Native Paradox refers to the success of React Native despite other technologies attempting to bring web technology to mobile.
• Consistency and care are key factors in the success of React Native.
• Flutter, while popular, faces challenges due to Google's history of discontinuing projects and lack of consistency.
• The community support and open-source nature of React Native contribute to its longevity and adoption.
• Google's focus on multiple technologies and lack of consistency can hinder the success of its projects.
• Long-term success in technology requires multi-generational thinking and community support. AI is becoming an integral part of mobile and web projects, and its integration should focus on enhancing the user experience and adding value to the product.
• ML Kit, a Google initiative, provides pre-trained models for various AI tasks such as image and text recognition, face detection, and more.
• Developers should explore and experiment with AI to discover innovative ways to improve their products and solve real-world problems.
• Understanding the business logic and the problem being solved is crucial for effectively integrating AI into projects.

In this conversation, Simon interviews Rory Bain, a product engineer at Incident.io, about his experience building a multi-platform on-call mobile app using React Native. Rory shares his background in native mobile app development and his transition to React Native. They discuss the reasons for choosing React Native over frameworks like Flutter or Kotlin Multiplatform. Rory also explains the process of developing the on-call app, including the use of Expo and the challenges of implementing push notifications and critical alerts on Android. They also dive into the differences between iOS and Android development, the use of libraries like Tailwind and SWR, the challenges of CI/CD integration, and debugging issues with Expo's EAS.

Learn React Native - https://galaxies.dev

Rory Bain

• Rory X: https://x.com/rorybain
• Rory GitHub: https://github.com/rorydbain

Links

• Building a multi-platform on-call mobile app: https://incident.io/hubs/building-on-call/building-a-multi-platform-on-call-mobile-app
• Behind the Flame: Rory: https://incident.io/blog/behind-the-flame-rory
• incident.io On-call: https://incident.io/on-call
• Vercel SWR: https://github.com/vercel/swr

Takeaways

• The on-call mobile app at Incident.io was developed using React Native and Expo, which allowed for quick prototyping and hot reloading.
• Choosing React Native over other frameworks like Flutter or Kotlin Multiplatform was influenced by the familiarity with JavaScript and web-based tooling, as well as the desire for a native feel on each platform.
• Implementing push notifications and critical alerts on Android required writing custom native modules and using data-only notifications to wake up the app and display the notifications.
• The use of Expo and managed projects simplified the development process and eliminated the need for developers to install Android Studio or Xcode. Building a multi-platform on-call mobile app requires considering the differences between iOS and Android development.
• Libraries like Tailwind and SWR can enhance the development experience and provide consistent styling and API handling across platforms.
• Integrating CI/CD for mobile apps can be challenging, especially when dealing with versioning and remote updates.
• Debugging issues with Expo's EAS may require trial and error and using local build processes to identify and resolve problems.

In this conversation, Simon Grimm interviews Giovanni Laquidara, a developer advocate at Amazon, about TV app development with React Native. Giovanni shares his experience working with React Native at Amazon and explains how React Native can be used to develop TV apps. He also discusses the challenges and considerations when developing for TV, such as the 10-foot UI, navigation, and remote control interaction. Giovanni recommends using separate repositories for different TV platforms and emphasizes the importance of designing for readability and accessibility in TV apps. Building TV apps with React Native requires handling fragmentation, focus management, and performance considerations. Integration with TV remotes can be challenging due to different key mappings. Testing on various platforms is crucial. TV apps often focus on streaming media, but there are opportunities for educational, fitness, and gaming apps. The developer experience is improving, and AI services may be integrated into TV apps in the future.

Learn React Native - https://galaxies.dev

Giovanni Laquidara

• Giovanni LinkedIn: https://www.linkedin.com/in/glaquidara/
• Giovanni Twitter: https://x.com/giolaq

Links

• Giovanni App.js talk: https://www.youtube.com/live/s0wn7qpBoB8?t=12161s
• Build Expo apps for TV: https://docs.expo.dev/guides/building-for-tv/
• React Native tvOS Github: https://github.com/react-native-tvos/react-native-tvos
• IgniteTV template: https://github.com/react-native-tvos/IgniteTV

Takeaways

• React Native can be used to develop TV apps for platforms like Android TV, Fire TV, and tvOS.
• Developing for TV requires considering the 10-foot UI, where users are typically three meters away from the screen.
• TV app navigation should be easy and seamless, with a focus on simplicity and avoiding complex interactions.
• Separate repositories are recommended for different TV platforms due to the fragmentation and differences in SDKs.
• Designing for readability and accessibility is crucial in TV app development. Building TV apps with React Native requires handling fragmentation, focus management, and performance considerations.
• Testing on various platforms is crucial for TV app development.
• TV apps often focus on streaming media, but there are opportunities for educational, fitness, and gaming apps.
• The developer experience for TV app development is improving.
• AI services may be integrated into TV apps in the future.
• Deployment to app stores follows similar processes as mobile apps.

In this conversation, Gabriel Dierks, a lead mobile engineer at Kadmos, discusses the challenges and solutions related to mobile app development for seafarers. He also shares insights on the technology stack, release pipelines, and user experience considerations. The conversation covers topics such as the specific niche of the shipping industry, the challenges faced by seafarers, the technology stack used at Kadmos, and the release pipeline for app updates. The conversation dives further into app deployment, versioning, fingerprint comparison, Huawei App Gallery, and mobile app integration. It also delves into the challenges of integrating Huawei push service, and the connection between the web application and the mobile app for card activation. The discussion highlights the unique market focus of Kadmos and the challenges of catering to a different market.

Learn React Native - https://galaxies.dev

Gabriel Dierks

• Gabriel Twitter: https://x.com/GarioTV

Links

• App.js talk: https://www.youtube.com/live/MdCn0Iq0ucU?si=8-AJoLnOsC8StM6w&t=26324
• Kadmos: https://www.kadmos.io/
• Huawei App Gallery: https://appgallery.huawei.com/

Takeaways

• Insights into the challenges and solutions of mobile app development for seafarers
• Understanding the technology stack and release pipeline for app updates
• Considerations for user experience in the shipping industry niche Insights into the deployment process for mobile apps, including versioning and fingerprint comparison.
• Challenges and considerations for integrating with the Huawei App Gallery and Huawei push service.
• The connection between web application and mobile app for card activation and the unique market focus of Kadmos.
• The impact of market differences on app development and the importance of a seamless fintech experience for users.

Delphine Bugner, Mobile Tech Lead at BAM, discusses the inner workings of Yoga in React Native. Yoga is responsible for positioning components on the screen based on their dimensions and styling props. Delphine emphasizes the importance of understanding how things work under the hood and why they were designed that way. She shares her uncommon journey into becoming a React Native tech lead and her passion for exploring the technical aspects of technology. She also discusses the architecture of Yoga and how it works under the hood, including the translation of JSX into native views, the creation of shadow nodes and Yoga nodes, and the communication between JavaScript and native code. The conversation concludes with a discussion about the future of Yoga and its alignment with React on the web.

Learn React Native - https://galaxies.dev

Delphine Bugner

• Delphine Twitter: https://twitter.com/DelphineBugner
• Delphine Github: https://github.com/delphinebugner

Links

• Delphine "The Yoga Enigma" talk in Berlin: https://www.youtube.com/watch?v=LU3vK3IbprY
• Yoga: https://www.yogalayout.dev/

Takeaways

• Yoga is responsible for positioning components on the screen based on their dimensions and styling props in React Native.
• Understanding how things work under the hood and why they were designed that way is important for developers.
• Yoga was created as a replacement for CSS in React Native and provides a common platform-agnostic layouting solution.
• The architecture of Yoga involves the translation of JSX into native views, the creation of shadow nodes and Yoga nodes, and the communication between JavaScript and native code.
• The new architecture in React Native improves code maintenance and performance.
• View flattening is a concept in Yoga that minimizes unnecessary containers in the view hierarchy.
• Debugging Yoga can be done by using breakpoints in C++ to understand the algorithm and identify the source of bugs. The new architecture in React Native brings more conformity with the web and allows for features like suspense and transitions that were not possible before.
• Working with native modules in React Native is not as difficult as it may seem, and developers can use tools like Bob or Create React Native Library CLI to simplify the process.
• Expo provides a more maintained and active ecosystem compared to the community libraries, making it a good choice for new projects.
• Yoga is continuously evolving to align React Native with the web, and future updates will offer more configuration options for developers.

Yousouf El-Azizi, mobile tribe lead at Obytes and core team member of the GeeksBlaBla community in Morocco, discusses his path into technology and becoming a React Native developer. He also talks about his role as the leader of the mobile tribe at Obytes and the benefits of using their open-source starter template. The template, which has gained popularity on GitHub, includes Expo, TypeScript, Tailwind CSS, Husky, Lint-staged, Expo Router, React Query, React Hook Form, and localization with I18n. The conversation covers various topics related to the Obytes Starter template for React Native. The main themes include the use of Tailwind CSS, the benefits of using the template, the integration of GitHub actions for automation, the use of React Query Kit and TanStack Query for data fetching, the use of Maestro for end-to-end testing, and the importance of documentation. The conversation also touches on the negative aspects of social media and the benefits of following the right people on GitHub.

Learn React Native - https://galaxies.dev

Youssouf El Azizi

• Youssouf Twitter: https://twitter.com/ElaziziYoussouf
• Youssouf Website: https://elazizi.com/

Links

• Obytes starter: https://starter.obytes.com/
• GitHub Feed is underrated: https://elazizi.com/posts/github-feed-is-underrated/

Takeaways

• The mobile tribe at Obytes follows the Spotify model of managing teams, with tribes focusing on technology and squads focusing on projects.
• The Obytes starter template is an opinionated template that helps align teams and projects, providing a strong foundation and best practices.
• The template includes Expo, TypeScript, Tailwind CSS, Husky, Lint-staged, Expo Router, React Query, React Hook Form, and localization with I18n.
• Yousuf discusses the decision-making process behind adopting technologies for the starter template, such as Expo Router and Native Wind. The Obytes Starter template for React Native is designed to incorporate best practices and provide a solid foundation for new projects.
• Tailwind CSS is a popular framework for styling in React Native and is widely used in the React Native ecosystem.
• GitHub actions are used in the template for automation, including validation, testing, and building the app for different environments.
• React Query Kit and TenStack Query are used for data fetching and provide an easy way to manage queries and mutations.
• Maestro is used for end-to-end testing and provides a simple and intuitive way to write tests.
• Documentation is an important aspect of the template and guides how to use the various features and technologies.
• Following the right people on GitHub can be a valuable source of learning and discovering new projects and best practices.
• Social media platforms like Twitter can be overwhelming and cause anxiety, and it's important to be mindful of the time spent on them.

In this episode, Simon and Aaron recap the App.js conference and discuss the key themes and talks. They cover topics such as the state of Expo, the recommended framework for React Native, the importance of iteration speed, the introduction of Expo Orbit and Expo Atlas, the use of React Server Components, real-time 3D applications, Brownfield app integration, and local-first applications. They also highlight the challenges and benefits of using feature flagging and building native libraries. The React Native community is praised for its diversity of skills and the inspiration it provides. The future of React Native includes updates to Expo SDK, the release of React Server components, and the exploration of universal apps and low-code tools.

Learn React Native - https://galaxies.dev

Áron Berezkin

• Aron Twitter: https://twitter.com/AronBerezkin
• Aron Blog: https://www.aronberezkin.com/
• Aron Github: https://github.com/AronBe

Takeaways

• Expo is the recommended framework for React Native and focuses on improving iteration speed.
• Expo introduced Expo Orbit, a tool for managing EAS builds, and Expo Atlas, a bundle analyzer for JavaScript bundles.
• Evan Bacon showcased the use of React Server Components with AI integration, demonstrating the potential of server-driven native UI.
• Mariusz shared his experience with Brownfield app integration, highlighting the challenges and successes of integrating React Native into existing iOS and Android applications.
• Søren Brammer-Schmidt and Brent Vatne discussed local-first applications and the use of Prisma for local data management and synchronization.
• Fernando Rojo built an open-source native library called Galleria for image viewing and zooming, emphasizing the importance of not being afraid to build native libraries. Don't be afraid to build native modules in React Native
• Educate yourself about accessibility and make small changes to improve the experience
• The React Native community is diverse and inspiring
• Updates to Expo SDK and the release of React Server components are expected