Recommended
Recommended
More Related Content
Similar to Expo - Zero to App.pptx
Similar to Expo - Zero to App.pptx (20)
Recently uploaded
Recently uploaded (20)
Expo - Zero to App.pptx
- 1. Expo RN: Zero to App
- 2. Tony Kharioki 5yrs of React Native - React Native coach @ SW - Senior FE @ PXY - Web3 @ Tamago - Open-source ninja - Co-author of React Interview Guide - Mentor - Not a GDE @kharioki X(twitter), Instagram, GitHub, Vercel, dev.to, LinkedIn, Polywork, Buildspace, Reddit, Indie Hackers https://kharioki.com
- 3. Key Takeaways - Why Expo => understand why your best bet is Expo - Sift through the noise and get started quick - Recruit some of you to the Expo/React Native side
- 4. Notes : - Cross-Platform - focussed on iOS, Android and web - 0-100 very fast - We are gonna start small/easy and 🚀 - Not dwell on React as much
- 5. Case Study A client approaches you to build a mobile app for their product Or Your team wants to build a mobile app to supplement their web app Or You lied on job application and now take-home test involves building a mobile app
- 6. When deciding on starting a mobile app Platform (iOS/Android/web) Development Cost Budget Learning Curve Languages Ecosystem Performance Complexity Maintenance Deployment Integrations UX Native APIs Speed
- 7. Tasks: UI Web views Permissions Build Pipelines State Management Analytics Typescript/ dev tools Upgrades Versioning Navigation Testing Caching Native Modules Styling OTA Deep Linking Notifications
- 8. Group tasks in a mental model Priority Complexity State Management UI Build Pipeline Testing Styling Caching Versioning Typescript Analytics Permissions Web Views CI/CD Navigation Deep Linking Native Modules Upgrades Database OTA Updates
- 10. Platforms Java Kotlin Swift/Objective C React React Native Expo App development is hard, React and Expo make it easy!
- 11. So Why use React Native: - Uses Proper native views - Custom native clients - Cross-platform support - Multi-threading by default - New Architecture
- 12. And what was hard about React Native: - High learning curve - Dependency hell - Deployment process - Painful upgrading
- 13. Developing mobile apps with Expo Expo => A set of tools for building with RN Provides tools that are common in web dev: - Reusable prebuilt runtime like browser - A set of native APIs - Very fast iteration speeds - Integrated cloud services for seamless deploying
- 14. Out-of-the-box support on Expo Priority Complexity State Management UI Build Pipeline Testing Styling Caching Versioning Typescript Analytics Permissions Web Views CI/CD Navigation Deep Linking Native Modules Upgrades Database OTA Updates
- 15. We’ll talk about these tools: Expo CLI Expo SDK Expo Go Expo Snack Expo Application Services (EAS) Expo Orbit Expo Dev Client Expo Workflows
- 16. Now the cool stuff…
- 17. Expo CLI Helps us interface with the bundler, start up a dev server and other dev tasks By installing the package globally we can quickly create and generate a new project We don’t need any native code to get started
- 18. Expo SDK A set of community packages versioned together - Each is typed - Supports iOS, Android and Web - It solves the dependency issue - Examples: expo-camera, expo-splash- screen, expo-font, expo-image-picker, expo-location, etc - All the native code is built ahead of time into Expo Go
- 19. Expo Go Is a reusable native runtime - Downloadable from app store or play store - Has most APIs you’ll need to make complex apps - Reduces amount of time from nothing to hello world - Makes it as easy as web dev
- 20. Expo Snack Is a platform designed for running React Native apps in the browser. Code created can be saved as “snacks” and even shared - requires no setup & can be previewed immediately on real devices - Great for web devs unfamiliar to native apis - RN devs who want to prototype/share an idea - Bug reporting - Live code sessions
- 22. Expo Application Services These are deeply integrated cloud services for Expo and React Native apps. - Makes it easier to deploy mobile applications - Submit app with single command - It bootstraps app’s native code signing & performs validation - Sends the source code to EAS build servers - CI servers return binary files, or push them to stores
- 23. Expo Orbit A cool new way of launching builds and running snacks in your devices/simulators - Is a macOS menu bar app - Install and launch builds from EAS - Launch Snack projects in simulators - Install and launch apps from local files
- 25. Expo Dev Client What if we need to use native code? - We need a custom dev client like expo Go With special set of native features - A dev client sits between the OS and the react app - To add custom native code, install any RN module and rebuild app
- 27. Expo Workflows Managed Workflow: - Let’s us avoid working with native code directly - Maximizes cross-platform configuration - iOS/Android files are managed by Expo CLI - To upgrade simply configure app.json file Bare Workflow: - Let’s us have full control over everything - Updating can be a pain - Like RN project without Expo
Editor's Notes
- Platform - decide whether you wanna target ios, android, or both Cost - consider cost, e.g developing for ios requires a Mac, android has rules for devices testing Speed - how quickl you need to develop app UX - do you want some platform-specific feel, or a cross-platform look and feel Performance - native apps have an edge but crossplatform is ever improving Access to Native APIs - do you wanna use core apis like camera, gps, gyroscope Community - size and activeness of developer community Learning curve - for a team are yall already familiar with a particular technology Budget - native may require separate dev teams Complexity - how complex is the app gonna be Deployment and distribution - understand deployment flow for ios and android Integrations - how it integrates with 3rd party e.g firebas, aws, stripe etc
- But using React Native, we can write React and JavaScript that renders to each platform using the same code base. This is very similar to a mobile browser, which lets you run React DOM code on multiple different platforms, which is by design. In the old days we’d have three separate teams working in silos - obviously that is less efficient than having one team It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.
- React is very intuitive for building and scaling large front-end applications. instead of drawing our views to Skia, like we would in Chrome, React Native uses proper native views This means that we can use platform optimizations like smooth scrolling, gestures, and complex animations, which is known to be a weak point in mobile browsers. We can create custom native clients that expose extra native functionality to our app. Think of this like building a browser, but with Bluetooth support added to it. And we can reuse the majority of our application code across multiple different platforms. We have the potential to scale our app to support more platforms in the future. And finally, we can utilize multiple different threads. By default, everything runs in a JavaScript thread, minimizing the amount of business logic that runs on the main UI thread. This is a pretty advanced architecture which you just get for free by simply using React Native. So this is pretty awesome.
- Now, React Native, of course, is not without its issues, ranging from mildly annoying to highly annoying. So let's talk about some of them. First is that in order to get a Hello World app running, just Hello World, we need to create a native runtime. This differs from web development where the native runtime is already built ahead of time and downloaded on your computer. That would be Chrome or Safari, the web browsers. And they can just load your JavaScript project inside of them. Second is that dependencies in React Native are much harder to manage than in web development. In React Native, you need to install the native code via NPM, whereas in web development, the native code is already built ahead of time into the browser. And the APIs and native code are designed by W3C, so they're very well thought out and just well constructed. Third is that your app's runtime must be distributed to the App Store or Google Play Store, with a few exceptions for testing of course. This means that you must perform code signing for your application, which is complicated and prone to errors. Finally, upgrading your React Native application is quite painful. You need some familiarity with both iOS and Android native development in order to do it, and upgrades happen pretty frequently
- Expo provides many tools that web developers have come to expect
- You can build your app locally with expo CLI or remotely with EAS CLI. To build your app locally you need native dev tools installed that is xcode and android studio As you can see, the development cycle is pretty fast and really enjoyable. Unlike React DOM development, React Native uses primitives. So instead of div, you'll use something like view. Instead of image, you'll use image. And instead of span, you'll use text. Each one of these elements then draws to the correct native view for each platform. So on iOS, a view would render to a UI view, and on web, a view would render to a div, and so on and so forth. And finally, these primitives render out to something which generally looks the same across all platforms. React Native only provides a handful of core primitives. The majority of complex features come from community packages.
- And this is probably the closest thing that React Native has to a W3C-type spec at the moment.
- This is useful because native builds require a lot of local resources, which are hard to validate and just get set up correctly. And we've also found that a lot of developers just don't have macOS machines, which is required for building on iOS apps.
- So now that we've talked about deployment, let's talk a little bit about native code. Up until this point, we've only covered the React code and haven't had to interact with any custom native modules, but eventually you may find that you need some custom code or third-party library that isn't available in Expo Go or the Expo SDK. Now for this, we can easily create a custom development client, which is like Expo Go, but with a special set of native features. The development client sits between the OS and the React app. So kind of think of it like a web browser, but special and native.