Compare Tips

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. よく見ると.. 「大抵」１日 俺が未熟者なのかな〜汗 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