The Progressive Framework

Slide 1

Slide 1 text

Vue.js The Progressive Framework Gotanda.js #5 in TORETA 2016-09-02 @kazupon

Slide 2

Slide 2 text

Who are you ? https://github.com/kazupon

Slide 3

Slide 3 text

Vue.js core team member  Vue.js-jp organizer

Slide 4

Slide 4 text

2016-08-12

Slide 5

Slide 5 text

Release 2.0 RC https://medium.com/the-vue-point/the-state-of-vue-1655e10a340a#.ehysn8dbw

Slide 6

Slide 6 text

Documentation: WIP http://rc.vuejs.org

Slide 7

Slide 7 text

Vue.js 2.0 Coming soon … Please Wait

Slide 8

Slide 8 text

Vue.js ͷঢ়گ

Slide 9

Slide 9 text

https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.lno4xgowe ࠷ۙ౤ߘ͞Εͨϒϩά

Slide 10

Slide 10 text

৽نϢʔβʔͷֶश͍ͨ͠΋ͷ

Slide 11

Slide 11 text

Ϣʔβʔ͕·ͨ࢖͍͍͔ͨ

Slide 12

Slide 12 text

Vue.js΁ͷظ଴ͷߴ·Γ  ⤴

Slide 13

Slide 13 text

ΧϯϑΝϨϯε Πϕϯτ

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Laracon US  & Laracon EU

Slide 16

Slide 16 text

Evan ࢯ͕ొஃʂ

Slide 17

Slide 17 text

2.0 ͷϦϦʔε  ଴ͪԕ͍͠Ͱ͕͢

Slide 18

Slide 18 text

Progressive Framework

Slide 19

Slide 19 text

Vue.js ͷॏཁͳίϯηϓτͳͷͰ ࠓ೔͸͜Εʹ͍ͭͯ࿩͠·͢

Slide 20

Slide 20 text

ϑϨʔϜϫʔΫ

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

ϑϨʔϜϫʔΫ͸ಓ۩ͱͯ͠։ൃʹ͓͍ͯ ΞϓϦέʔγϣϯͷෳࡶੑΛ ղܾ͢Δ΋ͷͰ͸ͳ͚Ε͹ͳΒͳ͍

Slide 23

Slide 23 text

͔͠͠ͳ͕Β ಓ۩Ͱ͋ΔϑϨʔϜϫʔΫࣗ਎ʹ΋ ෳࡶੑ͕ଘࡏ͢Δ

Slide 24

Slide 24 text

ࢲͨͪ͸ΞϓϦέʔγϣϯͷෳࡶੑΛ ղܾ͢ΔͨΊʹ ਖ਼͍͠ϑϨʔϜϫʔΫΛ બ୒͢Δඞཁ͕͋Δ

Slide 25

Slide 25 text

• μογϡϘʔυܥͷΑ͏ͳෳࡶͳΞϓϦέʔγϣϯʹର ͯ͠ɺMVCͷΑ͏ͳߏ଄Խ͢Δ΋ͷΛαϙʔτ͠ͳ͍ jQuery ͷΑ͏ͳ΋ͷͰ։ൃ͢Δέʔε ෆे෼ͳύλʔϯ

Slide 26

Slide 26 text

ෆे෼ͳύλʔϯͷϝλϑΝʔ ϚαΧϦͷΈͰϩάϋ΢εͷΑ͏ͳՈΛ ͭ͘ΔΑ͏ͳ΋ͷ

Slide 27

Slide 27 text

• ϖϥΠνͳϥϯσΟϯάϖʔδͷΑ͏ͳΞϓϦέʔγϣ ϯʹରͯ͠ɺMeteor ͷΑ͏ͳϑϧελοΫͳ΋ͷΛඋ͑ ͨ΋ͷͰ։ൃ͢Δέʔε Overkill ύλʔϯ

Slide 28

Slide 28 text

Overkill ύλʔϯͷϝλϑΝʔ δϟΠΞϯτφΠϑͰΓΜ͝ͷൽΛ޲͍ͯ ٯʹέΨΛ͢ΔΑ͏ͳ΋ͷ

Slide 29

Slide 29 text

ϑϨʔϜϫʔΫͱ͍͏ಓ۩ʹ͋Δෳࡶੑ͸ ΞϓϦέʔγϣϯͷෳࡶੑʹରͯ͠ े෼ʹίετΛࢧ෷͏͜ͱ͕Ͱ͖Δ΋ͷͰ ͳ͚Ε͹ͳΒͳ͍

Slide 30

Slide 30 text

͔͠͠ͳ͕Β ࣮ࡍʹݱ৔Ͱ͸

Slide 31

Slide 31 text

Ϗδωε͸ઈ͑ͣมԽ͢Δ • Ϣʔβʔཁ๬ͷػೳ֦ுͳͲʹରԠ͢ΔͨΊɺΞϓϦέʔ γϣϯ΋੒௕͠ͳ͚Ε͹ͳΒͳ͍ • αϒϓϩδΣΫτ͕੒௕ͨͨ͠ΊɺϝΠϯϓϩδΣΫτ ͔ΒεϐϯΞ΢τͨ͠৔߹Ͱ΋ɺ੎͍ΛࣦΘͣՃ଎͞ ͤͳ͚Ε͹ͳΒͳ͍ • αʔϏεͷεέʔϧΞοϓʹ͋ͨͬͯɺαʔϏεΛ෼཭ ͭͭ͠։ൃ଎౓Λҡ࣋ͨ͠··ɺαʔϏεΛ੒௕ͤ͞ ͳ͚Ε͹ͳΒͳ͍

Slide 32

Slide 32 text

ϑϨʔϜϫʔΫ΋ Ϗδωεʹରͯ͠ॊೈʹ ରԠͰ͖ͳΕ͚͹ͳΒͳ͍

Slide 33

Slide 33 text

Ϗϡʔ૚ίΞ ͜Μͳײ͡Ͱελʔτͯ͠

Slide 34

Slide 34 text

Ϗϡʔ૚ίΞ ʴ Φϓγϣϯతͳ ΞϓϦέʔγϣϯ։ൃαϙʔτϥΠϒϥϦ ن໛͕େ͖͘ͳ͖ͬͯͨ࣌ʹ

Slide 35

Slide 35 text

αϙʔτ͢ΔϥΠϒϥϦ͕ ͳ͚Ε͹…

Slide 36

Slide 36 text

https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.jqxo59evz

Slide 37

Slide 37 text

http://d.hatena.ne.jp/tomoya/20160403/1459665374

Slide 38

Slide 38 text

ϑϩϯτΤϯυਏ͍໰୊

Slide 39

Slide 39 text

͜͏ͳΒͳ͍Α͏ʹ  ΈΜͳΛ Happy ʹ͍ͨ͠ͷ͕ Evanࢯ͕ఏএ͢Δ֓೦

Slide 40

Slide 40 text

Progressive Framework

Slide 41

Slide 41 text

http://ejje.weblio.jp/content/progressive

Slide 42

Slide 42 text

ΞϓϦέʔγϣϯͷ ஈ֊తͳมԽཁٻʹԠͯ͡ ໰୊ղܾͰ͖Δํ๏Λఏڙ͢Δ

Slide 43

Slide 43 text

https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.p

Slide 44

Slide 44 text

• 1. Declarative Rendering • 2. Component System • 3. Client-Side Routing • 4. Large-Scale State Management • 5. Build System & Development Experience ྖҬΛ5ͭఆٛ

Slide 45

Slide 45 text

Declarative Rendering

Slide 46

Slide 46 text

• JavaScriptʹΑΔDOM ϨϯμϦϯά͸ॲཧతʹߴՁͰഁ յత • σʔλͷঢ়ଶͱDOMͷঢ়ଶΛJavaScriptͰ໋ྩతʹಉظ ͤ͞Δͷ͸໘౗ͰΤϥʔ͕ى͖΍͍͢ DOMϨϯμϦϯά

Slide 47

Slide 47 text

• ςϯϓϨʔτͰએݴతʹهࡌ͢Δ͚ͩͰɺσʔλมߋ ͷ౎౓ɺϦΞΫςΟϒʹDOM΋ϨϯμϦϯάͯ͘͠ΕΔ • Ϣʔβʔೖྗ಺༰΋ɺσʔλʹ൓өͯ͠ಉظͯ͘͠ΕΔ એݴత&ϦΞΫςΟϒϨϯμϦϯά

Slide 48

Slide 48 text

• script λάͰೖΕΔ͚ͩ։ൃ͢Δ͚ͩ ར༻ํ๏ new Vue({ // ... })

Slide 49

Slide 49 text

ϓϩτλΠϓ΍ͪΐͬͱͨ͠ ϖϥΠνతͳWebαΠτʹ͸ ͜ΕͰे෼

Slide 50

Slide 50 text

Component System

Slide 51

Slide 51 text

• WebαΠτ͕ஈʑେ͖͘ͳͬͯ͘ΔͱɺUIΛϞδϡʔϧ Խͯ͠࠶ར༻͢Δඞཁ͕Ͱͯ͘Δ ϞδϡʔϧԽͷඞཁੑ

Slide 52

Slide 52 text

• Vue.js ͕ఏڙ͢Δ UI ϞδϡʔϧԽ͢Δ Component ػೳ Λར༻͢Δ͜ͱͰ࠶ར༻ՄೳʹͳΔ Component

Slide 53

Slide 53 text

• Vue.js ͷ࡞๏ʹΑͬͯ Component Խͨ͠ΒɺςϯϓϨʔ τʹ͸ΧελϜλά (Custome Element) Λهࡌ͢Δ͚ͩ ར༻ํ๏ ... ...

Slide 54

Slide 54 text

• ਌ࢠؒͷ Component ʹ͓͍ͯɺProps ͰσʔλΛ౉͠ɺ Events ܦ༝ͰσʔλΛड͚औΔ Component ؒͷ௨৴

Slide 55

Slide 55 text

Component ʹΑͬͯ ϞδϡʔϧԽ͢Δ͜ͱͰ։ൃޮ཰͸ ֨ஈʹ޲্

Slide 56

Slide 56 text

Client-Side Routing

Slide 57

Slide 57 text

• ͞ΒͳΔϏδωεཁٻʹΑΓΞϓϦέʔγϣϯతͳϞ ϊ͕ཁٻ͞ΕΔΑ͏ʹͳΔ • Single Page Application ޲͚ͷϥΠϒϥϦͱͯ͠ vue- router Λఏڙ WebαΠτ͔ΒWebΞϓϦ΁

Slide 58

Slide 58 text

Component Λ࠶ར༻͢ܗͰ ΞϓϦԽ΁ରԠՄೳ

Slide 59

Slide 59 text

Large-Scale State Management

Slide 60

Slide 60 text

• ͞ΒʹWebΞϓϦ͕େن໛ʹͳͬͯ͘ΔͱɺComponent ؒͰঢ়ଶڞ༗ํ๏ɺ࠶ར༻ੑ͕໰୊ͱͳͬͯ͘Δ େن໛WebΞϓϦέʔγϣϯͷ໰୊ Component Component state state ??? Component state

Slide 61

Slide 61 text

• ঢ়ଶ؅ཧ޲͚ͷϥΠϒϥϦͱͯ͠ vuex Λఏڙ Flux σʔλϑϩʔΞʔΩςΫνϟ

Slide 62

Slide 62 text

vuex Λར༻͢Δ͜ͱͰ طଘͷ Component Λ֦ு͢ΔܗͰ ঢ়ଶΛूத؅ཧ͢Δ͜ͱ͕Ͱ͖Δ

Slide 63

Slide 63 text

Build System &  Development Experience

Slide 64

Slide 64 text

• WebΞϓϦέʔγϣϯΛ࡞ΔͨΊʹɺϓϩδΣΫτΛ؆ ୯ʹηοτΞοϓ͢Δੜ੒πʔϧΛఏڙ Scaﬀold CLI πʔϧͷఏڙ

Slide 65

Slide 65 text

• Component Խ͢ΔͨΊͷ࢓૊Έ΋ఏڙ Single File Component

Slide 66

Slide 66 text

Single File Component ελΠϧ ςϯϓϨʔτ εΫϦϓτ

Slide 67

Slide 67 text

• Component & vuex पΓͷσόοάπʔϧΛ Chrome ֦ு Ͱఏڙ σόοάπʔϧ

Slide 68

Slide 68 text

Vue.js ͕ఏڙ͢Δ։ൃαϙʔτܥͷ πʔϧΛར༻͢Δ͜ͱͰຊ࣭తͰͳ͍΋ͷʹ ΄ͱΜͲ࣌ؒΛඅ΍͞ΕΔ͜ͱͳ͘ ܧଓతͳ։ൃʹઐ೦͢Δ͜ͱ͕Ͱ͖Δ

Slide 69

Slide 69 text

·ͱΊ • Progressive Framework ʹ͸ 5 ͭͷྖҬ͕ఆٛ͞Ε͍ͯΔ • Progressive Framework ͱ͸มԽ͢ΔϏδωεͷঢ়گʹ Ԡͯ͡ɺVue.jsίΞϥΠϒϥϦͱपลϥΠϒϥϦʹΑͬ ͯɺஈ֊తʹΞϓϦέʔγϣϯΛαϙʔτͰ͖ΔϑϨʔ ϜϫʔΫͰ͋Δ

Slide 70

Slide 70 text

vuejs-jp slack • URL  https://vuejs-jp-slackin.herokuapp.com • Vuejs ೔ຊޠެࣜαΠτܦ༝Ͱ΋δϣΠϯͰ͖·͢  http://jp.vuejs.org   

Slide 71

Slide 71 text

Thanks!