Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
310
42k
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
660
7 Habits of Highly Productive Developers
zenorocha
1
420
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
550
What's new in the Liferay Community
zenorocha
0
710
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
590
How Liferay fits into the real of latest technologies
zenorocha
0
640
Estoicismo e JavaScript
zenorocha
3
1.2k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
1.1k
Como investir em... você!
zenorocha
1
580
Other Decks in Programming
See All in Programming
Rubyで鍛える仕組み化プロヂュース力
muryoimpl
0
150
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
0
130
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
180
Cap'n Webについて
yusukebe
0
150
開発に寄りそう自動テストの実現
goyoki
2
1.4k
Navigating Dependency Injection with Metro
l2hyunwoo
1
170
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
k0kubun
0
250
Claude Codeの「Compacting Conversation」を体感50%減! CLAUDE.md + 8 Skills で挑むコンテキスト管理術
kmurahama
1
620
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
karad
0
130
脳の「省エネモード」をデバッグする ~System 1(直感)と System 2(論理)の切り替え~
panda728
PRO
0
120
AI時代を生き抜く 新卒エンジニアの生きる道
coconala_engineer
1
400
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
drumath2237
1
180
Featured
See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
68
[SF Ruby Conf 2025] Rails X
palkan
0
550
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
850
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Highjacked: Video Game Concept Design
rkendrick25
PRO
0
240
First, design no harm
axbom
PRO
1
1.1k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
1
400
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.4k
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/