AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

React.js in Strikingly by 郭达峰

发布者 weber
发布于 1433465218288  浏览 6284 关键词 前端, ReactJS, 创业 
分享到

第1页

React.js in Strikingly

Dafeng Guo (郭达峰), CTO of Strikingly



第2页

What I won’t talk about



• How to write React.js



哥们,那你来砸场 的吗?



第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

• ⺫⽬目标:听完分享后你会认同



第4页

Who am I?

• 郭达峰 (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 • 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.



第9页

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?



第10页

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

• because DOM can be generated with javascript runtime, you can render React.js from backend

• Isomorphic javascript - run the same javascript from backend and frontend



第17页

Pre-rendering

• 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



第18页

Testing

• SLOW - Most annoying thing about integration test or any test that requires browser

• FAST - React.js tests just need javascript runtime



第19页

• Faster DOM changes • Server-side rendering out of the box • Faster testing

virtual DOM enables all these



第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 UI: f(states) = UI

• Not two-way, but one-way • Data flow from top to bottom, parent to child

• Flux to facilitate this flow • Immutable.js makes it even better



第22页

Unidirectional Data Flow

• Functional programming: pure function • idempotent - f(state) is always y • composable - 可组合性



第23页

Unidirectional data flow

Virtual DOM

They are just tools to help us to write f(states) = UI and not worry about manipulating both states and DOM separately



第24页

Conclusion



第25页

⼩小⼲⼴广告



Strikingly 正在招聘



React China



第26页

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



第27页

• Additional material if audience wants to learn more about Flux and immutable.js



第28页

Flux

• Unidirectional data flow



第29页

Immutable.js

• Immutable - changes create new copy on every change

• Persistent - old copies will be kept • Structural sharing - new/old objects shares

memory



第30页

Immutable.js

• Makes one-way directional flow clearer • Makes state changes more clear • undo/redo out of the box :D



支持文件格式:*.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。