Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,471 views

Published on

Micro-services are not news anymore. They allow multiple teams to work autonomously by choosing their own technology stacks and having their own release cycles. There is something not being addressed though, like if it is some kind of dirty little secret, and that is frontend development. The common practice for building websites remains 'the monolith': a single frontend codebase that consumes multiple APIs. We believe we found a better solution.Last year, a handful of Zalando engineers came up with an innovative solution for this exact problem - project Mosaic. Mosaic is a new architecture for websites where micro-services are used in the entire stack, all the way to the frontend. Its main components are:

- Skipper - an HTTP router with runtime update of routes
- Tailor - a streaming layout service with runtime update of templates
The network is the glue putting it all together.In this talk we want to share our motivation to build Mosaic, how to perform such migration without downtime, and the advantages it has to offer to other organizations, regardless of their size.We'll go through the operational details about Skipper and how it can be customized to answer many other different requirements. I'll also describe in detail how Tailor can dramatically improve the perceived performance of your website by streaming frontend content, from multiple fragments, in parallel.

Published in: Technology

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

  1. 1. 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
  2. 2. LUIS MINEIRO DOING STUFF WITH COMPUTERS
 AT ZALANDO
 
 @voidmaze
  3. 3. FASHION STORE WEBSITE
  4. 4. MOBILE APPS iOSAndroid Windows Mobile
  5. 5. SHOES IN SPAC E https://tech.zalando.de/blog/we-launched-it-the-zalando-space-shoe-video/
  6. 6. 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
  7. 7. 7 C H A L L E N G E S
  8. 8. 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
  9. 9. 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
  10. 10. 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. 11. 11 R A D I C A L A G I L I T Y
  12. 12. WE WANT AUTONOMOUS TEAMS TO DELIVER AMAZING PRODUCTS EFFICIENTLY AT SCALE
  13. 13. 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
  14. 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 https://zln.do/ra-video
  15. 15. 1 6 THE FRONTEND TABOO
  16. 16. THE PROMISE OF MICRO-SERVICES work autonomously mix of different technology stacks independent release cycles …
  17. 17. TEAMS OWN B A C K E N D A P I S TEAM GILFOYLE TEAM DINESH
  18. 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
  19. 19. WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS TEAM GILFOYLE TEAM DINESH WEBAPP
  20. 20. THE PROMISE OF MICRO-SERVICES REVISITED work autonomously? mix of different technology stacks? independent release cycles? …
  21. 21. THE PROMISE OF MICRO-SERVICES REVISITED work autonomously? mix of different technology stacks? independent release cycles? …
  22. 22. THE PROMISE OF MICRO-SERVICES REVISITED work autonomously? mix of different technology stacks? independent release cycles? …
  23. 23. THE PROMISE OF MICRO-SERVICES REVISITED work autonomously? mix of different technology stacks? independent release cycles? …
  24. 24. MOSAIC h t t p s : / / w w w. m o s a i c 9 . o r g
  25. 25. TEAMS OWN FRAGMENTS TEAM HADOUKEN TEAM PINGPONG
  26. 26. FRAGMENTS USE THE BACKEND APIS TYPICAL MICRO-SERVICES LAYER TEAM HADOUKEN TEAM PINGPONG
  27. 27. LAYOUT SERVICE ASSEMBLES FRAGMENTS TYPICAL MICRO-SERVICES LAYER TEAM HADOUKEN TEAM PINGPONG LAYOUT SERVIC E TEMPLATES
  28. 28. 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 API CALLS
  29. 29. MOSAIC COMPONEN TS TYPICAL MICRO-SERVICES LAYER TEAM HADOUKEN TEAM PINGPONG TA ILOR QUILT SKIPPER INNKEEPER C U S TO M E R API CALLS
  30. 30. 3 1 R O U T I N G
  31. 31. • 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
  32. 32. 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
  33. 33. 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 >
  34. 34. 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 ( )
  35. 35. 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 )
  36. 36. • 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
  37. 37. 3 8 C O M P O S I T I O N
  38. 38. • 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
  39. 39. C O M P O S I T I O N TA ILOR header.domain.com footer.domain.com cart.domain.com
  40. 40. 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>
  41. 41. 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
  42. 42. 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
  43. 43. MOSAIC IS OPEN SOU RCE https://www.mosaic9.org QUESTIONS? https://zalando.github.io Icons designed by Freepik and distributed by Flaticon
  44. 44. @ZalandoTech tech.zalando.com THANK YOU LUIS MINEIRO @voidmaze luis.mineiro@zalando.de 1 8 - 0 6 - 2 0 1 6

×