3大フレームワーク(Angular, React, Vue.js)比較によるエンタープライズ Web アプリケーション開発の最適化

3大フレームワーク(Angular, React, Vue.js)比較によるエンタープライズ Web アプリケーション開発の最適化

現在の JavaScript フレームワークはコンポーネント指向と言われています。コンポーネント指向の起源である Web 標準の Web Components を知ることで、コンポーネントとは何かを理解し、理解した事項を念頭に3大フレームワーク(Angular, React, Vue.js) の比較を行います。具体的な事例として、コンポーネント化のメリットを活かし、更に TypeScript や Azure などを利用することで最適化されたイマドキのエンタープライズ Web アプリケーション開発の「現場」をご紹介します。

3c4e656279676b63168c4a0fcf8caded?s=128

Fumio SAGAWA

May 25, 2018
Tweet

Transcript

  1. ̏େϑϨʔϜϫʔΫʢAngular, React, Vue.jsʣൺֱʹΑΔ
 ΤϯλʔϓϥΠζ Web ΞϓϦέʔγϣϯ։ൃͷ࠷దԽ ࠤ઒ ෉ඒ༤ Ξγϥεגࣜձࣾ
 ୅දऔక໾

    AD16
  2. ࣗݾ঺հ ࠤ઒ɹ෉ඒ༤ "TIJSBT JOD $IJFG&YFDVUJWF0⒏DFS8FC"QQMJDBUJPO&OHJOFFS .JDSPTPGU.PTU7BMVBCMF1SPGFTTJPOBM .71  )5.-&YQFSUTKQ
 "OHVMBS+BQBO6TFS(SPVQ

    IUNMK !BMCBUSPTBSZ
  3. ೥݄೔ʹઃཱͨ͠ਆށʹ͋Δ ϑϩϯτΤϯυઐ໳ͷձࣾ

  4. ΞδΣϯμ Web Application
 A Comparison of JavaScript Framework
 Getting Started


    DevOps for Front-end
  5. Web Application

  6. Web αΠτͱҧ͏ʁ

  7. Application Web Site

  8. Web ΞϓϦέʔγϣϯͷ௒ʑجૅ

  9. ࠷௿ݶඞཁͳ΋ͷ CSS PRESENTATION JS BEHAVIOR HTML STRUCTURE

  10. ඞཁʁ

  11. ҋ CSS

  12. ޷͖ʁ

  13. ϓϩάϥϜΛॻ͘ͱ͖ؾʹ͢Δ͜ͱ Մಡੑ ϦϑΝΫλϦϯά ࠶ར༻ੑ ςετ etc.

  14. Piece

  15. Component

  16. Atomic Design

  17. Atomic Design

  18. σβΠφʔͷ࢓ࣄ

  19. None
  20. None
  21. Web Components

  22. Web Components Custom Elements
 HTML Templates
 HTML Imports
 Shadow DOM

    ϐʔεʹ໊લΛ෇͚Δ
 ϐʔεͷ໛༷
 ϐʔεΛύζϧʹ͸ΊΔ
 ϐʔεͰ͋Δ͜ͱΛओு
  23. <x-foo> HTML Imports HTML Templates Custom Elements Shadow DOM

  24. Custom Elements ৽͍͠ཁૉΛొ࿥͢Δ var XFoo = document.registerElement('x-component'); ΧελϜλάΛΠϯελϯεԽ <x-component></x-component>

  25. HTML Templates <template> <div>Template used</div> <div>hoge</div> <style> div { font-size:

    20px; } </style> <script> console.log('x-component.html'); </script> </template>
  26. HTML Imports <link rel=“import" href=“components/x-component.html">

  27. Shadow DOM <!-- ΞΫςΟϕʔτ --> <script> var imports = document.querySelector('link[rel="import"]').import;

    var templates = imports.querySelector('template'); var contents = templates.content; var xcomponents = document.querySelector('x-component'); xcomponents.createShadowRoot().appendChild( contents.cloneNode(true) ); </script>
  28. None
  29. OOCSS BEM
 SMACSS

  30. OOCSS BEM
 SMACSS

  31. Scoped CSS

  32. JavaScript Framework

  33. JavaScript Framework

  34. Web Application Framework

  35. A Comparison of JavaScript Framework

  36. ͲͷϑϨʔϜϫʔΫΛ࢖͏͔ʁ ֶशίετ ཁһ֬อ ։ൃͷ༰қੑ ࣮ߦ଎౓ ӡ༻ίετ

  37. ͲͷϑϨʔϜϫʔΫΛ࢖͏͔ʁ ֶशίετ ཁһ֬อ ։ൃͷ༰қੑ ࣮ߦ଎౓ ӡ༻ίετ

  38. Getting Started

  39. γϯϓϧʹ࢝ΊΔ - QuickStart

  40. Angular $ npm install -g @angular/cli $ ng new hello-angular

    $ cd hello-angular $ ng serve
  41. Angular $ npm install -g @angular/cli $ ng new hello-angular

    $ cd hello-angular $ ng serve
  42. Angular

  43. Vue.js $ npm install -g @vue/cli $ vue create hello-vue

    $ cd hello-vue $ yarn serve <script scoped> … <script>
  44. Vue.js

  45. React $ npm install -g create-react-app $ create-react-app hello-react $

    cd hello-react $ yarn start $ yarn eject
  46. config/webpack.config.dev.js loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, localIdentName:

    ‘[name]__[local]___[hash:base64:5]’ },
  47. config/webpack.config.prod.js loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: true, minimize:

    true, sourceMap: true },
  48. App.js // import ‘./App.css’; import styles from ‘./App.css’; class App

    extends Component { render() { return ( <div className={styles.App}> <img src={logo} className={styles.AppLogo}
  49. App.css /* .App-logo { */ .AppLogo { animation: App-logo-spin infinite

    20s linear; height: 80px; } /* .App-header { */ .AppHeader { ackground-color: #222; height: 150px;
  50. App.js

  51. Angular CLI add Add support for a library to your

    project. new Creates a new directory and a new Angular app. generate Generates and/or modifies files based on a schematic. update Updates your application and its dependencies. build Builds your app and places it into the output path (dist/ by default). serve Builds and serves your app, rebuilding on file changes. test Run unit tests in existing project. e2e Run e2e tests in existing project. lint Lints code in existing project. xi18n Extracts i18n messages from source code. run Runs Architect targets. eject Temporarily disabled. Ejects your app and output the proper webpack configuration and scripts. config Get/set configuration values. help Help. version Outputs Angular CLI version. doc Opens the official Angular API documentation for a given keyword.
  52. DevOps for Front-end

  53. ͍ͭࠒ ݟΕ·͔͢ʁ

  54. None
  55. Project Management

  56. GitHub ϓϩδΣΫτ؅ཧʢਐḿɺλεΫɺ୲౰ʣ Ϟδϡʔϧ؅ཧ ίʔυϨϏϡʔ υΩϡϝϯτ؅ཧ

  57. None
  58. Cloud

  59. Microsoft Azure ϦϦʔεɾαʔό ϞοΫɾαʔό σϞɾαʔό ͦͷଞ

  60. Custom Vision Service

  61. Step 1

  62. Step 2

  63. Step 3

  64. OpenAPI

  65. Swagger

  66. Swagger Codegen OpenAPI
 Document API
 Doc REST
 Client Module REST

    Server Module
  67. None
  68. ·ͱΊ

  69. WebΞϓϦέʔγϣϯ։ൃ͸ίϯϙʔωϯτࢦ޲ ։ൃޮ཰ΛͲΕ্͚ͩ͛ΒΕΔ͔
 ϑϩϯτΤϯδχΞͦ͜ Azure ΛϚελʔͤΑ https://github.com/albatrosary/decode18/

  70. Special Thanks גࣜձࣾࣛࣇౡ෋࢜௨ΠϯϑΥωοτ EMAT ϝϯόʔ

  71. Ask the Speaker ͷ͝Ҋ಺ ϒϨΠΫΞ΢τηογϣϯऴྃޙͷٳܜ࣌ؒʹɺ ొஃͨ͠εϐʔΧʔʹ௚઀࣭͝໰͍͚ͨͩΔ ίʔφʔΛ ʮAsk The Speakersʯ

    Room ʹ ༻ҙ͓ͯ͠Γ·͢ɻηογϣϯ಺༰ͷΑΓਂ͍ ཧղͷͨΊɺͥͻ͓໾ཱ͍ͯͩ͘͞ɻ ▪ ʮAsk The Speakersʯ Room
  72. ηογϣϯΞϯέʔτʹ͝ڠྗ͍ͩ͘͞ɻ ެࣜΠϕϯτΞϓϦͰɺʮde:code 2018 ࢀՃऀΞϯέʔτʢඞਢʣʯ ͱ ʮ֤ηογϣϯ Ξϯέʔτʢ 4 ͭҎ্ʣʯɺ߹Θͤͯ 5

    ͭҎ্ ͷΞϯέʔτʹ͝ճ౴͍ͩ͘͞ɻ΋Εͳ͘ de:code 2018 ΦϦδφϧάοζΛଃఄ͍ͨ͠·͢ɻ Twitter ͷ͝Ҋ಺ ຊηογϣϯʹؔ͢Δ࣭͝໰΍͝ײ૝͸ɺ#decode18 ͱ ηογϣϯ ID ͷ ϋογϡλάͰɺ͝౤ߘΛ͓ئ͍͠·͢ɻ #decode18 #AD16
  73. © 2018 Microsoft Corporation. All rights reserved. ຊ৘ใͷ಺༰ʢఴ෇จॻɺϦϯΫઌͳͲΛؚΉʣ͸ɺ࡞੒೔࣌఺Ͱͷ΋ͷͰ͋Γɺ༧ࠂͳ͘มߋ͞ΕΔ৔߹͕͋Γ·͢ɻ