Facebook's iOS Architecture
- @Scale 2014 - Mobile
https://www.youtube.com/watch?v=mLSeEoC6GjU
Slide 3
Slide 3 text
Facebook's iOS Architecture
- @Scale 2014 - Mobile
Immutable model
Uni-direction data flow
Component
Declarative
Flexbox!
UIStackView
Slide 4
Slide 4 text
React.js
Virtual DOM
Construct DOM by Javascript
Component
Just the “View”
CSS in JS
https://speakerdeck.com/vjeux/react-css-in-js
Slide 5
Slide 5 text
Flux
Slide 6
Slide 6 text
Flux
In React
• State v.s. property
• Component
property Inheritance
Slide 7
Slide 7 text
Flux
Facebook provides only as a design pattern, no
implementations.
Fluxxor, Marty.js, Reflux, Flummox, Alt, Redux
Slide 8
Slide 8 text
Isomorphic Web
Backend / Frontend to share the same code base
To solve the SEO issue for SPA
Slide 9
Slide 9 text
React Native
Facebook story: HTML 5 -> Native
React Native is to use Javascript to write Native app
Learn once, write anywhere
Like Titanium, but even more
Hot reload
Debugging on Chrome (Run JS in outer Chrome)
Slide 10
Slide 10 text
React Native
Slide 11
Slide 11 text
React Native
https://react.parts/native-ios
Slide 12
Slide 12 text
React Native
https://apphub.io/
Slide 13
Slide 13 text
GraphQL
Before, we used Restful API
Client should request multiple endpoints to compose
one view
Some unused data -> API partial response
GraphQL
Official Javascript implementation
DataLoader as middleware
https://github.com/facebook/dataloader
Slide 17
Slide 17 text
Relay
A React component to support GraphQL
https://facebook.github.io/relay/
Slide 18
Slide 18 text
Misc
CSS layout - Reimplementation of CSS layout using pure
JavaScript
https://github.com/facebook/css-layout
CSS in JS
https://speakerdeck.com/vjeux/react-css-in-js
CSS modules
http://glenmaddern.com/articles/css-modules