会場 : Pivotal Japan
- ビルドの部
- 開発の部
- テストの部
そもそもSPAって？ Sigle-page Application(SPA)
Javascritフレームワーク
- Angular
- React
今回はriot.js
なぜビルド？ 楽したいから。
これまでの開発
- Tomcatが必要
- データベースが必要
これまでのリリース前作業
- 圧縮(minify)
- 依存関係
昨今のフロントエンド
絶賛成長中 → 新しいものいっぱい → いろいろ使いたい それぞれ変換が必要 → 出来るだけ自動化したい → タスクランナーの出番
タスクランナー
- Gulp
- GRUNT
JSPM
ライブラリの依存解決 npm や github のモジュールも利用可能
Gradle client server
gradle-gulp-plugin
./gradlew clean build
css最適化やjs最適化が今後の課題
開発の部
そもそも何でSPAなのか SSRって何？ isomorphicって何？ RiotJSって何？ 実際に試してみました
チラつきを無くすためにSPAを採用している スマホアプリなどではチラつきが減っている
ページ遷移した際 ログインページからダッシュボードへ遷移した際 メニュー画面への遷移 SPAで解決
AjaxコールによるDOM構築時 ログイン状態でダッシュボードへした際 ボスキャラ描画 SSRで解決
SSRはサーバ側でレンダリングする技術
SSR無しのケース SPAを導入する 画面が表示された瞬間Ajaxコール
SSRを導入する 画面のリクエストが呼ばれる 初期画面に必要な
Domを構築した状態でレスポンスを返す サーバーサイドにDom
isomolpicはクライアント、サーバ共に同じコードを利用する技術 詳しくはQiitaで。
サーバサイト RestController サーバサイド RequestMapping フロントサイド Javascript
RiotJS コンポーネント単位 通常のHTML 挙動のScript の2つをtodoタグで囲われている。これをコンポーネントとする。 1つの場所で完結しているので保守しやすい。 そしてテンプレート。
nasphornでビルドしている
テストの部
Spring & SPA クライアントサイドのテストについて
Viewが期待通りに動作するかをテスト SPAだとクライアントサイドにロジックを持つことになる UX的にはViewが大きな責務を担う。
- karma テストランナー
- mocha テストフレームワーク
- chai アサーションライブラリ
イマドキのフロントエンド開発 モダンWebでアプリ作るならSpringだけでなく
フロントから見たSpring Framework フロントエンドのトレンド フロントエンドフレームワーク フロントはどうやって開発しているか Reactのご機嫌 Angular2のご機嫌 ReactとAngular2 どっちを選ぶか
SPAアーキテクチャ OLD Web HTML5(Single-page Application) HTML & CSS JavaScript JSON
- User Interface
- Interface Management
- Logic & State
- Data
- APIs
- Integration
クライアントで出来ることはクライアントでやろうって話。
Web ComponentsとはWebを部品化する仕組み W3Cの仕様
- HTML Templates
- Shadow DOM
- Custom Elements
- HTML Imports
Scoped CSSを実現する
CSSスコープをコンポーネントに閉じ込める コンポーネント化したこの部分のデザインは周りに引きずられたくない
Shadow DOMが肝
Custom Elements 独自タグを定義 独自タグはハイフンをつけるのがWeb標準 ハイフンつけないと標準ではエラーが出る
#shadow-root Chromeでしか出来ない。他は鋭意作成中。
PolymerはPolyfile実装したWeb Componentsライブラリ 参照実装みたいな位置づけ。仕様が決まってないし、実用としては使わない方が良い。
Progressive Web Apps Mobile has natively come to the Web みんなWebに戻ってきてほしい
Service Worker push通信とか
エディタとnpmが必要
circleci wercker
karmaはAngular用
Chrome Canary Firefox Developer Edition
JavaScriptの拡張 Reactはフレームワークではない！ React + Flux or React + Redux or etc.
Angular Angular2はただいまRC4 大きな切り替わりがRC5になる(8月くらいにコミットかも) これがAngular2最後の改変でRC5の次がstable
Angular2エコシステム Angular 2 Release Candidate
HTMLテンプレートの拡張 karma/protractorなどのテストツールの充実 @InjectableによるJavaScriptのインジェクション提供 Web Componentsへの取り組みやScoped CSSの実装
ReactはJavaScript重視。Angular2はHTMLテンプレート重視。スタンスが違う。やってることは一緒。
構造上コンパイルはReactより遅い
常にWeb標準やECMA標準を気にする Webの進化スピードは早い
JQuery単体で使うことはない。Backboneと一緒に使う。