Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SPAの基礎
Search
takanorip
October 20, 2016
Technology
0
680
SPAの基礎
takanorip
October 20, 2016
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
630
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
530
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
Other Decks in Technology
See All in Technology
ソースを読む時の思考プロセスの例-MkDocs
sat
PRO
1
160
Dify on AWS 環境構築手順
yosse95ai
0
120
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
120
OCIjp_Oracle AI World_Recap
shinpy
1
180
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
10k
Observability — Extending Into Incident Response
nari_ex
1
230
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
890
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
160
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
300
Kubernetes self-healing of your workload
hwchiu
0
500
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Being A Developer After 40
akosma
91
590k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Done Done
chrislema
185
16k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
We Have a Design System, Now What?
morganepeng
53
7.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Transcript
SPAの基礎 2016/10/26 Takanori Oki
SPAって何? • SPA(Single Page Application) • 単一ページで構成されるWebアプリ JavaScriptでDOMを操作しページ切り替え • AjaxやWebSocketを使用する
SPA·Ͱͷมભ
SPAまでの変遷(きっかけ) • 2010年にスティーブ・ジョブズがThoughts on Flashを発表 • それをきっかけにFlashやJavaアプレットなど のProprietary Software(ソフトウェアの配布者が独占的に 提供しているソフトウェア)が衰退
None
2014年 HTML5正式勧告
HTMLͰ WebΞϓϦέʔγϣϯ ࡞Ζ͏ʂ
SPAで使われている技術 • JavaScriptフレームワーク、ライブラリ (Angular、Vue.js、Reactなど) • 通信技術(Ajax、WebSocketなど) • バックエンド技術(Ruby on Railsなど)
SPAのメリット • 豊かな表現力 • クロスブラウザ • 応答がはやい
仕組みの違い
従来のWebアプリ クライアント サーバー ②HTTPリクエスト ③HTMLを生成 ④HTMLを更新 (再読込) ①状態の更新
SPA クライア ント サーバー JS ④ JSで差分更新 ③APIからの レスポンス ①状態の更新
②APIに リクエスト Ajax WebSocket