ReactJS in Strikingly - Speaker Deck

Slide 1

Slide 1 text

React.js in Strikingly Dafeng Guo, CTO of Strikingly

Slide 2

Slide 2 text

What I won’t talk about • How to write React.js …Are you kidding me…

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Who am I? • Dafeng Guo (dfguo) • Have been hacking since 14 • CTO of Strikingly

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Y Combinator W13 Class

Slide 8

Slide 8 text

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!

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

• 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 reﬂection of states?

Slide 11

Slide 11 text

• 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Virtual DOM Just like game rendering

Slide 14

Slide 14 text

Virtual DOM • It’s fast! • Only update the diff • Batch update • Faster than any other frameworks

Slide 15

Slide 15 text

Virtual DOM • Sample code time: https://facebook.github.io/ react/jsx-compiler.html • Still hate it? Check out React-template

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Testing • SLOW - Most annoying thing about integration test or any test that requires browser • FAST - React.js tests just need javascript runtime

Slide 19

Slide 19 text

• State management problem solved • Faster DOM changes • Server-side rendering out of the box • Faster testing Strikingly happily moved to React.js :D

Slide 20

Slide 20 text

• 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!!

Slide 21

Slide 21 text

Unidirectional Data Flow • UI as state machine • Given data, display differently: f(states) = UI • Functional programming: pure function • UI as idempotent, composable functions • Data ﬂow from top to bottom

Slide 22

Slide 22 text

Unidirectional Data Flow • Flux to facilitate this ﬂow

Slide 23

Slide 23 text

Unidirectional data ﬂow using Flux Virtual DOM They are just tools to help us achieve the declarative way of writing DOM

Slide 24

Slide 24 text

Conclusion

Slide 25

Slide 25 text

Strikingly is Hiring Ads React China

Slide 26

Slide 26 text

Tips using React.js • Think about UI when writing React.js • Use Flux! • Eschew unidirectional data ﬂow • Immutable.js is a must • Force you to think about unidirectional data ﬂow • High performant and reliable React application

Slide 27

Slide 27 text

Slide 28

Slide 28 text

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