Html5 in-nagoya-11th

60 %
40 %
Information about Html5 in-nagoya-11th
Technology

Published on March 5, 2014

Author: sagawafumio

Source: slideshare.net

Description

「業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?」スライドのショートバージョンです

HTML5勉強会#11 in 名古屋

Profile: ! ! 佐川 夫美雄 @albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/ HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER HTML5勉強会#11 in 名古屋

Single-page Application(SPA) 何か最近話題だよね?!でもSPAって書くとお風呂になっちゃうんだよ 単一ページによるWebアプリケーション ページはDOMの操作により切り替える サーバとのやりとりはAjaxやWebSocket等を利用 HTML5勉強会#11 in 名古屋

こんなの簡単さ! HTML5勉強会#11 in 名古屋

SPAを開発するには? HTML CSS JavaScript image HTML5勉強会#11 in 名古屋

SPAを開発するには? HTML CSS Sass Compass JavaScript image HTML5勉強会#11 in 名古屋

SPAを開発するには? HTML CSS Sass Compass JavaScript CoffeeScript image HTML5勉強会#11 in 名古屋

SPAを開発するには? HTML CSS Sass Compass JavaScript CoffeeScript image backbone underscore jQuery require HTML5勉強会#11 in 名古屋

SPAを開発するには? HTML CSS Sass Compass JavaScript CoffeeScript image Yuidoc backbone underscore jQuery require HTML5勉強会#11 in 名古屋

SPAを開発するには? cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoffeeScript backbone underscore jQuery require HTML5勉強会#11 in 名古屋

SPAを開発するには? cssmin htmlmin jsmin Yuidoc CSS Sass Compass image HTML imagemin JavaScript CoffeeScript backbone underscore jQuery require テスト mocha chai HTML5勉強会#11 in 名古屋

ちょっと大変じゃない。。。 HTML5勉強会#11 in 名古屋

どーやって開発するの? ┐( ̄ヘ ̄)┌ HTML5勉強会#11 in 名古屋

そこで統合開発ツールの登場です! HTML5勉強会#11 in 名古屋

開発環境のおはなし 面倒なことは全部このおっさんにやらせちゃえばいいんだよ http://yeoman.io/ HTML5勉強会#11 in 名古屋

Yeoman とは MODERN WORKFLOWS FOR MODERN WEBAPPS Google社が作成した総合開発ツール群 yo(雛形作成ツール) grunt(タスクランナー) bower(フロントエンドパッケージマネージャ) Javaのmavenみたいなもんです もうちょっと高機能かも HTML5勉強会#11 in 名古屋

使ってみる インストールは簡単 $ npm install -g yo HTML5勉強会#11 in 名古屋

yo これだけで使いたい環境ができてしまう! $ yo backbone AngularだってknockoutだってChrome Apps、Firefox OS用だってあるんだぜぃ! HTML5勉強会#11 in 名古屋

yo モジュールのテンプレートが作成できる $ $ $ $ yo yo yo yo backbone:view view名 --coffee backbone:model model名 --coffee backbone:collection collection名 --coffee backbone:router router名 --coffee HTML5勉強会#11 in 名古屋

bower bower.jsonとは? 依存関係およびライブラリの情報を管理するためのファイル HTML5勉強会#11 in 名古屋

bower 使い方 $ bower install --save-dev [パッケージ名] ! 新しいコンポーネントをダウンロードしbower.jsonにその情 報を書き込みます HTML5勉強会#11 in 名古屋

grunt タスクランナー gruntにはpackage.jsonとGruntfile.jsが必要 HTML5勉強会#11 in 名古屋

grunt package.jsonとは? 必要なタスクプラグインを管理するためのファイル HTML5勉強会#11 in 名古屋

grunt Gruntfile.jsとは? タスクを定義したファイルです HTML5勉強会#11 in 名古屋

grunt Gruntfile.jsとは? いろんなタスクがあります $ grunt serve $ grunt build $ grunt test grunt serveってやるとnodeサーバが立ち上がるんだぜぃ HTML5勉強会#11 in 名古屋

完璧だ!! さー開発しよう! HTML5勉強会#11 in 名古屋

ちょっと待って! HTML5勉強会#11 in 名古屋

そう言えばAjaxってAPIサーバ必要なんだけど・・ HTML5勉強会#11 in 名古屋

よし!全員APIサーバ構築しろ!! HTML5勉強会#11 in 名古屋

Σ(゚д゚;) ヌオォ!? HTML5勉強会#11 in 名古屋

モック開発で効率良く gruntタスクに追加するんだよ HTML5勉強会#11 in 名古屋

モック開発で効率良く grunt-connect-proxyの構築 $ npm install grunt-connect-proxy --save-dev Gruntfile.jsを少し書き換えろ! connect: { options: { port: SERVER_PORT, hostname: 'localhost' }, livereload: { ・・・ }, /* プロキシサーバの設定 */ proxies: [{ context: '/mockapi', host: 'localhost', port: '3000', https: false, changeOrigin: false }], HTML5勉強会#11 in 名古屋

モック開発で効率良く grunt-easymockの構築 $ npm install grunt-easymock --save-dev Gruntfile.jsを少し書き換えろ! grunt.initConfig({ yeoman: yeomanConfig, /* easymockの設定 */ easymock: { mockapi: { options: { port: 3000, path: 'server/api-server', config: { routes: [ '/users/:id' ] }, }, }, }, HTML5勉強会#11 in 名古屋

モック開発で効率良く モックサーバを構築するとめんどうなAPIサーバを構築しなくていい Yeoman HTML5勉強会#11 in 名古屋

モック開発で効率良く 詳しくはこちら http://albatrosary.hateblo.jp/entry/2014/02/06/155004 HTML5勉強会#11 in 名古屋

イカしてるだろ Yeomanを使って効率良くSingle-page Applicationを作ろう! 結構大変だけどね。。 HTML5勉強会#11 in 名古屋

ご清聴ありがとうございました HTML5勉強会#11 in 名古屋

Add a comment

Comments

正規品通 | 05/06/15
回答|スパム発言?ので、どのようにあなたがしなければお勧めそれは、任意のプラグインや、あなたができるもの低減? 狂った狂った私は最近、それが私を駆動するのはそんなにを取得するので、任意のサポート非常に高く評価されています。 [url=http://www.keremyilmaz.net]正規品通販店[/url]
会員限定 | 09/06/15
おかげ 非常に 有益。 ウィルシェア|私とサイトサイト 。 [url=http://www.markos-gost.pl]会員限定[/url]
人気急上 | 09/06/15
おかげ自分のため素晴らしい投稿! I 確かそれを読んで楽しんで、あなたは偉大な著者であることが起こります。私は意志私がいることを確認することを忘れないブックマークあなたのブログし、最終的になります すぐ戻ってきます。週末|あなたの偉大な継続朝| 投稿、素敵休日の週末! [url=http://federal-contracts-consulting.com]人気急上昇[/url]

Related presentations

Related pages

HTML5勉強会#11(名古屋)でYEOMANのお話をさせて ...

HTML5勉強会#11(名古屋)でYEOMAN ... Html5 in-nagoya-11th ...
Read more