THE FRONTEND TA B OO A STORY OF FULL STACK MICRO-SERVICES L U I S M I N E I R O @voidmaze MORITZ GRAUEL @mo_gr GOTO 15.11.2016 BER LIN , GER M A NY
FASHION STORE WEBSITE
MOB IL E A PPS Android iOS Windows Mobile
S H OE S IN SPACE https://tech.zalando.de/blog/we-launched-it-the-zalando-space-shoe-video/
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
C H A L L E N G E S 6
E F F E C T S ON P R O DUCTIVITY LAW OF DIMINISHING RETURNS DEPENDENCIES N O I T A N I D R O O C 011010 011101 010010 111010 111011 HUGE CODEBASE
E F F E C T S ON IN NOVATION Y T I S N E D RIGID PROCESSES LESS INNOVATION G U B 011010 011101 010010 111010 111011 S T C E HUGE CODEBASE F F E E D I S
E F F E C T S ON G ROW TH SLOW ONBOARDING LESS MAGNETISM OLD TECH STACK SLOW HIRING 011010 011101 010010 111010 111011 HUGE CODEBASE
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 11
WE WANT AUTONOMOUS 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 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 C O M P O S E D O F A U TO N O M O U S T E A M S LOOSELY COUPLED ELEMENTS WHICH DELIVER THAT HAVE C L E A R LY D E F I N E D P R O D U C T S B O U N D E D C O N T E X T S Adrian Cockcroft
THE FRONTEND TABOO 1 5
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 DINESH TEAM GILFOYLE
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 CUSTOMER WEBAPP TEAM DINESH TEAM GILFOYLE
WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS WEBAPP TEAM DINESH TEAM GILFOYLE
THE PROMISE OF MICRO-SERVICES REVISITED work autonomously? mix of different technology stacks? independent release cycles? …
THE PROMISE OF MICRO-SERVICES REVISITED work autonomously? mix of different technology stacks? independent release cycles? …
THE PROMISE OF MICRO-SERVICES REVISITED work autonomously? mix of different technology stacks? independent release cycles? …
THE PROMISE OF MICRO-SERVICES REVISITED work autonomously? mix of different technology stacks? independent release cycles? …
C A N W E D O B E T T E R ? 2 4
H T T P S : / / Y O U T U . B E / P J O V C 3 M E I W S 2 5
MOS A IC 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 TEAM HADOUKEN TEAM PINGPONG TYPICAL MICRO-SERVICES LAYER
LAYOUT SERVICE ASSEMBLES FRAGMENTS LAYOUT TEMPLATES SERVIC E TEAM HADOUKEN TEAM PINGPONG TYPICAL MICRO-SERVICES LAYER
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 C U S TO M E R R O U T E R R O U T E S LAYOUT TEMPLATES SERVIC E A P I CA L L S TEAM HADOUKEN TEAM PINGPONG TYPICAL MICRO-SERVICES LAYER
MOS A IC C OMPONENTS C U S TO M E R SK IPPER R O U T E S ( I N N K E E P E R ) TA ILOR TEMPLATES (QUILT) A P I CA L L S TEAM HADOUKEN TEAM PINGPONG TYPICAL MICRO-SERVICES LAYER
R O U T I N G 3 2
S K IP P ER 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 • https://github.com/zalando/skipper
R O U T I N G C U S TO M E R JIM M Y SK IPPER 01101 001110 Path = /api/cart Path = /* 10100 101110 101110 11 TA ILOR Path = /products/*.html
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. 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 > Route = n Predicates + m Filters + 1 backend
P R E D IC ATES One or more conditions. An incoming request must fulfil each of them to match. 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 " ) Many built in predicates for pretty much everything around HTTP requests. 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 ( ) Skipper is easily extendable with custom predicates
FILTERS Filters are used to augment the incoming requests and the outgoing responses, or do other useful or fun stuff. 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 " ) A lot of built in filters give a lot of powerful features 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 ) Skipper is easily extendable with custom filters
FLEXIBLE AND OPEN FOR INDIVIDUAL CREATIVITY • 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
C O M M U N I C AT I O N 3 9
FRAGMENTS • Fragments are regular HTTP endpoints • Fragments respond with HTML fragments (no < head> /< body> ) • Communication based in HTTP Headers • No custom/complex protocol
C O M P O S I T I O N 4 1
TA ILOR 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
C O M P O S I T I O N TA ILOR header.domain.com footer.domain.com product.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>
TEMPLATE <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>
R E S U LT 4 6
H O W D O E S I T L O O K ? Header Fragment Cart Fragment Tracking Fragment } Not every fragment has to be visible Base Assets Fragment Footer Fragment
R E S U LT - runtime injection of new features - end-to-end responsibility - faster feedback loops - full control PRODUCTIVITY INNOVATION - tech agnostic - lean, agile processes - independent development - continuous delivery GROWTH - faster onboarding - magnetic - easy to spin-off new teams
D E M O 4 9
THANK YOU QUESTIONS? https://www.mosaic9.org https://zalando.github.io
LUIS MINEIRO @voidmaze luis.mineiro@zalando.de MOR IT Z GR A U EL @mo_gr moritz.grauel@zalando.de @ZalandoTech tech.zalando.com 1 5 - 11-2016
Recommend
More recommend