Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Compare Tips
kanayannet
July 16, 2017
Programming
0
56
Compare Tips
kanayannet
July 16, 2017
Tweet
Share
More Decks by kanayannet
See All by kanayannet
http2http3
kanayannet
0
46
old typeからのクラウドインフラ
kanayannet
0
130
疎結合と認知
kanayannet
0
140
クリーンアーキテクチャを活かす考察
kanayannet
1
130
プロジェクト管理ツールの経験則
kanayannet
0
190
TDDと認知
kanayannet
0
210
gunmaweb-serverless
kanayannet
0
140
Animation GIF
kanayannet
0
250
今更聞けないPWA
kanayannet
0
490
Other Decks in Programming
See All in Programming
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
240
Felteで作る簡単フォームバリデーション
kubotak
1
140
Prácticas de Seguridad en Kubernetes
pablokbs
0
110
フロントエンドで学んだことをデータ分析で使ってみた話
daichi_igarashi
0
170
Swift Observation
shiz
3
250
LIFFで動く割り勘アプリTATEKAをリリースしてみた話
inoue2002
0
210
AWSにおける標的型Bot対策
hacomono
0
390
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
【DevFest & ADS JP 22】チームで導入する
[email protected]
おいしい健康
kako351
0
210
新卒2年目がデータ分析API開発に挑戦【Stapy#88】/data-science-api-begginer
matsuik
0
330
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
200
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.1k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
The Invisible Side of Design
smashingmag
292
48k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
Designing for humans not robots
tammielis
245
24k
Building Adaptive Systems
keathley
27
1.3k
GraphQLとの向き合い方2022年版
quramy
20
9.8k
YesSQL, Process and Tooling at Scale
rocio
159
12k
The Art of Programming - Codeland 2020
erikaheidi
35
11k
Bootstrapping a Software Product
garrettdimon
299
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
338
18k
Bash Introduction
62gerente
601
210k
Transcript
Gunma.web #28 @kanayannet kanayannet / compared_tips
自己紹介 自己紹介 氏名: 金澤 宏昭 twitter: @kanayannet facebook: HiroakiKanazawa kanayannet
/ compared_tips
比較という意味 比較対象 Vue と Angular kanayannet / compared_tips
豆知識、ヒントなどを集めたもの 今回の目的: Vue と Angular 比較して役立ちそう なものを集める kanayannet / compared_tips
なぜ話すのか なぜ話すのか Vue と Angular よく解ってない 比較できるほど詳しくない 他の人の記事を参考にしながら.. Tips にできればいいなぁ。
kanayannet / compared_tips
どの程度解ってないのか どの程度解ってないのか チュートリアルをそれぞれやった程度 kanayannet / compared_tips
チュートリアル チュートリアル Vue.js Angular https://jp.vuejs.org/v2/guide/ https://angular.io/tutorial kanayannet / compared_tips
いくつかの Vue の構文は AngularJS と非常に良く似 ているように見える ソース元 https://jp.vuejs.org/v2/guide/comparison.html kanayannet /
compared_tips
例 : v-if と ng-if kanayannet / compared_tips
API と設計の両方の観点から、Vue は AngularJS と 比較してとても単純です。 重要なアプリケーションを構築するために十分学ぶ のには大抵 1 日もかからないでしょう。
kanayannet / compared_tips
「大抵 1 日もかからないでしょう。」 kanayannet / compared_tips
本当か 本当か kanayannet / compared_tips
本当か? 試しにチュートリアルをやり始める kanayannet / compared_tips
4-5時間経過 終わらないよ汗 翌日 あと少しで終わりそう... kanayannet / compared_tips
よく見る よく見る 「大抵1日」 kanayannet / compared_tips
よく見ると.. 「大抵」1日 俺が未熟者なのかな〜汗 kanayannet / compared_tips
React、Angularになじめなかった僕に手を差し伸べてくれた Vue.js ソース元 http://qiita.com/samuraikun/items/bb2939296bbead34 kanayannet / compared_tips
「イケてるフロントエンド開発をちょっと試したい と思っても、BabelやWebpackの設定など環境構築 でつまづき...」 kanayannet / compared_tips
試しにチュートリアルの初めで比較 kanayannet / compared_tips
Angular git clone cd quickstart npm install npm start https://github.com/angular/quickstart.git
kanayannet / compared_tips
ああ、なるほど。 node(npm) 当たり前の世界になってるのね。 example https://angular.io/generated/live- examples/toh-pt1/eplnkr.html kanayannet / compared_tips
ちなみに 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
一応、言っておきます。 解りやすい方が必ずしも良いとは限らないです。 後述でちょっと出ますよ。 kanayannet / compared_tips
最も勢いのある成長があったフレームワークはvue.jsであ る。 Angular 4のリリースがある。技術的には大きな変化があ るが、それはバージョン1から2ほどの劇的な変化ではな い。 ソース元 https://www.infoq.com/jp/news/2017/01/javascript- 2017-frameworks kanayannet
/ compared_tips
成長のあったフレームワーク 何をもって? kanayannet / compared_tips
試しにググった結果 Vuejs 654,000 AngularJS 15,800,000 kanayannet / compared_tips
??? kanayannet / compared_tips
github の更新履歴 2017 Vuejs 546 Angular 2114 kanayannet / compared_tips
結局なぜか解らず... kanayannet / compared_tips
Vue.jsから手軽に始めるJavaScriptフレームワーク ソース元 http://qiita.com/icoxfog417/items/49f7301be502bc2a kanayannet / compared_tips
Knockout.js , Angular と比較している Knockout.js IEサポート(6-11) HTML5標準のバインディング v- で始まる属性を設定することでバインディ ングは..
HTML標準には当然ない属性なのでエディタ によっては警告 kanayannet / compared_tips
Angular.js Directive(v-bindなど)と呼ばれる要素でバイン ディング Filterによるインラインでの処理 Vue との共通点がある kanayannet / compared_tips
Angular.js Routing まるでサーバーサイドのコントローラーのよう なことができる Vue.js には標準でないもの ※ 公式サイトにこれ使えばいいよはある。 https://jp.vuejs.org/v2/guide/routing.html kanayannet
/ compared_tips
Angular.js Testable Angular.jsはモジュール同士が疎結合なので、 テストがしやすい ※ 公式サイトに単体テストのやり方がある https://jp.vuejs.org/v2/guide/unit- testing.html kanayannet /
compared_tips
いくつかはその通りと感じたが..実際はそうじゃな かったり うーん。ドキュメントが古かった時代なのか な〜? kanayannet / compared_tips
まとめ まとめ どっちがどうなのか?はちょっと触ったくらいじゃ 解らない。 「こっちがいい」的な記事はあるけど、具体的に 「どこを比較して」なのか解りづらい汗 エディタ戦争的なカオスな流れか? kanayannet / compared_tips
反省点 反省点 記事を色々追って Tips にするつもりが... 何を根拠に言っているのか? 裏をとる作業がメインになってしまった。 kanayannet / compared_tips
俺だけか 俺だけか 実際どうなんだろ? 根拠があって使っている方の話を聞きたい! kanayannet / compared_tips
kanayannet / compared_tips
これで終わり これで終わり 5分もかかってないだろう? <- ツッコミ kanayannet / compared_tips
もう少し話すよ もう少し話すよ kanayannet / compared_tips
雑 雑感 感 ※ あくまで @kanayannet 個人の感想 Vue.js の方が入りやすいかな? 理由
npm なしでもいけそう チュートリアル : 日本語 この二つだけでも学習強度が低い kanayannet / compared_tips
使いどころ 使いどころ SPA DOMの書き換えが多いページ 双方向データバインディング UIの変更があればデータの更新を自動的に行う 機能 コンポーネント指向 UIコンポーネント(部品)を組み合わせてアプ リケーションを作る
kanayannet / compared_tips
おっと おっと 上記のワードでググったら比較的良記事が出てきた 学習コスト 制約がなく、シンプルで学習コストが低いのは、 Vue.jsの大きな利点 制約がないということ 制約がないことから、各個人によって書き方に相 違が出やすいことも意識しておいてほしいことで す。
Web Components を意識? https://app.codegrid.net/entry/vue-1 kanayannet / compared_tips
以下の4つの仕様を組み合わせた際の総称。 Templates HTML Imports Custom Elements Shadow DOM まだ W3C
Draft 段階 ソース元 http://gihyo.jp/dev/column/newyear/2017/web- components-prospect kanayannet / compared_tips
知らない概念 知らない概念 今回最大の収穫かな? 資料作成を目指し調査していく過程... kanayannet / compared_tips
関係ないけど 関係ないけど 全く関係ない kanayannet / compared_tips
関係ないけど 関係ないけど このスライド gitpitch で書いてるよ https://gitpitch.com/ kanayannet / compared_tips
関係ないけど 関係ないけど reveal.js みたい ソース見ると... syntax ハイライトもできる 動画も流せる youtube も簡易的に...
kanayannet / compared_tips
動画 動画 kanayannet / compared_tips
ご清 ご清聴 聴 ありがとうご ありがとうご ざいました。 ざいました。 kanayannet / compared_tips
質疑 質疑応 応答 答 GitPitch 以外なら受け付けます。 GitPitch は懇談会でw kanayannet /
compared_tips