React Ecosystem

Transcript

1. React Ecosystem
2. Facebook's iOS Architecture - @Scale 2014 - Mobile https://www.youtube.com/watch?v=mLSeEoC6GjU
3. Facebook's iOS Architecture - @Scale 2014 - Mobile Immutable model Uni-direction data flow Component Declarative Flexbox! UIStackView
4. React.js Virtual DOM Construct DOM by Javascript Component Just the “View” CSS in JS https://speakerdeck.com/vjeux/react-css-in-js
5. Flux
6. Flux In React • State v.s. property • Component property Inheritance
7. Flux Facebook provides only as a design pattern, no implementations. Fluxxor, Marty.js, Reflux, Flummox, Alt, Redux
8. Isomorphic Web Backend / Frontend to share the same code base To solve the SEO issue for SPA
9. 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)
10. React Native
11. React Native https://react.parts/native-ios
12. React Native https://apphub.io/
13. GraphQL Before, we used Restful API Client should request multiple endpoints to compose one view Some unused data -> API partial response
14. GraphQL Product-centric / Client-specific queries Backward compatible Strong-typed
15. GraphQL Request Response
16. GraphQL Official Javascript implementation DataLoader as middleware https://github.com/facebook/dataloader
17. Relay A React component to support GraphQL https://facebook.github.io/relay/
18. 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
19. @Scale https://www.youtube.com/channel/ UCd9I8ZkgoR1d7GeSj_wi_LQ