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

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. LUIS MINEIRO DOING STUFF WITH COMPUTERS  AT ZALANDO    @voidmaze

3. FASHION STORE WEBSITE

4. MOBILE APPS iOSAndroid Windows Mobile

5. SHOES IN SPAC E https://tech.zalando.de/blog/we-launched-it-the-zalando-space-shoe-video/

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 C H A L L E N G E S

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. 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. 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 R A D I C A L A G I L I T Y

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

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. 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. 1 6 THE FRONTEND TABOO

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

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

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. WEBAPP GETS CONTRIBUTIONS FROM MULTIPLE TEAMS TEAM GILFOYLE TEAM DINESH WEBAPP

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

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

25. TEAMS OWN FRAGMENTS TEAM HADOUKEN TEAM PINGPONG

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

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

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. 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. 3 1 R O U T I N G

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. 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. 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. 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. 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. • 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. 3 8 C O M P O S I T I O N

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. C O M P O S I T I O N TA ILOR header.domain.com footer.domain.com cart.domain.com

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. 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. 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. MOSAIC IS OPEN SOU RCE https://www.mosaic9.org QUESTIONS? https://zalando.github.io Icons designed by Freepik and distributed by Flaticon

44. @ZalandoTech tech.zalando.com THANK YOU LUIS MINEIRO @voidmaze luis.mineiro@zalando.de 1 8 - 0 6 - 2 0 1 6

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

You are reading a preview.

Check these out next

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

More Related Content

Viewers also liked (20)

Recently uploaded (20)