Slide 1
Slide 1 text
CODE SHARING AT SCALE:
ONE CODEBASE FOR WEB, MOBILE AND DESKTOP
Matheus Albuquerque, Front-End Engineer at STRV
Slide 2
Slide 2 text
Dobrý den!
2
Slide 3
Slide 3 text
3
ed
Slide 4
Slide 4 text
CONTEXT
4
Slide 5
Slide 5 text
CONTEXT • HOW IT ALL STARTED
5
Slide 6
Slide 6 text
CONTEXT • HOW IT ALL STARTED
6
Slide 7
Slide 7 text
CONTEXT • WHY
● Velocity
● No platform specialization
7
Slide 8
Slide 8 text
CONTEXT • WHY • VELOCITY
Often fewer short-term gains due to overhead in writing glue code
Have to rearchitect existing JavaScript code
Tooling is difficult (CI, unit tests etc.)
Write code once
Possibly long-term gains
8
Slide 9
Slide 9 text
CONTEXT • WHY • NO PLATFORM SPECIALIZATION
An engineer should be able to write mobile code for the product without differentiating
between Android and iOS
Low occurrence of OS-specific problems
9
Slide 10
Slide 10 text
CONTEXT • CONCERNS
● What if I need to implement a specific component separately for Web and Native?
● How to use React Native-specific libraries?
● What about navigation?
● How to handle different storage layers?
● What not to share?
10
Slide 11
Slide 11 text
CONTEXT • TYPES OF CODE
11
UI Render Business Logic
Configuration API / Formatting
Slide 12
Slide 12 text
CONTEXT • TYPES OF CODE
12
UI Render Business Logic
Configuration API / Formatting
Slide 13
Slide 13 text
CONTEXT • TYPES OF CODE • DIFFERENT RENDER ENVIRONMENTS
13
UI Render
!==
-
!==
!==
Slide 14
Slide 14 text
CONTEXT • SOLUTIONS
14
Flutter
NativeScript
Ionic
Slide 15
Slide 15 text
React Native Web
● Developed by Nicolas Gallagher
(Facebook)
● Parallel implementation of React Native
● Web Equivalents of RN components
● Used by Twitter, Major League Soccer,
Uber, Flipkart, The Times
15
ReactXP
● Developed by the Skype Team
(Microsoft)
● Abstraction layer over React-DOM and
React Native
● Wrappers over Web/Native components
● Used by Skype
CONTEXT • SOLUTIONS • ADDING WEB TO THE EQUATION
Slide 16
Slide 16 text
CONTEXT • SOLUTIONS
16
React Native Web
ReactXP
Flutter
NativeScript
Ionic
Slide 17
Slide 17 text
17
Flutter
NativeScript
Ionic
We’re going to mention a couple things.
CONTEXT • SOLUTIONS
React Native Web
ReactXP
Slide 18
Slide 18 text
18
Flutter
NativeScript
Ionic
We’re going to focus on this one.
CONTEXT • SOLUTIONS
React Native Web
ReactXP
Slide 19
Slide 19 text
19
CONTEXT • SOLUTIONS • DISCLAIMER
Slide 20
Slide 20 text
● I enjoy having control over the stack and being aware of what's happening. I want to:
● Customize the installation
● Install custom version of modules
● Have more control of project dependencies
● Use own CI/CD implementation
● Use our own React Native modules
● We can only use their SDK and packages that don’t require linking
● Size (might) matter
● Permissions eventually being needed despite the fact the app never needs them
20
CONTEXT • SOLUTIONS • DISCLAIMER
Slide 21
Slide 21 text
CONTEXT • SOLUTIONS • DISCLAIMER
21
Slide 22
Slide 22 text
CONTEXT • SOLUTIONS • DISCLAIMER
22
https://youtu.be/k1FdrhA2sCY
Slide 23
Slide 23 text
ARCHITECTURE
23
Slide 24
Slide 24 text
ARCHITECTURE • BOOTSTRAPPING
24
Slide 25
Slide 25 text
ARCHITECTURE • BOOTSTRAPPING
25
https://github.com/brunolemos/react-native-web-monorepo
Slide 26
Slide 26 text
ARCHITECTURE
|-- packages/
| |-- mobile/
| |-- shared/
| |-- web/
|-- patches/
| |-- react-native-google-signin+2.0.0.patch
| |-- ...
|-- .eslintrc.js
|-- .gitignore
|-- .prettierrc.js
|-- .stylelintrc
|-- README.md
|-- commitlint.config.js
|-- package.json
|-- tsconfig.base.json
|-- tsconfig.json
|-- yarn.lock
26
Slide 27
Slide 27 text
ARCHITECTURE
|-- packages/
| |-- mobile/
| |-- shared/
| |-- web/
|-- patches/
| |-- react-native-google-signin+2.0.0.patch
| |-- ...
|-- .eslintrc.js
|-- .gitignore
|-- .prettierrc.js
|-- .stylelintrc
|-- README.md
|-- commitlint.config.js
|-- package.json
|-- tsconfig.base.json
|-- tsconfig.json
|-- yarn.lock
27
Each platform code + shared business logic
Slide 28
Slide 28 text
ARCHITECTURE
|-- packages/
| |-- mobile/
| |-- shared/
| |-- web/
|-- patches/
| |-- react-native-google-signin+2.0.0.patch
| |-- ...
|-- .eslintrc.js
|-- .gitignore
|-- .prettierrc.js
|-- .stylelintrc
|-- README.md
|-- commitlint.config.js
|-- package.json
|-- tsconfig.base.json
|-- tsconfig.json
|-- yarn.lock
28
Native library patches
Slide 29
Slide 29 text
ARCHITECTURE
|-- packages/
| |-- mobile/
| |-- shared/
| |-- web/
|-- patches/
| |-- react-native-google-signin+2.0.0.patch
| |-- ...
|-- .eslintrc.js
|-- .gitignore
|-- .prettierrc.js
|-- .stylelintrc
|-- README.md
|-- commitlint.config.js
|-- package.json
|-- tsconfig.base.json
|-- tsconfig.json
|-- yarn.lock
29
Dotfiles and other project-wide stuff
Slide 30
Slide 30 text
ARCHITECTURE
|-- packages/
| |-- mobile/
| |-- shared/
| |-- web/
|-- patches/
| |-- react-native-google-signin+2.0.0.patch
| |-- ...
|-- .eslintrc.js
|-- .gitignore
|-- .prettierrc.js
|-- .stylelintrc
|-- README.md
|-- commitlint.config.js
|-- package.json
|-- tsconfig.base.json
|-- tsconfig.json
|-- yarn.lock
30
Shared config which can be extended
Slide 31
Slide 31 text
ARCHITECTURE • MOBILE
31
Slide 32
Slide 32 text
ARCHITECTURE • MOBILE
32
Regular React Native app structure.
Slide 33
Slide 33 text
ARCHITECTURE • WEB
33
Slide 34
Slide 34 text
ARCHITECTURE • WEB
34
Regular Create React App structure.
Slide 35
Slide 35 text
ARCHITECTURE • SHARED
35
Slide 36
Slide 36 text
ARCHITECTURE • SHARED
36
Inside src…
Slide 37
Slide 37 text
ARCHITECTURE • SHARED
37
Slide 38
Slide 38 text
ARCHITECTURE • SHARED • TYPES OF CODE
38
UI Render
Configuration API / Formatting
Business Logic
Slide 39
Slide 39 text
ARCHITECTURE • SHARED • TYPES OF CODE
39
UI Render Business Logic
Configuration API / Formatting
Slide 40
Slide 40 text
ARCHITECTURE • SHARED • TYPES OF CODE
40
Business Logic
Environment independent
If a user can only add 20 items to
their basket, this rule will hold true
in web and native equally
Slide 41
Slide 41 text
ARCHITECTURE • SHARED • TYPES OF CODE
41
Configuration
Config files, translation files and
most constant data are not render
environment specific
If I update a translation on my app,
it’s very likely I want that change
rolled out on the web app too
Slide 42
Slide 42 text
ARCHITECTURE • SHARED • TYPES OF CODE
42
Configuration
Shared config object
Web Config Object
Native Config Object
Slide 43
Slide 43 text
ARCHITECTURE • SHARED • TYPES OF CODE
43
Configuration
Shared config object
Web Config Object
Native Config Object
{
...sharedConfig,
mobileSpecificConfig:
'...',
}
Slide 44
Slide 44 text
ARCHITECTURE • SHARED • TYPES OF CODE
44
API / Formatting
API calls, authentication and
formatting of request and response
data
If we make a POST to a REST API on
web, it’s very likely to be the same
POST on native
Slide 45
Slide 45 text
ARCHITECTURE • 90%+ CODE SHARING™
45
Slide 46
Slide 46 text
ARCHITECTURE • PLATFORM-SPECIFIC MODULES
46
Slide 47
Slide 47 text
TOOLS
47
Slide 48
Slide 48 text
TOOLS
● React Navigation V3 as a universal routing strategy
● patch-package to keep me safe and sound from Xcode
● Yarn Workspaces to enable our monorepo strategy
48
Slide 49
Slide 49 text
TOOLS • REACT NAVIGATION V3
● @reach/router has no React Native support
● react-router-native lacks screen transitions, back-button support, modals, navbars and
other important stuff
● Started by making a few crazy combinations:
● react-router-dom + react-router-native
● react-router-dom + react-navigation
● …
● Currently using React Navigation on the Web
● This has not yet been widely used in production and it is considered to be experimental
49
Slide 50
Slide 50 text
TOOLS • PATCH-PACKAGE
50
Slide 51
Slide 51 text
TOOLS • PATCH-PACKAGE
51
● patch-package lets app authors instantly make and keep fixes to npm dependencies
● My case:
● Had to change a few files on the library’s iOS code (XCode stuff)
● It was not worthy to submit a PR on the library, tho (the problem was literally on
our machines™)
● Having each member of the team changing the same stuff is simply out of
consideration
● Seems to be an accepted pattern on React Native community
Slide 52
Slide 52 text
TOOLS • YARN WORKSPACES
● Let you organize your project codebase using a monolithic repository
● React is a good example of an open-source project that is monorepo. Also, React uses
Yarn workspaces to achieve that
● nohoist FTW
● Currently: mobile, web and shared packages
● Future plans: desktop (electron?) and back-end (maybe)
52
Slide 53
Slide 53 text
CHALLENGES
53
Slide 54
Slide 54 text
CHALLENGES
● Lack of real-world-scenarios content related to React Native Web on the web (e.g.
navigation)
● (unexpected) Lack of documented stuff on popular projects (e.g. Webpack and Metro)
● react-native-web supports most of the react-native API, but a few pieces are missing
54
Slide 55
Slide 55 text
CHALLENGES • LACK OF REAL-WORLD-SCENARIOS CONTENT
55
Slide 56
Slide 56 text
CHALLENGES • LACK OF DOCUMENTED STUFF
56
Slide 57
Slide 57 text
CHALLENGES • LACK OF DOCUMENTED STUFF
57
Slide 58
Slide 58 text
CHALLENGES • UNSUPPORTED APIs
react-native-web supports most of the react-native API, but a few pieces are missing like
● Alert
● Modal
● RefreshControl
● WebView
58
Slide 59
Slide 59 text
TIPS
59
Slide 60
Slide 60 text
TIPS
● Navigation may be a bit of a challenge; you can use something like react-navigation
which recently added web support or you can try using two different navigators
between and mobile, in case you want the best of both worlds by compromising some
code sharing
● To install new dependencies, use the command yarn workspace add
from the root directory
● To run a script from a package, run yarn workspace start, for
example
● To run a script from all packages, run yarn workspaces run
60
Slide 61
Slide 61 text
TIPS
● If you plan sharing code with the server, I recommend creating a core package that only
contain logic and helper functions (no UI-related code);
● For Next.js, you can check their official example with react-native-web
● For native windows, you can try react-native-windows;
● For native macOS, you can the new Apple Project Catalyst, but support for it is not 100%
there yet
61
Slide 62
Slide 62 text
TL;DR
62
Slide 63
Slide 63 text
63
TL;DR
Slide 64
Slide 64 text
64
TL;DR
Slide 65
Slide 65 text
TL;DR • LESSONS LEARNT
● Code sharing is a great advantage of React and React Native
● Share your non-design render code
● Your mobile app and web app (probably) should have different experiences
● HOCs / hooks help sharing component logic
65
Slide 66
Slide 66 text
TL;DR • LESSONS LEARNT
"Web, mobile web and native application
environments all require a specific design
and user experience."
- Matheus
66
Slide 67
Slide 67 text
TL;DR • LESSONS LEARNT
67
Slide 68
Slide 68 text
TL;DR • LESSONS LEARNT
68
It’s worth noting that we’re not chasing “write once, run anywhere.” Different platforms have
different looks, feels, and capabilities, and as such, we should still be developing discrete
apps for each platform, but the same set of engineers should be able to build
applications for whatever platform they choose, without needing to learn a fundamentally
different set of technologies for each. We call this approach “learn once, write anywhere.”
Slide 69
Slide 69 text
TL;DR • THE FUTURE
69
Slide 70
Slide 70 text
TL;DR • THE FUTURE
70
Simple Stuff Complex Stuff
Slide 71
Slide 71 text
TL;DR • THE FUTURE
71
Simple Stuff
• A couple API calls / data fetching
• Not too complex lifecycle
• Simple Navigation/Routing
Slide 72
Slide 72 text
TL;DR • THE FUTURE
72
Simple Stuff Complex Stuff
Slide 73
Slide 73 text
TL;DR • THE FUTURE
73
Simple Stuff Complex Stuff
Slide 74
Slide 74 text
TL;DR • THE FUTURE • IONIC (CAPACITOR)
74
● Wraps the web app in a WebView
● It injects a “bridge” into the app running in the webview, that connects the code of the
web app and the code of the native part so these can interact
● For Progressive Web Apps Capacitor provides fallback implementations to native
functionality not present
● Capacitor achieves true cross-platform and portable functionality with 100% code
sharing by providing a consistent API
● Backward compatible* with Cordova
Slide 75
Slide 75 text
TL;DR • THE FUTURE • IONIC (CAPACITOR)
75
● Native Progressive Web Apps built with Capacitor can be used on all the relevant
platforms:
● iOS
● Android
● Browsers (Progressive Web Apps)
● Windows, macOS, Linux (via Electron)
Slide 76
Slide 76 text
TL;DR • THE FUTURE • IONIC (CAPACITOR)
76
Accessibility App Background Task Browser Camera
Clipboard Console Device Filesystem
Geolocation Haptics Keyboard Local Notifications
Modals Motion Network Push Notifications
Share Splash Screen Status Bar Storage Toast
Slide 77
Slide 77 text
TL;DR • THE FUTURE • IONIC (CAPACITOR)
77
Accessibility App Background Task Browser Camera
Clipboard Console Device Filesystem
Geolocation Haptics Keyboard Local Notifications
Modals Motion Network Push Notifications
Share Splash Screen Status Bar Storage Toast
+ Community Plugins
Slide 78
Slide 78 text
TL;DR • THE FUTURE • IONIC (CAPACITOR)
78
Slide 79
Slide 79 text
TL;DR • THE FUTURE
79
Simple Stuff Complex Stuff
Slide 80
Slide 80 text
TL;DR • THE FUTURE
80
Complex Stuff
• Aggressive animations
• CPU-bound stuff
Slide 81
Slide 81 text
TL;DR • THE FUTURE
81
Simple Stuff Complex Stuff
Slide 82
Slide 82 text
TL;DR • THE FUTURE
82
Simple Stuff Complex Stuff
Slide 83
Slide 83 text
TL;DR • THE FUTURE • FLUTTER (SKIA)
83
● Fast startup and execution of an app are the benefits of compilation to native code
● The UI is refreshed at 60fps – mostly using the GPU – and every pixel on the screen is
owned by the Skia canvas which leads to a smooth, highly customizable UI
● The same hardware-accelerated graphics engine that underpins Chrome and Android
Slide 84
Slide 84 text
TL;DR • THE FUTURE • FLUTTER (SKIA)
84
Slide 85
Slide 85 text
TL;DR • THE FUTURE • FLUTTER (SKIA)
85
https://link.medium.com/gtLw3LfTL1
Slide 86
Slide 86 text
86
⚠ ❌ ❌ ⚠
TL;DR
Slide 88
Slide 88 text
88
MATHEUS
ALBUQUERQUE
@ythecombinator
www.ythecombinator.space
[email protected]
Slide 89
Slide 89 text
THAT’S IT • SLIDES
89
Slide 90
Slide 90 text
THAT’S IT • SLIDES
90
http://bit.ly/code-sharing-lessons-learned
Slide 91
Slide 91 text
THAT’S IT • SLIDES
91
Slide 92
Slide 92 text
THAT’S IT • SLIDES
92
I got stickers!
Slide 93
Slide 93 text
QUESTIONS
Slide 94
Slide 94 text
No content