SPAと覚悟

•

395 likes•67,438 views

Teppei Sato

Frontend Meetup vol.1 - SPAを語り尽くす会! でのLT資料です。 http://connpass.com/event/38112/

Technology

SPA
@teppeis
Frontend Meetup vol.1
2016/9/16

Hello!
• @teppeis
• Cybozu, Inc. / kintone
• kintone SPA

SPA ?
https://commons.wikimedia.org/wiki/File:Onsen_Monkey.JPG

https://twitter.com/lef/status/774447745083908097

SPA a11y
•  
a11y
• SPA DOM  
a11y
• DIV React  
 
SPA Custom Elements)

http://marcysutton.github.io/accessibility-of-web-components/slides.html

https://speakerdeck.com/ahomu/client-side-of-fresh

https://speakerdeck.com/ahomu/wai-aria-in-fresh-and-abematv

SSR UX ( )
• HTTP/2, TLS1.3, QUICK
• AppCache
• Service Worker
• Resource Hints API, Prefetch
• Preload

/HTML
• HTML/Web  
GUI
• : Electron, WebView
•  
• XUL

What's hot

マイクロにしすぎた結果がこれだよ！mosa siru

(2017.6.9) Neo4jの可視化ライブラリまとめMitsutoshi Kiuchi

マイクロサービス　４つの分割アプローチ増田亨

Python 3.9からの新定番zoneinfoを使いこなそうRyuji Tsutsui

エンジニアのためのOSSライセンス管理～OSS管理ツールの池の水全部抜く～Daisuke Morishita

20200721 AWS Black Belt Online Seminar AWS App MeshAmazon Web Services Japan

Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤Amazon Web Services Japan

まじめに！できる！LT Akabane Hiroyuki

実運用して分かったRabbit MQの良いところ・気をつけること #jjugYahoo!デベロッパーネットワーク

[AWS EXpert Online for JAWS-UG 18] 見せてやるよ、Step Functions の本気ってやつをなAmazon Web Services Japan

例外設計における大罪Takuto Wada

コロナ禍で挑んだ超高速アジャイル開発～最速１.5ヶ月でローンチしたおでかけ混雑マップの舞台裏 (技術編) ～（NTTデータテクノロジーカンファレンス ...

「速」を落とさないコードレビューTakafumi ONAKA

こんなに使える！今どきのAPIドキュメンテーションツールdcubeio

20210127 今日から始めるイベントドリブンアーキテクチャ AWS Expert Online #13Amazon Web Services Japan

セキュリティを楽しむ（CTFとbugbountyの始め方）kazkiti

エンジニアの個人ブランディングと技術組織Takafumi ONAKA

クラウドでも非機能要求グレードは必要だよねYoshioSawada

Google Cloud で実践する SRE Google Cloud Platform - Japan

Serverless時代のJavaについてAmazon Web Services Japan

What's hot (20)

マイクロにしすぎた結果がこれだよ！

(2017.6.9) Neo4jの可視化ライブラリまとめ

マイクロサービス　４つの分割アプローチ

Python 3.9からの新定番zoneinfoを使いこなそう

エンジニアのためのOSSライセンス管理～OSS管理ツールの池の水全部抜く～

20200721 AWS Black Belt Online Seminar AWS App Mesh

Kinesis + Elasticsearchでつくるさいきょうのログ分析基盤

まじめに！できる！LT

実運用して分かったRabbit MQの良いところ・気をつけること #jjug

[AWS EXpert Online for JAWS-UG 18] 見せてやるよ、Step Functions の本気ってやつをな

例外設計における大罪

コロナ禍で挑んだ超高速アジャイル開発～最速１.5ヶ月でローンチしたおでかけ混雑マップの舞台裏 (技術編) ～（NTTデータテクノロジーカンファレンス ...

「速」を落とさないコードレビュー

こんなに使える！今どきのAPIドキュメンテーションツール

20210127 今日から始めるイベントドリブンアーキテクチャ AWS Expert Online #13

セキュリティを楽しむ（CTFとbugbountyの始め方）

エンジニアの個人ブランディングと技術組織

クラウドでも非機能要求グレードは必要だよね

Google Cloud で実践する SRE

Serverless時代のJavaについて

Viewers also liked

AngularJS2でつまづいたことTakehiro Takahashi

20160927 reactmeetupNaoki Kurosawa

AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016Sanehiko Yogi

SEO対策したサイトをAPI Gateway+Lambdaで作った話貴大平田

Serverless AWS構成でセキュアなSPAを目指すMasayuki Kato

(SEC201) How Should We All Think About Security?Amazon Web Services

(SEC323) New: Securing Web Applications with AWS WAFAmazon Web Services

Angular2実践入門Shumpei Shiraishi

angular1脳で見るangular2Moriyuki Arakawa

アメブロの大規模システム刷新とそれを支えるSpringTakuya Hattori

Railsチュートリアルの歩き方 (第4版)Yohei Yasukawa

Viewers also liked (11)

AngularJS2でつまづいたこと

20160927 reactmeetup

AWS WAF でセキュリティ対策_JAWS-UG沖縄勉強会_Cloud on the BEACH 2016

SEO対策したサイトをAPI Gateway+Lambdaで作った話

Serverless AWS構成でセキュアなSPAを目指す

(SEC201) How Should We All Think About Security?

(SEC323) New: Securing Web Applications with AWS WAF

Angular2実践入門

angular1脳で見るangular2

アメブロの大規模システム刷新とそれを支えるSpring

Railsチュートリアルの歩き方 (第4版)

Similar to SPAと覚悟

最新のWeb技術を体験しよう堀悟大

A Fullstack Future - Progressive Web AppsFrances Coronel

AMP のお話Takashi Fujita

The best tools for social marketers: SOCIAL FRESH EAST 2014Sevans Strategy

普通のwebエンジニアでも出来る、ド素人からの機械学習のはじめ方Atsushi Harada

Bringing Dev and Ops together with ChatOpsJaap Brasser

20091029 OpenID TalkShih-Chieh Li

Front-end style guides - fronteers @ WHITE (30/08/12)Stijn Janssen

API 101 - Understanding APIs3scale

API 101 - Understanding APIs.Kirsten Hunter

Crab - A Python Framework for Building Recommendation SystemsMarcel Caraciolo

認識開源社群運作Chieh Ying Kuo

Into the Box 2018 Building a PWA Ortus Solutions, Corp

Yapc8oji: セキュリティテストサービスを開発運営してきた2年ichikaway

CloudSkew ArchitectureMithun Shanbhag

今、人工知能にできること、できないことそして、近未来の人工知能のカタチ太一郎遠藤

Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜treby

PnP Monthly Community Call - April 2018SharePoint Patterns and Practices

Blogging for Your Art CareerNaoko Takano

Plone apiNejc Zupan

Similar to SPAと覚悟 (20)

最新のWeb技術を体験しよう

A Fullstack Future - Progressive Web Apps

AMP のお話

The best tools for social marketers: SOCIAL FRESH EAST 2014

普通のwebエンジニアでも出来る、ド素人からの機械学習のはじめ方

Bringing Dev and Ops together with ChatOps

20091029 OpenID Talk

Front-end style guides - fronteers @ WHITE (30/08/12)

API 101 - Understanding APIs

API 101 - Understanding APIs.

Crab - A Python Framework for Building Recommendation Systems

認識開源社群運作

Into the Box 2018 Building a PWA

Yapc8oji: セキュリティテストサービスを開発運営してきた2年

CloudSkew Architecture

今、人工知能にできること、できないことそして、近未来の人工知能のカタチ

Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜

PnP Monthly Community Call - April 2018

Blogging for Your Art Career

Plone api

Recently uploaded

GenCyber Cyber Security Day PresentationMichael W. Hawkins

Artificial Intelligence: Facts and MythsJoaquim Jorge

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

Boost PC performance: How more available memory can improve productivityPrincipled Technologies

Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal

[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays

AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10

Finology Group – Insurtech Innovation Award 2024The Digital Insurer

HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics

What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco

From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software

Recently uploaded (20)

GenCyber Cyber Security Day Presentation

Artificial Intelligence: Facts and Myths

Exploring the Future Potential of AI-Enabled Smartphone Processors

Boost PC performance: How more available memory can improve productivity

Advantages of Hiring UIUX Design Service Providers for Your Business

Data Cloud, More than a CDP by Matt Robison

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf

[2024]Digital Global Overview Report 2024 Meltwater.pdf

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

The 7 Things I Know About Cyber Security After 25 Years | April 2024

2024: Domino Containers - The Next Step. News from the Domino Container commu...

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

AWS Community Day CPH - Three problems of Terraform

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Finology Group – Insurtech Innovation Award 2024

HTML Injection Attacks: Impact and Mitigation Strategies

What Are The Drone Anti-jamming Systems Technology?

From Event to Action: Accelerate Your Decision Making with Real-Time Automation

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

15.

16. SPA • • • SEO ( ) • • •

17.

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

23.

24. https://speakerdeck.com/ahomu/client-side-of-fresh

25. https://speakerdeck.com/ahomu/wai-aria-in-fresh-and-abematv

26.

27. https://flic.kr/p/dmktpf

28. https://flic.kr/p/9WwiW

29.

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!

SPAと覚悟

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to SPAと覚悟

Similar to SPAと覚悟 (20)

More from Teppei Sato

More from Teppei Sato (20)

Recently uploaded

Recently uploaded (20)

SPAと覚悟