INTRO Why RN Welcome to the Mobile world The app bundle UI COMPONENTS/NAVIGATION Android Jetpack iOS UIKit React Navigation THE JAVASCRIPT ENGINE JavaScriptCore Chrome V8 Hermes THE LOCAL DEVELOPMENT Metro Flipper Gradle CocoaPods Fastlane

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

21. Again
https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8

22. The JavaScript Engine

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

36. Kotlin
Classic
Java

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

49. https://fbflipper.com/docs/features/plugins/network

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

53. Continuous Integration

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

58. THANK YOU!
Edoardo Dusi
@edodusi