A complexity odyssey

Transcript

1. A complexity odyssey Ulysse arrache à Andromaque l'enfant Astyanax - Louis de Silvestre A Journey from Complexity: Reducing Technical Debt
2. ME Lead Frontend Developer at Ryanair Labs @izifortune izifortune.com
3. Sing to me of the man, Muse, the man of twists and turns driven time and again off course, once he had plundered the hallowed heights of Troy. Ulysses deriding Polyphemus - William Turner
4. Etymology complex + ity the state or quality of being intricate or complicated
5. Use over time for: complexity 1954 FORTRAN
6. Business logic Is that part of the program which encodes the real-world business rules that determine how data can be created, displayed, stored, and changed. Search Flights Dates Flights available Display flights Suggest different dates
7. History of complexity The Cicones
8. Page size 90s 1991 2000 14KB
9. Page size 2000s 1991 2000 2010 14KB 100KB
10. Page size 2010s 1991 2000 2010 14KB 100KB 1.5MB
11. httparchive.org
12. Impact calculator
13. Services complexity The Lotus-Eaters
14. BACKEND VS FRONTEND
17. Microservices • Loosely coupled • Independent deployable • Lightweight
18. Complexity cannot BE destroyed it can only be changed from one form to another.
19. Frontend aggregation
20. httparchive.org
21. Backend for frontend
22. Backend for frontend • Reduce complexity on frontend • Unify different data models • Share logic across clients
23. GraphQL GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. • Model your business domain as a graph by defining a schema • Declarative data fetching, the client specify the data necessary
24. Basket Schema
25. Basket API GraphQL
26. Basket API GraphQL
27. Development complexity The Land of the Cyclopes
28. Frontend monolith • User interfaces are by nature a monolith for performance reasons • Low interoperability between frameworks makes it single framework oriented • High exposure to technical debt by coupling
29. • Scaling up teams and software is hard! • Everyone's responsibility is no one's responsibility • We can’t write software fast enough Ryanair monolith > 300K LOC 75+ Routes ~422 Services
31. Ryanair pages Homepage Flight Select Products
32. Micropages Homepage Flight Select Products
33. Micropages • Independent development & deployment • Loosely coupled pages • Shared common components across pages • Single Page Application per page
34. Design complexity The Bag of Winds
35. • Fluid • Media queries • Flexible images • Graceful degradation Responsive web design
36. • Responsive principles • Progressive enhancement Mobile first
37. • Mobile only • Independent flows • Performance oriented Adaptive
38. Infrastructure complexity The Laestrygonians
39. Application that depends on third party services. Serverless
41. Frontend development roadmap Learn HTML Basic of CSS Basic of Javascript Package managers CSS Preprocessors CSS Frameworks CSS Architecture Build tools Pick a Framework Testing your apps PWA Static type checkers ServerSide Rendering Functional Keep exploring
42. • Cloudfront provides a high speed CDN • S3 supply object storage Hosting strategies
43. Brotli is a generic-purpose lossless compression algorithm that compresses data using a combination of a modern variant Brotli compression
44. Brotli lambda
45. 23% Decrease Brotli vs Gzip
46. Ryanair 3.0 The Underworld
47. Flight select ~ 30K LOC
48. Ryanair 3.0 • Adaptive solution • Micropage approach • Performance first class • Serverless leverage
49. Page size 2,211KB 572KB
50. First meaningful paint
51. Time to full usage Current Flight Select Ryanair 3.0 Flight Select No cache (first time visitor) With cache (recurrent visitor) No cache (first time visitor) With cache (recurrent visitor) Online ~10s ~9s ~1.5s ~1.4s Mid-tier mobile ~30s ~25s ~6s ~4.8s
53. Lost at sea
54. Entities are not to be multiplied beyond necessity - Occam's razor
55. QUESTIONS? Athena revealing Ithaca to Ulysses - Giuseppe Bottani