Slide 1

Slide 1 text

ENTERING THE NEW ERA OF FRONT-END DEVELOPMENT WITH REACTJS Robert Haritonov @operatino & rhr.me

Slide 2

Slide 2 text

Front-end Development Lead Liberty Global Robert Haritonov @operatino

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

V for the View in traditional MVC and for Virtual DOM

Slide 6

Slide 6 text

React provides a declarative library that keeps the DOM in sync with your data.

Slide 7

Slide 7 text

but...

Slide 8

Slide 8 text

@operatino It's all about the ecosystem • Supports server and cross-platform rendering • React brings the essence of the functional programming to UI development • Leverages composition • Promotes unidirectional data flow

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

@operatino “Move fast & break things. But fix it before it goes to prod.” Christopher Chedeau, Talk: Why does React scale?

Slide 11

Slide 11 text

@operatino Why Facebook built React • Predictable code execution environment • Individual components holds the state • Immutable component properties • Property type checking • Encapsulation and fast debugging

Slide 12

Slide 12 text

@operatino React makes rendering of UI as simple as defining a function.

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

@operatino

Slide 16

Slide 16 text

@operatino Learn programming not tools.

Slide 17

Slide 17 text

@operatino Why should you care?

Slide 18

Slide 18 text

@operatino And many more...

Slide 19

Slide 19 text

@operatino Because of these benefits • Integration flexibility • Ease of maintenance • Powerful component libraries • Isomorphic rendering

Slide 20

Slide 20 text

@operatino Before we jump in...

Slide 21

Slide 21 text

@operatino

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Stateless Component

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

@operatino 1816 components 2288 components http://react-components.com http://ngmodules.org

Slide 28

Slide 28 text

@operatino

Slide 29

Slide 29 text

@operatino Polymer from Google

Slide 30

Slide 30 text

@operatino gl-react

Slide 31

Slide 31 text

@operatino react-canvas

Slide 32

Slide 32 text

@operatino Server rendering Single page 
 JS app First request Isomorphic Rendering

Slide 33

Slide 33 text

As Easy As Calling a Function

Slide 34

Slide 34 text

@operatino Benefits of Isomorphic Rendering • Performance • Common codebase between FE and BE • Good SEO • Progressive enhancement

Slide 35

Slide 35 text

@operatino Gluing All Together Flux ReactiveX Backbone.JS

Slide 36

Slide 36 text

@operatino Flux

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

@operatino React Native

Slide 42

Slide 42 text

@operatino “Learn once, write anywhere..” Tom Occhino, React Native: Bringing modern web techniques to mobile

Slide 43

Slide 43 text

@operatino JavaScript Everywhere

Slide 44

Slide 44 text

@operatino

Slide 45

Slide 45 text

@operatino React Native • Uses platform native UI • Execute JS in native app's separate thread • Allows re-using most of code from web/other platforms • Instant releases, skipping App Store reviews • Great developer experience

Slide 46

Slide 46 text

@operatino Tools

Slide 47

Slide 47 text

Native Hot Reload

Slide 48

Slide 48 text

Native Playground

Slide 49

Slide 49 text

Redux Time Travel

Slide 50

Slide 50 text

Living Style Guide

Slide 51

Slide 51 text

@operatino Starting You React Path • Official React tutorials • https://github.com/petehunt/react-howto • https://camjackson.net/post/9-things-every-reactjs- beginner-should-know

Slide 52

Slide 52 text

Robert Haritonov @operatino & rhr.me Thank you!