Compare Tips

Transcript

1. 1.

   Gunma.web #28 @kanayannet kanayannet / compared_tips

2. 2.

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

   / compared_tips
3. 3.

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

4. 4.

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

5. 5.

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

   kanayannet / compared_tips
6. 6.

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

7. 7.

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

8. 8.

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

   compared_tips
9. 9.

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

10. 10.

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

    kanayannet / compared_tips
11. 11.

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

12. 12.

    本当か 本当か kanayannet / compared_tips

13. 13.

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

14. 14.

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

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

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

20. 20.

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

    kanayannet / compared_tips
21. 21.

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

22. 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. 23.

    一応、言っておきます。 解りやすい方が必ずしも良いとは限らないです。 後述でちょっと出ますよ。 kanayannet / compared_tips

24. 24.

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

    / compared_tips
25. 25.

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

26. 26.

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

27. 27.

    ??? kanayannet / compared_tips

28. 28.

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

29. 29.

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

30. 30.

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

31. 31.

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

    HTML標準には当然ない属性なのでエディタ によっては警告 kanayannet / compared_tips
32. 32.

    Angular.js Directive(v-bindなど)と呼ばれる要素でバイン ディング Filterによるインラインでの処理 Vue との共通点がある kanayannet / compared_tips

33. 33.

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

    / compared_tips
34. 34.

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

    compared_tips
35. 35.

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

36. 36.

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

37. 37.

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

38. 38.

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

39. 39.

    kanayannet / compared_tips

40. 40.

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

41. 41.

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

42. 42.

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

    npm なしでもいけそう チュートリアル : 日本語 この二つだけでも学習強度が低い kanayannet / compared_tips
43. 43.

    使いどころ 使いどころ SPA DOMの書き換えが多いページ 双方向データバインディング UIの変更があればデータの更新を自動的に行う 機能 コンポーネント指向 UIコンポーネント（部品）を組み合わせてアプ リケーションを作る

    kanayannet / compared_tips
44. 44.

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

    Web Components を意識? https://app.codegrid.net/entry/vue-1 kanayannet / compared_tips
45. 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. 46.

    知らない概念 知らない概念 今回最大の収穫かな? 資料作成を目指し調査していく過程... kanayannet / compared_tips

47. 47.

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

48. 48.

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

49. 49.

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

    kanayannet / compared_tips
50. 50.

    動画 動画 kanayannet / compared_tips

51. 51.

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

52. 52.

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

    compared_tips