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 87

Slide 87 text

THAT'S IT Matheus Albuquerque @ythecombinator [email protected]

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