[PPT] - THE FRONTEND TA B OO A STORY OF FULL STACK MICRO-SERVICES L U I S PowerPoint Presentation

SLIDE 1

A STORY OF FULL STACK MICRO-SERVICES

THE FRONTEND TA B OO

GOTO 15.11.2016   BER LIN , GER M A NY

L U I S M I N E I R O

@voidmaze

MORITZ GRAUEL

@mo_gr

SLIDE 2

FASHION STORE WEBSITE

SLIDE 3

MOB IL E A PPS

iOS Android Windows Mobile

SLIDE 4

S H OE S IN SPACE

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

SLIDE 5

ZALANDO IS HUGE!

~ E U R 3 B N REVENUE > 1 6 0 M VISITS PER MONTH > 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 TECH EMPLOYEES 7 TECH HUBS 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 …

FUTURE ZALANDO CAMPUS

SLIDE 6

6

C H A L L E N G E S

SLIDE 7

E F F E C T S ON P R O DUCTIVITY

011010 011101 010010 111010 111011

DEPENDENCIES HUGE CODEBASE C O O R D I N A T I O N LAW OF DIMINISHING RETURNS

SLIDE 8

E F F E C T S ON IN NOVATION

011010 011101 010010 111010 111011

S I D E E F F E C T S RIGID PROCESSES LESS INNOVATION HUGE CODEBASE B U G D E N S I T Y

SLIDE 9

E F F E C T S ON G ROW TH

011010 011101 010010 111010 111011

OLD TECH STACK LESS MAGNETISM SLOW HIRING HUGE CODEBASE SLOW ONBOARDING

SLIDE 10

C O N WAY ’ S L AW Organizations which design systems are constrained to produce designs which are copies

f the communication structures
f these organizations.

Melvin Edward Conway

SLIDE 11

11

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

SLIDE 12

WE WANT

AUTONOMOUS TEAMS TO DELIVER AMAZING PRODUCTS EFFICIENTLY AT SCALE

SLIDE 13

SLIDE 14

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

SLIDE 15

1 5

THE FRONTEND TABOO

SLIDE 16

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

SLIDE 17

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

TEAM GILFOYLE TEAM DINESH

SLIDE 18

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

SLIDE 19

WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS

TEAM GILFOYLE TEAM DINESH

WEBAPP

SLIDE 20

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

SLIDE 21

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

SLIDE 22

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

SLIDE 23

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

SLIDE 24

2 4

C A N W E D O B E T T E R ?

SLIDE 25

2 5

H T T P S : / / Y O U T U . B E / P J O V C 3 M E I W S

SLIDE 26

MOS A IC

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

SLIDE 27

TEAMS OWN FRAGMENTS

TEAM HADOUKEN TEAM PINGPONG

SLIDE 28

FRAGMENTS USE THE BACKEND APIS

TYPICAL MICRO-SERVICES LAYER

TEAM HADOUKEN TEAM PINGPONG

SLIDE 29

LAYOUT SERVICE ASSEMBLES FRAGMENTS

TYPICAL MICRO-SERVICES LAYER TEAM HADOUKEN TEAM PINGPONG

LAYOUT SERVIC E

TEMPLATES

SLIDE 30

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 A P I CA L L S

SLIDE 31

MOS A IC C OMPONENTS

TYPICAL MICRO-SERVICES LAYER TEAM HADOUKEN TEAM PINGPONG

TA ILOR

TEMPLATES (QUILT)

SK IPPER

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 CA L L S

SLIDE 32

3 2

R O U T I N G

SLIDE 33

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 IP P ER

https://github.com/zalando/skipper

SLIDE 34

R O U T I N G

TA ILOR SK IPPER

C U S TO M E R

Path = /api/cart

01101 001110 10100 101110 101110 11

Path = /* Path = /products/*.html

JIM M Y

SLIDE 35

E S K IP R OU T IN G D E F IN ITION LANGUAGE A domain-specific language (DSL) for describing Skipper route expressions, route definitions and complete routing tables. Route = n Predicates + m Filters + 1 backend

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 >

SLIDE 36

P R E D IC ATES 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

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

SLIDE 37

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 )

SLIDE 38

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

FLEXIBLE AND OPEN FOR INDIVIDUAL CREATIVITY

SLIDE 39

3 9

C O M M U N I C AT I O N

SLIDE 40

Fragments are regular HTTP endpoints
Fragments respond with HTML fragments (no <head>/<body>)
Communication based in HTTP Headers
No custom/complex protocol

FRAGMENTS

SLIDE 41

4 1

C O M P O S I T I O N

SLIDE 42

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 ILOR

SLIDE 43

C O M P O S I T I O N

TA ILOR

header.domain.com footer.domain.com product.domain.com

SLIDE 44

TEMPLATE

SLIDE 45

TEMPLATE

SLIDE 46

4 6

R E S U LT

SLIDE 47

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

SLIDE 48

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

SLIDE 49

4 9

D E M O

SLIDE 50

THANK YOU QUESTIONS? https://www.mosaic9.org https://zalando.github.io

SLIDE 51

@ZalandoTech tech.zalando.com

LUIS MINEIRO

@voidmaze luis.mineiro@zalando.de

MOR IT Z GR A U EL

@mo_gr moritz.grauel@zalando.de

1 5 - 11-2016