イマドキのフロントエンドエンジニアの道具箱

33,386
-1

Published on

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.

Published in: Technology

イマドキのフロントエンドエンジニアの道具箱

  1. 1. @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ イマドキのフロントエンドエンジニア の道具箱
  2. 2. 佐川 夫美雄 HTML5 Experts.jp エキスパート html5j(スタッフ) AngularJS Japan User Group(スタッフ)(Fumio SAGAWA)
  3. 3. Webエンジニアは覚えることが多い
  4. 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. 5. HTML JavaScriptCSS フロントエンドを構成する要素
  6. 6. HTML JavaScriptCSS フロントエンドを構成する要素 テンプレート・エンジン altJS JavaScript Framework
CSS Framework CSS Preprocessor
  7. 7. HTML JavaScriptCSS フロントエンドを構成する要素 テンプレート・エンジン altJS JavaScript Framework
 Test Tools CSS Framework CSS Preprocessor ビルドツール cssmin htmlmin jsmin imagemin svgmin concat jshint
  8. 8. 色々めんどう・・・ 開発プロセスはどうなる? クライアント/サーバの両方を一度に開発するの? 今までより開発効率が下がるのでは? 技術要素が多すぎて対応できない ノウハウがない いままでと何が変わるの? フレームワーク・ロックイン 学習コスト
  9. 9. CSS Preprocessor
  10. 10. 導入目的 設定ファイルからプログラミング オブジェクト指向CSSの導入(OOCSS) 開発効率を上げる idやclassへの命名規則は決める必要がある 10 CSS Preprocessor
  11. 11. CSSフレームワーク レスポンシブ・ウェブ・デザイン モダンなUI
  12. 12. JavaScriptフレームワーク JavaScriptロジックを構造化 モダンなアーキテクチャの導入 効率的にコーティング
  13. 13. 導入目的 コードを整理する プログラムを構造化 効率的にコーディングする モダンなロジックを取り入れる コードレビューがやり易い JavaScript Framework
  14. 14. jQueryの特徴 ブラウザに依存しないDOMエレメントの選択 DOM操作と変更 イベント CSS操作 エフェクトとアニメーション Ajax ユーティリティ - ブラウザのバージョン取得、each関数など 拡張性 - jQuery プラグイン
  15. 15. jQueryの問題 依存性が高くなりすぎた 整理されていないコードが増えた コピペ文化
  16. 16. データバインディングとカスタムイベントを備えた Model Model のイテレーションである Collection イベントをハンドリングする View サーバサイドのアプリケーションと連動するための RESTful JSON など
  17. 17. 双方向バインディング テンプレートとしてのHTML 簡単なものならJavaScriptを書かない Web Componentsを意識した作り Object.observe()に似た機能
  18. 18. Virtual DOM • 重い本物のDOMとは別に、仮想のDOM(ただのJSオブジェ クトなので軽い)のツリーを構築する • 仮想DOMの構築を状態が変更されるたびに行って、前回の 仮想DOMとのdiffをとって実DOMに適用する
  19. 19. Flux
  20. 20. altJS JavaScriptの代替 JavaScriptを生成する中間言語
 開発効率の向上
  21. 21. 導入目的 コーティングルールを強制 書き方の統一 つまらないミスを軽減 開発効率を上げる 学習コストが低い altJS
  22. 22. テスト・ツール テストの自動化 モジュールのライフサイクル
  23. 23. ビルドツール cssmin htmlmin jsmin imagemin svgmin concat jshint
  24. 24. http://yeoman.io/
  25. 25. http://yeoman.io/
  26. 26. Scaffolding
  27. 27. YEOMAN - feature テンプレートがそろってる Web開発に必要なツールがたくさんある lint,hint,ビルド,テストが行える html,css,js,画像をminifyしてくれる まだまだ色々あります
  28. 28. Development Life Cycle
  29. 29. 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
  30. 30. 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
  31. 31. 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エンタープライズ部" }]
  32. 32. 道具はいろいろある
  33. 33. Webの新機能は 1.ブラウザベンダによって開発(ブラウザの機能実装を待つ) 2.実装後、機能を利用する
  34. 34. Extensible web 1. Web開発者が自身が必要とするユースケースに沿ってAPIを デザイン 2. Web開発者は他者が作成するAPIと切磋琢磨しAPIを洗練 3. 洗練されたAPIの中から、ブラウザが実装すべき基本的な機 能が抽出される 4. ブラウザがNativeに実装すればパフォーマンスが向上し、か つライブラリのコードも小さくできる
  35. 35. 具体的な例 ライブラリ例 標準化された例 jQuery querySelector Ember, AngularJS Object.observe Sass, LessCSS Variables
  36. 36. Extensible web 「標準化組織であるW3Cとブラウザベンダだけでなく、 Web開 発者も巻き込んでWebの未来を拡張していこう」という考え方
  37. 37. Web Components HTMLを部品化する仕組み Custom Elements HTML Templates HTML Imports Shadow DOM
  38. 38. Custom Elements 独自タグを定義
  39. 39. HTML Templates HTMLを部品化
  40. 40. HTML Imports HTMLを取り込む
  41. 41. Shadow DOM DOMのカプセル化
  42. 42. Service Worker バックグラウンドで実装されるJavaScript Application Cacheを置き換える JavaScriptネットワークプロキシ ネイティブとWebのギャップを埋める
  43. 43. 重要:Webについて議論すること
  44. 44. 重要:手を動かす
  45. 45. <ng-thanks>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×