Enviar pesquisa
Carregar
Angular js or_backbonejs
•
30 gostaram
•
11,817 visualizações
Omasa Yusaku
Seguir
jsCafe vol.8 LT
Leia menos
Leia mais
Tecnologia
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 32
Recomendados
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
Backbone.js入門
Backbone.js入門
AdvancedTechNight
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
Start React with Browserify
Start React with Browserify
Muyuu Fujita
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
Recomendados
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
Backbone.js入門
Backbone.js入門
AdvancedTechNight
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
Start React with Browserify
Start React with Browserify
Muyuu Fujita
実践Backbone.Marionette 現場の悩みと解決まで
実践Backbone.Marionette 現場の悩みと解決まで
Ryuma Tsukano
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
モテる JavaScript
モテる JavaScript
Osamu Monoe
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介
Yusuke Hirao
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
Mais conteúdo relacionado
Mais procurados
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
JavaScriptことはじめ
JavaScriptことはじめ
Yuki Ishikawa
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
モテる JavaScript
モテる JavaScript
Osamu Monoe
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介
Yusuke Hirao
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Yuki Minakawa
Mais procurados
(20)
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
JavaScriptことはじめ
JavaScriptことはじめ
2時間で学ぶjQuery
2時間で学ぶjQuery
モテる JavaScript
モテる JavaScript
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
React を導入したフロントエンド開発
React を導入したフロントエンド開発
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
Kawaz的jQuery入門
Kawaz的jQuery入門
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
20160927 reactmeetup
20160927 reactmeetup
今からでも遅くない! React事始め
今からでも遅くない! React事始め
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
SEOとJava Script。 〜文書構造とチームと、時々、闇〜
Semelhante a Angular js or_backbonejs
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
R5 3 type annotation
R5 3 type annotation
EIICHI KIMURA
JRoRの力をJava EE技術を使ってさらに高める10の方法(発動編)
JRoRの力をJava EE技術を使ってさらに高める10の方法(発動編)
Yoshiharu Hashimoto
20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka
Seiji Noro
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Muneaki Nishimura
Spine入門
Spine入門
AdvancedTechNight
Alt01-LT
Alt01-LT
Yuta Hiroto
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
Hirata Tomoko
20130511 jjug ccc講演 さらばjsp JAXBとmixer2
20130511 jjug ccc講演 さらばjsp JAXBとmixer2
Y Watanabe
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
WebXR TechTokyo #3 in Cluster発表資料
WebXR TechTokyo #3 in Cluster発表資料
WheetTweet
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
EKSを動かしてみた話
EKSを動かしてみた話
Yasuaki Sera
Azure MLやってみよう
Azure MLやってみよう
A AOKI
ななめ45°から見たJavaOne
ななめ45°から見たJavaOne
AdvancedTechNight
Groovyコンファレンス
Groovyコンファレンス
Shinichiro Takezaki
Semelhante a Angular js or_backbonejs
(20)
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
R5 3 type annotation
R5 3 type annotation
JRoRの力をJava EE技術を使ってさらに高める10の方法(発動編)
JRoRの力をJava EE技術を使ってさらに高める10の方法(発動編)
20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
そろそろ押さえておきたい AngularJSのセキュリティ
そろそろ押さえておきたい AngularJSのセキュリティ
Spine入門
Spine入門
Alt01-LT
Alt01-LT
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Railsのフロントエンド開発を考える
Railsのフロントエンド開発を考える
20130511 jjug ccc講演 さらばjsp JAXBとmixer2
20130511 jjug ccc講演 さらばjsp JAXBとmixer2
Re-frame and A-Frame
Re-frame and A-Frame
WebXR TechTokyo #3 in Cluster発表資料
WebXR TechTokyo #3 in Cluster発表資料
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
EKSを動かしてみた話
EKSを動かしてみた話
Azure MLやってみよう
Azure MLやってみよう
ななめ45°から見たJavaOne
ななめ45°から見たJavaOne
Groovyコンファレンス
Groovyコンファレンス
Último
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
Último
(9)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
Angular js or_backbonejs
1.
AngularJS or BackboneJS jsCafe vol.8 @taise_515 どっちがお好み?
2.
Who am I First
LT time for me
3.
Yusaku Omasa プログラマー 某金融系のシステム開発 Twitter: @taise_515 最近RubyistからJavaScripterに
4.
ちかごろ JavaScriptMV* FrameWork っていろいろありますよね…
5.
JavaScriptMV* FrameWorks Backbone.js Spine.js Knockout.js Ember.js Angular.js and more
...
6.
いろいろでてるけど 結局どれつかったら いいわけ?
7.
それなら比較してみよう 全部は無理だから人気なもの2つを
8.
according to Backbone.js 14,350 Spine.js
2,357 Knockout.js 3,760 Ember.js 7,138 Angular.js 10,266 stars
9.
according to Backbone.js 14,350 Spine.js
2,357 Knockout.js 3,760 Ember.js 7,138 Angular.js 10,266 1 2
10.
ということで AngularJS と BackboneJS 比較してみた
11.
AngularJS まずは
12.
AngularJS カスタムタグ/属性によるHTMLのテンプレート化 双方向バインディングによるDOMの書き換え 一通りの機能がそろってる (モデル、ビュー、コントローラ、ルーティング、テンプレート) テストもサポートしてる 特徴
13.
開始処理 1. ブラウザがHTMLからDOMを作る 2. AngularJSがDOMを読み込む 3.
ng-appで指定されたタグ以下を スコープにセットする 4. コンパイル 5. 動的にDOMを生成する 6. イベント監視して即時でDOMを更新 http://docs.angularjs.org/guide/concepts 詳しくはここ(英語) AngularJS
14.
え、コンパイルして 動的にDOMを生成? AngularJS
15.
動的にDOMを生成して、 HTMLをテンプレートとして使う http://jsfiddle.net/taise/aaBRq/ コンパイル前 <p>名前:{{data}}</p> コンパイル後 <p class="ng-binding">名前:</p> 〜〜〜〜〜 〜〜〜〜〜〜 バインディング AngularJS
16.
http://angularjs.org/公式サイト: Todoアプリ HTML 1.<div ng-controller="TodoCtrl"> 2. <ul> 3.
<li ng-repeat="todo in todos"> 4. <input type="checkbox" ng-model="todo.done"> 5. <span class="done-{{todo.done}}">{{todo.text}}</span> 6. </li> 7. </ul> 8. <form ng-submit="addTodo()"> 9. <input type="text" ng-model="todoText"> 10. <input class="btn-primary" type="submit" value="add"> 11. </form> 12.</div> 公式のものから少し変更してます http://jsfiddle.net/taise/Mz2QH/4/ AngularJS
17.
http://angularjs.org/公式サイト: Todoアプリ JavaScript 1.function TodoCtrl($scope) { 2.
$scope.todos = [{text:'あんぎゅらーを学ぶ', 3. done:true}]; 4. 5. $scope.addTodo = function() { 6. $scope.todos.push({text:$scope.todoText, 7. done:false}); 8. $scope.todoText = ''; 9. }; 10.} 公式のものから少し変更してます AngularJS
18.
コード量が少ない! チュートリアルもわかりやすい! 少し難しいことをしようとしたとたん 急に難しくなる! 実は・・・でも AngularJS
19.
最初は処理のイメージができない => 仕様が膨大で学習コストが高いかも jQueryのDOM操作が推奨されない 日本語のドキュメントが少ない (でも英語のものは多いです) 難しさ AngularJS
20.
Formが多い => 豊富なフィルターやバリデートが活かせる やりたいことがコンポーネントにある => angular-uiがとても強力
(gridとか) 向いてるアプリ AngularJS 向いていないアプリ DOMをゴリゴリ操作したいもの => ゲーム等はjQueryの方が良いと公式ドキュメントに書いている
21.
つぎは BackboneJS
22.
シンプルなMVCパターン RESTfulなJSONインターフェースをModelが持ってる 組み方が自由なため、複雑な実装も構造化しやすい 日本語のドキュメントも多く学習がしやすい BackboneJS 特徴
23.
BackboneJS よくある処理パターン 1. ViewがDOMとModelの イベントを監視 2. DOMイベントで Modelを操作 3.
Modelの操作で 別のイベントが発火 4. テンプレートを使って Model操作をDOMに反映
24.
Viewで監視してる イベントが起点になってる BackboneJS
25.
BackboneJS 自由度が高いので 逆に見通しの悪いコードになることも ベストプラクティスの理解が超重要 そのため p.23の図のイメージ
26.
ベストプラクティスを学ぶには BackboneJS 公式サンプルのTodoアプリの写経してみる Backbone.jsガイドブックの解説がとても良い => ベストプラクティスだけでなく 仕様の意図やアンチパターンまで書かれている 出版社から直接購入すると PDFがもらえるらしい…
27.
向いてるアプリ BackboneJS JavaScriptをたくさん書くものだったら RESTful + ActiveRecordパターンと相性抜群 =>
公式でもやたらRailsと併用について補足している 向いていないアプリ Modelの項目がたくさんあるものはViewとの バインディングが辛いかも
28.
ほかのMV*もあるけど 結局どれつかったら いいわけ?
29.
http://todomvc.com/ Todoアプリの比較ができるプロジェクト メジャーなMV*は一通りそろってる
30.
それでも どれ使えばよいかわからない という方もいるでしょう
31.
BackboneJSまずは から AngularJS シンプルな MV*でうれしさを感じてみる それから
をやる タイプが違うMV*で理解を深める
32.
enjoy JavaScript &
MV*