![Page 1: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/1.jpg)
Web Components:
The Future Is Not Far Away
Souvik Basu, Software Architect/UI Lead/Coder, ecoInsight
![Page 2: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/2.jpg)
Why WebComponents?
• Is there a “real” problem we are trying to solve
• Or is it just another “cool” thing to know
• Semantic page design
• Encapsulation
• Extending functionality
• User experience vs developer nightmare
![Page 3: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/3.jpg)
BASICS
![Page 4: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/4.jpg)
Custom Elements
![Page 5: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/5.jpg)
Template
![Page 6: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/6.jpg)
HTML Import
![Page 7: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/7.jpg)
Shadow DOM
![Page 8: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/8.jpg)
DEEP DIVE
![Page 9: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/9.jpg)
Hello World!
![Page 10: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/10.jpg)
Styling of Shadow DOM
![Page 11: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/11.jpg)
Light DOM
![Page 12: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/12.jpg)
Themes
![Page 13: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/13.jpg)
Extends
![Page 14: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/14.jpg)
IS IT READY?
![Page 15: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/15.jpg)
Cross browser compatibility
![Page 16: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/16.jpg)
Are We Componentized Yet?
• http://jonrimmer.github.io/are-we-componentized-yet/
![Page 17: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/17.jpg)
• http://stackoverflow.com/questions/18089075/what-is-the-difference-between-polymer-elements-and-angularjs-directives
![Page 18: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/18.jpg)
Using JS libs with WebComponents
![Page 19: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/19.jpg)
Using MVC frameworks with WebComponents
![Page 20: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/20.jpg)
Performance
![Page 21: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/21.jpg)
Performance
• Object.observe
• Conditional loading of Polyfill
• Minimize shadow DOM count
![Page 22: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/22.jpg)
Responsiveness
![Page 23: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/23.jpg)
Accessibility
![Page 24: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/24.jpg)
Accessibility
• ARIA
• roles
• widgets that aren't otherwise available in HTML 4
• states
• current interaction state of an element
• properties
• characteristics of these widgets
• Allow keyboard navigation
![Page 25: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/25.jpg)
Debugging
![Page 26: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/26.jpg)
Debugging
• Debug binding
![Page 27: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/27.jpg)
Deployment
![Page 28: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/28.jpg)
Globalization
![Page 29: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/29.jpg)
Testing
![Page 30: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/30.jpg)
Polymer
![Page 31: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/31.jpg)
Polymer
• Data Binding• Messaging• Handy methods• Paper library• Extending components• Accessing methods in Components• Non UI components• Polyfill• Open Source• Mixins
![Page 32: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/32.jpg)
Why Not Angular?
![Page 33: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/33.jpg)
IS IT PERFECT?
![Page 34: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/34.jpg)
Open issues
• Issues with Polymer paper element library
• Using requires
• No library component composite for table and calendar
• It’s not 1.0 yet
• Memory leaks and performance issues
• Issues with events and inheritance
• Debugging declarative binding
• Use of template in IE
![Page 35: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/35.jpg)
WRAPPING UP
![Page 36: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/36.jpg)
How we build Apps using Web Components?
• Bottom up approach
• Test in all browsers
• Conditional download of Polyfill
• Inheritance vs Composition
![Page 37: Web Components: The Future Is Not Far Awaydevelopermarch.com/...HallC_1700_GIDS2015_WebComponents_SouvikBasu.pdf · Web Components: The Future Is Not Far Away Souvik Basu, Software](https://reader030.vdocuments.us/reader030/viewer/2022040818/5e63b603d2d42841f50f6086/html5/thumbnails/37.jpg)