Frontend Microservices

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 Splitting Concatenating How We Do It The Future TA
B LE OF   C O N T E N T S

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 SPLIT TING & CON CATE N ATING OR MICROSERVICES
FOR THE FRONTEND

5 *hello from captain obvious THIS IS A WEBSITE*

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

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

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

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.

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

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.

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

1 7 INTRODUCING … Tailor is a layout service that
uses streams to compose a web page from fragment services. https://github.com/zalando/tailor

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>

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

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

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

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.

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

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

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>

2 6 WELCOME MENDELEEV

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;  }  });

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

2 9 WHEN? HOW? Open Source soon.  Will be available
as an NPM module.

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>

3 1 THANK YOU

@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

Frontend Microservices

Frontend Microservices

Dmitriy Kubyshkin

More Decks by Dmitriy Kubyshkin

Other Decks in Programming

Featured

Transcript

IN THE MICROSERVICE WORLD FRONTEND 0 3 - 0 5

2 Splitting Concatenating How We Do It The Future TA

3 THE PROMISE OF MICROSERVICES decision autonomy ease of scaling

4 SPLIT TING & CON CATE N ATING OR MICROSERVICES

5 hello from captain obvious THIS IS A WEBSITE

6 server icon designed by Freepik H O W F

7 S TA R T W I T H A

8 WEB PAGE SE RVER S P L IT T

9 C O N C AT I N C O

1 0 S P L IT I N T H

11 C O N C AT I N T H

1 2 WEB PAGE SE RVER S P L IT

1 3 C O N C AT O N T

1 4 WEB PAGE SE RVER OUR CHOICE A P

1 5 C O N C AT I N T

1 6 WEB PAGE SE RVER OUR CHOICE A P

1 7 INTRODUCING … Tailor is a layout service that

1 8 FINALLY SOME CODE <html>  <head>  <fragment src="http://assets.domain.com"></fragment>  </head>

1 9 H O W D O E S I

2 0 D E A L I N G W

2 1 N O T A L L G O

2 2 IT GETS WORSE If you need to just

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

2 4 S TA N D A RD S TO

2 5 C U S TO M E L E

2 6 WELCOME MENDELEEV

2 7 H O W D O E S I

2 8 GOALS AND NON-GOALS • Future-compatible • High performance

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

3 0 all major browser vendors are committed to spec

3 1 THANK YOU

@ZalandoTech tech.zalando.com D M I T R I Y K