Tweet
Tweet

Slide 1

Slide 1 text

Introduction To React Frontrend 2015.02.21 #frontrendJS

Slide 2

Slide 2 text

@hokaccha

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

1. React.js 2. Virtual DOM 3. JSX 4. Server Side Rendering 5. Flux 6. Flow

Slide 5

Slide 5 text

React.js

Slide 6

Slide 6 text

A JavaScript library for building user interfaces

Slide 7

Slide 7 text

࠾༻ࣄྫ • Facebook • Instagram • Yahoo • Atom Editor • Flipboard

Slide 8

Slide 8 text

React.jsͷಛ௃ • εςʔτϨεͳίϯϙʔωϯτઃܭ • Virtual DOMͷ࠾༻ • JSXγϯλοΫε

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

jQuery

Slide 11

Slide 11 text

// Submit͞ΕͨΒ $('form').on('submit', functino() { // ཁૉ࡞ͬͯ var $li = $('
  • '); // ... // Ϧετʹ௥Ճ $('ul').append($li); });

    • Slide 12

    Slide 12 text

    • ঢ়ଶ͕DOMʹ͔͠ͳ͍ • ֦ுͮ͠Β͍ • ؅ཧͮ͠Β͍ • ςετͮ͠Β͍

    Slide 13

    Slide 13 text

    Backbone

    Slide 14

    Slide 14 text

    • View͸ίϯϙʔωϯτΛ෼͚ͯ • σʔλ΍ϩδοΫ͸Modelʹ࣋ͱ͏

    Slide 15

    Slide 15 text

    var FormView = Backbone.View.extend({ onSubmit: function() { // dataΛ࡞ͬͯϞσϧʹ௥Ճ͢Δ͚ͩ this.collection.add(data) } }); var ListView = Backbone.View.extend({ initialize: function() { // Ϟσϧ͕ߋ৽͞ΕͨΒϦετΛߋ৽ this.collection.on('add', this.render); } });

    Slide 16

    Slide 16 text

    • มߋͷద༻ΛखͰॻͭ͘Β͞ • Πϕϯτ஍ࠈ

    Slide 17

    Slide 17 text

    AngularɺVue

    Slide 18

    Slide 18 text

    • දࣔ͸શͯViewModelʹ΋ͱʹߏங͠Α͏ • σʔλ͕มΘͬͨΒউखʹදࣔ΋มΘΕ • UI͕มΘͬͨΒσʔλ΋উखʹมΘΕ

    Slide 19

    Slide 19 text

    • {{item.text}}
    // Controller $scope.onSubmit = function() { // σʔλΛߋ৽ͨ͠ΒউखʹView͕มΘΔ $scope.list.push(newItem); };

    Slide 20

    Slide 20 text

    • ίϯϙʔωϯτ͝ͱʹঢ়ଶΛ࣋ͭͭΒ͞ • ΞϓϦέʔγϣϯ͕ෳࡶʹͳΔͱͱͭΒ͍

    Slide 21

    Slide 21 text

    React

    Slide 22

    Slide 22 text

    • σʔλ͕มΘͬͨΒউखʹදࣔ΋มΘΕ • ίϯϙʔωϯτʹঢ়ଶΛ࣋ͨͤͳ͍ • ඳըʹඞཁͳσʔλ͸਌͔Β΋Β͏

    Slide 23

    Slide 23 text

    var Form = React.createClass({ onSubmit: function() { // ਌ʹσʔλͷߋ৽Λ௨஌ }, render: function() { return ...; } }); var List = React.createClass({ render: function() { // ਌͔Β΋ΒͬͨσʔλΛݩʹߏங͢Δ͚ͩ return
      {this.props.list.map(...)
    ; } });

    Slide 24

    Slide 24 text

    Stateless Component

    Slide 25

    Slide 25 text

    • Testable • Maintainable • Reusable

    Slide 26

    Slide 26 text

    4UBUFGVMM 4UBUFMFTT

    Slide 27

    Slide 27 text

    ϢʔβʔΞΫγϣϯ

    Slide 28

    Slide 28 text

    ߋ৽

    Slide 29

    Slide 29 text

    ࢠʹมߋΛ൓ө

    Slide 30

    Slide 30 text

    1. σʔλΛݩʹViewΛߏங 2. ϢʔβʔͷΞΫγϣϯ 3. ·ΔͬͱσʔλΛߋ৽ͯ͠ViewΛ࠶ߏங

    Slide 31

    Slide 31 text

    αʔόʔαΠυͱಉ͡Ͱ͢Ͷ

    Slide 32

    Slide 32 text

    ଎౓ͱͷδϨϯϚ

    Slide 33

    Slide 33 text

    Virtual DOM

    Slide 34

    Slide 34 text

    • JavaScriptͷΦϒδΣΫτͱͯ͠DOMͷΑ͏ ͳߏ଄Λ࣋ͭ • σʔλʹมߋ͕͋ΔͱͲͷ෦෼Λมߋ͠ͳ͍ ͱ͍͚ͳ͍͔Λܭࢉ • ඞཁͳ෦෼͚࣮ͩࡍͷDOMʹద༻͢Δ

    Slide 35

    Slide 35 text

    No content

    Slide 36

    Slide 36 text

    ঢ়ଶมߋ

    Slide 37

    Slide 37 text

    ࣮ࡍͷ%0.΁ͷมߋ͸͸͚ͩ͜͜

    Slide 38

    Slide 38 text

    var MyComponent = React.createClass({ render: function() { return React.createElement("div", {className: "foo"}, React.createElement("div", {className: "bar"}, "Hello ", this.props.name ) ); });

    Slide 39

    Slide 39 text

    React.js͸଎͍ΜͰ͠ΐʁ

    Slide 40

    Slide 40 text

    ͲΕ͕଎͍ʁ 1. σʔλͷมߋˠߋ৽෼͚ͩDOMʹ൓ө 2. σʔλͷมߋˠDOMπϦʔ·Δ͝ͱߋ৽ 3. σʔλͷมߋˠࠩ෼ܭࢉˠߋ৽෼͚ͩDOMʹ൓ө

    Slide 41

    Slide 41 text

    var ListView = Backbone.View.extend({ initialize: function() { this.collection.on('add', this.onAdd); this.collection.on('change', this.onChange); this.collection.on('destroy', this.onRemove); }, onAdd: function() { /* ௥Ճͷॲཧ */ }, onChange: function() { /* มߋͷॲཧ */ }, onDestroy: function() { /* ࡟আͷॲཧ */ } }); 1. ඞཁͳ෦෼͚ͩ࠶ඳը

    Slide 42

    Slide 42 text

    ϢʔβʔΞΫγϣϯ

    Slide 43

    Slide 43 text

    ߋ৽

    Slide 44

    Slide 44 text

    var ListView = Backbone.View.extend({ initialize: function() { this.collection .on('add change destroy', this.render); }, render: function() { // ࠶ඳը } }); 2. σʔλ͕มΘͬͨΒશ෦࠶ඳը

    Slide 45

    Slide 45 text

    ϢʔβʔΞΫγϣϯ

    Slide 46

    Slide 46 text

    ߋ৽

    Slide 47

    Slide 47 text

    πϦʔΛ࠶ߏங

    Slide 48

    Slide 48 text

    3. ࠩ෼ܭࢉͯ͠ඳը var App = React.createClass({ handleChange: function() { this.setState({ list: getNewList() }); }, render: function() { return (
    ); } });

    Slide 49

    Slide 49 text

    ϢʔβʔΞΫγϣϯ

    Slide 50

    Slide 50 text

    ߋ৽

    Slide 51

    Slide 51 text

    ࣮ࡍͷ%0.΁ͷมߋ͸͸͚ͩ͜͜

    Slide 52

    Slide 52 text

    ࣮ߦ࣌ؒʢNTʣ #BDLCPOF
 ෦෼త࠶ඳը #BDLCPOF
 શͯ࠶ඳը 3FBDU TODO MVC IUUQIPLBDDIBHJUIVCJPUPEPNWDQFSGDPNQBSJTPO

    Slide 53

    Slide 53 text

    React͸ઃܭͱ଎౓͕ ཱ྆Ͱ͖Δ

    Slide 54

    Slide 54 text

    ͦͷଞͷVirtual DOM࣮૷ • Matt-Esch/virtual-dom • segmentio/deku

    Slide 55

    Slide 55 text

    JSX

    Slide 56

    Slide 56 text

    React.createElement("div", {className: "foo"}, React.createElement("div", {className: "bar"}, "Hello ", this.props.name ) )
    Hello {this.props.name}

    Slide 57

    Slide 57 text

    var Box = React.createClass({ render: function() { return (
    Hello {this.props.name}
    ); } });

    Slide 58

    Slide 58 text

    ଞͷίϯϙʔωϯτΛར༻Մೳ var Foo = React.createClass({ ... }); var Bar = React.createClass({ render: function() { return
    ; } });

    Slide 59

    Slide 59 text

    ଐੑͰpropsΛ౉ͤΔ var Foo = React.createClass({ render: function() { return
    {this.props.text}
    ; } }); var Bar = React.createClass({ render: function() { return
    ; } });

    Slide 60

    Slide 60 text

    ม׵πʔϧ • react-toolsʢjsxίϚϯυʣ • babelʢچ6to5ʣ

    Slide 61

    Slide 61 text

    ࣮ࡍͲ͏ͳͷʁ

    Slide 62

    Slide 62 text

    No content

    Slide 63

    Slide 63 text

    • ES6΋Ұॹʹม׵͢ΔͷͰม׵ίετ͸ͳ͍ • ΤσΟλͷઃఆ͢Ε͹Ըܙड͚ΒΕΔ • ݁ہ޷Έ

    Slide 64

    Slide 64 text

    Server Side Rendering

    Slide 65

    Slide 65 text

    ϑϩϯτΤϯυΞϓϦͷ໰୊

    Slide 66

    Slide 66 text

    JSΛղऍͰ͖ͳ͍ Ϛγϯ͔ΒಡΊͳ͍

    Slide 67

    Slide 67 text

    No content

    Slide 68

    Slide 68 text

    ॳظද͚ࣔͩαʔόʔͰ΍Δ

    Slide 69

    Slide 69 text

    ΫϥΠΞϯτͱαʔόͰ ίʔυ͕ॏෳ͢Δ໰୊

    Slide 70

    Slide 70 text

    No content

    Slide 71

    Slide 71 text

    Rendr → React

    Slide 72

    Slide 72 text

    Server Side Rendering with React

    Slide 73

    Slide 73 text

    // components/app.js React.createClass({ render() { return (
    ); } });

    Slide 74

    Slide 74 text

    // server side var React = require('react'); var App = require('./components/app'); app.get('/', function(req, res) { var html = React.renderToString( React.createElement(App, { data: data }) ); res.render({ html: html }); });

    Slide 75

    Slide 75 text

    // client side var App = require('./components/app'); React.render(, el);

    Slide 76

    Slide 76 text

    αʔόʔ/ΫϥΠΞϯτ ͰίʔυΛڞ௨ԽͰ͖Δ

    Slide 77

    Slide 77 text

    No content

    Slide 78

    Slide 78 text

    Flux

    Slide 79

    Slide 79 text

    Fluxͱ͸ͳʹ͔ • ઃܭख๏ͷͻͱͭ • MVCΈ͍ͨͳ΋ͷ • σʔλͷྲྀΕ͕Ұํ௨ߦ

    Slide 80

    Slide 80 text

    IUUQGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM

    Slide 81

    Slide 81 text

    IUUQGBDFCPPLHJUIVCJPqVYEPDTPWFSWJFXIUNM

    Slide 82

    Slide 82 text

    No content

    Slide 83

    Slide 83 text

    No content

    Slide 84

    Slide 84 text

    ߟ͑ํͳͷͰ࣮૷͸༷ʑ

    Slide 85

    Slide 85 text

    ୅දతͳFlux࣮૷ • facebook/flux • spoike/refluxjs • BinaryMuse/fluxxor

    Slide 86

    Slide 86 text

    Flow

    Slide 87

    Slide 87 text

    Flow is a static type checker, designed to find type errors in JavaScript programs

    Slide 88

    Slide 88 text

    /* @flow */ function foo(x: number, y: number): number { return x * y; } foo('foo', 2); $ flow check /Users/hokamura/flow/foo.js:5:5,9: string This type is incompatible with /Users/hokamura/flow/foo.js:2:17,22: number Found 1 error

    Slide 89

    Slide 89 text

    /* @flow */ function foo(x, y) { return x * y; } foo('foo', 2); $ flow check /Users/hokamura/flow/foo.js:5:5,9: string This type is incompatible with /Users/hokamura/flow/foo.js:3:10,14: number Found 1 error

    Slide 90

    Slide 90 text

    JSXͷαϙʔτ /* @flow */ var App = React.createClass({ render: function() { return
    foo
    ; }, });

    Slide 91

    Slide 91 text

    JSXͷαϙʔτ /* @flow */ var App = React.createClass({ render: function() { return 'foo'; // => Error! }, });

    Slide 92

    Slide 92 text

    propTypesͷαϙʔτ /* @flow */ var Foo = React.createClass({ propTypes: { text: React.PropTypes.string } }); var Bar = React.createClass({ render: function() { return ; } });

    Slide 93

    Slide 93 text

    ίϯύΠϧ

    Slide 94

    Slide 94 text

    $ jsx --strip-types foo.js /* @flow */ function foo(x , y ) { return x * y; } /* @flow */ function foo(x:number, y:number) :number { return x * y; }

    Slide 95

    Slide 95 text

    $ babel foo.js "use strict"; /* @flow */ function foo(x, y) { return x * y; } /* @flow */ function foo(x:number, y:number) :number { return x * y; }

    Slide 96

    Slide 96 text

    ·ͱΊ

    Slide 97

    Slide 97 text

    React Flux Flow

    Slide 98

    Slide 98 text

    Scalable

    Slide 99

    Slide 99 text

    খن໛ͳ΋ͷΛૉૣ͘ ࡞ΔͨΊͷπʔϧͰ͸ͳ͍

    Slide 100

    Slide 100 text

    ٕज़બ୒͸ద੾ʹ

    Slide 101

    Slide 101 text

    ࠓ೔ͷ࿩ͰڵຯΛ࣋ͬͨํ͸

    Slide 102

    Slide 102 text

    No content

    Slide 103

    Slide 103 text

    Thanks!