The frontend taboo - a story of full stack micro-services

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

LUIS MINEIRO
DOING STUFF WITH COMPUTERS 
AT ZALANDO 
 
@voidmaze

MOBILE APPS
iOSAndroid Windows Mobile

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

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

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

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

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
R A D I C A L A G I L I T Y

WE WANT
AUTONOMOUS TEAMS
TO DELIVER
AMAZING PRODUCTS
EFFICIENTLY
AT SCALE

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

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

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

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

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

WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS
TEAM GILFOYLE TEAM DINESH
WEBAPP

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

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

TEAMS OWN FRAGMENTS
TEAM HADOUKEN TEAM PINGPONG

FRAGMENTS USE THE BACKEND APIS
TYPICAL MICRO-SERVICES LAYER

LAYOUT SERVICE ASSEMBLES FRAGMENTS
LAYOUT
SERVIC E TEMPLATES

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

MOSAIC COMPONEN TS
TA ILOR QUILT
SKIPPER INNKEEPER
C U S TO M E R
API CALLS

• 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

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

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 >

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 ( )

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 )

• 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

• 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

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

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>

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

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

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

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

The frontend taboo - a story of full stack micro-services

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Último

Último (20)

The frontend taboo - a story of full stack micro-services