the frontend ta b oo
play

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

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


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

  2. FASHION STORE WEBSITE

  3. MOB IL E A PPS Android iOS Windows Mobile

  4. S H OE S IN SPACE https://tech.zalando.de/blog/we-launched-it-the-zalando-space-shoe-video/

  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

  6. C H A L L E N G E S 6

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

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

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

  10. 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 11

  12. WE WANT AUTONOMOUS TEAMS TO DELIVER AMAZING PRODUCTS EFFICIENTLY AT SCALE

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

  14. THE FRONTEND TABOO 1 5

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

  16. TEAMS OWN B A C K E N D A P I S TEAM DINESH TEAM GILFOYLE

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

  18. WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS WEBAPP TEAM DINESH TEAM GILFOYLE

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

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

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

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

  23. C A N W E D O B E T T E R ? 2 4

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

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

  26. TEAMS OWN FRAGMENTS TEAM HADOUKEN TEAM PINGPONG

  27. FRAGMENTS USE THE BACKEND APIS TEAM HADOUKEN TEAM PINGPONG TYPICAL MICRO-SERVICES LAYER

  28. LAYOUT SERVICE ASSEMBLES FRAGMENTS LAYOUT TEMPLATES SERVIC E TEAM HADOUKEN TEAM PINGPONG TYPICAL MICRO-SERVICES LAYER

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

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

  31. R O U T I N G 3 2

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

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

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

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

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

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

  38. C O M M U N I C AT I O N 3 9

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

  40. C O M P O S I T I O N 4 1

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

  42. C O M P O S I T I O N TA ILOR header.domain.com footer.domain.com product.domain.com

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

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

  45. R E S U LT 4 6

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

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

  48. D E M O 4 9

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

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