Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compare Tips

Compare Tips

18ff61878467cbf8c00be0ccf974645a?s=128

kanayannet

July 16, 2017
Tweet

Transcript

  1. Gunma.web #28 @kanayannet kanayannet / compared_tips

  2. 自己紹介 自己紹介 氏名: 金澤 宏昭 twitter: @kanayannet facebook: HiroakiKanazawa kanayannet

    / compared_tips
  3. 比較という意味 比較対象 Vue と Angular kanayannet / compared_tips

  4. 豆知識、ヒントなどを集めたもの 今回の目的: Vue と Angular 比較して役立ちそう なものを集める kanayannet / compared_tips

  5. なぜ話すのか なぜ話すのか Vue と Angular よく解ってない 比較できるほど詳しくない 他の人の記事を参考にしながら.. Tips にできればいいなぁ。

    kanayannet / compared_tips
  6. どの程度解ってないのか どの程度解ってないのか チュートリアルをそれぞれやった程度 kanayannet / compared_tips

  7. チュートリアル チュートリアル Vue.js Angular https://jp.vuejs.org/v2/guide/ https://angular.io/tutorial kanayannet / compared_tips

  8. いくつかの Vue の構文は AngularJS と非常に良く似 ているように見える ソース元 https://jp.vuejs.org/v2/guide/comparison.html kanayannet /

    compared_tips
  9. 例 : v-if と ng-if kanayannet / compared_tips

  10. API と設計の両方の観点から、Vue は AngularJS と 比較してとても単純です。 重要なアプリケーションを構築するために十分学ぶ のには大抵 1 日もかからないでしょう。

    kanayannet / compared_tips
  11. 「大抵 1 日もかからないでしょう。」 kanayannet / compared_tips

  12. 本当か 本当か kanayannet / compared_tips

  13. 本当か? 試しにチュートリアルをやり始める kanayannet / compared_tips

  14. 4-5時間経過 終わらないよ汗 翌日 あと少しで終わりそう... kanayannet / compared_tips

  15. よく見る よく見る 「大抵1日」 kanayannet / compared_tips

  16. よく見ると.. 「大抵」1日 俺が未熟者なのかな〜汗 kanayannet / compared_tips

  17. React、Angularになじめなかった僕に手を差し伸べてくれた Vue.js ソース元 http://qiita.com/samuraikun/items/bb2939296bbead34 kanayannet / compared_tips

  18. 「イケてるフロントエンド開発をちょっと試したい と思っても、BabelやWebpackの設定など環境構築 でつまづき...」 kanayannet / compared_tips

  19. 試しにチュートリアルの初めで比較 kanayannet / compared_tips

  20. Angular git clone cd quickstart npm install npm start https://github.com/angular/quickstart.git

    kanayannet / compared_tips
  21. ああ、なるほど。 node(npm) 当たり前の世界になってるのね。 example https://angular.io/generated/live- examples/toh-pt1/eplnkr.html kanayannet / compared_tips

  22. ちなみに vue はこう <script src="https://unpkg.com/vue"></script> <div id="app"> {{ message }}

    </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> kanayannet / compared_tips
  23. 一応、言っておきます。 解りやすい方が必ずしも良いとは限らないです。 後述でちょっと出ますよ。 kanayannet / compared_tips

  24. 最も勢いのある成長があったフレームワークはvue.jsであ る。 Angular 4のリリースがある。技術的には大きな変化があ るが、それはバージョン1から2ほどの劇的な変化ではな い。 ソース元 https://www.infoq.com/jp/news/2017/01/javascript- 2017-frameworks kanayannet

    / compared_tips
  25. 成長のあったフレームワーク 何をもって? kanayannet / compared_tips

  26. 試しにググった結果 Vuejs 654,000 AngularJS 15,800,000 kanayannet / compared_tips

  27. ??? kanayannet / compared_tips

  28. github の更新履歴 2017 Vuejs 546 Angular 2114 kanayannet / compared_tips

  29. 結局なぜか解らず... kanayannet / compared_tips

  30. Vue.jsから手軽に始めるJavaScriptフレームワーク ソース元 http://qiita.com/icoxfog417/items/49f7301be502bc2a kanayannet / compared_tips

  31. Knockout.js , Angular と比較している Knockout.js IEサポート(6-11) HTML5標準のバインディング v- で始まる属性を設定することでバインディ ングは..

    HTML標準には当然ない属性なのでエディタ によっては警告 kanayannet / compared_tips
  32. Angular.js Directive(v-bindなど)と呼ばれる要素でバイン ディング Filterによるインラインでの処理 Vue との共通点がある kanayannet / compared_tips

  33. Angular.js Routing まるでサーバーサイドのコントローラーのよう なことができる Vue.js には標準でないもの ※ 公式サイトにこれ使えばいいよはある。 https://jp.vuejs.org/v2/guide/routing.html kanayannet

    / compared_tips
  34. Angular.js Testable Angular.jsはモジュール同士が疎結合なので、 テストがしやすい ※ 公式サイトに単体テストのやり方がある https://jp.vuejs.org/v2/guide/unit- testing.html kanayannet /

    compared_tips
  35. いくつかはその通りと感じたが..実際はそうじゃな かったり うーん。ドキュメントが古かった時代なのか な〜? kanayannet / compared_tips

  36. まとめ まとめ どっちがどうなのか?はちょっと触ったくらいじゃ 解らない。 「こっちがいい」的な記事はあるけど、具体的に 「どこを比較して」なのか解りづらい汗 エディタ戦争的なカオスな流れか? kanayannet / compared_tips

  37. 反省点 反省点 記事を色々追って Tips にするつもりが... 何を根拠に言っているのか? 裏をとる作業がメインになってしまった。 kanayannet / compared_tips

  38. 俺だけか 俺だけか 実際どうなんだろ? 根拠があって使っている方の話を聞きたい! kanayannet / compared_tips

  39. kanayannet / compared_tips

  40. これで終わり これで終わり 5分もかかってないだろう? <- ツッコミ kanayannet / compared_tips

  41. もう少し話すよ もう少し話すよ kanayannet / compared_tips

  42. 雑 雑感 感 ※ あくまで @kanayannet 個人の感想 Vue.js の方が入りやすいかな? 理由

    npm なしでもいけそう チュートリアル : 日本語 この二つだけでも学習強度が低い kanayannet / compared_tips
  43. 使いどころ 使いどころ SPA DOMの書き換えが多いページ 双方向データバインディング UIの変更があればデータの更新を自動的に行う 機能 コンポーネント指向 UIコンポーネント(部品)を組み合わせてアプ リケーションを作る

    kanayannet / compared_tips
  44. おっと おっと 上記のワードでググったら比較的良記事が出てきた 学習コスト 制約がなく、シンプルで学習コストが低いのは、 Vue.jsの大きな利点 制約がないということ 制約がないことから、各個人によって書き方に相 違が出やすいことも意識しておいてほしいことで す。

    Web Components を意識? https://app.codegrid.net/entry/vue-1 kanayannet / compared_tips
  45. 以下の4つの仕様を組み合わせた際の総称。 Templates HTML Imports Custom Elements Shadow DOM まだ W3C

    Draft 段階 ソース元 http://gihyo.jp/dev/column/newyear/2017/web- components-prospect kanayannet / compared_tips
  46. 知らない概念 知らない概念 今回最大の収穫かな? 資料作成を目指し調査していく過程... kanayannet / compared_tips

  47. 関係ないけど 関係ないけど 全く関係ない kanayannet / compared_tips

  48. 関係ないけど 関係ないけど このスライド gitpitch で書いてるよ https://gitpitch.com/ kanayannet / compared_tips

  49. 関係ないけど 関係ないけど reveal.js みたい ソース見ると... syntax ハイライトもできる 動画も流せる youtube も簡易的に...

    kanayannet / compared_tips
  50. 動画 動画 kanayannet / compared_tips

  51. ご清 ご清聴 聴 ありがとうご ありがとうご ざいました。 ざいました。 kanayannet / compared_tips

  52. 質疑 質疑応 応答 答 GitPitch 以外なら受け付けます。 GitPitch は懇談会でw kanayannet /

    compared_tips