Overview of different technologies that we have right now for modularizing the page. And a glimpse of the future of componentized web.

1. CHOOSING THE RIGHT
COMPONENTS
Dmitriy Kubyshkin

2. ZALANDO?var keywords = ['ecommerce', 'fashion', 'tech'];
sales({year: 2014, type: 'net'}) >= €2,200,000,000
visits({period: 'month'}) >= 142,000,000
employees({occupation: 'tech'}) >= 800
['Berlin', 'Helsinki', 'Dublin', 'Dortmund',
'Mönchengladbach', 'Erfurt'].join(you)

4. LET'S TALK ABOUT COMPONENTS

5. An individual software component
is a software package, a web
service, a web resource, or a
module that encapsulates a set of
related functions (or data).
- Wikipedia

6. WHEN IN DOUBT — ASK W3C

7. Web Components enable Web
application authors to define
widgets with a level of visual
richness and interactivity not
possible with CSS alone, and ease of
composition and reuse not possible
with script libraries today.
- Introduction to Web Components

8. 7+ teams collaborating
on each page
Inconsistencies are expensive
Errors are really expensive

9. WE WANT MORE
Security / isolation
Speed / small size
Future-proofness
Consistent and small API
Controlled composition
Ease of distribution
A/B Testing support
Good developer experience
Active community
Server-side rendering

10. THIS IS OUR TEXT INPUT
THIS IS WHAT IT NEEDS TODAY
3 DOM elements ~100 CSS lines 2 JS polyfills
Type in me

11. WHAT ARE OUR OPTIONS?

12. <iframe>

13. PROS
Security / isolation
Works everywhere
Easy to embed
CONS
Doesn't participate in layout
Can't send DOM events
Very resource-intensive
Composition is awkward

14. W3C HAD SOME IDEAS
PAGE INTEGRATION AND DYNAMIC CONTENT WITH
seamless srcdoc
UNFORTUNATELY BROWSER SUPPORT ISN'T THERE

15. jQuery Plugins
Probably the most widespread "components" out there

16. Easy as a pie
$(".z-input").zInput();
Or even just HTML
<input class="z-input" placeholder="Type in me"/>
<script src="z-input.js"></script>
And we have what we want
Type in me

17. It's not all good, though
No standard API
No isolation
Composition is a gamble
No server-side rendering
Usually low quality
Performance is questionable

18. WEB COMPONENTS

19. SOME GOOD STUFF
Standard API
A degree of isolation
Technology independent
Composable by design

20. SOME BAD STUFF
Awkward API
Vendors don't agree
Questionable distribution
Only client-side

21. ≠

22. IT'S ALL ABOUT SHADOW DOM
There is no spoon spec

23. BECAUSE IT'S REALLY, REALLY HARD
selection iframe SVG requestFullScreen requestPointerLock
focus events forms parser changes URL fragments
stylesheets multiple shadow roots node redistribution

24. POLYFILL EXISTS FOR IE10+
Very complicated and pretty slow.
Not good enough :(

25. THAT LEAVES US WITH

26. AWESOME, BUT NOT WITHOUT PROBLEMS
No security / isolation
API is still unstable in some areas
Slow server-side rendering (big chunks take 10-20ms)
The data has to be sent with the markup
Questionable upgrade path

27. STILL, OUR CHOICE

28. WELCOME TO THE FUTURE!

29. FULLY ISOLATED WEB COMPONENTS
Multiple proposals are being evaluated
Big focus on embeddable content

30. Main Thread
JS Engine
DOM
Page
Context
Component
Context
MAIN POINTS
Extended Structured Clone
Security (PCI DSS compliance?)
One context per import
Still the same thread

31. FOLLOW PROGRESS ON
github.com/w3c/webcomponents

32. MICROSERVICES IN THE BROWSER
Our experiment with a different approach to component isolation

33. WHAT'S THE IDEA?
Reverse the problem and make components run in the main
thread, and the user code goes to isolated context.

34. Main Thread Web Worker
JS Engine
DOM Light DOM
Page
Context
JS Engine
Fragment
Context
API
API

35. DOES IT WORK?
YES
WELL, SORT OF...
Hover me

36. ISSUES STILL TO SOLVE
Serializing DOM is awfully slow on Android and Mobile IE
All the required APIs need to be proxied
Events become async and unstoppable

37. QUESTIONS?
Twitter: @ZalandoTech GitHub: github.com/zalando
Instagram: zalandotech Tech Blog: tech.zalando.com
Jobs: http://tech.zalando.com/jobs