T H E F R O N T E N D TA B O O

A STORY OF FULL STACK MICRO-SERVICES

J B C N C O N F 1 8 . 0 6 . 2 0 1 6 B A R C E L O N A , S PA I N

L U I S M I N E I R O @voidmaze

LUIS MINEIRO

DOING STUFF WITH COMPUTERSAT ZALANDO@voidmaze

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 3 5 M V I S I T S P E R M O N T H ~ 1 0 , 0 0 0 E M P L O Y E E S I N E U R O P E > 1 , 2 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

7

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

01101001110 1 0 10010111010111011

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

01101001110 1 0 10010111010111011

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

01101001110 1 0 10010111010111011

OLD TECH STACK

LESS MAGNETISM

SLOW HIRING

HUGE CODEBASE

SLOW ONBOARDING

11

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

WE WANTAUTONOMOUS TEAMS

TO DELIVER

AMAZING PRODUCTSEFFICIENTLY

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

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

https://zln.do/ra-video

1 6

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?

…

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 Q U I LT

S K I P P E R 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 1

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

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/cart0 11 01 0 0 111 0 101001 0 111010111011

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.

A route expression always contains a match expression and a backend expression, and it can contain optional filter expressions.

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

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

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

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 8

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

• Offers nice error handling and fallback features with circuit breakers

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

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

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

PRODUCTIVITYINNO

VATI

ONGROWTH

M O S A I C I S O P E N S O U R C E h t t p s : / / w w w. m o s a i c 9 . o r g

Q U E S T I O N S ?

h t t p s : / / z a l a n d o . g i t h u b . i o

Icons designed by Freepik and distributed by Flaticon

@ZalandoTech tech.zalando.com

T H A N K Y O U

L U I S M I N E I R O

@voidmaze

luis.mineiro@zalando.de

1 8 - 0 6 - 2 0 1 6