From React to React Native - Things I wish I knew when I started

From React to
React Native
Things I wish I knew when I started
23/11/2021

IMAGE GOES OVER HERE
Edoardo Dusi
@edodusi
Lead developer @ SparkFabrik

Things I wish I knew when I started

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

“It’s exactly the same as the website”

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

Best slide ever
<div> -> <View>
<span> -> <Text>
<input type=”text”> -> <InputText>
<button> -> <Button>
<img> - > <Image>

Oh that’s a quote, tech talks must have one
“Native environment is more hostile”
React.js Conf 2015 Keynote

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

What’s a Mobile Application?

Single line, clearer
A signed bundle of binaries, assets and metadata

.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

.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

How can JavaScript code become a native app?

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

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

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

Chrome V8
(in debug mode)
Definitions! (again)
● JavaScript engine for Chrome
● Communicates with RN via WebSockets
● Written in C++
● 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

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

Android
I wanna use Hermes!
iOS
android/app/build.gradle ios/Podfile
Hermes is opt-in

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

Ok, how about that native UI components?

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

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

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

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

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

Speaking of native languages...

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

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

Swift
Ok maybe swift is a little cleaner
Objective-C

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

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

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

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

How’s the local development compared to the web stack?

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

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

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

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

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

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

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

Last one, I promise
https://github.com/sparkfabrik/android-build-action/blob/master/fastlane/Fastfile

Please stop
“Learn once, write anywhere.”
https://reactnative.dev

THANK YOU!
Edoardo Dusi
@edodusi

From React to React Native - Things I wish I knew when I started

Related slideshows

More Related Content

From React to React Native - Things I wish I knew when I started