Submit Search
Upload
SPAと覚悟
•
395 likes
•
67,413 views
Teppei Sato
Follow
Frontend Meetup vol.1 - SPAを語り尽くす会! でのLT資料です。 http://connpass.com/event/38112/
Read less
Read more
Technology
Report
Share
Report
Share
1 of 32
Download Now
Download to read offline
Recommended
正しいものを正しくつくる
正しいものを正しくつくる
toshihiro ichitani
Lean coffee
Lean coffee
Takeshi Arai
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版
Tokoroten Nakayama
xOps: エンジニアがスタートアップの成長の原動力となる日
xOps: エンジニアがスタートアップの成長の原動力となる日
Takaaki Umada
Jetson活用セミナー ROS2自律走行実現に向けて
Jetson活用セミナー ROS2自律走行実現に向けて
Fixstars Corporation
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
More Related Content
What's hot
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
Itsuki Kuroda
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
Yoshiki Hayama
知っておきたいFirebase の色んな上限について
知っておきたいFirebase の色んな上限について
健一 辰濱
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
DeNA
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
Takuya Ueda
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
Ore Product
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeNA
ソーシャルゲームにレコメンドエンジンを導入した話
ソーシャルゲームにレコメンドエンジンを導入した話
Tokoroten Nakayama
アジャイルな見積りと計画づくり勉強会
アジャイルな見積りと計画づくり勉強会
Arata Fujimura
心理的安全性の構造 デブサミ2019夏 structure of psychological safety
心理的安全性の構造 デブサミ2019夏 structure of psychological safety
Tokoroten Nakayama
Product ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについて
Noritaka Shinohara
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
NTT DATA Technology & Innovation
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
Takeshi Kakeda
ウォーターフォールとアジャイルのフェアな比較
ウォーターフォールとアジャイルのフェアな比較
Yoshitaka Kawashima
マイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチ
増田 亨
新人研修資料 向き合うエンジニア
新人研修資料 向き合うエンジニア
akira6592
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
Tokoroten Nakayama
アジャイル開発はWhyから始まる
アジャイル開発はWhyから始まる
toshihiro ichitani
What's hot
(20)
フロー効率性とリソース効率性について #xpjug
フロー効率性とリソース効率性について #xpjug
「顧客の声を聞かない」とはどういうことか
「顧客の声を聞かない」とはどういうことか
知っておきたいFirebase の色んな上限について
知っておきたいFirebase の色んな上限について
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
スマホゲームのチート手法とその対策 [DeNA TechCon 2019]
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
オーバーエンジニアリングって何? #devsumi #devsumiA
オーバーエンジニアリングって何? #devsumi #devsumiA
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
DeClang 誕生!Clang ベースのハッキング対策コンパイラ【DeNA TechCon 2020 ライブ配信】
ソーシャルゲームにレコメンドエンジンを導入した話
ソーシャルゲームにレコメンドエンジンを導入した話
アジャイルな見積りと計画づくり勉強会
アジャイルな見積りと計画づくり勉強会
心理的安全性の構造 デブサミ2019夏 structure of psychological safety
心理的安全性の構造 デブサミ2019夏 structure of psychological safety
Product ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについて
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
MLOps に基づく AI/ML 実運用最前線 ~画像、動画データにおける MLOps 事例のご紹介~(映像情報メディア学会2021年冬季大会企画セッショ...
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
DX時代のITエンジニアに送る、アジャイル式「いきいき」ヘルスマネジメント
ウォーターフォールとアジャイルのフェアな比較
ウォーターフォールとアジャイルのフェアな比較
マイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチ
新人研修資料 向き合うエンジニア
新人研修資料 向き合うエンジニア
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
チャットコミュニケーションの問題と心理的安全性の課題 #EOF2019
アジャイル開発はWhyから始まる
アジャイル開発はWhyから始まる
Viewers also liked
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
Takehiro Takahashi
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
Sanehiko Yogi
SEO対策したサイトをAPI Gateway+Lambdaで作った話
SEO対策したサイトをAPI Gateway+Lambdaで作った話
貴大 平田
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
Masayuki Kato
(SEC201) How Should We All Think About Security?
(SEC201) How Should We All Think About Security?
Amazon Web Services
(SEC323) New: Securing Web Applications with AWS WAF
(SEC323) New: Securing Web Applications with AWS WAF
Amazon Web Services
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
Takuya Hattori
Railsチュートリアルの歩き方 (第4版)
Railsチュートリアルの歩き方 (第4版)
Yohei Yasukawa
Viewers also liked
(11)
AngularJS2でつまづいたこと
AngularJS2でつまづいたこと
20160927 reactmeetup
20160927 reactmeetup
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016
SEO対策したサイトをAPI Gateway+Lambdaで作った話
SEO対策したサイトをAPI Gateway+Lambdaで作った話
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
(SEC201) How Should We All Think About Security?
(SEC201) How Should We All Think About Security?
(SEC323) New: Securing Web Applications with AWS WAF
(SEC323) New: Securing Web Applications with AWS WAF
Angular2実践入門
Angular2実践入門
angular1脳で見るangular2
angular1脳で見るangular2
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
Railsチュートリアルの歩き方 (第4版)
Railsチュートリアルの歩き方 (第4版)
Similar to SPAと覚悟
最新のWeb技術を体験しよう
最新のWeb技術を体験しよう
堀 悟大
A Fullstack Future - Progressive Web Apps
A Fullstack Future - Progressive Web Apps
Frances Coronel
AMP のお話
AMP のお話
Takashi Fujita
The best tools for social marketers: SOCIAL FRESH EAST 2014
The best tools for social marketers: SOCIAL FRESH EAST 2014
Sevans Strategy
普通のwebエンジニアでも出来る、ド素人からの機械学習のはじめ方
普通のwebエンジニアでも出来る、ド素人からの機械学習のはじめ方
Atsushi Harada
Bringing Dev and Ops together with ChatOps
Bringing Dev and Ops together with ChatOps
Jaap Brasser
20091029 OpenID Talk
20091029 OpenID Talk
Shih-Chieh Li
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
Stijn Janssen
API 101 - Understanding APIs
API 101 - Understanding APIs
3scale
API 101 - Understanding APIs.
API 101 - Understanding APIs.
Kirsten Hunter
Crab - A Python Framework for Building Recommendation Systems
Crab - A Python Framework for Building Recommendation Systems
Marcel Caraciolo
認識開源社群運作
認識開源社群運作
Chieh Ying Kuo
Into the Box 2018 Building a PWA
Into the Box 2018 Building a PWA
Ortus Solutions, Corp
Yapc8oji: セキュリティテストサービスを開発運営してきた2年
Yapc8oji: セキュリティテストサービスを開発運営してきた2年
ichikaway
CloudSkew Architecture
CloudSkew Architecture
Mithun Shanbhag
今、人工知能にできること、できないこと そして、近未来の人工知能のカタチ
今、人工知能にできること、できないこと そして、近未来の人工知能のカタチ
太一郎 遠藤
Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜
Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜
treby
PnP Monthly Community Call - April 2018
PnP Monthly Community Call - April 2018
SharePoint Patterns and Practices
Blogging for Your Art Career
Blogging for Your Art Career
Naoko Takano
Plone api
Plone api
Nejc Zupan
Similar to SPAと覚悟
(20)
最新のWeb技術を体験しよう
最新のWeb技術を体験しよう
A Fullstack Future - Progressive Web Apps
A Fullstack Future - Progressive Web Apps
AMP のお話
AMP のお話
The best tools for social marketers: SOCIAL FRESH EAST 2014
The best tools for social marketers: SOCIAL FRESH EAST 2014
普通のwebエンジニアでも出来る、ド素人からの機械学習のはじめ方
普通のwebエンジニアでも出来る、ド素人からの機械学習のはじめ方
Bringing Dev and Ops together with ChatOps
Bringing Dev and Ops together with ChatOps
20091029 OpenID Talk
20091029 OpenID Talk
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
API 101 - Understanding APIs
API 101 - Understanding APIs
API 101 - Understanding APIs.
API 101 - Understanding APIs.
Crab - A Python Framework for Building Recommendation Systems
Crab - A Python Framework for Building Recommendation Systems
認識開源社群運作
認識開源社群運作
Into the Box 2018 Building a PWA
Into the Box 2018 Building a PWA
Yapc8oji: セキュリティテストサービスを開発運営してきた2年
Yapc8oji: セキュリティテストサービスを開発運営してきた2年
CloudSkew Architecture
CloudSkew Architecture
今、人工知能にできること、できないこと そして、近未来の人工知能のカタチ
今、人工知能にできること、できないこと そして、近未来の人工知能のカタチ
Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜
Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜
PnP Monthly Community Call - April 2018
PnP Monthly Community Call - April 2018
Blogging for Your Art Career
Blogging for Your Art Career
Plone api
Plone api
More from Teppei Sato
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
Teppei Sato
サイボウズの給与交渉戦 - Boss Side -
サイボウズの給与交渉戦 - Boss Side -
Teppei Sato
Recent compat-table issues
Recent compat-table issues
Teppei Sato
kintoneがAWSで目指すDevOpsQAな開発
kintoneがAWSで目指すDevOpsQAな開発
Teppei Sato
Automated Dependency Updates with Renovate
Automated Dependency Updates with Renovate
Teppei Sato
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
Teppei Sato
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
Teppei Sato
サイボウズの現在と未来
サイボウズの現在と未来
Teppei Sato
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
Teppei Sato
サイボウズの開発を支えるKAIZEN文化
サイボウズの開発を支えるKAIZEN文化
Teppei Sato
JavaScript Language Update 2016 (LLoT)
JavaScript Language Update 2016 (LLoT)
Teppei Sato
You Don't Know ES Modules
You Don't Know ES Modules
Teppei Sato
Closure Compiler Updates for ES6
Closure Compiler Updates for ES6
Teppei Sato
ES6 in Practice
ES6 in Practice
Teppei Sato
Our wish to Flowtype
Our wish to Flowtype
Teppei Sato
Effective ES6
Effective ES6
Teppei Sato
Flowtype Introduction
Flowtype Introduction
Teppei Sato
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Teppei Sato
本当のClosure Compilerをお見せしますよ。
本当のClosure Compilerをお見せしますよ。
Teppei Sato
DockerがYAVAY!
DockerがYAVAY!
Teppei Sato
More from Teppei Sato
(20)
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
Node.js Native ESM への道 〜最終章: Babel / TypeScript Modules との闘い〜
サイボウズの給与交渉戦 - Boss Side -
サイボウズの給与交渉戦 - Boss Side -
Recent compat-table issues
Recent compat-table issues
kintoneがAWSで目指すDevOpsQAな開発
kintoneがAWSで目指すDevOpsQAな開発
Automated Dependency Updates with Renovate
Automated Dependency Updates with Renovate
君はyarn.lockをコミットしているか?
君はyarn.lockをコミットしているか?
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズのフロントエンド開発 現在とこれからの挑戦
サイボウズの現在と未来
サイボウズの現在と未来
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
離れた場所でも最高のチームワークを実現する方法 ーサイボウズ開発チームのリモートワーク事例ー
サイボウズの開発を支えるKAIZEN文化
サイボウズの開発を支えるKAIZEN文化
JavaScript Language Update 2016 (LLoT)
JavaScript Language Update 2016 (LLoT)
You Don't Know ES Modules
You Don't Know ES Modules
Closure Compiler Updates for ES6
Closure Compiler Updates for ES6
ES6 in Practice
ES6 in Practice
Our wish to Flowtype
Our wish to Flowtype
Effective ES6
Effective ES6
Flowtype Introduction
Flowtype Introduction
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
本当のClosure Compilerをお見せしますよ。
本当のClosure Compilerをお見せしますよ。
DockerがYAVAY!
DockerがYAVAY!
Recently uploaded
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
arrow10202532yuvraj
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
IES VE
201610817 - edge part1
201610817 - edge part1
Jamie (Taka) Wang
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
dgelyza
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
Mahmoud Rabie
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
Hironori Washizaki
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
DianaGray10
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
Brian Pichman
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Commit University
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
D Cloud Solutions
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
Pedro Manuel
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
Nuwan Dias
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
shyamraj55
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
DianaGray10
20230104 - machine vision
20230104 - machine vision
Jamie (Taka) Wang
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
Juan Carlos Gonzalez
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
UiPathCommunity
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
Seth Reyes
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
Tarek Kalaji
Recently uploaded
(20)
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
201610817 - edge part1
201610817 - edge part1
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
Nanopower In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
The Kubernetes Gateway API and its role in Cloud Native API Management
The Kubernetes Gateway API and its role in Cloud Native API Management
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
20230104 - machine vision
20230104 - machine vision
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
SPAと覚悟
1.
SPA @teppeis Frontend Meetup vol.1 2016/9/16
2.
Hello! • @teppeis • Cybozu,
Inc. / kintone • kintone SPA
3.
https://kintone.cybozu.com
4.
SPA ? https://commons.wikimedia.org/wiki/File:Onsen_Monkey.JPG
5.
1
6.
UX
9.
SPA
10.
SPA
11.
:
12.
• • A =>
B => C • • C => B => A
13.
SPA • • A =>
B => B’ • • B’ => A ???
14.
• • SPA • 1 •
/ • • dispose / XHR
16.
SPA • • • SEO (
) • • •
18.
https://twitter.com/lef/status/774447745083908097
19.
Accessibility
20.
SPA a11y • a11y •
SPA DOM a11y • DIV React SPA Custom Elements)
21.
http://marcysutton.github.io/accessibility-of-web-components/slides.html
22.
SPA SPA
24.
https://speakerdeck.com/ahomu/client-side-of-fresh
25.
https://speakerdeck.com/ahomu/wai-aria-in-fresh-and-abematv
27.
https://flic.kr/p/dmktpf
28.
https://flic.kr/p/9WwiW
30.
SSR UX (
) • HTTP/2, TLS1.3, QUICK • AppCache • Service Worker • Resource Hints API, Prefetch • Preload
31.
/HTML • HTML/Web GUI •
: Electron, WebView • • XUL
32.
SPA Thanks!
Download Now