イマドキのフロントエンドエンジニアの道具箱
DESCRIPTION
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.TRANSCRIPT
イマドキのフロントエンドエンジニア の道具箱
@albatrosaryhttp://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
佐川 夫美雄 HTML5 Experts.jp エキスパート html5j エンタープライズ部（副部長） html5j Web Platform部（メンバー） AngularJS Japan User Group（スタッフ）
(Fumio SAGAWA)
https://www.facebook.com/sagawa.fumio
ContentsイマドキのWebはやることがいっぱい JavaScript Framework altJS CSS Preprocessor MEAN with YEOMAN NEXT Web
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
ContentsイマドキのWebはやることがいっぱい JavaScript Framework altJS CSS Preprocessor MEAN with YEOMAN NEXT Web
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
HTML5 Architectures
Page Display
Page Generation
Logic & State
Data
Integration
User Interface
Interface Management
Logic & State
Data
Integration
APIs
HTML5 (Single-page Application)
Browser
App Server
OLD Web
HTML & CSS
JavaScript
JSON
イマドキのHTMLは簡単？
HTML CSS
JavaScript
image
HTM
L5 is Easy?
HTML CSS
JavaScript
Sass Compass
image
HTM
L5 is Easy?
HTML CSS
JavaScript
Sass
TypeScript
Compass
image
HTM
L5 is Easy?
HTML CSS
JavaScript
Sass
angular
ui-router
Compass
image
HTM
L5 is Easy?
TypeScript
scenario
resource
HTML CSS
JavaScript
Sass
scenario
Compass
image
HTM
L5 is Easy?
TypeScript
ui-router
angularngDocresource
HTML CSS
JavaScript
Sass Compass
image imagemin
htmlmin
cssmin
jsmin
HTM
L5 is Easy?
TypeScript
ui-router
angular
scenario
ngDocresource
HTML CSS
JavaScript
Sass Compass
image imagemin
htmlmin
cssmin
jsmin
テスト
HTM
L5 is Easy?
TypeScript
ui-router
angular
scenario karma jasmine
ngDocresource
HTML CSS
JavaScript
Sass
resource
Compass
image imagemin
htmlmin
cssmin
jsmin
karma jasmineテスト
ngDoc
easymock
HTM
L5 is Easy?
TypeScript
ui-router
angular
scenario
色々めんどう・・・開発プロセスはどうなる？ クライアント/サーバの両方を一度に開発するの？ 今までより開発効率が下がるのでは？ 技術要素が多すぎて対応できない ノウハウがない いままでと何が変わるの？ フレームワーク・ロックイン 学習コスト
ContentsイマドキのWebはやることがいっぱい JavaScript Framework altJS CSS Preprocessor MEAN with YEOMAN NEXT Web
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
導入目的
コードを整理する プログラムを構造化 効率的にコーディングする モダンなロジックを取り入れる コードレビューがやり易い
JavaScript Framework
JavaScriptフレームワーク
https://angularjs.org/
特徴双方向バインディング テンプレートとしてのHTML 簡単なものならJavaScriptを書かない Web Componentsを意識した作り Object.observe()に似た機能
主な機能ビルトインディレクティブ フィルター・サービス・フォームバリデーション グローバルAPI モジュールとDI スコープとコントロール ルーティングと通信 カスタムフィルター・カスタムサービス・カスタムディレクティブ
User Interface
Interface Management
Logic & State
Data
HTML & CSS
JavaScript
Architecture Mappingビルトインディレクティブ, フィルター フォームバリデーション
グローバルAPI, スコープ, コントロール モジュール, DI ルーティング
Non Progruming
Progruming
Backbone.js
AngularJS Ember.js backbone.js Sencha Touch
特徴jQueryベースのコーティング データバインディングとカスタムイベント Collectionテンプレート Viewによるイベントをハンドリング 枠組みのみ提供
特徴
双方向バインディング ビューとルーティング 新しい技術を積極的に取り入れている
特徴困ったときに導入できる 優れた双方向データバインディング 簡単に実装できる Web Componentsを意識した作り
どれがお気に入り？
ContentsイマドキのWebはやることがいっぱい JavaScript Framework altJS CSS Preprocessor MEAN with YEOMAN NEXT Web
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
導入目的
コーティングルールを強制 書き方の統一 つまらないミスを軽減 開発効率を上げる 学習コストが低い
altJS
ContentsイマドキのWebはやることがいっぱい JavaScript Framework altJS CSS Preprocessor MEAN with YEOMAN NEXT Web
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
導入目的
設定ファイルからプログラミング オブジェクト指向CSSの導入(OOCSS) 開発効率を上げる idやclassへの命名規則は決める必要がある
34CSS Preprocessor
色々あるけど
Web開発の道具たちを効率良く使うためには
ContentsイマドキのWebはやることがいっぱい JavaScript Framework altJS CSS Preprocessor MEAN with YEOMAN NEXT Web
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
http://yeoman.io/
http://yeoman.io/
Scaffolding
YEOMAN - featureテンプレートがそろってる Web開発に必要なツールがたくさんある lint,hint,ビルド,テストが行える html,css,js,画像をminifyしてくれる まだまだ色々あります
Begin from the Generator’s
Development Life Cycle
道具はいろいろある
yo 雛形作成ツール
OFFICIAL GENERATORS 20 COMMUNITY GENERATORS 782
bower パッケージマネージャ
Bower Packages 13,178
grunt タスクランナー
Grunt plugin 2,990
YEOMAN’S GENERATORYeoman generator for creating MEAN
stack applications, using MongoDB, Express, AngularJS, and Node - lets
you quickly set up a project following best practices.
MEA
N
generator-angular-fullstack
MEAN Stack - featureWrite one language With MongoDB and Mongoose, easy and flexible data validation With NodeJS, never need threads With AngularJS, dynamic client-side templates
Exchange of Simple DataUser 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エンタープライズ部" }]
Simple is Best!
$ npm install -g generator-angular-fullstack $ mkdir angular-fullstack-app && cd $_ $ yo angular-fullstack
ジェネレートgenerator を入れる
開発ディレクトリを作成し yoコマンドを実行
動かす$ mongod --config ~/.homebrew/etc/mongo.conf $ grunt serve
MongoDB を先に 実行してから nodeを動かす
MEAN Stack
ContentsイマドキのWebはやることがいっぱい JavaScript Framework altJS CSS Preprocessor MEAN with YEOMAN NEXT Web
http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
Web ComponentsHTMLを部品化する仕組み
Custom Elements HTML Templates
HTML Imports Shadow DOM
Custom Elements
独自タグを定義
HTML Templates
HTMLを部品化
HTML Imports
HTMLを取り込む
Shadow DOM
DOMのカプセル化
現状はPolyfillを使う古いブラウザであってもモダンブラウザと同等の機能を提供
ECMAScriptES 5 ES 6 ES 7
ECMA Internationalによって標準化されたスクリプト言語の仕様 実装がJavaScript
2009 2015 ??1999
ES 3
ECMAScript 5.12007
ES 4
Object.observe()
JavaScriptオブジェクトの変更を監視 ECMAScript 標準（ECMA7）
Object.observe()はOo()と書くときがあります。Oo()を使うとAngularJSやEmber.jsなどで実装されている双方向データバインディングが可能となる。 フレームワークなしで2Wayデータバインディングが可能となります。
Material Design視覚により情報伝達を行うための要素を定義（Visual Language）
配置 動き フォント すべてのデバイス
Googleによって開発されたWeb向け言語 クラス構造を持ったブラウザで動くオブジェクト指向言語形式静的言語（ECMAScriptは動的言語）
Ω
angulardart
AtScriptJavaScriptには大規模開発を行うには欠点がある
AtScriptの最終的な目標 現在のJavaScriptの機能を侵害することなく欠けている機能を補う言語をつくり上げること
https://docs.google.com/presentation/d/1hr2IM-8G-0RzpB-WY8pLHvxqNggKPzUO0KvEv1IKPws/edit#slide=id.p
AtScript と AngularJS
AngularJS 2.0 はAtScript で書かれている
Web Standards
ウェブ標準(Web Standards)とは、W3Cが勧告しているWWW関連の規格のことである。特にウェブサイト製作に関わるHTMLやCSS、
DOM、WCAG等のことを言う。 - http://ja.wikipedia.org/
まとめ
やることの多いWeb開発 YEOMANを使って道具を活用する 進化し続けるHTML5
HTML5 Next
<ng-thanks>