Frontend Microservices

1. IN THE MICROSERVICE WORLD FRONTEND 0 3 - 0 5 -2 0 1 6 D M I T R I Y K U B Y S H K I N
2. 2 Splitting Concatenating How We Do It The Future TA B LE OF 
 C O N T E N T S
3. 3 THE PROMISE OF MICROSERVICES decision autonomy ease of scaling the organisation language & framework independence more digestible code easy to experiment and explore easier transition from legacy code …
4. 4 SPLIT TING & CON CATE N ATING OR MICROSERVICES FOR THE FRONTEND
5. 5 *hello from captain obvious THIS IS A WEBSITE*
6. 6 server icon designed by Freepik H O W F R O N T E N D I S B U I LT WEB PAGE SE RVER A P P C O D E TEAM 0 1 0 1 1 1 0 1
7. 7 S TA R T W I T H A T E A M A ND SOM E CO D E THE PR OB L EM Limit to a number of people. Nice and easy collaboration. Fast development. Don’t try to jump to any other structure until
 you really have to.
8. 8 WEB PAGE SE RVER S P L IT T H E T EAM A P P C O D E TEAM 0 1 0 1 1 1 0 1
9. 9 C O N C AT I N C O D E We know how to do it by know. There are tools to help. Some organisations stay in this state for a long time. THE PR OB L EM No real autonomy.
10. 1 0 S P L IT I N T H E C OD E WEB PAGE SE RVER A P P C O D E TEAM 0 1 0 1 1 1 0 1
11. 11 C O N C AT I N T H E A P P 0 1 0 1 1 1 0 1 Still very common and the are usually module systems to help, like NPM. Some organisations stay in this state for a long time. THE PR OB L EM Framework / language lock-in.
12. 1 2 WEB PAGE SE RVER S P L IT T H E A PP A P P C O D E TEAM 0 1 0 1 1 1 0 1 0 1 0 1 1 1 0 1 0 1 0 1 1 1 0 1
13. 1 3 C O N C AT O N T H E S E RV E R There have to be strong reasons to do this, but can make sense during a transition period between technologies. THE PR OB L EM Usually very complicated and fragile setup with technology lock-in.
14. 1 4 WEB PAGE SE RVER OUR CHOICE A P P C O D E TEAM 0 1 0 1 1 1 0 1 0 1 0 1 1 1 0 1 0 1 0 1 1 1 0 1
15. 1 5 C O N C AT I N T H E B R O W S E R Essentially the same setup from an organisational perspective as with one team, but can scale to crazy number of people. And also gives autonomy to experiment and innovate. THE PR OB L EM The only way to do it
 now is an iframe.
16. 1 6 WEB PAGE SE RVER OUR CHOICE A P P C O D E TEAM 0 1 0 1 1 1 0 1 0 1 0 1 1 1 0 1 0 1 0 1 1 1 0 1
17. 1 7 INTRODUCING … Tailor is a layout service that uses streams to compose a web page from fragment services. https://github.com/zalando/tailor
18. 1 8 FINALLY SOME CODE <html>
 <head>
 <fragment src="http://assets.domain.com"></fragment>
 </head>
 <body>
 <fragment src="http://header.domain.com"></fragment>
 <fragment src="http://content.domain.com" primary></fragment>
 <fragment src="http://footer.domain.com" async></fragment>
 </body>
 </html>
19. 1 9 H O W D O E S I T L O O K I N P R A C T I C E ? Header Fragment Cart Fragment Base Assets Fragment Tracking Fragment } Not every fragment has to be visible
20. 2 0 D E A L I N G W I T H S M A L L E R C O M P O N E N T S • Built for reusable components • Amazing community • Universal JavaScript
21. 2 1 N O T A L L G O O D T H O U G H React Redux Node.js Webpack Hot Reloading PostCSS Hapi.js OAuth Circuit Breakers Monitoring
22. 2 2 IT GETS WORSE If you need to just render some text with links in a style consistent with the rest of the website, it’s kind of bad to expect to build all of the React stack.
23. 2 3 WHY NOT JUST USE CSS <select class="my-fancy-select">
 <option>...</option>
 </select>
24. 2 4 S TA N D A RD S TO T H E R ESCUE • Custom Elements • Shadow DOM • …
25. 2 5 C U S TO M E L E M E N T S <select is="my-fancy-select">
 <option>...</option>
 </select> <my-fancy-icon name="add"></my-fancy-icon>
26. 2 6 WELCOME MENDELEEV
27. 2 7 H O W D O E S I T L O O K L I K E import * as mendeleev from 'mendeleev';
 
 mendeleev.define('color-well', {
 observedAttributes: ['color'],
 attributeChangedCallback(name, oldValue, newValue) {
 this.style.backgroundColor = newValue;
 }
 });
28. 2 8 GOALS AND NON-GOALS • Future-compatible • High performance • Pre-made hooks for popular frameworks GOALS • 100% feature parity with the spec • High-level API N O N - G O A L S
29. 2 9 WHEN? HOW? Open Source soon.
 Will be available as an NPM module.
30. 3 0 all major browser vendors are committed to spec S H AD O W D OM <select is="my-fancy-select">
 <#shadow-root>
 <my-title>Selected option</my-title>
 <my-option>...</my-option>
 </#shadow-root>
 </select>
31. 3 1 THANK YOU
32. @ZalandoTech tech.zalando.com D M I T R I Y K U B Y S H K I N @d_kubyshkin dmitriy.kubyshkin@zalando.de 0 3 - 0 5 - 2 0 1 6