React.js in Strikingly
Dafeng Guo (郭达峰), CTO of Strikingly
What I won’t talk about
• How to write React.js
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
Who am I?
• 郭达峰 (dfguo) • Have been hacking since 14 • CTO of Strikingly
Why Strikingly chose React.js?
• We have a pretty complex frontend • Demo
• Existing front-end tech stack: • Angular.js + Knockout.js
• We still have a lot of issues with performance and code organisation
• Can React help? Let's see.
State management problem
• Server-side rendering
• Rails, Django, php
• Fresh state every time but not interactive
• Client-side two-way binding • Angular.js, Ember.js, Knockout • Interactive but complex to manage the states
Why is it hard to manage the states?
• We always juggle between changing state and then changing DOM
• State and DOM changes over time make it hard to synchronize
How do we make DOM the exact reﬂection of states?
• 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
• Virtual DOM
• When DOM needs to change, get the diff by comparing virtual DOM
• Update the diff to the real DOM
Just like game rendering
• It’s fast! • Only update the diff • Batch update • Faster than any other frameworks
• Sample code time: https://facebook.github.io/ react/jsx-compiler.html
• Still hate it? Check out React-template
• This is important to Strikingly for SEO and speed
• We used phantomJS to simulate a browser and generate the static HTML in the old architecture
• With React.js, we can use Rails + execjs + node.js to render
• SLOW - Most annoying thing about integration test or any test that requires browser
• Faster DOM changes • Server-side rendering out of the box • Faster testing
virtual DOM enables all these
• 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!!
Unidirectional Data Flow
• UI as state machine • Given data, display UI: f(states) = UI
• Not two-way, but one-way • Data ﬂow from top to bottom, parent to child
• Flux to facilitate this ﬂow • Immutable.js makes it even better
Unidirectional Data Flow
• Functional programming: pure function • idempotent - f(state) is always y • composable - 可组合性
Unidirectional data ﬂow
They are just tools to help us to write f(states) = UI and not worry about manipulating both states and DOM separately
• 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
• Additional material if audience wants to learn more about Flux and immutable.js
• Unidirectional data ﬂow
• Immutable - changes create new copy on every change
• Persistent - old copies will be kept • Structural sharing - new/old objects shares
• Makes one-way directional ﬂow clearer • Makes state changes more clear • undo/redo out of the box :D