The Progressive Framework

38bee248082f6071230de65e9d74a944?s=47 kazupon
September 02, 2016

The Progressive Framework

gotanda.js #5 in toreta
progressive framework for japanese

38bee248082f6071230de65e9d74a944?s=128

kazupon

September 02, 2016
Tweet

Transcript

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

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

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

  4. 2016-08-12

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

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

  7. Vue.js 2.0 Coming soon … Please Wait

  8. Vue.js ͷঢ়گ

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

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

  11. Ϣʔβʔ͕·ͨ࢖͍͍͔ͨ

  12. Vue.js΁ͷظ଴ͷߴ·Γ
 ⤴

  13. ΧϯϑΝϨϯε Πϕϯτ

  14. None
  15. Laracon US
 & Laracon EU

  16. Evan ࢯ͕ొஃʂ

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

  18. Progressive Framework

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

  20. ϑϨʔϜϫʔΫ

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

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

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

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

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

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

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

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

  30. ͔͠͠ͳ͕Β ࣮ࡍʹݱ৔Ͱ͸

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

    ͭͭ͠։ൃ଎౓Λҡ࣋ͨ͠··ɺαʔϏεΛ੒௕ͤ͞ ͳ͚Ε͹ͳΒͳ͍
  32. ϑϨʔϜϫʔΫ΋ Ϗδωεʹରͯ͠ॊೈʹ ରԠͰ͖ͳΕ͚͹ͳΒͳ͍

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

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

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

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

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

  38. ϑϩϯτΤϯυਏ͍໰୊

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

  40. Progressive Framework

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

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

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

  44. • 1. Declarative Rendering • 2. Component System • 3.

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

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

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

  48. • script λάͰೖΕΔ͚ͩ։ൃ͢Δ͚ͩ ར༻ํ๏ <script src="vue.js"></script> <script> new Vue({ //

    ... }) </script>
  49. ϓϩτλΠϓ΍ͪΐͬͱͨ͠ ϖϥΠνతͳWebαΠτʹ͸ ͜ΕͰे෼

  50. Component System

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

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

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

    <side-bar></side-bar> <tabs> <tab>...</tab> <tab>...</tab> </tabs>
  54. • ਌ࢠؒͷ Component ʹ͓͍ͯɺProps ͰσʔλΛ౉͠ɺ Events ܦ༝ͰσʔλΛड͚औΔ Component ؒͷ௨৴

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

  56. Client-Side Routing

  57. • ͞ΒͳΔϏδωεཁٻʹΑΓΞϓϦέʔγϣϯతͳϞ ϊ͕ཁٻ͞ΕΔΑ͏ʹͳΔ • Single Page Application ޲͚ͷϥΠϒϥϦͱͯ͠ vue- router

    Λఏڙ WebαΠτ͔ΒWebΞϓϦ΁
  58. Component Λ࠶ར༻͢ܗͰ ΞϓϦԽ΁ରԠՄೳ

  59. Large-Scale State Management

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

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

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

  63. Build System &
 Development Experience

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

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

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

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

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

  69. ·ͱΊ • Progressive Framework ʹ͸ 5 ͭͷྖҬ͕ఆٛ͞Ε͍ͯΔ • Progressive Framework

    ͱ͸มԽ͢ΔϏδωεͷঢ়گʹ Ԡͯ͡ɺVue.jsίΞϥΠϒϥϦͱपลϥΠϒϥϦʹΑͬ ͯɺஈ֊తʹΞϓϦέʔγϣϯΛαϙʔτͰ͖ΔϑϨʔ ϜϫʔΫͰ͋Δ
  70. vuejs-jp slack • URL
 https://vuejs-jp-slackin.herokuapp.com • Vuejs ೔ຊޠެࣜαΠτܦ༝Ͱ΋δϣΠϯͰ͖·͢
 http://jp.vuejs.org
 


  71. Thanks!