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. 10.
  2. 11.
  3. 12.
  4. 14.
  5. 15.
  6. 19.
  7. 20.
  8. 22.

    Web Components Custom Elements
 HTML Templates
 HTML Imports
 Shadow DOM

    ϐʔεʹ໊લΛ෇͚Δ
 ϐʔεͷ໛༷
 ϐʔεΛύζϧʹ͸ΊΔ
 ϐʔεͰ͋Δ͜ͱΛओு
  9. 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>
  10. 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>
  11. 28.
  12. 42.
  13. 43.

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

    $ cd hello-vue $ yarn serve <script scoped> … <script>
  14. 44.
  15. 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}
  16. 49.

    App.css /* .App-logo { */ .AppLogo { animation: App-logo-spin infinite

    20s linear; height: 80px; } /* .App-header { */ .AppHeader { ackground-color: #222; height: 150px;
  17. 50.
  18. 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.
  19. 54.
  20. 57.
  21. 58.
  22. 61.
  23. 62.
  24. 63.
  25. 64.
  26. 65.
  27. 67.
  28. 68.
  29. 71.

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

    Room ʹ ༻ҙ͓ͯ͠Γ·͢ɻηογϣϯ಺༰ͷΑΓਂ͍ ཧղͷͨΊɺͥͻ͓໾ཱ͍ͯͩ͘͞ɻ ▪ ʮAsk The Speakersʯ Room
  30. 72.

    ηογϣϯΞϯέʔτʹ͝ڠྗ͍ͩ͘͞ɻ ެࣜΠϕϯτΞϓϦͰɺʮde:code 2018 ࢀՃऀΞϯέʔτʢඞਢʣʯ ͱ ʮ֤ηογϣϯ Ξϯέʔτʢ 4 ͭҎ্ʣʯɺ߹Θͤͯ 5

    ͭҎ্ ͷΞϯέʔτʹ͝ճ౴͍ͩ͘͞ɻ΋Εͳ͘ de:code 2018 ΦϦδφϧάοζΛଃఄ͍ͨ͠·͢ɻ Twitter ͷ͝Ҋ಺ ຊηογϣϯʹؔ͢Δ࣭͝໰΍͝ײ૝͸ɺ#decode18 ͱ ηογϣϯ ID ͷ ϋογϡλάͰɺ͝౤ߘΛ͓ئ͍͠·͢ɻ #decode18 #AD16