Frontend Microservices

Transcript

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
   

   View Slide

2. 2
   Splitting
   Concatenating
   How We Do It
   The Future
   TA B LE OF 

   C O N T E N T S
   

   View Slide

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
   …
   

   View Slide

4. 4
   SPLIT TING & CON CATE N ATING
   OR MICROSERVICES FOR THE FRONTEND
   

   View Slide

5. 5 *hello from captain obvious
   THIS IS A WEBSITE*
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. 1 8
    FINALLY SOME CODE
    

    

    

    

    

    

    

    

    

    
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

23. 2 3
    WHY NOT JUST USE CSS
    

    ...

    
    

    View Slide

24. 2 4
    S TA N D A RD S TO T H E R ESCUE
    • Custom Elements
    • Shadow DOM
    • …
    

    View Slide

25. 2 5
    C U S TO M E L E M E N T S
    

    ...

    
    
    

    View Slide

26. 2 6
    WELCOME MENDELEEV
    

    View Slide

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;

    }

    });
    

    View Slide

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
    

    View Slide

29. 2 9
    WHEN? HOW?
    Open Source soon.

    Will be available as an NPM module.
    

    View Slide

30. 3 0 all major browser vendors are committed to spec
    S H AD O W D OM
    

    <#shadow-root>

    Selected option

    ...

    #shadow-root>

    
    

    View Slide

31. 3 1
    THANK YOU
    

    View Slide

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
    

    View Slide