Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Microservices

Frontend Microservices

Dmitriy Kubyshkin

May 03, 2016
Tweet

More Decks by Dmitriy Kubyshkin

Other Decks in Programming

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
    [email protected]
    0 3 - 0 5 - 2 0 1 6

    View Slide