ReactJS in Strikingly

Transcript

1. React.js in Strikingly Dafeng Guo, CTO of Strikingly
2. What I won’t talk about • How to write React.js …Are you kidding me…
3. What I will talk about? • A lot of new things are introduced in the frontend world • Why React.js is revolutionary and you should know it • Goal: you will agree with me
4. Who am I? • Dafeng Guo (dfguo) • Have been hacking since 14 • CTO of Strikingly
7. Y Combinator W13 Class
8. Why Strikingly chose React.js? • We have a pretty complex frontend • Existing front-end tech stack: • Angular.js + Knockout.js • We still have a lot of issues with performance and code organisation • Can React help? Yes!
9. State management problem • Server-side rendering • Rails, Django, php • Fresh state every time but not interactive Why is it hard to manage the states? • Client-side two-way binding • Angular.js, Ember.js, Knockout • Interactive but complex to manage the states
10. • State and DOM changes over time make it hard to track • States and DOM get out of sync really easily How do we make DOM the exact reflection of states?
11. • What if we can re-render the DOM all the time, like backend rendering? • state tracking will not be a problem • but it’s horribly slow
12. Virtual DOM • Virtual DOM • Keep a copy of the DOM in javascript memory • When DOM needs to change, get the diff by comparing virtual DOM • Update the diff to the real DOM
13. Virtual DOM Just like game rendering
14. Virtual DOM • It’s fast! • Only update the diff • Batch update • Faster than any other frameworks
15. Virtual DOM • Sample code time: https://facebook.github.io/ react/jsx-compiler.html • Still hate it? Check out React-template
16. Pre-rendering • Isomorphic javascript - write js and run in both frontend and backend • because DOM can be generated with javascript runtime, you can render React.js page from backend
17. Pre-rendering • This is important to Strikingly for • SEO • speed (cut down initial loading time) • We used phantomJS to simulate a browser and generate the static site in old architecture • With React.js, we can use Rails + execjs + node.js to render
18. Testing • SLOW - Most annoying thing about integration test or any test that requires browser • FAST - React.js tests just need javascript runtime
19. • State management problem solved • Faster DOM changes • Server-side rendering out of the box • Faster testing Strikingly happily moved to React.js :D
20. • But virtual DOM is not everything. I talked about it because it’s easier to understand. • The core of React.js is to to allow: • UI = f(states) • write declarative code that manages application state and DOM together!!
21. Unidirectional Data Flow • UI as state machine • Given data, display differently: f(states) = UI • Functional programming: pure function • UI as idempotent, composable functions • Data flow from top to bottom
22. Unidirectional Data Flow • Flux to facilitate this flow
23. Unidirectional data flow using Flux Virtual DOM They are just tools to help us achieve the declarative way of writing DOM
24. Conclusion
25. Strikingly is Hiring Ads React China
26. Tips using React.js • Think about UI when writing React.js • Use Flux! • Eschew unidirectional data flow • Immutable.js is a must • Force you to think about unidirectional data flow • High performant and reliable React application
27. Tips using React.js • Think about UI when writing React.js • Use Flux! • Eschew unidirectional data flow • Immutable.js is a must • Force you to think about unidirectional data flow • High performant and reliable React application
28. References • Pete Hunt’s Rethinking Best Practices: https:// www.youtube.com/watch?v=DgVS-zXgMTk • Immutability and React: https:// www.youtube.com/watch?v=I7IdS-PbEgI