It is to introduce the development process using the yeoman, in particular, angular. I am writing at the discretion of its own relationship of angular and Web components in the second half.

1. @albatrosary
http://albatrosary.hateblo.jp/
http://html5experts.jp/albatrosary/
イマドキのフロントエンドエンジニア
の道具箱

2. 佐川 夫美雄 HTML5 Experts.jp エキスパート
html5j（スタッフ）
AngularJS Japan User Group（スタッフ）(Fumio SAGAWA)

3. Webエンジニアは覚えることが多い

4. HTML5 Architectures
Page Display
Page Generation
Logic & State
Data
Database
User Interface
Interface
Management
Logic & State
Data
Integration
APIs
HTML5
(Single-page Application)
Browser
App Server
OLD Web
HTML & CSS
JavaScript
JSON

5. HTML
JavaScriptCSS
フロントエンドを構成する要素

6. HTML
JavaScriptCSS
フロントエンドを構成する要素
テンプレート・エンジン
altJS
JavaScript Framework CSS Framework
CSS Preprocessor

7. HTML
JavaScriptCSS
フロントエンドを構成する要素
テンプレート・エンジン
altJS
JavaScript Framework
Test Tools
CSS Framework
CSS Preprocessor
ビルドツール
cssmin
htmlmin
jsmin
imagemin
svgmin
concat
jshint

8. 色々めんどう・・・
開発プロセスはどうなる？
クライアント/サーバの両方を一度に開発するの？
今までより開発効率が下がるのでは？
技術要素が多すぎて対応できない
ノウハウがない
いままでと何が変わるの？
フレームワーク・ロックイン
学習コスト

9. CSS Preprocessor

10. 導入目的
設定ファイルからプログラミング
オブジェクト指向CSSの導入(OOCSS)
開発効率を上げる
idやclassへの命名規則は決める必要がある
10
CSS Preprocessor

14. CSSフレームワーク
レスポンシブ・ウェブ・デザイン
モダンなUI

19. JavaScriptフレームワーク
JavaScriptロジックを構造化
モダンなアーキテクチャの導入
効率的にコーティング

20. 導入目的
コードを整理する
プログラムを構造化
効率的にコーディングする
モダンなロジックを取り入れる
コードレビューがやり易い
JavaScript Framework

22. jQueryの特徴
ブラウザに依存しないDOMエレメントの選択
DOM操作と変更
イベント
CSS操作
エフェクトとアニメーション
Ajax
ユーティリティ - ブラウザのバージョン取得、each関数など
拡張性 - jQuery プラグイン

23. jQueryの問題
依存性が高くなりすぎた
整理されていないコードが増えた
コピペ文化

25. データバインディングとカスタムイベントを備えた Model
Model のイテレーションである Collection
イベントをハンドリングする View
サーバサイドのアプリケーションと連動するための
RESTful JSON など

27. 双方向バインディング
テンプレートとしてのHTML
簡単なものならJavaScriptを書かない
Web Componentsを意識した作り
Object.observe()に似た機能

29. Virtual DOM
• 重い本物のDOMとは別に、仮想のDOM（ただのJSオブジェ
クトなので軽い）のツリーを構築する
• 仮想DOMの構築を状態が変更されるたびに行って、前回の
仮想DOMとのdiffをとって実DOMに適用する

30. Flux

31. altJS
JavaScriptの代替
JavaScriptを生成する中間言語
開発効率の向上

32. 導入目的
コーティングルールを強制
書き方の統一
つまらないミスを軽減
開発効率を上げる
学習コストが低い
altJS

40. テスト・ツール
テストの自動化
モジュールのライフサイクル

46. ビルドツール
cssmin
htmlmin
jsmin
imagemin
svgmin
concat
jshint

47. http://yeoman.io/

48. http://yeoman.io/

49. Scaffolding

51. YEOMAN - feature
テンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります

54. Development Life Cycle

57. YEOMAN S GENERATOR
Yeoman generator for creating MEAN
stack applications, using MongoDB,
Express, AngularJS, and Node - lets
you quickly set up a project following
best practices.
MEAN
generator-angular-fullstack

58. MEAN Stack - feature
Write one language
With MongoDB and Mongoose, easy and flexible data validation
With NodeJS, never need threads
With AngularJS, dynamic client-side templates

59. Exchange of Simple Data
User Interface
Interface
Management
Logic & State
Data
Integration
APIs
Browser
App Server
JSON
[{
"url": "https://atnd.org/events/54374",
"date": "2014/09/28 10:00∼18:00",
"title": "JavaScriptフレームワーク・ハッカソン",
"venue": "html5jエンタープライズ部"
}]
[{
"url": "https://atnd.org/events/54374",
"date": "2014/09/28 10:00∼18:00",
"title": "JavaScriptフレームワーク・ハッカソン",
"venue": "html5jエンタープライズ部"
}]
[{
"url": "https://atnd.org/events/54374",
"date": "2014/09/28 10:00∼18:00",
"title": "JavaScriptフレームワーク・ハッカソン",
"venue": "html5jエンタープライズ部"
}]

60. 道具はいろいろある

61. Webの新機能は
1.ブラウザベンダによって開発（ブラウザの機能実装を待つ）
2.実装後、機能を利用する

62. Extensible web
1. Web開発者が自身が必要とするユースケースに沿ってAPIを
デザイン
2. Web開発者は他者が作成するAPIと切磋琢磨しAPIを洗練
3. 洗練されたAPIの中から、ブラウザが実装すべき基本的な機
能が抽出される
4. ブラウザがNativeに実装すればパフォーマンスが向上し、か
つライブラリのコードも小さくできる

63. 具体的な例
ライブラリ例 標準化された例
jQuery querySelector
Ember, AngularJS Object.observe
Sass, LessCSS Variables

64. Extensible web
「標準化組織であるW3Cとブラウザベンダだけでなく、 Web開
発者も巻き込んでWebの未来を拡張していこう」という考え方

65. Web Components
HTMLを部品化する仕組み
Custom Elements
HTML Templates
HTML Imports
Shadow DOM

66. Custom
Elements
独自タグを定義

67. HTML
Templates
HTMLを部品化

68. HTML
Imports
HTMLを取り込む

69. Shadow
DOM
DOMのカプセル化

70. Service Worker
バックグラウンドで実装されるJavaScript
Application Cacheを置き換える
JavaScriptネットワークプロキシ
ネイティブとWebのギャップを埋める

71. 重要：Webについて議論すること

72. 重要：手を動かす

73. <ng-thanks>