Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Compare Tips
Search
kanayannet
July 16, 2017
Programming
0
84
Compare Tips
kanayannet
July 16, 2017
Tweet
Share
More Decks by kanayannet
See All by kanayannet
github copilot と 心理的安全性
kanayannet
0
130
FW と ライブラリ の考え方
kanayannet
0
180
TDDと今まで
kanayannet
0
500
個人開発 稼げなくてもいいアプリ
kanayannet
0
490
システムの堅牢性
kanayannet
0
260
Agile的学習方法
kanayannet
0
250
GUIをエンジニアが考える
kanayannet
0
220
http2http3
kanayannet
0
170
old typeからのクラウドインフラ
kanayannet
0
350
Other Decks in Programming
See All in Programming
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
440
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
260
Jakarta EE meets AI
ivargrimstad
0
460
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
Learning Kotlin with detekt
inouehi
1
150
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
5
1.1k
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
Domain-Driven Design (Tutorial)
hschwentner
13
22k
ML.NETで始める機械学習
ymd65536
0
230
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Invisible Side of Design
smashingmag
299
50k
A designer walks into a library…
pauljervisheath
205
24k
The Cult of Friendly URLs
andyhume
78
6.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
How GitHub (no longer) Works
holman
314
140k
Documentation Writing (for coders)
carmenintech
67
4.6k
Rails Girls Zürich Keynote
gr2m
94
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
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