ReactJS in Strikingly

060fffd6216660bf034bbdc68bec1dee?s=47 Dafeng
April 16, 2015

ReactJS in Strikingly

060fffd6216660bf034bbdc68bec1dee?s=128

Dafeng

April 16, 2015
Tweet

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
  5. None
  6. None
  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