Frontend Microservices

Dfe9845377f648b8a6076b14c7708915?s=47 Dmitriy Kubyshkin
May 03, 2016
Programming
3
2.4k

Frontend Microservices

Dfe9845377f648b8a6076b14c7708915?s=128

Dmitriy Kubyshkin

May 03, 2016
Tweet

Want more?

Dfe9845377f648b8a6076b14c7708915?s=48 d_kubyshkin
0
120
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
12
700
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
3
370
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
230
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
490
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
270
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
330
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
760
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
200
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
270
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
63
250k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
6
830

Transcript

  1. 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.

    2 Splitting Concatenating How We Do It The Future TA

    B LE OF 
 C O N T E N T S
  3. 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.

    4 SPLIT TING & CON CATE N ATING OR MICROSERVICES

    FOR THE FRONTEND
  5. 5.

    5 *hello from captain obvious THIS IS A WEBSITE*

  6. 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.

    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.

    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.

    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. 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.

    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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23.

    2 3 WHY NOT JUST USE CSS <select class="my-fancy-select">
 <option>...</option>


    </select>
  24. 24.

    2 4 S TA N D A RD S TO

    T H E R ESCUE • Custom Elements • Shadow DOM • …
  25. 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. 26.

    2 6 WELCOME MENDELEEV

  27. 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. 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. 29.

    2 9 WHEN? HOW? Open Source soon.
 Will be available

    as an NPM module.
  30. 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. 31.

    3 1 THANK YOU

  32. 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