Download to read offline
![# SPA
<HTML>
テンプレート群
View関数
listView()、detailView()
formView()…
Router関数
[list, detail, form …]
eventHandler関数
clickListItem ()、deleteItem()
submit()…①clickやinputイベントを発火
①’hashChange イベントを発火
②イベントの種類によって適切な
View関数を呼び出し
②’hashの値によって適切な
View関数を呼び出し
③用意済みのテンプレートを取得
④テンプレートの内容を書き換え
③
④](https://image.slidesharecdn.com/20170722webengineermeetupspaserverlessupload-170722065957/85/2017-SPA-10-320.jpg)
![[社内勉強会]SPAのすすめ](https://cdn.slidesharecdn.com/ss_thumbnails/spa-160304020346-thumbnail.jpg?width=640&height=640&fit=bounds)
【2017早めの夏休み自由研究】SPAとサーバーレスについて
- 1.
- 2. # 自己紹介 松村 和輝(zuckey_17) -Yappli, inc. - フロントエンド と サーバサイド - React + Reduxで現行の管理画面をリプレース - Laravel ( PHP の FW ) でAPI周りの実装 - その他、AWS などで インフラ周りをちょびっと - Podcast しがないラジオ - 楽しくて仕方がないラジオ - https://shiganai.org - Twitter @shiganaiRadio #しがないラジオ
- 3.
- 4.
- 5. # 話さないこと - SPA -フレームワーク、ライブラリの紹介、比較 - サーバレス - クラウドサービスの詳しい紹介、比較
- 6. # 話すこと - SPA、サーバレスアーキテクチャ -どういうものか - 導入時、意識しないといけないこと
- 7.
- 8. # SPA(Single PageApplication) - URLが変更されてもページのリロードが行われない - Ajaxやfetchで裏側からデータを取得し、描画や編集作業をする - どういうことをしているか - 各種のブラウザイベントによるビューの更新 - ハッシュイベントによるテンプレートの書き換え - データバインディング - APIによるデータへのアクセス
- 9. # SPA(Single PageApplication) - URLが変更されてもページのリロードが行われない - Ajaxやfetchで裏側からデータを取得し、描画や編集作業をする - どういうことをしているか - 各種のブラウザイベントによるビューの更新 - ハッシュイベントによるテンプレートの書き換え - データバインディング - APIによるデータへのアクセス
- 10. # SPA <HTML> テンプレート群 View関数 listView()、detailView() formView()… Router関数 [list, detail,form …] eventHandler関数 clickListItem ()、deleteItem() submit()…①clickやinputイベントを発火 ①’hashChange イベントを発火 ②イベントの種類によって適切な View関数を呼び出し ②’hashの値によって適切な View関数を呼び出し ③用意済みのテンプレートを取得 ④テンプレートの内容を書き換え ③ ④
- 11. # SPAの導入時、意識しないといけないこと - ロジックをクライアントに実装する サーバサイドとのロジックの統一が必要 ->重複実装を避けSPAに寄せる選択肢 -> 後半のサーバーレスにつながる - 初回ロードが遅い -> App Shell、ロードアニメーション、SSR、Lazy load、ファイル圧縮 などによる対応 - デザイナーとの協業 -> Atomic Design、Material Designなどデザインフレームワークなど -> ドキュメント化
- 12. # サーバーレス 各種大手クラウドサービスにて”サーバーレス” (サーバーが抽象化されて隠蔽サれている) と呼ばれるようなサービスが増えてきた AWS Lambda、FirebaseCloud Function、Azure Functions - Applicationサーバ、Webサーバが存在しない -> スケーラブル - 時間課金、実行時のみのリソースに対する課金 -> リーズナブル - サーバ、ミドルウェア、ネットワークなどのレイヤを意識しなくても良い - コード量を減らせる
- 13. # N-tier architecher Cfhttps://eavoices.com/2012/07/16/architecture-styles/
- 14. # サーバーレスで導入時、意識しないといけないこと - サードパーティによるベンダーロックイン -function系のものであれば少しの変更で移行可能 かもしれないが、具体的なサービスで あればあるほど乗り換えコストがかかる - クラウドビッグ3なら大丈夫？？
- 15. # サーバーレスの導入時、意識しないといけないこと - サービスごとのログの違い -自分でアプリケーションを書いていたら落とすログは 調整できる - セキュリティについて - クライアントがどういったhttpリクエストをしているか は厳密にはユーザーが知ることができる （各種クラウドサービスが提供するセキュアな方法を理 解して使う必要がある）
- 16. # 宣伝 • “楽しくて仕方がないラジオ” •Twitter @shiganaiRadio #しがないラジオ • ep.19 楽しいSPAとサーバーレス https://shiganai.org/ep/ep19-spa
- 17. # まとめ - SPAについて 業務で多く書いているため普段触っているフレームワークが どんなことをしているのかを知れてよかった -サーバーレスアーキテクチャ 少し実装してみたところなんだかんだwebフレームワーク的な上にAPI を用意したほうが早いんじゃないかという気持ちになってきた 使いどころの見極めが重要 使いたいサービスがあって要件にあっていれば楽そう 次回以降のOSCAさんのサーバーレス話に期待