Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web Components: The Future of Web Applications
Search
Ire Aderinokun
June 17, 2017
Programming
6
1.6k
Web Components: The Future of Web Applications
Talk at Google I/O Extended Lagos
Ire Aderinokun
June 17, 2017
Tweet
Share
More Decks by Ire Aderinokun
See All by Ire Aderinokun
Web Accessibility: It Doesn't Have to Be Hard
ireade
4
1.1k
Becoming a GDE & Overcoming Stage Fright
ireade
4
470
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
470
Building "The Loop" (Introduction to Frontend Development)
ireade
3
280
Demystifying Angular Universal
ireade
5
550
Introduction to UI/UX Design
ireade
9
670
Building Modern Progressive Web Apps
ireade
7
1.6k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.5k
Hosting with Firebase
ireade
3
790
Other Decks in Programming
See All in Programming
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
720
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
480
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
460
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
810
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
240
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
990
Reactの歴史を振り返る
tutinoko
1
130
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.3k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
730
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Code Reviewing Like a Champion
maltzj
524
40k
How STYLIGHT went responsive
nonsquared
100
5.7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
It's Worth the Effort
3n
185
28k
For a Future-Friendly Web
brad_frost
179
9.8k
How to train your dragon (web standard)
notwaldorf
96
6.1k
GitHub's CSS Performance
jonrohan
1031
460k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Transcript
Web Components: The Future of Web Applications Ire Aderinokun I/O
Extended Lagos
Hello! • Ire Aderinokun • Frontend Developer and User Interface
Designer • Google Expert in Web Technologies • Writer, bitsofco.de • Software Developer at eyeo
Building Applications on the Web is Hard
None
Android <android.support.design.widget. BottomNavigationView />
iOS UITabBar UITabBarController
Web
This is because the Web is an open platform
Building Blocks of the Web
Early Websites
Websites Today
But Web Technologies are getting better
The Solution is Web Components!
Web Components are a set of new web platform features
that let you create your own HTML elements
<bottom-navigation> <floating-action-button> <ire-aderinokun> <caniuse-embed> <inlinetweetjs> <meme-generator> <inlinetweetjs> <bitsofcode>
Encapsulated & Reusable
1B+ mobile devices natively support Web Components, right now!
None
What is the Polymer Project?
– The Polymer Team “Our mission is to make life
better for users and developers, by helping developers unlock the web platform’s full potential and by spurring the web platform to evolve and improve.”
The Polymer Project is a look into the future of
web development
None
1. Polymer Library
The Polymer Library is a Javascript Library that helps you
create custom reusable HTML elements, and use them to build performant, maintainable apps
Why use the Polymer Library?
Polymer 2.0 ! Improved Interoperability Data System Improvements Uses Native
APIs Polymer CLI
2. Elements
None
None
None
None
3. PRPL
None
4. App Toolbox
Polymer App Toolbox is a collection of components, tools and
templates for building Progressive Web Apps with Polymer
Features • Component-based architecture using Polymer • Routing using the
<app-route> elements • Offline caching using Service Workers • Build tooling to support delivery over HTTP/1 or HTTP/2
5. Tooling
Polymer CLI
Commands • polymer init • polymer serve • polymer lint
• polymer test • polymer build • polymer analyze
polymer init
What can you actually do with Web Components?
<caniuse-embed>
None
cheese.polymer-project.org
None
None
How do Web Components work?
4 Key Web Technologies HTML Imports Shadow DOM HTML Templates
Custom Elements
Custom Elements • An API for creating your own HTML
elements by creating a Class that extends from HTMLElement • customElements.define()
HTML Templates • A mechanism for defining content that can
be stored for subsequent use in a document • <template></template>
Shadow DOM • A mechanism for encapsulating a DOM and
CSS, so that they can remain separate from the main document • document.body.attachShadow()
HTML Imports • A way to package and share HTML
files • <link rel=“import” href=“component.html”>
None
None
A Simple Native Web Component
None
Custom Elements API
Base HTMLElement Class
Shadow DOM
Content
None
None
How do Polymer Components Work?
None
Import Polymer Library
Custom Elements API
HTML Template
Data Binding
None
Let’s Build a Web Component!
<meme-maker>
Join In! 1. Install Polymer CLI • npm install -g
polymer-cli 2. Create project directory • mkdir meme-maker && cd meme-maker 3. Create a new Polymer project • polymer init 4. or Clone the final repository • bit.ly/meme-maker-polymer
Diving Deeper
www.Polymer-Project.org
None
None
Thank you! Any Questions?