A complexity odyssey

A complexity odyssey

82c8dbce9b531b588a6e920eddad857e?s=128

Fabrizio Fortunato

October 04, 2018
Tweet

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

  15. None
  16. None
  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
  30. None
  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

  40. None
  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
  52. None
  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