Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SPAの基礎
takanorip
October 20, 2016
Technology
0
390
SPAの基礎
takanorip
October 20, 2016
Tweet
Share
More Decks by takanorip
See All by takanorip
ソフトウェアエンジニアの教養を養う本
takanorip
1
13k
共創するためのデザイン批評
takanorip
7
3.2k
Figmaプラグイン 開発のすゝめ
takanorip
0
170
Headless Components Design
takanorip
0
39
10分で理解する HTML Modules
takanorip
1
390
Polymer Project 2020
takanorip
1
120
技術とデザインの間
takanorip
0
1.3k
Color in Interface Experience
takanorip
1
89
ウェブフォント今昔物語
takanorip
5
3.6k
Other Decks in Technology
See All in Technology
動画配信技術について
yaminoma
0
210
成長を続ける組織でのSRE戦略:プレモーテムによる信頼性の認識共有 SRE Next 2022
niwatakeru
7
2.3k
Steps toward self-service operations in eureka
fukubaka0825
0
440
Nutanix_Meetup_20220511
keigotomomatsu
0
140
220510 プロセスマイニングを学ぶ PLAY与田さん
comucal
PRO
0
700
ISUCON で使えるツールを作った
shotakitazawa
0
350
Embedded SRE at Mercari
tcnksm
0
810
Power BI Report Ops
hanaseleb
0
160
2022年度ロボットフロンティア第1回
ryuichiueda
0
140
モデリング、コンテキスト トランジション +1 / Data modeling
ishiayaya
0
110
LINEスタンプの実例紹介 小さく始める障害検知・対応・振り返りの 改善プラクティス
line_developers
PRO
3
1.3k
Deeplearning from almost scratch
hn410
0
580
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
WebSockets: Embracing the real-time Web
robhawkes
57
5k
Making Projects Easy
brettharned
98
4.3k
Facilitating Awesome Meetings
lara
29
3.9k
Navigating Team Friction
lara
175
11k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
GraphQLとの向き合い方2022年版
quramy
16
8.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
BBQ
matthewcrist
74
7.9k
The Art of Programming - Codeland 2020
erikaheidi
31
5.8k
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