Enviar pesquisa
Carregar
JavaScriptトレンド総括(2014)
•
1 gostou
•
1,451 visualizações
VOYAGE GROUP
Seguir
Vista de apresentação de diapositivos
Denunciar
Compartilhar
Vista de apresentação de diapositivos
Denunciar
Compartilhar
1 de 50
Baixar agora
Baixar para ler offline
Recomendados
Data Engineering at VOYAGE GROUP #jawsdays
Data Engineering at VOYAGE GROUP #jawsdays
Kenta Suzuki
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
gulp芸
gulp芸
Yuki Ishikawa
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Recomendados
Data Engineering at VOYAGE GROUP #jawsdays
Data Engineering at VOYAGE GROUP #jawsdays
Kenta Suzuki
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
2016/05/01 Visual Studio with Cordova
2016/05/01 Visual Studio with Cordova
miso- soup3
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
gulp芸
gulp芸
Yuki Ishikawa
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Yuki Ishikawa
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
Kenta Suzuki
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
Takuro Sasaki
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
Jenkinsとhadoopを利用した継続的データ解析環境の構築
Jenkinsとhadoopを利用した継続的データ解析環境の構築
VOYAGE GROUP
開発環境をDockernizeした話
開発環境をDockernizeした話
Yutaka Horikawa
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
Takao Tetsuro
React.js + Flux
React.js + Flux
dsuke Takaoka
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
Yutaka Horikawa
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
Hiroshi Hayakawa
Micronaut on Azure 試してみた
Micronaut on Azure 試してみた
拓将 平林
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
.NETラボ2021年10月 .NETの過去と現在
.NETラボ2021年10月 .NETの過去と現在
TomomitsuKusaba
アジャイルマインドの重要性(長野)
アジャイルマインドの重要性(長野)
Akiyah
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
VOYAGE GROUP
Mais conteúdo relacionado
Mais procurados
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
Shohei Saeki
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Yuki Ishikawa
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
Kenta Suzuki
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
Takuro Sasaki
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
Jenkinsとhadoopを利用した継続的データ解析環境の構築
Jenkinsとhadoopを利用した継続的データ解析環境の構築
VOYAGE GROUP
開発環境をDockernizeした話
開発環境をDockernizeした話
Yutaka Horikawa
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
Takao Tetsuro
React.js + Flux
React.js + Flux
dsuke Takaoka
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
Yutaka Horikawa
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
Hiroshi Hayakawa
Micronaut on Azure 試してみた
Micronaut on Azure 試してみた
拓将 平林
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
.NETラボ2021年10月 .NETの過去と現在
.NETラボ2021年10月 .NETの過去と現在
TomomitsuKusaba
Mais procurados
(20)
React.js + Reduxで作るSPA
React.js + Reduxで作るSPA
オフラインファーストの思想と実践
オフラインファーストの思想と実践
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
サーバを運用する時代は終わった
サーバを運用する時代は終わった
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Swaggerで始めるモデルファーストなAPI開発
Swaggerで始めるモデルファーストなAPI開発
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Jenkinsとhadoopを利用した継続的データ解析環境の構築
Jenkinsとhadoopを利用した継続的データ解析環境の構築
開発環境をDockernizeした話
開発環境をDockernizeした話
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
WebAssemblyとBlazor 、WebAssembly System Interfaceでコンテナライズの設計を解説
React.js + Flux
React.js + Flux
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
フロントエンドの技術を刷新した話し。
フロントエンドの技術を刷新した話し。
Oracleがnode.jsをやり始めたというのだが!
Oracleがnode.jsをやり始めたというのだが!
Micronaut on Azure 試してみた
Micronaut on Azure 試してみた
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
.NETラボ2021年10月 .NETの過去と現在
.NETラボ2021年10月 .NETの過去と現在
Destaque
アジャイルマインドの重要性(長野)
アジャイルマインドの重要性(長野)
Akiyah
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
VOYAGE GROUP
Twilio client for android
Twilio client for android
Hiasyoshi Suehiro
Agavi update-2011 at PHP Conference Japan 2011
Agavi update-2011 at PHP Conference Japan 2011
Koichi Tanaka
[Phpカンファレンス関西2014 lt]動けばいいじゃない
[Phpカンファレンス関西2014 lt]動けばいいじゃない
Koichi Tanaka
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
PHPカンファレンス関西2012 Silex
PHPカンファレンス関西2012 Silex
Masao Maeda
アジャイルプロセス協議会の紹介
アジャイルプロセス協議会の紹介
Akiyah
10 years devsumi agile and the future
10 years devsumi agile and the future
Kenji Hiranabe
フラットなPHPからフレームワークへ
フラットなPHPからフレームワークへ
Masao Maeda
Validações no Ruby on Rails
Validações no Ruby on Rails
Eduardo Mendes
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
SQLアンチパターン メンター用資料
SQLアンチパターン メンター用資料
Hironori Miura
Destaque
(13)
アジャイルマインドの重要性(長野)
アジャイルマインドの重要性(長野)
AWS SDK for Go in #jawsmeguro
AWS SDK for Go in #jawsmeguro
Twilio client for android
Twilio client for android
Agavi update-2011 at PHP Conference Japan 2011
Agavi update-2011 at PHP Conference Japan 2011
[Phpカンファレンス関西2014 lt]動けばいいじゃない
[Phpカンファレンス関西2014 lt]動けばいいじゃない
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
PHPカンファレンス関西2012 Silex
PHPカンファレンス関西2012 Silex
アジャイルプロセス協議会の紹介
アジャイルプロセス協議会の紹介
10 years devsumi agile and the future
10 years devsumi agile and the future
フラットなPHPからフレームワークへ
フラットなPHPからフレームワークへ
Validações no Ruby on Rails
Validações no Ruby on Rails
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
SQLアンチパターン メンター用資料
SQLアンチパターン メンター用資料
Semelhante a JavaScriptトレンド総括(2014)
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
The seminar of asp.net at 201908 sakurug
The seminar of asp.net at 201908 sakurug
SAKURUG co.
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
Masakazu Muraoka
TypeScriptをオススメする理由
TypeScriptをオススメする理由
Yusuke Naka
Java scriptの進化
Java scriptの進化
maruyama097
Play frameworkの概要
Play frameworkの概要
Shuhei Kaneko
Spring.project
Spring.project
広平 田村
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Ryo Iinuma
【de:code 2020】 Azure Kubernetes Service と Azure DevOps による GitOps の実践
【de:code 2020】 Azure Kubernetes Service と Azure DevOps による GitOps の実践
日本マイクロソフト株式会社
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
GraphQLはどんな時に使うか
GraphQLはどんな時に使うか
Yutaka Tachibana
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
Play jjug2012spring
Play jjug2012spring
Takafumi Ikeda
20150421 Geeks Night @ Money Foward
20150421 Geeks Night @ Money Foward
Naoki Shimizu
Concurrent Programm in JavaScript
Concurrent Programm in JavaScript
yjono Seino
Concurrent Programming in JavaScript
Concurrent Programming in JavaScript
yjono Seino
ASP. NET Core 汎用ホスト概要
ASP. NET Core 汎用ホスト概要
TomomitsuKusaba
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
Semelhante a JavaScriptトレンド総括(2014)
(20)
Web制作勉強会 #2
Web制作勉強会 #2
The seminar of asp.net at 201908 sakurug
The seminar of asp.net at 201908 sakurug
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
TypeScriptをオススメする理由
TypeScriptをオススメする理由
Java scriptの進化
Java scriptの進化
Play frameworkの概要
Play frameworkの概要
Spring.project
Spring.project
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
【de:code 2020】 Azure Kubernetes Service と Azure DevOps による GitOps の実践
【de:code 2020】 Azure Kubernetes Service と Azure DevOps による GitOps の実践
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
GraphQLはどんな時に使うか
GraphQLはどんな時に使うか
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
Play jjug2012spring
Play jjug2012spring
20150421 Geeks Night @ Money Foward
20150421 Geeks Night @ Money Foward
Concurrent Programm in JavaScript
Concurrent Programm in JavaScript
Concurrent Programming in JavaScript
Concurrent Programming in JavaScript
ASP. NET Core 汎用ホスト概要
ASP. NET Core 汎用ホスト概要
JavaScriptと共に歩いて行く決意をした君へ
JavaScriptと共に歩いて行く決意をした君へ
Mais de VOYAGE GROUP
Data Engineering at VOYAGE GROUP #jawsdays
Data Engineering at VOYAGE GROUP #jawsdays
VOYAGE GROUP
[20140625]wwdc2014 feedback
[20140625]wwdc2014 feedback
VOYAGE GROUP
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
VOYAGE GROUP
事業内デザイナーのミッション(公開版) genesix 藤井幹大
事業内デザイナーのミッション(公開版) genesix 藤井幹大
VOYAGE GROUP
[20130624]最近の開発環境について話してみる sakata
[20130624]最近の開発環境について話してみる sakata
VOYAGE GROUP
セミナープレゼン資料【Adingo】 20130529
セミナープレゼン資料【Adingo】 20130529
VOYAGE GROUP
セミナープレゼン資料【Adingo】 20130530
セミナープレゼン資料【Adingo】 20130530
VOYAGE GROUP
Abテストノススメ
Abテストノススメ
VOYAGE GROUP
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
VOYAGE GROUP
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
VOYAGE GROUP
Androidにおけるテストに関して〜デバイスをどう選択するか〜
Androidにおけるテストに関して〜デバイスをどう選択するか〜
VOYAGE GROUP
スマホ無料アプリのマネタイズについて【Adingo】
スマホ無料アプリのマネタイズについて【Adingo】
VOYAGE GROUP
最新のマーケットアルゴリズムと、 アルゴリズムを踏まえてのプロモーション
最新のマーケットアルゴリズムと、 アルゴリズムを踏まえてのプロモーション
VOYAGE GROUP
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
VOYAGE GROUP
ゴールから始めよう!
ゴールから始めよう!
VOYAGE GROUP
Phpではじめるオブジェクト指向(公開用)
Phpではじめるオブジェクト指向(公開用)
VOYAGE GROUP
Sprk2012 LT
Sprk2012 LT
VOYAGE GROUP
フラットなPHPからフレームワークへ
フラットなPHPからフレームワークへ
VOYAGE GROUP
iphone5 発表イベント 速報まとめ
iphone5 発表イベント 速報まとめ
VOYAGE GROUP
iphone5 発表イベント 最速まとめLT
iphone5 発表イベント 最速まとめLT
VOYAGE GROUP
Mais de VOYAGE GROUP
(20)
Data Engineering at VOYAGE GROUP #jawsdays
Data Engineering at VOYAGE GROUP #jawsdays
[20140625]wwdc2014 feedback
[20140625]wwdc2014 feedback
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
Google playでのリワードアプリリジェクトからの今後のマネタイズ手段について インタースティシャル広告×クロスプロモーション-
事業内デザイナーのミッション(公開版) genesix 藤井幹大
事業内デザイナーのミッション(公開版) genesix 藤井幹大
[20130624]最近の開発環境について話してみる sakata
[20130624]最近の開発環境について話してみる sakata
セミナープレゼン資料【Adingo】 20130529
セミナープレゼン資料【Adingo】 20130529
セミナープレゼン資料【Adingo】 20130530
セミナープレゼン資料【Adingo】 20130530
Abテストノススメ
Abテストノススメ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
iPhoneアプリ「トリセツ」にて実践したリーンスタートアップ
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
Androidにおけるテストに関して〜デバイスをどう選択するか〜
Androidにおけるテストに関して〜デバイスをどう選択するか〜
スマホ無料アプリのマネタイズについて【Adingo】
スマホ無料アプリのマネタイズについて【Adingo】
最新のマーケットアルゴリズムと、 アルゴリズムを踏まえてのプロモーション
最新のマーケットアルゴリズムと、 アルゴリズムを踏まえてのプロモーション
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
ゴールから始めよう!
ゴールから始めよう!
Phpではじめるオブジェクト指向(公開用)
Phpではじめるオブジェクト指向(公開用)
Sprk2012 LT
Sprk2012 LT
フラットなPHPからフレームワークへ
フラットなPHPからフレームワークへ
iphone5 発表イベント 速報まとめ
iphone5 発表イベント 速報まとめ
iphone5 発表イベント 最速まとめLT
iphone5 発表イベント 最速まとめLT
JavaScriptトレンド総括(2014)
1.
JavaScript 2014年トレンド総括 (公開版) Tetsuharu OHZEKI
2.
今回のスコープ • 最先端ではない • 「トレンドの少し後ろ」が目標 •
エンジニア向き(「JSに触ったことがある」前提) • キーワードと経緯を拾う • 基本はクライアント側の話 • ブラウザ互換性の話はしません
3.
始めに(前提)
4.
現代のJavaScriptは ビルドするものである
5.
なぜビルドするのか • ファイルを連結したい • CoffeeScriptをJSに変換したい •
デプロイ環境に配置したい
6.
ビルドするには • Grunt, gulpといったタスクランナーを使う •
Makeで頑張る人もいる • Rakeで(ry
7.
ビルドすることで • コード解析ができる • 依存解決ができる •
コード改変ができる
8.
言語そのもの
9.
~2013 • CoffeeScript、TypeScriptなど、 プリプロセスしてJSを生成し実行するAltJSの 登場 • AltJSデバッグ用途でsource
mapの誕生 • 構文・機能として有用なものを ECMAScript言語仕様にフィードバックする流れ
10.
2014 • AltJSは生き残りが見えてきた • ES6を踏まえた変更・パラダイムが主流に
11.
次世代言語仕様: ES6 • 現在標準化作業中(2015年夏?まで) •
Promiseなどは既に普及開始 • プロダクション投入は時期尚早 • AltJS式の変換ツールはあるが…… • https://6to5.org/ • ビルドスクリプト程度ならば導入可能?
12.
AltJS • 現実に使える物は2~3種類 • 付加価値とは何か? •
静的チェック(TypeScript) • ES6でも良いケースもあるよね? • CoffeeScriptの糖衣構文はES6に類似のものが多い • AltJSとしてのES6
13.
個人的なAltJSを使うケース • それなりの規模のプロダクト: TypeScript,
生JS • インターフェースが実装されているかを静的に検証したい • TypeScript以上のツールの出現を夢見て, 生JSで頑張る. またはClosure Compilerを使う. • 細かい規模ユーティリティ: 生JS • ビルドせず実行したいから生で書く • 書き捨て: CoffeeScript, ES6変換ツール • 書き捨てなので楽に書きたい・メンテナンスは考えない
14.
プログラミングパラダイム
15.
~2013 • JavaScriptは非同期処理が多い • イベント駆動が多い •
コールバックのネストは地獄になる
16.
2014 • 「値が一つに決まる」非同期処理の決着 • 関数指向プログラミングの影響
17.
非同期処理は大別して二つ • 「値がどこかで決まる」 • 例:
外部のJSONを取得する • 「連続的な値を取り扱う」 • ストリーミング, WebSocketなど
18.
Promiseで決着 • 「値がどこかで一意に決まるもの」を表すMaybe, Future型 • jQuery.DeferredもPromise一派のひとつ •
ES6入りにより、APIが大統一化された • ライブラリを導入し、今すぐ使える • https://github.com/jakearchibald/es6-promise
19.
2015年の非同期処理 • 「値が一つに決まるもの」はPromiseで決着 • 連続的な値を取り扱うものは未決着 •
古典的なコールバック • 連続的な値を無限リストと看做す (例: Rx)
20.
関連資料 • JavaScript Promiseの本 •
JavaScriptでPromiseを使う場合, 一度は読んでおきたい • github:jakearchibald/es6-promise • ES6 Promise準拠のpolyfillライブラリ
21.
関連資料 • WHATWG Stream
Standard • WHATWGにて策定中のStream API仕様 (2015年1月時点で実装処理系無し) • 連続的な値の取り扱いは、将来はこれに大統一? • RxJS • C#のReactive Extensions系統のAPIを持つライブラリ
22.
モジュール・パッケージ管理
23.
~2013 • JavaScriptには名前空間・モジュール化の 仕組みが無い • 仕組みが無いので、ちょっとしたことで 破綻する •
一方、Node.jsはCommonJSスタイルの モジュールシステムを持っている
24.
2014 • Node.jsのモジュール依存管理を クライアント側に転用するようになった • 長い物に巻かれるのがよい
25.
従来のJSのモジュール依存管理 • クライアント • オレオレツール •
ファイルを連結 • AltJSの助けを得る • AMD (RequireJS), Closure Tools • Node.js: CommonJSスタイル
26.
browserifyの躍進 • 元々はNode.js向けコードをブラウザで動かす ためのツール • CommonJS形式のファイルを依存解決して 一つに結合したものを作る •
これはブラウザ上の依存管理に使える!
27.
npmエコシステム • Node.jsのモジュール配布・管理の生態系 • 正確にはパッケージ管理システム •
類友: Ruby gem, Python pip • browserifyのメインターゲット • クライアントJSの管理にもpackage.jsonを使う • bower.jsonが死んだ訳ではない(CSS用途などで生き残っている) • npm, bower以外は死んだかも
28.
2014年末日現在のモジュール依存管理 • CommonJS (browserify/webpack) •
古式ゆかしい依存順でconcat(AltJSと組み合わせて) • ES6 Module: 今は止めておけ • AMD(RequireJS):往時に比べればマイナー化 • 非同期読み込みにwebpackなどの選択肢が出来たため • Closure Toolsなど独自生態系
29.
テスト
30.
~2013 • JavaScriptもテストを書く必要がある • QUnit,
Jasmine, mochaなど色々な テストフレームワークがあった • UIの自動テストにはSelenium ***を使う
31.
2014 • ユニットテスト: mocha+power-assert強い •
テストランナー:好きなの使えよ • UI自動テスト: WebDriverありきで
32.
ユニットテスト • 「mocha+何かしらのassert」が楽 • assert()さえ覚えればテストが書ける •
power-assertは構文解析するのでAltJSとの組み合わせが 面倒なケースあり • Jasmine, QUnitも死んではいないが…… • Jasmineが↓のJestの基盤になるなど、裏方化・派生元としての利用が多い • 全部モック化するJestも出てきた
33.
テストランナー • コマンド一発でテスト対象ブラウザを起動しテストを 流すツール • 好きなの使えよ •
testem/karma以外に、まともに動くものが現実的に無いので二択 • testemもkarmaも、機能的差異は特にない • クライアントJSのユニットテストもNode.jsで 済ませる派閥もある
34.
E2Eテスト(UIの自動テスト) • WebDriverが標準化されている(作業中) • Selenium
WebDriverのアレです • WebDriverプロトコルに従ったものを 選ぶのが無難 • protractor, Selenium WebDriver, testium • WebDriverプロトコルのDriverさえあれば、どんなブラウザ(UA)でも 操作できる
35.
PhantomJSはリスクでは仮説 • 根本的に人間のユーザーが存在する ブラウザではない • 実環境では無いので、テストツールとしての信頼性どうなの? •
WebDriver経由で操作するのがリスクヘッジ的に 良いのでは? • ついでにWebKitベースではあるが古い • 少なくとも1.xは2013年半ばのブランチがベース • ついでにバグが多い
36.
アプリケーションライブラリ
37.
~2013 • 栄華を極めたjQuery帝国 • JavaScriptと言えばjQuery •
Angular.js, Backbone.jsなどの MVCフレームワークの流行
38.
2014 • 従来に比べてjQueryの存在価値の低下 • オールインワンなフレームワークの退潮 •
小規模ライブラリの組み合わせの前進 • browserifyの躍進が影響
39.
jQuery帝国の衰退 • DOM互換ライブラリの必要性の低下 • IE8が落とせる今、互換層はそこまで必要ではない •
jQuery.Animationさえあれば十分? • 優れたDOM操作ライブラリの登場(React, Vue, Ractive) • 10年近い寿命に必然的に伴う、道具としての負債化 • 流行りすぎてしまったが故の玉石混淆 • “近年においてはjqueryプラグイン=低品質とほぼ同義である” という見方も
40.
Angularどうなの • 楽に速く作る為のツールとしての評価が高い • 良くも悪くも「JS
on Rails」 • 全部乗せ故に、コード資産含めたロックイン度が高い • 社内システムや管理画面に向いているので、 受託開発系では一定の人気を誇る • 2への移行が不安視?
41.
React.js • ただのビュー(DOM操作)ライブラリ • 2015年1月現在、最優の一つではある •
コンポーネント化が主眼 • アプリケーションをよりよく設計/管理するための道具 • ReactのVirtual DOMは裏方技術 • 本当に速度が欲しければ生DOMを書け
42.
総括 • 流行り廃りなので審美眼が大切 • jQueryは過去の負債遺産になりつつある •
単機能ライブラリが増え、組合わせが簡単に
43.
アプリケーション設計
44.
~2013 • クライアントJS界へのMVC概念の普及 • GUIアプリ設計の歴史を90年代から やり直している
45.
「たかがJS」だが最低限の設計は当たり前 • Ajax黎明期のベタ書きコードに直面した俺達は • 保守性を考慮して設計するのは当然に •
jQueryプラグインが嫌われる理由のひとつ • WebにおけるUIを実装する言語が他に無い現実と向き合う • ModelとViewを分けるだけでも結構変わる
46.
Single Page Applicationどうなの •
やると設計はスッキリする • サーバーのREST APIとやりとりする疎な構成にできる • メモリリークやパフォーマンスと闘う面はある • モバイルでは死活問題 • デスクトップ限定なら「程度による」問題 • サイト・サービス全部を1ページにするのは面倒 • 麻疹の一種なので、ほどほどに
47.
Flux話題だけど、どうなの • 要約 • 「注文の多いMVC」程度に考える •
時代の流れを語彙に反映したオブザーバーパ ターン
48.
総括 • 流行り廃りなので審美眼が大切 • どんなスクリプトでも、最低限の 処理ドメインの分割をする •
現在、注目を集めているのはFlux • 過去の歴史を、時代に合わせてアレンジして 輸入していると考える
49.
まとめ
50.
JSパラダイムの方向 • 標準化トラックに乗ったものは「上がり」 • 標準化の過程でAPIが整理・統一される •
流行る(よほど筋悪でなければ) • 「長い物に巻かれろ」 • 標準化の流れに身を任せた方が将来的に楽をしやすい • それ以外の物は審美眼が必要
Baixar agora