Making the switch from web to mobile development

Think your React skills are enough for mobile? Learn the paradigm shifts from browser deployment to native tooling, offline-first design, and the app store.

#1about 3 minutes

Comparing web, native, and cross-platform mobile development

Native development requires separate codebases for iOS and Android, while React Native allows a single JavaScript codebase for both platforms.

#2about 3 minutes

Setting up the mobile development environment

Mobile development requires Xcode and Android Studio, and testing on real devices is crucial because simulators can be misleading.

#3about 4 minutes

Using React Native components instead of HTML

React Native replaces HTML tags like `div` and `p` with core components such as `View` and `Text` that compile to native UI elements.

#4about 2 minutes

Styling applications with JavaScript and Flexbox

Styling in React Native uses JavaScript objects via StyleSheets instead of CSS, with Flexbox defaulting to a column direction.

#5about 3 minutes

Creating animations for a native user experience

React Native provides two systems, the Animated API and LayoutAnimation, to create fluid animations that meet user expectations on mobile.

#6about 2 minutes

Managing navigation with screens instead of URLs

Mobile navigation uses a stack-based system with screens, unlike web's URL-based routing, managed by libraries like React Navigation.

#7about 2 minutes

Writing platform-specific code for iOS and Android

Use the Platform module for small inline differences or platform-specific file extensions like `.ios.js` for larger component variations.

#8about 2 minutes

Handling app state and native device features

Mobile apps must manage their state (foreground, background, inactive) using AppState and handle permissions for native features like the camera.

#9about 3 minutes

Designing for offline and slow network conditions

Build robust mobile apps by handling offline states and slow connections with cached data and retries, using tools like the NetInfo package.

#10about 2 minutes

Sharing code between web and mobile applications

Use tools like React Native Web or a monorepo with Yarn Workspaces and Lerna to share business logic across web and mobile platforms.

#11about 3 minutes

Testing and debugging your React Native application

Use Jest and React Native Testing Library for testing, and leverage Flipper for powerful debugging of network requests, layouts, and logs.

#12about 2 minutes

Deploying your application to the app stores

The deployment process involves building native binaries, submitting them to the App Store and Google Play, and navigating the review process.

#13about 10 minutes

Q&A: Learning curve, deployment, and team workflows

The speaker answers questions about the learning curve for React developers, identifies deployment as the biggest challenge, and discusses team processes.

From learning to earning

Jobs that call for the skills explored in this talk.