The document outlines a journey of implementing 'write once' multi-client code sharing using ReactJS, starting from early 2014. It discusses the challenges and benefits of code sharing, including efficiency, design consistency, and dependency management through structured steps of component separation and sharing across various platforms. Ultimately, it highlights the practicality of creating unified UI components for both web and native applications.

1. “WRITE ONCE”
Multi-Client Code Sharing in ReactJS

2. IN THE BEGINNING…
Early 2014, choosing a client-side tech for new project
• jQuery + sweat?
• Backbone + handlebars + etc?
• Angular?
• Ember?
… how to choose … ?

3. THE INEXORABLE MARCH OF TECH
new, shiny
bleeding edge
mature & stable
graveyard
of debt
cliff of fail

4. WE TRIED REACT
~0.9

5. IS AWESOME
How do we get this paradigm going everywhere??

6. WHY SHARE CODE?
Constraints:
• time
• build
• research, choosing tools
• team
• cognitive overhead
Benefits:
• efficiency of time/team
• design & interaction consistency
across clients

7. THE JOURNEY

8. STEP 1: SEPARATING CONCERNS
Client-side Application [web & responsive]
├─┬─ UI component repo
│ ├─── interaction component #1
│ ├─── interaction component #2
│ └─── interaction component #3
├─┬─ our API library
│ ├─── HTTP API
│ └─── WSS API
└─── other dependencies

9. STEP 2: SHARE UI COMPONENTS
UI components
Client app Rails
[client][webpack]

10. STEP 2: SHARE UI COMPONENTS
UI components
Client app Rails
Gem
[server + client][webpack]

11. STEP 3: SHARE UI MORE
UI components
Client app Rails Native
[webview]
Gem

12. UI components
Desktop
STEP 4: SHARE UI EVEN MORE
Client app Rails Native
[webview]
Gem

13. UI components
Rails
Native
[react]
STEP 5: SHARE UI MORE BETTERER
Client app
Gem
DesktopiOS android

14. NATIVE COMPONENTS
MyComponent.ios.js
MyComponent.android.js

15. SHARING WEB + NATIVE
• Content apps, not rich interaction or device access:
• yes: facebook, instagram, gmail, meetup, linkedin, simple games
• no: snapchat, 1st-person shooters/runners
• JS object inline styles, not css
• Some context detection at the component level

16. WEB + NATIVE COMPONENTS
const el = Platform.OS === 'web'
? React.DOM.div
: React.View
...
render() {
return el({},'content')
}

17. UI components
Rails
Native
[react]
STEP 5: SHARE UI MORE BETTERER
Client app
Gem
DesktopiOS android

18. “LEARN A LOT, WRITE A LOT”
#codinglife