From React to React Native - Things I wish I knew when I started
Download as PPTX, PDF0 likes183 views
The document is a comprehensive guide on transitioning from React to React Native, detailing key aspects such as mobile application fundamentals, JavaScript engines, native UI components, and navigation principles. It covers tools for local development, CI/CD practices like Fastlane, and offers insights into platform-specific frameworks like Android Jetpack and iOS UIKit. Additionally, it emphasizes the advantages of React Native's ability to create cross-platform applications while leveraging native capabilities.
From React to React Native - Things I wish I knew when I started
- 1. From React to React Native Things I wish I knew when I started 23/11/2021
- 2. IMAGE GOES OVER HERE Edoardo Dusi @edodusi Lead developer @ SparkFabrik
- 4. Things I wish I knew when I started
- 5. TOC (as suggested by kelset) INTRO Why RN Welcome to the Mobile world The app bundle UI COMPONENTS/NAVIGATION Android Jetpack iOS UIKit React Navigation THE LOCAL DEVELOPMENT Metro Flipper Gradle CocoaPods Fastlane THE JAVASCRIPT ENGINE JavaScriptCore Chrome V8 Hermes
- 6. How did I start?
- 8. “It’s exactly the same as the website”
- 10. Why React Native was born ● The company once called Facebook decided to go mobile first ● Tried with WebViews and HTML5 but failed ● Lack of keyboard API, gestures events and image management ● Coding is imperative “Native environment is much more powerful than the web” ● Ability to parallelize work ● Sophisticated gesture handling ● Access to native capabilities I’m just a useless section title
- 11. Best slide ever <div> -> <View> <span> -> <Text> <input type=”text”> -> <InputText> <button> -> <Button> <img> - > <Image>
- 12. Oh that’s a quote, tech talks must have one “Native environment is more hostile” React.js Conf 2015 Keynote
- 13. Welcome to the Mobile World Another list, how creative ● Different instructions for dealing with different platforms (SDKs) ● Memory management ● Thread concurrency ● Laying out subviews ● Provisioning profiles ● Deploying applications
- 14. What’s a Mobile Application?
- 15. Single line, clearer A signed bundle of binaries, assets and metadata
- 16. .apk (Android Package) A comparison, ok .ipa (iOS App Store Package) /META-INF res AndroidManifest.xml classes.dex resources.arsc /Payload /Payload/Application.app /iTunesArtwork /iTunesArtwork@2x /iTunesMetadata.plist /WatchKitSupport/WK /META-INF
- 17. .aab (Android App Bundle) Centered ● Contents of an Android app project ● Additional metadata that is not required at runtime ● Publishing format, not installable ● Defers APK generation and signing to a later stage ● Google Play generates optimized APKs that contain only the resources and code required by a device
- 18. How can JavaScript code become a native app?
- 19. Stolen content “They probably create an AST from the JS code and transform it to make it run on multiple devices.” https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8
- 23. JavaScriptCore (JSC) Definitions! ● JavaScript engine for WebKit ● Currently powers Safari ● “Recommended” choice by Apple (RN was first developed on iOS) ● Based on KJS, JavaScript engine of KHTML, both part of the KDE project ● Written in C++ ● Currently implements ECMAScript 2021
- 24. Chrome V8 (in debug mode) Definitions! (again) ● JavaScript engine for Chrome ● Communicates with RN via WebSockets ● Written in C++ ● Currently implements ECMAScript 2021 ● Very similar to JavaScriptCore but there are some differences ● There’s a project to support V8 as runtime environment in RN: https://github.com/Kudo/react-native-v8
- 25. Hermes Definitions! (last one) ● JavaScript engine optimized for RN (from 0.60.4) ● Written in C++ ● Improved start-up time ● Decreased memory usage ● Smaller app size ● Implements the Chrome inspector protocol ● Currently implements ECMAScript 2020
- 26. Android I wanna use Hermes! iOS android/app/build.gradle ios/Podfile Hermes is opt-in
- 27. Great news! “Looking forward … we can make Hermes the default JavaScript engine for React Native across all platforms.” https://reactnative.dev/blog/2021/10/26/toward-hermes-being-the-default
- 28. Ok, how about that native UI components?
- 29. It’s the official docs “At runtime, React Native creates the corresponding Android and iOS views for React components” https://reactnative.dev/docs/intro-react-native-components
- 30. It’s the official docs! “React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput” https://reactnative.dev/docs/native-components-android
- 31. Android Jetpack So this is Android ● A suite of libraries (Foundation, Architecture, Behaviour and UI) ● Uses the AndroidX namespace ● Default since RN 0.60 ● The jetifier tool is run before every Android build to ensure compatibility
- 32. Material Design Components So this is Android ● MDC replaced the Design Support Library ● com.google.android.material namespace ● Material Theming: customize styles to better reflect a brand ● A library of components ● Support gesture navigation
- 33. iOS UIKit Hey that’s the Swift logo ● The Apple user interface framework for iOS and tvOS apps ● Window and view architecture ● Event handling infrastructure for Multi- Touch and other types of input ● The structure of UIKit apps is based on the Model-View-Controller (MVC) design pattern
- 34. Speaking of native languages...
- 35. Android ● The core language in Android SDK is Java ● There’s an NDK for compiling C and C++ libraries and link them in Java ● Kotlin developed by JetBrains and now Apache 2 OSS ● 100% interoperable with the Java programming language and JVM ● Statically typed and more concise vs Java ● Compiling a bit slower than Java ● Kotlin/Native currently in the works, support for other platforms such as embedded systems, macOS and iOS is coming More coffee please
- 37. iOS ● On iOS Objective-C was the reference language ● Developed as an object-oriented extension to the C language ● Popularized through NeXT and OpenStep, which became base API for graphic libraries on macOS (later Cocoa) ● Swift presented at WWDC 2014 as the new language for iOS ● Simpler and modern syntax, more attractive for devs ● Better performances than Obj-C I love obj-c
- 38. Swift Ok maybe swift is a little cleaner Objective-C
- 39. And what about the navigation
- 40. Principles of navigation (Android) I’m starting to fear there are too many slides ● Fixed start destination ● Navigation state is represented as a stack of destinations ● Up and Back are identical within your app's task ● The Up button never exits your app ● Deep linking simulates manual navigation https://developer.android.com/guide/navigation/navigation-principles
- 41. Principles of navigation (iOS) D too many slides ● Always provide a clear path ● Use touch gestures to create fluidity ● Use standard navigation components ● Use a navigation bar to traverse a hierarchy of data ● Use a tab bar to present peer categories of content or functionality ● Use a page control when you have multiple pages of the same type of content https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation
- 42. React Navigation The one I use ● Handles presentation of, and transition between, multiple screens ● Similar to a web browser: app pushes and pops items from the navigation stack, and this results in seeing different screens ● Provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack https://reactnavigation.org
- 44. Stolen from the Android docs
- 45. React Freeze Brrr ● Allows for freezing renders of the parts of the React component tree using Suspense mechanism introduced in React 17 ● Avoid unnecessary re-renders for parts of the app that are not visible to the user ● State changes are executed as usual, just won't trigger a render until the component comes back from the frozen state https://github.com/software-mansion-labs/react-freeze
- 46. How’s the local development compared to the web stack?
- 47. Metro The local development ● Metro is a JavaScript bundler ● It takes an entry file and various deps, and gives you back a single JavaScript file ● Converts assets (e.g. PNG files) into objects that can be displayed by an Image component ● Metro server is also used by Expo https://facebook.github.io/metro
- 48. Flipper High score ● Open-source, developed by Facebook ● A platform for debugging iOS, Android and React Native apps ● Visualize, inspect, and control your apps from a desktop interface ● Extendable: core plugins, community plugins and you can create yours ● Connects to physical iOS devices via idb https://fbflipper.com/docs/features/react-native
- 50. Gradle Approaching the end ● Open-source build automation tool ● Runs on the JVM and you must have a Java Development Kit (JDK) installed ● IDEs supporting Gradle builds: Android Studio, IntelliJ IDEA, Eclipse, NetBeans ● Dependency management currently only supports Maven- and Ivy-compatible repositories ● The core model is based on tasks https://docs.gradle.org
- 51. Still Gradle ● Gradle can resolve dependencies from one or many repositories ● Maven Central is a popular repository hosting open source libraries ● The Google repository hosts Android- specific artifacts including the Android SDK https://docs.gradle.org/current/userguide/declaring_repositories.html
- 52. CocoaPods The iOS world ● Dependency manager for Obj-C and Swift, built with Ruby ● Cocoa is Apple's native object-oriented application programming interface (API) ● Dependencies described in Podfile ● XCode required for building https://cocoapods.org
- 54. Fastlane Last one? ● Open-source tool for automating iOS or Android mobile app builds and releases ● Ruby configuration file called Fastfile, you can add lanes to serve different purposes ● Integrates into existing CI services ● Spark GitHub Actions! https://github.com/marketplace/actions/build-ios-action https://github.com/marketplace/actions/build-android-app https://fastlane.tools
- 55. Last one, I promise https://github.com/sparkfabrik/android-build-action/blob/master/fastlane/Fastfile
- 57. Please stop “Learn once, write anywhere.” https://reactnative.dev