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.5k
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
990
Becoming a GDE & Overcoming Stage Fright
ireade
4
430
What about CSS? Progressive Enhancement & CSS (Updated)
ireade
4
420
Building "The Loop" (Introduction to Frontend Development)
ireade
3
260
Demystifying Angular Universal
ireade
5
530
Introduction to UI/UX Design
ireade
9
580
Building Modern Progressive Web Apps
ireade
7
1.5k
What about CSS? Progressive Enhancement & CSS
ireade
9
4.1k
Hosting with Firebase
ireade
3
750
Other Decks in Programming
See All in Programming
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
継続的な活動で築く地方エンジニアの道
myamashii
2
350
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
CSC307 Lecture 05
javiergs
PRO
0
210
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Code Review Best Practice
trishagee
58
16k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
GraphQLとの向き合い方2022年版
quramy
36
13k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Docker and Python
trallard
37
2.9k
BBQ
matthewcrist
82
9k
The Invisible Customer
myddelton
117
13k
Producing Creativity
orderedlist
PRO
340
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
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?