SPAと覚悟

•

395 likes•67,445 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

イミュータブルデータモデルの極意Yoshitaka Kawashima

「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまでShuichi Tsutsumi

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

分散トレーシング技術について（Open tracingやjaeger）NTT Communications Technology Development

30分でわかるマイクロサービスアーキテクチャ第2版Naoki (Neo) SATO

PlaySQLAlchemy: SQLAlchemy入門泰増田

正しいものを正しくつくるtoshihiro ichitani

JSON Value into Power AutomateTomoyuki Obi

モノリスからマイクロサービスへの移行～ストラングラーパターンの検証～（Spring Fest 2020講演資料）NTT DATA Technology & Innovation

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

実装して理解するLINE LoginとOpenID Connect入門Naohiro Fujie

よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの？Hirofumi Ota

Rustに触れて私のPythonはどう変わったかShunsukeNakamura17

Microsoft Graph APIを活用した社内アプリケーション開発Yuki Hattori

Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24Shin Ohno

Issueの書き方と伝え方Rina Fukuda

KotlinアンチパターンRecruit Lifestyle Co., Ltd.

マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018Yusuke Suzuki

テスト文字列に「うんこ」と入れるなKentaro Matsui

ユーザーストーリー駆動開発で行こう。toshihiro ichitani

What's hot (20)

イミュータブルデータモデルの極意

「スキルなし・実績なし」 32歳窓際エンジニアがシリコンバレーで働くようになるまで

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

分散トレーシング技術について（Open tracingやjaeger）

30分でわかるマイクロサービスアーキテクチャ第2版

PlaySQLAlchemy: SQLAlchemy入門

正しいものを正しくつくる

JSON Value into Power Automate

モノリスからマイクロサービスへの移行～ストラングラーパターンの検証～（Spring Fest 2020講演資料）

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

実装して理解するLINE LoginとOpenID Connect入門

よく聞くけど、「SharePoint リストの 5,000 件問題」ってなんなの？

Rustに触れて私のPythonはどう変わったか

Microsoft Graph APIを活用した社内アプリケーション開発

Mercari JPのモノリスサービスをKubernetesに移行した話 PHP Conference 2022 9/24

Issueの書き方と伝え方

Kotlinアンチパターン

マイクロサービス化デザインパターン - #AWSDevDay Tokyo 2018

テスト文字列に「うんこ」と入れるな

ユーザーストーリー駆動開発で行こう。

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

IESVE for Early Stage Design and PlanningIES VE

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance

Easier, Faster, and More Powerful – Notes Document Properties Reimaginedpanagenda

ECS 2024 Teams Premium - Pretty SecureFemke de Vroome

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin

Syngulon - Selection technology May 2024.pdfSyngulon

Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance

Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55

FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FIDO Alliance

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275

Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore

AI mind or machine power point presentationyogeshlabana357357

Your enemies use GenAI too - staying ahead of fraud with Neo4jNeo4j

Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance

BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxNeo4j

Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance

Recently uploaded (20)

IESVE for Early Stage Design and Planning

The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf

Easier, Faster, and More Powerful – Notes Document Properties Reimagined

ECS 2024 Teams Premium - Pretty Secure

Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...

Syngulon - Selection technology May 2024.pdf

Long journey of Ruby Standard library at RubyKaigi 2024

Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...

Oauth 2.0 Introduction and Flows with MuleSoft

FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...

TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...

Extensible Python: Robustness through Addition - PyCon 2024

AI mind or machine power point presentation

Your enemies use GenAI too - staying ahead of fraud with Neo4j

Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...

Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf

BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx

Powerful Start- the Key to Project Success, Barbara Laskowska

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf

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と覚悟