Okinawa frontend...
-
Upload
kazuki-murahama -
Category
Technology
-
view
238 -
download
1
Transcript of Okinawa frontend...
こういうのでいいよね?$(".class-a").css("float","left")
.css("margin","0px 8px")
.css("height","28px")
.css("width","28px")
.css("text-align","left")
.css("width","80%")
.css("font-size","1em")
.css("line-height", "normal")
.css("display","table-cell")
.css("vertical-align","middle");
とあるgithubのプロジェクト依存ライブラリのインストール 依存ライブラリは npm を用いて管理されている. npm install
JavaScriptやSASSのビルド Gulp タスクが幾つか用意されている.
ビルド ビルドするためには npm run build を実行する. これを実行する前に npm install を行って依存ライブラリ が正しくインストールしておく必要がある.
いまどきのフロントエンド開発• Grunt/Gulp(コードの圧縮やコードのビルドなどを自動で行えるタスクランナー)
• npm(ライブラリの依存関係を解消するツール)
• Bower(フロントエンド専用ライブラリの依存関係を解消するツール)
• Vue, Anguler, React(データバインドを実現するフレームワーク)
フロントエンドの歴史 (~ 2005年)
• JavaScriptは実行が遅くページ内でDOMを動的に操作するというのはあまりなかった。•レンダリングもブラウザによって差があった。•ページ遷移することでしか表示を変えれないので、ネイティブアプリケーションの振る舞いは難しい。→これらの理由によりWebの表現力には限界があり、UI/UXへの注目度は低かった
有名なやつ
• http://web.archive.org/web/20130515083615/http://www.aiseikai.or.jp/
• http://www.takamagahara.com/printin/
• http://hm.aitai.ne.jp/~naitonet/
Flash黎明期
> 「FLASH黄金時代」に当てはまる期間は人によって差があるが、「始まりは98~02年」「終焉は05~07年」という解釈が一般的である。
引用: http://dic.nicovideo.jp/a/flash黄金時代
Web2.0が提唱される
Web 2.0とは、従来Web上で提供されてきたサービスやユーザー体験とは一線を画する、新しい発想によって捉えられた、技術、サービス、デザインパターン、ビジネスモデル、Webのあり方などの総称である。
引用:http://www.sophia-it.com/content/Web+2.0
ブラウザとクライアントPCの性能向上
引用:「付属」でも超使える! Macの純正ソフト20連発 http://ascii.jp/elem/000/000/510/510650/index-2.html
第二次ブラウザ戦争
http://ja.wikipedia.org/wiki/ブラウザ戦争#.E7.AC.AC.E4.BA.8C.E6.AC.A1.E3.83.96.E3.83.A9.E3.82.A6.E3.82.B6.E6.88.A6.E4.BA.89
Ajax
> 従来のWebアプリケーションでは、サーバにリクエストを送信後、レスポンスを新たにウェブページとして受け取ることで画面遷移が発生していたが、Ajaxにより画面遷移を伴わない動的なWebアプリケーションの製作が実現可能になる[1]。 例えばWeb検索に応用することで、従来は入力確定後に行っていた検索を、ユーザがキー入力をする間にバックグラウンドで行うことによってリアルタイムに検索結果を表示していくといったことが可能になる。
引用 http://ja.wikipedia.org/wiki/Ajax
Ajax
• PHP を使用して Ajax ベースの Web サイトを作成するhttps://www.ibm.com/developerworks/jp/web/library/wa-aj-php/
jQueryの特徴jQueryには次のような機能・特徴がある。 • ブラウザに依存しないオープンソースのセレクタエンジン Sizzle を使ったDOMエレメントの選択(Sizzle は jQuery プロジェクトからスピンアウト)[3]
• DOM操作と変更(CSS 1-3 と基本的なXPathのサポートを含む) • イベント • CSS操作 • エフェクトとアニメーション • Ajax • ユーティリティ - ブラウザのバージョン取得、each関数など • 拡張性 - jQuery プラグイン
引用 http://ja.wikipedia.org/wiki/JQuery
JavaScriptのDOM操作は難儀
• JavaScriptのみの場合http://akioblog.com/2013/03/10/868/
• jQueryの場合http://qiita.com/kazu56/items/8e92d08fd1bba0a2d771
WebSocketの登場いわゆるAjaxアプリケーションではサーバとクライアント間のデータのやり取りが頻繁に発生するが、従来のXMLHttpRequestはあくまでブラウザ側からサーバにデータの送信要求を出す手段に過ぎず、サーバ側からクライアントにデータをプッシュ配信することが難しい。一方Cometではサーバ側からのプッシュ配信が可能なものの、多くの実装では擬似的に双方向通信を行うため通信が発生するごとにTCPのハンドシェイク手続きを再度行う必要があるほか、HTTPコネクションを長時間占有するためその間同一サーバに接続する他のアプリケーションの動作に影響を及ぼす可能性があるなど、また別の問題が生じる(XMLHttpRequest#ロングポーリングも参照)。
これに対しWebSocketでは、サーバとクライアントが一度コネクションを行った後は、必要な通信を全てそのコネクション上で専用のプロトコルを用いて行う。従来の手法に比べると、新たなコネクションを張ることがなくなる・HTTPコネクションとは異なる軽量プロトコルを使うなどの理由により通信ロスが減る、一つのコネクションで全てのデータ送受信が行えるため同一サーバに接続する他のアプリケーションへの影響が少ないなどのメリットがある。[1]。
Flashの終焉 ?以前からFlashに批判的なAppleのスティーブ・ジョブズCEOが、Wall Street Journalを訪れた際、Flashを痛烈に批判したと伝えられている。同氏はFlashを「バッテリーを大きく消費する」「CPUリソースを大食いする」「セキュリティーホールのもと」「死にかけの技術」とこき下ろし、「われわれは古い技術に多くのエネルギーを注がない」と語ったという。ジョブズ氏は以前からFlashはバグが多いと批判しており、「Flashは使われなくなりHTML5に移行する」と語ったとも伝えられている。
引用:http://gigazine.net/news/20111110_flash_history/
JavaScriptの書きづらさを解消する、AltJSの登場
言語 設計/開発 登場時期 影響を受けた言語
CoffeeScript Jeremy Ashkenas, et al. 2009 JavaScript, Python, Ruby, Haskell
TypeScript Microsoft 2012 JavaScript, Java, C#
Haxe Haxe Foundation, Nicolas Cannasse
2005 ActionScript, OCaml
Dart Google 2011 Java, C++, JavaScript, CoffeeScript, Go
JSX DeNA 2012 JavaScript, ActionScript
フロントエンドでもパッケージ管理(npm)
• node.jsはJavaScriptがサーバーサイドで動く
• npmはnode.js向けのパッケージマネージャ。最近はフロントエンドのパッケージも多い。
タスクランナー(Gulp, Grunt)• Node.jsを使ったタスク自動化ツール。
• CSSやJavaScriptファイルの圧縮や結合ができる
• AltJSやSassのコンパイルなんかも自動化できる
• 画像の圧縮などコードに直接関係のないこともできる
• ほかの人と共有できる
• Webデザイナーでも、使えるようになると作業が捗る
まとめ• Webの世界ではもともとフロントエンドという概念はあまりなかった
• Webの技術の進化(厳密には再発見?)、コンピュータの進化により表現力が爆発的に上がり、UI/UXが見直されるようになった
• よりフロントエンドが開発しやすくできるよう、npmやgulp,AltJSなどを組み合わせたエコシステムが発達した