Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

JSUG勉強会

会場 : Pivotal Japan

Spring と SPA

  • ビルドの部
  • 開発の部
  • テストの部

そもそも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と一緒に使う。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment