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
Mixing Web Components - Best Of Web 2016
Search
Horacio Gonzalez
June 10, 2016
Technology
0
620
Mixing Web Components - Best Of Web 2016
Horacio Gonzalez
June 10, 2016
Tweet
Share
More Decks by Horacio Gonzalez
See All by Horacio Gonzalez
Progressive Web Apps - BrestJS 2016-10
lostinbrittany
1
480
Battle of Frameworks: Polymer - Meetup Paris Web Components 2016-09
lostinbrittany
0
400
Polymer in the Real Life - Devoxx Fr 2016
lostinbrittany
0
53
Warp 10: Collect, store and manipulate sensor data - BreizhCamp 2016
lostinbrittany
0
78
Lego, Tagada, Data et Arduino : projet gourmand au StartupWeekEnd Brest - BreizhCamp 2016
lostinbrittany
0
70
[[DevFest Nantes 2014] Introduction aux Web Components & Polymer
lostinbrittany
3
220
Introduction to Vert.x
lostinbrittany
1
2.4k
Other Decks in Technology
See All in Technology
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
2.1k
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
320
無理しない AI 活用サービス / #jazug
koudaiii
0
100
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
Data Engineering Study#30 LT資料
tetsuroito
1
190
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
230
TLSから見るSREの未来
atpons
2
310
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
3
1.1k
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to train your dragon (web standard)
notwaldorf
96
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Rails Girls Zürich Keynote
gr2m
95
14k
Unsuck your backbone
ammeep
671
58k
Designing for Performance
lara
610
69k
BBQ
matthewcrist
89
9.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building an army of robots
kneath
306
45k
Typedesign – Prime Four
hannesfritz
42
2.7k
Being A Developer After 40
akosma
90
590k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
750
Transcript
@LostInBrittany #MixingWebComponents @bestofwebconf Mixing Web Components Horacio Gonzalez @LostInBrittany
@LostInBrittany #MixingWebComponents @bestofwebconf Horacio Gonzalez @LostInBrittany Cityzen Data http://cityzendata.com Spaniard
lost in Brittany, developer, dreamer and all- around geek
@LostInBrittany #MixingWebComponents @bestofwebconf Introduction Because I love to tell old
stories
@LostInBrittany #MixingWebComponents @bestofwebconf Polymer tour
@LostInBrittany #MixingWebComponents @bestofwebconf Web components == Revolution Image: bu.edu
@LostInBrittany #MixingWebComponents @bestofwebconf Build a world brick by brick Images:
BitRebels & Brickset
@LostInBrittany #MixingWebComponents @bestofwebconf Variations of some questions But does it
really works with <inser techno here/>? And what about the other web components technologies?
@LostInBrittany #MixingWebComponents @bestofwebconf And one year ago 1.0 arrived It
was time to really show off!
@LostInBrittany #MixingWebComponents @bestofwebconf So I decided a new approach The
truth is in the code I FIND YOUR LACK OF SOURCE CODE DISTURBING
@LostInBrittany #MixingWebComponents @bestofwebconf Mixing webcomponents My challenge today
@LostInBrittany #MixingWebComponents @bestofwebconf Objectifs Using webcomponents from different libraries in
an AngularJS webapp
@LostInBrittany #MixingWebComponents @bestofwebconf Base project: Angular Beers! https://github.com/LostInBrittany/angular-beers
@LostInBrittany #MixingWebComponents @bestofwebconf https://github.com/LostInBrittany/beyond-polymer Let's show the code! Image: dcplanet.fr
Coding is a superpower, friends
@LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-beers Because directives are subpar webcomponents
@LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-beers
@LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-xtag-beers Polymer and X-tags play along nicely
@LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-xtag-beers
@LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-react-beers Thanks to Mathieu Ancelin (@TrevorReznik)
@LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-react-beers
@LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-xtag-react-beers And they all are happy...
@LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-xtag-react-beers
@LostInBrittany #MixingWebComponents @bestofwebconf And what about Angular 2 Or other
modern frameworks
@LostInBrittany #MixingWebComponents @bestofwebconf Modern frameworks support webcomponents Example Angular2-Polymer par
@ManekiNekko https://github.com/webcomponents/angular- interop/
@LostInBrittany #MixingWebComponents @bestofwebconf Thank you !
@LostInBrittany #MixingWebComponents @bestofwebconf Web components polyfill Making developers life a
bit easier