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: a chance to create the future
Search
Zeno Rocha
April 30, 2014
Programming
306
41k
Web Components: a chance to create the future
April 30, 2014 @ SFHTML5
Zeno Rocha
April 30, 2014
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
420
7 Habits of Highly Productive Developers
zenorocha
1
270
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
300
What's new in the Liferay Community
zenorocha
0
550
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
440
How Liferay fits into the real of latest technologies
zenorocha
0
390
Estoicismo e JavaScript
zenorocha
3
870
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
750
Como investir em... você!
zenorocha
1
460
Other Decks in Programming
See All in Programming
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
470
An adventure of Happy Eyeballs
coe401_
1
120
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
590
Docker_OSS_ホスティング入門
satokoki645
0
140
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
390
Powerfully Typed TypeScript
euxn23
3
850
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
400
一文字エイリアスのすすめ
fujimura
0
180
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
150
RailsConf 2024: Riffing on Rails: sketch your way to better designed code
kaspth
0
200
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
16
1.9k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
100
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Automating Front-end Workflow
addyosmani
1357
200k
Product Roadmaps are Hard
iamctodd
45
9.8k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
What the flash - Photography Introduction
edds
64
11k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Done Done
chrislema
178
15k
Transcript
Web Components Create the future a chance to
@zenorocha
I’m from Brazil
Share! Create! Learn!
None
None
None
But there was no starter-kit =/
None
github.com/webcomponents/polymer-boilerplate
<X>
github.com/webcomponents/x-tag-boilerplate
None
github.com/webcomponents/element-boilerplate
What’s included? We encourage a series of best practices like
setting up a live demo, documenting your API, maintaining a changelog for release purposes, and sharing it in a package manager. Lifecycle Grunt tasks Bower config
None
github.com/webcomponents/generator-element
Share! Create! Learn! ✔
So people started to create elements
None
None
None
We needed a place to show these elements
Bernard De Luna Djalma Araújo Eduardo Lundgren Got some friends
together…
customelements.io
CustomElements.io 13% 24% 14% + 170 elements + 100,000 pageviews
North America South America Southern/ Western Europe Eastern/ Northern Europe 13%
How to add an element there?
bower.json
Share! Create! Learn! ✔ ✔
What’s the main reference to learn Web Components?
Addy Osmani
And a bunch of awesome people… Alex Komoroske Briza Bueno
Daniel Buchner Eric Bidelman Bernard De Luna Soledad Penadés Rob Dodson Eduardo Lundgren Sindre Sorhus Pascal Precht Bruce Lawson Mathias Bynens
None
webcomponents.github.io
Highlight great articles & talks Gather best practices Introduce useful
tools and resources Discuss API implementations
Share! Create! Learn! ✔ ✔ ✔
The best way to predict the future is to create
it.
Thank you! zenorocha.com bit.ly/wc-mailing Zeno Rocha #webcomponents @webcomponents +WebComponents
Stickers \o/