Micro-services are not news anymore. They allow multiple teams to work autonomously by choosing their own technology stacks and having their own release cycles. There is something not being addressed though, like if it is some kind of dirty little secret, and that is frontend development. The common practice for building websites remains 'the monolith': a single frontend codebase that consumes multiple APIs. We believe we found a better solution.Last year, a handful of Zalando engineers came up with an innovative solution for this exact problem - project Mosaic. Mosaic is a new architecture for websites where micro-services are used in the entire stack, all the way to the frontend. Its main components are: - Skipper - an HTTP router with runtime update of routes - Tailor - a streaming layout service with runtime update of templates The network is the glue putting it all together.In this talk we want to share our motivation to build Mosaic, how to perform such migration without downtime, and the advantages it has to offer to other organizations, regardless of their size.We'll go through the operational details about Skipper and how it can be customized to answer many other different requirements. I'll also describe in detail how Tailor can dramatically improve the perceived performance of your website by streaming frontend content, from multiple fragments, in parallel.

1. THE FRONTEND
TA B OO
A STORY OF FULL
STACK MICRO-SERVICES
JBCNCONF 18.06.2016
BARCELONA, SPAIN
L U I S M I N E I R O
@voidmaze

2. LUIS MINEIRO
DOING STUFF WITH COMPUTERS
AT ZALANDO
@voidmaze

3. FASHION STORE WEBSITE

4. MOBILE APPS
iOSAndroid Windows Mobile

5. SHOES IN SPAC E
https://tech.zalando.de/blog/we-launched-it-the-zalando-space-shoe-video/

6. ZALANDO IS
H U G E !
~ EUR 3 B N R E V E N U E
> 1 3 5 M VISI TS PER MONT H
~ 1 0 , 0 0 0 EMPLOYEES I N EURO PE
> 1 , 2 0 0 TECH EMPLOYEES
7 TECH HUBS
BER LIN
H E L S I N K I
D U B L I N
AND MORE…
FUTURE ZALANDO CAMPUS

7. 7
C H A L L E N G E S

8. EFFE CTS ON PRODU CT IVITY
01101
00111
0 1 0 1
00101
11010
11101
1
DEPENDENCIES
HUGE
CODEBASE
CO
O
RDINATIO
N
LAW
O
F
DIM
INISHING
RETURNS

9. EFFE CTS ON INNOVATION
01101
00111
0 1 0 1
00101
11010
11101
1
SIDE
EFFECTS
RIG
ID
PRO
CESSES
LESS
INNO
VATIO
N
HUGE
CODEBASE
BUG
DENSITY

10. EFFE CTS ON GROWTH
01101
00111
0 1 0 1
00101
11010
11101
1
O
LD
TECH
STACK
LESS
M
AG
NETISM
SLO
W
HIRING
HUGE
CODEBASE
SLO
W
O
NBO
ARDING

11. 11
R A D I C A L A G I L I T Y

12. WE WANT
AUTONOMOUS TEAMS
TO DELIVER
AMAZING PRODUCTS
EFFICIENTLY
AT SCALE

14. C O N WAY ’ S L AW
Organizations which design systems
are constrained to produce designs
which are copies
of the communication structures
of these organizations.
Melvin Edward Conway

15. R A D I C A L A G I L I T Y
A P U R P O S E - D R I V E N O R G A N I S AT I O N
C O M P O S E D O F
A U TO N O M O U S T E A M S
WHICH DELIVER
C L E A R LY D E F I N E D P R O D U C T S
A S E RV I C E - O R I E N T E D A R C H I T E C T U R E
C O M P O S E D O F
LOOSELY COUPLED ELEMENTS
THAT HAVE
B O U N D E D C O N T E X T S
Adrian Cockcroft
https://zln.do/ra-video

16. 1 6
THE FRONTEND TABOO

17. THE PROMISE OF MICRO-SERVICES
work autonomously
mix of different technology stacks
independent release cycles
…

18. TEAMS OWN B A C K E N D A P I S
TEAM GILFOYLE
TEAM DINESH

19. A P I S A R E U S E D B Y A F R O N T E N D M O N O L I T H
WEBAPP
TEAM GILFOYLE
TEAM DINESH
CUSTOMER

20. WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS
TEAM GILFOYLE TEAM DINESH
WEBAPP

21. THE PROMISE OF MICRO-SERVICES REVISITED
work autonomously?
mix of different technology stacks?
independent release cycles?
…

22. THE PROMISE OF MICRO-SERVICES REVISITED
work autonomously?
mix of different technology stacks?
independent release cycles?
…

23. THE PROMISE OF MICRO-SERVICES REVISITED
work autonomously?
mix of different technology stacks?
independent release cycles?
…

24. THE PROMISE OF MICRO-SERVICES REVISITED
work autonomously?
mix of different technology stacks?
independent release cycles?
…

25. MOSAIC
h t t p s : / / w w w. m o s a i c 9 . o r g

26. TEAMS OWN FRAGMENTS
TEAM HADOUKEN TEAM PINGPONG

27. FRAGMENTS USE THE BACKEND APIS
TYPICAL MICRO-SERVICES LAYER
TEAM HADOUKEN TEAM PINGPONG

28. LAYOUT SERVICE ASSEMBLES FRAGMENTS
TYPICAL MICRO-SERVICES LAYER
TEAM HADOUKEN TEAM PINGPONG
LAYOUT
SERVIC E TEMPLATES

29. A S S E M B L E D C O N T E N T I S S T R E A M E D TO T H E C L I E N T
TYPICAL MICRO-SERVICES LAYER
TEAM HADOUKEN TEAM PINGPONG
LAYOUT
SERVIC E TEMPLATES
R O U T E R R O U T E S
C U S TO M E R
API CALLS

30. MOSAIC COMPONEN TS
TYPICAL MICRO-SERVICES LAYER
TEAM HADOUKEN TEAM PINGPONG
TA ILOR QUILT
SKIPPER INNKEEPER
C U S TO M E R
API CALLS

31. 3 1
R O U T I N G

32. • Forwards requests to different endpoints
based on request properties:
• Host, Path, Method
• Cookies, etc
• Adds security features
• Encrypts/decrypts sensitive cookies at the edge
• XSRF protection
• Streams content from the endpoints with
regular flushing
• Runtime updates of routing table
SKIPPER
https://github.com/zalando/skipper

33. R O U T I N G
TA ILOR
SKIPPER
C U S TO M E R
Path = /api/cart
0110
1001
1101
0100
1 0 11
1010
11101
1
Path = /*
Path = /products/*.html
JI MMY

34. ESKIP ROUTING DEFINIT ION LANGUAGE
A domain-specific language (DSL) for describing Skipper route expressions, route
definitions and complete routing tables.
A route expression always contains a match expression and a backend expression,
and it can contain optional filter expressions.
c a t a l o g : P a t h ( " / * c a t e g o r y " ) - > " h t t p s : / / c a t a l o g . e x a m p l e . o r g " ;
p r o d u c t P a g e : P a t h ( " / p r o d u c t s / : i d " ) - > " h t t p s : / / p r o d u c t s . e x a m p l e . o r g " ;
u s e r A c c o u n t : P a t h ( " / u s e r / : i d / * u s e r p a g e " ) - > "h t t p s : / / u s e r s . e x a m p l e . o r g " ;
/ / 4 0 4
n o t f o u n d : * - >
m o d P a t h ( / . + / , " / n o t f o u n d . h t m l " ) - > s t a t i c ( " / " , " / v a r / w w w " ) - >
< s h u n t >

35. PREDICATES
A match expression contains one or more conditions. An incoming request must
fulfil each of them to match the route.
A lot of built in predicates for pretty much everything around HTTP requests.
Skipper is easily extendable with custom predicates
P a t h ( " / a p i / * r e s o u r c e " ) & & H e a d e r ( " A c c e p t " , " a p p l i c a t i o n / j s o n " )
P a t h R e g e x p ( / r e g u l a r - e x p r e s s i o n / )
M e t h o d ( " H E A D " )
H e a d e r ( " A c c e p t " , “ a p p l i c a t i o n / j s o n " )
A n y ( )

36. FILTERS
Filters are used to augment the incoming requests and the outgoing responses, or
do other useful or fun stuff.
A lot of built in filters give a lot of powerful features
Skipper is easily extendable with custom filters
s e t R e s p o n s e H e a d e r ( " m a x - a g e " , " 8 6 4 0 0 " ) - > s t a t i c ( " / " , " / v a r / w w w / p u b l i c " )
s t a t i c ( " / i m a g e s " , " / v a r / w w w / i m a g e s " )
s t a t u s ( 4 1 8 )
r e d i r e c t T o ( 3 0 2 , “ h t t p s : / / u i . e x a m p l e . o r g " )
d r o p R e q u e s t H e a d e r ( “ h e a d e r - n a m e " )
f l o w I d ( " r e u s e " , 6 4 )

37. • API Gateway
• Split mobile and desktop traffic
• Split traffic based on version header
• OAuth authentication reverse proxy
• In front of a third-party service that doesn’t support OAuth
• Redirect unauthenticated requests to other endpoint
• Weighted traffic control
• Use the same route with different endpoints
• Stickiness via cookies
• HTTP file server
• HTTP compression proxy
FLEXIBLE AND OPEN FOR INDIVIDUAL CREATIVITY

38. 3 8
C O M P O S I T I O N

39. • Tailor is a layout service that uses
streams to compose a web page
from fragment services.
• Loads content of all fragments
from the template in parallel
• Offers nice error handling and
fallback features with circuit
breakers
https://github.com/zalando/tailor
TA ILOR

40. C O M P O S I T I O N
TA ILOR
header.domain.com footer.domain.com
cart.domain.com

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

42. H O W D O E S I T L O O K ?
Header Fragment
Cart Fragment
Base Assets
Fragment
Tracking
Fragment
} Not every fragment has to be visible

43. R E S U LT
- runtime injection of new
features
- faster feedback loops
- tech agnostic
- end-to-end
responsibility
- full control
- lean, agile processes
- independent
development
- continuous delivery
- faster onboarding
- magnetic
- easy to spin-off new teams
PRODUCTIVITY
INNOVATION
GROWTH

44. MOSAIC IS OPEN SOU RCE
https://www.mosaic9.org
QUESTIONS?
https://zalando.github.io
Icons designed by Freepik and distributed by Flaticon

45. @ZalandoTech
tech.zalando.com
THANK YOU
LUIS MINEIRO
@voidmaze
luis.mineiro@zalando.de
1 8 - 0 6 - 2 0 1 6