the frontend taboo - mosaic - gotober16
TRANSCRIPT
A STORY OF FULL STACK MICRO-SERVICES
T H E F R O N T E N D TA B O O
G O TO 1 5 . 11 . 2 0 1 6 B E R L I N , G E R M A N Y
L U I S M I N E I R O @voidmaze
M O R I T Z G R A U E L @mo_gr
FA S H I O N S TO R E W E B S I T E
M O B I L E A P P S
iOSAndroid Windows Mobile
S H O E S I N S PA C E
https://tech.zalando.de/blog/we-launched-it-the-zalando-space-shoe-video/
Z A L A N D O I S H U G E !
~ E U R 3 B N R E V E N U E > 1 6 0 M V I S I T S P E R M O N T H > 11 , 0 0 0 E M P L O Y E E S I N E U R O P E > 1 , 6 0 0 T E C H E M P L O Y E E S
7 T E C H H U B S B E R L I N H E L S I N K I D U B L I N A N D M O R E …
F U T U R E Z A L A N D O C A M P U S
6
C H A L L E N G E S
E F F E C T S O N P R O D U C T I V I T Y
011010011101010010111010111011
DEPENDENCIES
HUGE CODEBASE
COORDINATION
LAW OF DIM
INISHING RETURNS
E F F E C T S O N I N N O VAT I O N
011010011101010010111010111011
SIDE EFFECTS
RIGID PROCESSES
LESS INNOVATIO
N
HUGE CODEBASE
BUG DENSITY
E F F E C T S O N G R O W T H
011010011101010010111010111011
OLD TECH STACK
LESS MAGNETISM
SLOW HIRING
HUGE CODEBASE
SLOW ONBOARDING
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
11
R A D I C A L A G I L I T Y
WE WANTAUTONOMOUS TEAMS
TO DELIVER
AMAZING PRODUCTS
EFFICIENTLY
AT SCALE
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
W H I C H D E L I V E R
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
L O O S E LY C O U P L E D E L E M E N T S
T H AT H AV E
B O U N D E D C O N T E X T S
Adrian Cockcroft
1 5
T H E F R O N T E N D TA B O O
T H E P R O M I S E O F M I C R O - S E RV I C E S
work autonomously
mix of different technology stacks
independent release cycles
…
T E A M S O W N B A C K E N D A P I S
TEAM GILFOYLETEAM 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 GILFOYLETEAM DINESH
CUSTOMER
W E B A P P G E T S C O N T R I B U T I O N S F R O M M U LT I P L E T E A M S
TEAM GILFOYLE TEAM DINESHWEBAPP
T H E P R O M I S E O F M I C R O - S E RV I C E S R E V I S I T E D
work autonomously?
mix of different technology stacks?
independent release cycles?
…
T H E P R O M I S E O F M I C R O - S E RV I C E S R E V I S I T E D
work autonomously?
mix of different technology stacks?
independent release cycles?
…
T H E P R O M I S E O F M I C R O - S E RV I C E S R E V I S I T E D
work autonomously?
mix of different technology stacks?
independent release cycles?
…
T H E P R O M I S E O F M I C R O - S E RV I C E S R E V I S I T E D
work autonomously?
mix of different technology stacks?
independent release cycles?
…
2 4
C A N W E D O B E T T E R ?
M O S A I C
h t t p s : / / w w w. m o s a i c 9 . o r g
T E A M S O W N F R A G M E N T S
TEAM HADOUKEN TEAM PINGPONG
F R A G M E N T S U S E T H E B A C K E N D A P I S
TYPICAL MICRO-SERVICES LAYER
TEAM HADOUKEN TEAM PINGPONG
L AY O U T S E RV I C E A S S E M B L E S F R A G M E N T S
TYPICAL MICRO-SERVICES LAYER
TEAM HADOUKEN TEAM PINGPONG
L AY O U T S E RV I C E T E M P L AT E S
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
L AY O U T S E RV I C E T E M P L AT E S
R O U T E R R O U T E S
C U S TO M E R
A P I C A L L S
M O S A I C C O M P O N E N T S
TYPICAL MICRO-SERVICES LAYER
TEAM HADOUKEN TEAM PINGPONG
TA I L O R T E M P L AT E S ( Q U I LT )
S K I P P E R R O U T E S ( I N N K E E P E R )
C U S TO M E R
A P I C A L L S
3 2
R O U T I N G
• 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
• Written in go
S K I P P E R
https://github.com/zalando/skipper
R O U T I N G
TA I L O R
S K I P P E R
C U S TO M E R
Path = /api/cart011010011101010010111010111011
Path = /*
Path = /products/*.html
J I M M Y
E S K I P R O U T I N G D E F I N I T I O N L A N G U A G E
A domain-specific language (DSL) for describing Skipper route expressions, route definitions and complete routing tables.
Route = n Predicates + m Filters + 1 backend
catalog: Path("/*category") -> "https://catalog.example.org";productPage: Path("/products/:id") -> "https://products.example.org";userAccount: Path("/user/:id/*userpage") -> "https://users.example.org";
// 404notfound: * -> modPath(/.+/, "/notfound.html") -> static("/", "/var/www") -> <shunt>
P R E D I C AT E S
One or more conditions. An incoming request must fulfil each of them to match.
Many built in predicates for pretty much everything around HTTP requests.
Skipper is easily extendable with custom predicates
Path("/api/*resource") && Header("Accept", "application/json")
PathRegexp(/regular-expression/)Method("HEAD")Header("Accept", “application/json")Any()
F I LT E R S
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
setResponseHeader("max-age", "86400") -> static("/", "/var/www/public")
static("/images", "/var/www/images")status(418)redirectTo(302, “https://ui.example.org")dropRequestHeader(“header-name")flowId("reuse", 64)
• 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
• Custom predicates + custom filters = you name it
F L E X I B L E A N D O P E N F O R I N D I V I D U A L C R E AT I V I T Y
3 9
C O M M U N I C AT I O N
• Fragments are regular HTTP endpoints
• Fragments respond with HTML fragments (no <head>/<body>)
• Communication based in HTTP Headers
• No custom/complex protocol
F R A G M E N T S
4 1
C O M P O S I T I O N
• 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
• Initialises fragments client-side code
• Offers nice error handling and fallback features with circuit breakers
• Written in Node
https://github.com/zalando/tailor
TA I L O R
C O M P O S I T I O N
TA I L O R
header.domain.com footer.domain.com
product.domain.com
T E M P L AT E
<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>
T E M P L AT E
<html> <head> <fragment src="http://assets.domain.com"></fragment> </head> <body> <fragment src=“http://header.domain.com" timeout=“500” fallback-src=“http://header.static.domain.com” async/> <fragment src="http://content.domain.com" primary/> <fragment src="http://footer.domain.com" async/> </body> </html>
4 6
R E S U LT
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
Footer Fragment
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
PRODUCTIVITYINNO
VATI
ON
GROWTH
4 9
D E M O
T H A N K Y O U
Q U E S T I O N S ?
h t t p s : / / w w w. m o s a i c 9 . o r g h t t p s : / / z a l a n d o . g i t h u b . i o
@ZalandoTech tech.zalando.com
L U I S M I N E I R O
@voidmaze [email protected]
M O R I T Z G R A U E L
@mo_gr [email protected]
1 5 - 11 - 2 0 1 6