Enviar búsqueda
Cargar
20140823 LL diver Angular.js で構築した note に関して
•
8 recomendaciones
•
3,618 vistas
Shoei Takamaru
Seguir
20140823 LL diver angular.js で構築したnoteに関して/高丸 翔英 angular の魅力や苦労した点などを解説。
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 51
Descargar ahora
Descargar para leer sin conexión
Recomendados
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Spring Bootキャンプ @関ジャバ #kanjava_sbc
Toshiaki Maki
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Grails 3.0先取り!? Spring Boot入門ハンズオン #jggug_boot
Toshiaki Maki
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Spring4とSpring Bootで作る次世代Springアプリケーション #jjug #jsug
Toshiaki Maki
最近のSpringFramework2013 #jjug #jsug #SpringFramework
最近のSpringFramework2013 #jjug #jsug #SpringFramework
Toshiaki Maki
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
Mojoliciousでつくる! Webアプリ入門
Mojoliciousでつくる! Webアプリ入門
Yusuke Wada
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Webアプリのシナリオテスト自動化を運用に乗せるまでの10のステップ
Naoki Iwami
【Camphor ×サイボウズ】selenium勉強会
【Camphor ×サイボウズ】selenium勉強会
Yuki Okada
Más contenido relacionado
La actualidad más candente
View customize pluginを使いこなす
View customize pluginを使いこなす
onozaty
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
MakotoItoh
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
松田 千尋
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
Tetsuya Tatsumi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
tomo_masakura
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
エピック・ゲームズ・ジャパン Epic Games Japan
Core Graphics on watchOS 2
Core Graphics on watchOS 2
Shuichi Tsutsumi
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
historia_Inc
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Yoshie Kaneno
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
historia_Inc
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
エピック・ゲームズ・ジャパン Epic Games Japan
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Toshiaki Maki
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
HTML5 開発環境の紹介
HTML5 開発環境の紹介
tomo_masakura
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話
Shuichi Tsutsumi
UI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つ
Shuichi Tsutsumi
La actualidad más candente
(20)
View customize pluginを使いこなす
View customize pluginを使いこなす
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
ここが変わる!Unity 5のスマホ開発 ~アセットバンドル、ビルド、プラグイン~
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
Mojolicious+redisでチャットを作った
Mojolicious+redisでチャットを作った
Angular2実践入門
Angular2実践入門
今流行りのウェブアプリ開発環境Yeoman
今流行りのウェブアプリ開発環境Yeoman
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
かわいい女の子になりたいんや! UE4の最新機能を使ってVTuberしてみた!
Core Graphics on watchOS 2
Core Graphics on watchOS 2
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
少人数開発でもクオリティを諦めない - エンジニア視点から見る少人数開発の極意 -
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
Megascansを使った効率化と楽しい絵作り ~Cutting-Edge Test Drive制作事例~
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
視聴者参加型のライブ動画を実現!GenvidをUE4に実装する方法 | UNREAL FEST EXTREME 2020 WINTER
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Java + React.jsでSever Side Rendering #reactjs_meetup
Java + React.jsでSever Side Rendering #reactjs_meetup
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
HTML5 開発環境の紹介
HTML5 開発環境の紹介
watchOS 2 新機能の細かい話
watchOS 2 新機能の細かい話
UI/UX に影響の大きい watchOS 2 の新機能 3つ
UI/UX に影響の大きい watchOS 2 の新機能 3つ
Destacado
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
Jun-ichi Sakamoto
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
Narami Kiyokura
秒速一億円
秒速一億円
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
Jun-ichi Sakamoto
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Reactive Programming
Reactive Programming
maruyama097
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
Jun-ichi Sakamoto
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
AngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
Filipe Falcão
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
Jun-ichi Sakamoto
Gulp ことはじめ
Gulp ことはじめ
Kyohei Morimoto
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
TypeScript And ALM
TypeScript And ALM
Kazushi Kamegawa
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編
Jun-ichi Sakamoto
Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)
Kazuhide Maruyama
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
Destacado
(20)
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
秒速一億円
秒速一億円
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Reactive Programming
Reactive Programming
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
はじめにことばありき
はじめにことばありき
AngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
20130921レジュメ2
20130921レジュメ2
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
Gulp ことはじめ
Gulp ことはじめ
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
TypeScript And ALM
TypeScript And ALM
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編
Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)
変身×フランツ・カフカ
変身×フランツ・カフカ
Similar a 20140823 LL diver Angular.js で構築した note に関して
20140529 JS Ojisan #2 LT あの「note」はAngular.js
20140529 JS Ojisan #2 LT あの「note」はAngular.js
Shoei Takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
Shoei Takamaru
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話
makoto ikezoe
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略
Tsuji Yuko
JobScheduler Code Reading
JobScheduler Code Reading
Shinobu Okano
PythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEG
Jun Okazaki
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Yossy Taka
Js ojisan codereview-oppaijs
Js ojisan codereview-oppaijs
Kei Takahashi
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
Tomoki Hasegawa
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
Takuma Morikawa
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
システム開発を前進させるためのGradle導入法
システム開発を前進させるためのGradle導入法
Takuma Watabiki
Xcode で gulp を使うお話
Xcode で gulp を使うお話
Yoichiro Sakurai
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Kohei Saito
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
Etsushi Ishii
ABC2012Spring 20120324
ABC2012Spring 20120324
Tak Inamori
oFの話題が殆ど出ない oF jp Summer Workout
oFの話題が殆ど出ない oF jp Summer Workout
Tsuubito Ishii
Similar a 20140823 LL diver Angular.js で構築した note に関して
(20)
20140529 JS Ojisan #2 LT あの「note」はAngular.js
20140529 JS Ojisan #2 LT あの「note」はAngular.js
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
Bitbucket pipelines を使ってみた話
Bitbucket pipelines を使ってみた話
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
食べログのフロントエンドリプレース戦略
食べログのフロントエンドリプレース戦略
JobScheduler Code Reading
JobScheduler Code Reading
PythonのGUI_2018 with NSEG
PythonのGUI_2018 with NSEG
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Js ojisan codereview-oppaijs
Js ojisan codereview-oppaijs
Objective-Cプログラマのためのswift導入法
Objective-Cプログラマのためのswift導入法
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
noteをAngularJSで構築した話
noteをAngularJSで構築した話
システム開発を前進させるためのGradle導入法
システム開発を前進させるためのGradle導入法
Xcode で gulp を使うお話
Xcode で gulp を使うお話
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
Dockerで始める Java EE アプリケーション開発 for JJUG CCC 2017
a-blogcsm な寺子屋 2 in Okazaki
a-blogcsm な寺子屋 2 in Okazaki
ABC2012Spring 20120324
ABC2012Spring 20120324
oFの話題が殆ど出ない oF jp Summer Workout
oFの話題が殆ど出ない oF jp Summer Workout
Último
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
yoshidakids7
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG-Audio
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
ssuserf8ea02
チームで開発するための環境を整える
チームで開発するための環境を整える
onozaty
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
sugiuralab
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
Naomi Yamasaki
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
IGDA Japan SIG-Audio
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
iPride Co., Ltd.
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
Takayuki Nakayama
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
honeshabri
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
Hideki Saito
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
iPride Co., Ltd.
Último
(12)
The 86th National Convention of IPSJ (Student Encouragement Award))
The 86th National Convention of IPSJ (Student Encouragement Award))
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
IGDA Japan SIG Audio #22 オンラインセミナー VRの知る.pdf
00001_test_automation_portfolio_20240313
00001_test_automation_portfolio_20240313
チームで開発するための環境を整える
チームで開発するための環境を整える
バイオリンの運弓動作計測による初心者と経験者の差異分析
バイオリンの運弓動作計測による初心者と経験者の差異分析
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
JAWS DAYS 2024 E-3 ランチにまつわるちょっといい話 〜給食がない町の小中学生に温かい昼食を〜
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
SIG-AUDIO 2024 Vol.02 オンラインセミナー 「必殺使音人(ひっさつしおとにん)カットシーンを成敗せよ」
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キンドリル_ネットワーク自動化成熟度診断サービス ご紹介資料 2024年3月版
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
キャラで動かすGPT ~GPTsでどんな感じに作っているとか考えていることとか~
これからはじめるAnsible - Ansible Night Tokyo 2024
これからはじめるAnsible - Ansible Night Tokyo 2024
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
20140823 LL diver Angular.js で構築した note に関して
1.
Angular.jsで構築した! noteに関して Shoei Takamaru (@takamario)
2.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Agenda • 自己紹介・サービス紹介 • Angular.jsの紹介 • Angular.jsを使って良かった点・苦労した点 • まとめ 2
3.
自己紹介
4.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Who are you? • 高丸 翔英 (たかまる しょうえい, @takamario)! • エンジニア (フロントエンド寄り?)! • 2014年1月 ピースオブケイク入社 4
5.
サービス紹介
6.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Our Services • デジタルコンテンツ配信プラットフォーム Cakes (ケイクス) 2012年9月リリース https://cakes.mu/! ! • クリエイターと読者をつなげるサイト! ! • 週額150円 / 月額500円で全記事読み放題 6
7.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Our Services • note (ノート) 2014年4月リリース https://note.mu/! • 個人でコンテンツが100円から販売可能 7
8.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Got a lot of feedback • いろいろなメディアで取り上げていただきました • リリース1ヶ月で2,000万PV、100万UU 達成 • 売れる人の中には、月10万円ほど稼いでいる人も 8
9.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Got a lot of feedback • リリース時に発生していたXSSが twitterで話題に (即日対応) • DM等で、ご連絡いただいた方、体 を張って試していただいた方、あり がとうございました • 「Angular 適切に使ってXSS発生す るの?」 → しません、僕が適切に使ってま せんでした。。 9
10.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Got a lot of feedback • 2014年7月30日 ワールドビジネスサテライト http://www.tv-tokyo.co.jp/mv/wbs/newsl/post_71737/ • 2014年8月5日 エンジニアtype http://engineer.typemag.jp/article/sadoshimavskato 10
11.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Got a lot of feedback • 芸能人アカウントも続々 11 伊集院光さん ロンブー田村淳さんくるりさん GLAY HISASHIさん
12.
Copyright © Piece
of Cake, Inc. All Rights Reserved. News • くるり公式ファンクラブ 純情息子がnoteに移行 • 会報、オフショット、 チケット先行予約案内など すべてがnote上で! 12
13.
Copyright © Piece
of Cake, Inc. All Rights Reserved. News • 山本さほさんのマンガ 岡崎に捧ぐがヒット! https://note.mu/sahoobb/m/ m6d7f0f032e74 • 80年代生まれの人に 多く共感される • 今後は一般の方の作品が 爆発的に売れる可能性も! 13
14.
noteの開発体制と システム構成
15.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Our Dev Team and System • CTO (SGP) x 1 • エンジニア (JPN) x 3 (高丸を含む) • デザイナー (JPN) x 2 • iPhone App エンジニア (SGP) x 1 • and ディレクター、ユーザサポート(JPN) • Ruby on Rails + Angular.js + MySQL + Redis + ElasticSearch • AWS • Github + HipChat + Jenkins 15
16.
Angular.js
17.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Why Angular? • 使ってみたかったから!(70%) • SPAのUIに惹かれて (20%) • API層を結局作るので (10%) 17 最初の想い
18.
他にも フレームワークはある
19.
Copyright © Piece
of Cake, Inc. All Rights Reserved. jQuery 19 $('button.like-button').click(function(){ // Call `Like` API $.ajax() .done(function(){ $(this).addClass('active'); }); }); $('input.comment-form') .keypress(function(e){ // Press Enter then submit if (e.which === 13) $.ajax(); // Comment API }); jQueryって こんなに簡単だけど 結果、煩雑になる
20.
Copyright © Piece
of Cake, Inc. All Rights Reserved. jQuery pros/cons • 超簡単 20 良い所 悪い所 • フレームワークじゃない • ルールがないから、煩雑になる
21.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Backbone.js 21 var Like = Backbone.Model.extend({ url: '/like' }); ! var LikeButton = Backbone.View.extend({ el: $('button.like-button'), ! events: { 'click button.like-button': 'addLike' }, ! addLike: function() { Like.save(); $(this.el).addClass('active'); } }); <script type=“text/template" id=“tmpl-like-button" > <button class=“like-button"> スキ </button> </script> よりオブジェクトっぽい使い方
22.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Backbone pros/cons • 正統派、JSっぽい • 軽い、導入しやすい • フレームワークを使うことで、開発ルールが決まる 22 良い所 悪い所 • イベントのバインディングが面倒 • Getter / Setter は面倒
23.
そこで
24.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Angular.js 24 <div class="note" ng-controller="NoteCtrl"> <div class="datetime">{{ note.published_at | date:'yyyy/MM/dd'}}</div> <p class="talk">{{ note.body }}</p> ! <button class="like-button" ng-click="likeNote()"> ! <div class="comment"> <input class="comment-form" ng-model="comment"> </div> </div> var noteApp = angular.module('noteApp',[]); ! myApp.controller('NoteCtrl', [ '$scope', function($scope, $http) { $scope.likeNote = function() { $http.post('like'); }; } ]);
25.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Angular.js 25 注目すべき点 • HTMLがそのままテンプレートに • インラインでイベントバインディング(ng-click等) インラインでviewとmodelのバインディング(ng-model) • Model 側であった変更が、View に伝わる View 側であった変更が、Model に伝わる (2-way Data binding)
26.
Copyright © Piece
of Cake, Inc. All Rights Reserved. The 1st Month of Development • あ、意外と書けるかも、HTMLにコード書くっていいね • 2 way-binding マジ楽 コード書いてないけど、勝手にここの値も変わってくれるし 26 Controller を作り、ModelとViewを対応させるのは簡単 デザイナーがHTMLを作成/修正 エンジニアがng-xxxxを付ける/移動する スピーディな開発
27.
でも
28.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Fat controller 28 var noteApp = angular.module('noteApp',[]); myApp.controller('NoteCtrl', [‘$scope', function($scope) { $scope.method1 = function() { // do something }; $scope.method2 = function() { // do something }; $scope.method3 = function() { // do something }; $scope.method4 = function() { // do something }; $scope.method5 = function() { // do something }; ・・・ } ]); メソッドずらり。。 重複してるメソッドも散財。。 → Services や Directives に移すべき
29.
Copyright © Piece
of Cake, Inc. All Rights Reserved. The 2nd Month of Development • そういえば、AngularってDirectivesってあるじゃん • すげえ、属性つけるだけでちゃんと動いてくれるよ! • これ、つまり controller に書かなくて良くない!? • 使いまわせるね 29 Directives
30.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Directives (restrict: ‘A’) 30 <div class="note" ng-controller="NoteCtrl"> <div class="datetime">{{note.published_at | date:'yyyy/MM/dd'}}</div> <p class="talk">{{note.body}}</p> ! <button class="like-button" like-button likable=“note”> ! <div class="comment"> <input class="comment-form" comment-form commentable=“note” enter-submit> </div> </div> noteApp.directive('likeButton', function() { return { restrict: 'A', scope: { likable: ‘=' }, link: function(scope, element, attrs) { element.click(function(){}); } }; }); Directives DirectivesDirectives Directives Directives
31.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Directives (restrict: ‘A’) 31 <div class="note" ng-controller="NoteCtrl"> <div class="datetime">{{note.published_at | date:'yyyy/MM/dd'}}</div> <p class="talk">{{note.body}}</p> ! <button class="like-button" like-button likable=“note”> ! <div class="comment"> <input class="comment-form" comment-form commentable=“note” enter-submit> </div> </div> 関数名 引数 のイメージ controller と directive の scope をうまく共有するためには 引数をうまく使うこと
32.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Directives (restrict: ‘E’) 32 <note-card note="note"> <datetime format="yyyy/MM/dd"> <p class="talk">{{note.body}}</p> <like-button likable="note"> ! <comment-form commentable=“note”> </note-card> 独自のタグが使える noteApp.directive('likeButton', function() { return { restrict: 'E', template: ‘<button class=“like-button”></button>’ }; });
33.
Copyright © Piece
of Cake, Inc. All Rights Reserved. The 3rd Month of Development • そういえば、他のブラウザは? (みんなChrome使用) • Firefox:ちょいバグあるぐらい • Safari:割と動いてる • IE:え、IE? 33 テスト真っ最中、バグは多い。。
34.
Copyright © Piece
of Cake, Inc. All Rights Reserved. What’s IE? 34 IEを斬る!!
35.
Copyright © Piece
of Cake, Inc. All Rights Reserved. TextNote Editor 35 • Mediumライクな WYSIWYGエディタ (contenteditable) • 生JS MVCじゃなくて、DOM いじりばっかり • クロスブラウザ対応難 しい
36.
Copyright © Piece
of Cake, Inc. All Rights Reserved. The 3rd Month of Development • ボットのためにJS動かさないとね • Google と Yahoo! と Bing と? • Facebook? • はてな?Pocket? 36 SEO対策は?
37.
Copyright © Piece
of Cake, Inc. All Rights Reserved. OGP • 初期には、 Phantom JS で Angular を レンダリングする荒技を検討 • が、OGP bot ごとに対応が必要 • 2段階で来るbotも。。 • サーバサイドで返すように修正 しました 37 Phantom JS (w/ cache)
38.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Recently • scope が watch しなければいけない対象が増えると Angular は極端に遅くなる (例:Infinite Pager でもっと見る) • 高速化に関して (@konpyu) http://www.slideshare.net/KonYuichi/speeding-up- angularjs 38 パフォーマンスが落ちてきている
39.
Angular まとめ
40.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Angular Pros/Cons • HTML + JS の開発は速い(気がする)、noteリリースはAngularのおかげ • 2 Way Data Binding は幸せになれる • 学習コストは突然高くなる マスターするならscopeとdirectiveの理解を集中的に • Phantom JS で OGPは荒業よ • ある程度に行くとパフォーマンスチューニングが必要 • IE は 名称が変わります 40
41.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Future of JS • DHH は JS MVCフレームワーク嫌いらしい http://signalvnoise.com/posts/3697-server-generated-javascript-responses • HTML/JS分離の時代から、HTML + JSの部品の時代 • Google さんの時代 • Polymer → 部品化、再利用性の向上 • Dart → JSのパフォーマンス向上 • HTTP2.0 (SPDY) → セキュア、つなぎっぱ • Wear → どこでも、どのデバイスでも 41
42.
最後に
43.
Copyright © Piece
of Cake, Inc. All Rights Reserved. We’re hiring! • ピースオブケイクではエンジニアを募集しています! • cakesとnoteを支えるサーバーサイドエンジニアを募集! https://www.wantedly.com/projects/9689 • cakesとnoteを開発したいJavaScriptエンジニアさん大募集! https://www.wantedly.com/projects/7198 • noteのiOS/Androidアプリをつくりたいエンジニアさん大募集! https://www.wantedly.com/projects/7199 43
44.
Thank you for
listening!
45.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Appendix - Scope • Scope を制するものは、Angular を制す (と思ってる) • qiita: Angular JS で複数のコントローラ間でモデル(状 態や値)を共有する方法 3 種類 http://qiita.com/sunny4381/items/aeae1e154346b5cf6009 45 Scope
46.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Appendix - Scope 46 Upper Controller Lower Controller Main Controller Event 遠く離れたスコープでも共有 可能、上書きの危険性もない ! JSっぽい ! 双方向のコードを書く必要が あるので、Angular ではあま り使わない方が良い http://plnkr.co/edit/ 7sD1JvA6TtKbkDBlZWLq?p=preview
47.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Appendix - Scope 47 Upper Controller Lower Controller Main Controller Service 部品と部品をつなぐ ! DI するだけで使用可能 ! 結局グローバル変数と 変わらない (上書き注意) http://plnkr.co/edit/ ajKnEz3jfMtpEG7aZ5kO?p=preview Service
48.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Appendix - Scope 48 Upper Controller Lower Controller Main Controller Angular の機構を そのまま利用 ! Angular 推奨 ! 子は、親のスコープが見える ! http://plnkr.co/edit/ znYpEq4ibzUFIBSOwK2Y?p=preview ! http://plnkr.co/edit/ AxCPK6YrmTKsjhQtT8f1?p=preview Parent / Child Scope
49.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Appendix - Reusability • いかに、再利用性を高めるか Controller だけだとつらい • コメント、Like、フォロー等々、いつどこに置くかもし れないものは Directive に • ただ、基本的な設計は、function の設計と変わらない (インターフェースが汎用的かどうか) 49 Directive / Service
50.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Appendix - Libraries • angular-ui/bootstrap https://github.com/angular-ui/bootstrap • angular-ui/ui-router https://github.com/angular-ui/ui-router • danialfarid/angular-file-upload https://github.com/danialfarid/angular-file-upload 50
51.
Copyright © Piece
of Cake, Inc. All Rights Reserved. Appendix - Books • ng-book https://www.ng-book.com/ ! • AngularJSアプリケーション開発ガイド http://www.amazon.co.jp/dp/4873116678 51
Descargar ahora