![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](https://image.slidesharecdn.com/writingonce-160422162721/85/Writing-Once-Multi-client-code-sharing-in-ReactJS-8-320.jpg)
![STEP 2: SHARE UI COMPONENTS
UI components
Client app Rails
[client][webpack]](https://image.slidesharecdn.com/writingonce-160422162721/85/Writing-Once-Multi-client-code-sharing-in-ReactJS-9-320.jpg)
![STEP 2: SHARE UI COMPONENTS
UI components
Client app Rails
Gem
[server + client][webpack]](https://image.slidesharecdn.com/writingonce-160422162721/85/Writing-Once-Multi-client-code-sharing-in-ReactJS-10-320.jpg)
![STEP 3: SHARE UI MORE
UI components
Client app Rails Native
[webview]
Gem](https://image.slidesharecdn.com/writingonce-160422162721/85/Writing-Once-Multi-client-code-sharing-in-ReactJS-11-320.jpg)
![UI components
Desktop
STEP 4: SHARE UI EVEN MORE
Client app Rails Native
[webview]
Gem](https://image.slidesharecdn.com/writingonce-160422162721/85/Writing-Once-Multi-client-code-sharing-in-ReactJS-12-320.jpg)
![UI components
Rails
Native
[react]
STEP 5: SHARE UI MORE BETTERER
Client app
Gem
DesktopiOS android](https://image.slidesharecdn.com/writingonce-160422162721/85/Writing-Once-Multi-client-code-sharing-in-ReactJS-13-320.jpg)
![UI components
Rails
Native
[react]
STEP 5: SHARE UI MORE BETTERER
Client app
Gem
DesktopiOS android](https://image.slidesharecdn.com/writingonce-160422162721/85/Writing-Once-Multi-client-code-sharing-in-ReactJS-17-320.jpg)
Writing Once: Multi-client code sharing in ReactJS
- 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
- 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
- 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