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

インフラCICDの勘所Toru Makabe

Amazon ElastiCacheのはじめ方Amazon Web Services Japan

アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -Naoki Nagazumi

Azure API Management 俺的マニュアル貴志上坂

シングルサインオンの歴史とSAMLへの道のりShinichi Tomita

Keycloakのステップアップ認証についてHitachi, Ltd. OSS Solution Center.

RDB開発者のためのApache Cassandra データモデリング入門Yuki Morishita

NGINXをBFF (Backend for Frontend)として利用した話Hitachi, Ltd. OSS Solution Center.

Keycloak拡張入門Hiroyuki Wada

ふつうのRailsアプリケーション開発Takafumi ONAKA

インセプションデッキ：やらないことリストとトレードオフスライダーをやってる話Nobuhiro Yoshitake

暗号技術の実装と数学MITSUNARI Shigeo

Swaggerでのapi開発よもやま話KEISUKE KONISHI

イベント・ソーシングを知るShuhei Fujita

Amazon SageMakerでカスタムコンテナを使った学習西岡賢一郎

君はyarn.lockをコミットしているか？Teppei Sato

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

ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割Recruit Lifestyle Co., Ltd.

OSS活動の活発さと評価の関係についてTakuto Wada

シリコンバレーの「何が」凄いのかAtsushi Nakada

What's hot (20)

インフラCICDの勘所

Amazon ElastiCacheのはじめ方

アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -

Azure API Management 俺的マニュアル

シングルサインオンの歴史とSAMLへの道のり

Keycloakのステップアップ認証について

RDB開発者のためのApache Cassandra データモデリング入門

NGINXをBFF (Backend for Frontend)として利用した話

Keycloak拡張入門

ふつうのRailsアプリケーション開発

インセプションデッキ：やらないことリストとトレードオフスライダーをやってる話

暗号技術の実装と数学

Swaggerでのapi開発よもやま話

イベント・ソーシングを知る

Amazon SageMakerでカスタムコンテナを使った学習

君はyarn.lockをコミットしているか？

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

ホットペッパービューティーにおけるモバイルアプリ向けAPIのBFF/Backend分割

OSS活動の活発さと評価の関係について

シリコンバレーの「何が」凄いのか

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

GenAI Risks & Security Meetup 01052024.pdflior mazor

Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services

Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1

TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc

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

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Principled Technologies

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

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer

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

Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics

Partners Life - Insurer Innovation Award 2024The Digital Insurer

🐬 The future of MySQL is Postgres 🐘RTylerCroy

Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun

Manulife - Insurer Innovation Award 2024The Digital Insurer

Recently uploaded (20)

GenAI Risks & Security Meetup 01052024.pdf

Strategies for Landing an Oracle DBA Job as a Fresher

Boost Fertility New Invention Ups Success Rates.pdf

TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments

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

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...

AWS Community Day CPH - Three problems of Terraform

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...

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

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024

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

Tata AIG General Insurance Company - Insurer Innovation Award 2024

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

HTML Injection Attacks: Impact and Mitigation Strategies

Partners Life - Insurer Innovation Award 2024

🐬 The future of MySQL is Postgres 🐘

Powerful Google developer tools for immediate impact! (2023-24 C)

Manulife - Insurer Innovation Award 2024

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