Frontend Microservices

Frontend Microservices

Dfe9845377f648b8a6076b14c7708915?s=128

Dmitriy Kubyshkin

May 03, 2016
Tweet

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. 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 …
  3. 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
  4. 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.
  5. 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
  6. 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.
  7. 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
  8. 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.
  9. 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
  10. 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.
  11. 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
  12. 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.
  13. 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
  14. 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
  15. 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>
  16. 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
  17. 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
  18. 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
  19. 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.
  20. 24.

    2 4 S TA N D A RD S TO

    T H E R ESCUE • Custom Elements • Shadow DOM • …
  21. 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>
  22. 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;
 }
 });
  23. 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
  24. 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>
  25. 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