Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SOLID Frontend Architecture. Do we need it? Yes!

SOLID Frontend Architecture. Do we need it? Yes!

It's very common to think that "the UI" is a simple thing that it doesn't deserve the same effort as the Backend, even some architects think it's only a "box" in their design.
But if we want to have a maintainable and extensible web app we need to apply the same principles as in Backend:
- we need to design a robust architecture,
- apply software design main OOP principles,
- and define and measure strong metrics.

What happens if "the UI" is left in programmers hands only?
Frontend world has not evolved as quickly as Backend. We can't apply yet the "microservices" concept in its full meaning but it doesn't mean that there are not options to get closer.

In this presentation I want to explain how to apply S.O.L.I.D. OOP principles to Frontend architecture. I want to demonstrate that there are options to avoid the typical Frontend disasters, how to extend a good design to code level, what is cognitive complexity and how to measure it.

To sum up, Frontend not only deserves architecture time, it's mandatory for the sake of the project.

Ba671977228c0009260d6a9f788901ec?s=128

José Suárez

May 24, 2019
Tweet

More Decks by José Suárez

Other Decks in Technology

Transcript

  1. SOLID FRONTEND ARCHITECTURE DO WE NEED IT? YES!

  2. 2 Copyright © 2019 Accenture. All rights reserved. José A.

    Suárez Technology Architect Spain ATC Frontend Architecture Chapter Lead Fullstack Chapter Lead CSE Frontend & Fullstack Community Lead Málaga Honorable mentions: Spain ATC Architecture & DevOps Squad ASM C Visual Basic Delphi Java VB.NET C# Objective-C Swift C++ ES6 TypeScript MS-DOS Client-Server Windows Desktop Smart Clients Native Mobile Apps Hibrid Mobile Apps Web Sites Web Apps
  3. Objective • Maintainability and Extensibility. How to achieve it Copyright

    © 2019 Accenture. All rights reserved. 3 • Designing a ROBUST Architecture. • Applying Software Design SOLID Main Principles. • Defining and measuring STRONG Metrics. • Taking care of your Team. … and not forgetting to use common sense! How to design a Maintainable and Extensible web app
  4. Copyright © 2019 Accenture. All rights reserved. 4 STRONG Metrics

    ROBUST Architecture SOLID Main Principles Team How to design a Maintainable and Extensible web app The four Horsemen of the Anti-Apocalypse
  5. IV Openathon Custom Software Engineering Introduction to Angular

  6. Copyright © 2019 Accenture. All rights reserved. 6 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture Why do we need architecture in Frontend?
  7. Copyright © 2019 Accenture. All rights reserved. 7 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture Neighbour Frontend has evolved from very simple webs to web sites to web apps 1. Static pages 2. Web sites with some dynamic data 3. Web applications 4. Single Page Applications 5. Progresive Web Applications
  8. Microservice Microservice Microservice Microservice Microservice Copyright © 2019 Accenture. All

    rights reserved. 8 UI Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Backend super design Backend has evolved to complex architectures How to design a Maintainable and Extensible web app Designing a ROBUST Architecture
  9. Copyright © 2019 Accenture. All rights reserved. 9 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture UI API UI Monolith
  10. Copyright © 2019 Accenture. All rights reserved. 10 UI Monolith

    How to design a Maintainable and Extensible web app Designing a ROBUST Architecture API Component url1 We need a ”web app” very simple that access an API endpoint
  11. Copyright © 2019 Accenture. All rights reserved. 11 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture API Component Component Component The initial ”web app” grows and more components need to access the same API endpoint • Each component reinvents the wheel • No shared codebase, of course • Possibly copy & paste part of the code to access the same API • Same functionality implemented in different parts of the code • If there is any error in one of those implementations, it will be fixed only in one place url1
  12. Copyright © 2019 Accenture. All rights reserved. 12 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture API Component Component Component Login Service url1 url2 Now we want to add authentication • Angular Service sounds like web service so it should be the way • Login Service does a lot of things: • Retrieves the token • Stores the token in LocalStorage • Check if token is valid • Creates user full name appending name to surname • …
  13. Copyright © 2019 Accenture. All rights reserved. 13 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture API Component Component Component Login Service url1 url2 • Each component retrieves data from whatever place it’s developer knows it is • Components start to depend on other components • Chaos starts when a change in one component forces changes in other components… or services More pages and same data is now needed in different places Component
  14. Copyright © 2019 Accenture. All rights reserved. 14 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture Let’s jump now the the theory We will come back to architecture
  15. 15 … now theory starts Resist for 20 minutes if

    (asleep) { console.log(“##$%”); } NullPointerException How to design a Maintainable and Extensible web app
  16. Copyright © 2019 Accenture. All rights reserved. 16 SOLID Don’t

    Repeat Yourself Keep It Simple, Stupid Single Responsibility Open/Closed Liskov Substitution Interface Segregation Dependency Inversion DRY KISS YAGNI You Aren’t Gonna Need It How to design a Maintainable and Extensible web app Applying Software Design SOLID Main Principles Empathy: your code will be debugged, reviewed, enhanced, refactored... By others
  17. Copyright © 2019 Accenture. All rights reserved. 17 “Every entity

    should have a single responsibility over a single part of the functionality.” https://www.slideserve.com/aldon/solid-and-other- principles How to design a Maintainable and Extensible web app S.O.L.I.D. Single Responsibility Only one reason to change More easy to understand, more easy to debug, more easy… The most effective way to break applications is to create GOD classes
  18. Copyright © 2019 Accenture. All rights reserved. 18 https://www.slideserve.com/aldon/solid-and-other- principles

    How to design a Maintainable and Extensible web app S.O.L.I.D. Open/Closed “Entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.” OOP polymorphism + interfaces … but remember the ”new wave” Composition >>> Extension
  19. Copyright © 2019 Accenture. All rights reserved. 19 https://www.slideserve.com/aldon/solid-and-other- principles

    How to design a Maintainable and Extensible web app S.O.L.I.D. Liskov Substitution “Subtypes must be substitutable for their base types.” Child classes must not remove base class behavior Please… do you know what is a side effect? This will produce side effects! OOP polymorphism + interfaces
  20. Copyright © 2019 Accenture. All rights reserved. 20 https://www.slideserve.com/aldon/solid-and-other- principles

    How to design a Maintainable and Extensible web app S.O.L.I.D. Interface Segregation “Classes should not be forced to depend on methods they do not use.” Prefer small, cohesive interfaces and divide "fat" interfaces into smaller ones Divide! I don’t want to implement your 451623234 methods! OOP interfaces
  21. Copyright © 2019 Accenture. All rights reserved. 21 https://www.slideserve.com/aldon/solid-and-other- principles

    How to design a Maintainable and Extensible web app S.O.L.I.D. Dependency Inversion “High-level modules should not depend on low-level modules. Both should depend on abstractions.” Use Interfaces instead of Classes Classes using others will need to be changed if they change the constructor, f.e... And during development, classes change a lot! … The most important Principle OOP interfaces
  22. Copyright © 2019 Accenture. All rights reserved. 22 https://www.slideserve.com/aldon/solid-and-other- principles

    How to design a Maintainable and Extensible web app Keep It Simple, Stupid “Simplicity should be a key goal in design and unnecessary complexity should be avoided.” Most systems work best if they are kept simple
  23. Copyright © 2019 Accenture. All rights reserved. 23 https://www.slideserve.com/aldon/solid-and-other- principles

    How to design a Maintainable and Extensible web app Don’t Repeat Yourself “Repetition in logic calls for abstraction. Repetition in process calls for automation.” Don’t duplicate logic in multiple locations
  24. Copyright © 2019 Accenture. All rights reserved. 24 https://www.slideserve.com/aldon/solid-and-other- principles

    How to design a Maintainable and Extensible web app You Aren’t Gonna Need It “Always implement things when you actually need them, never when you just foresee that you need them.” Don’t be over-creative Don’t give more than expected functionality Your code can be prepared for changes (must be) but do not implement anything else!
  25. Copyright © 2019 Accenture. All rights reserved. 25 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture Why do we need architecture in Frontend?
  26. Copyright © 2019 Accenture. All rights reserved. 26 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture API Component Component Component Login Service url1 url2 Let’s apply now what we have learnt Component
  27. Copyright © 2019 Accenture. All rights reserved. 27 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture Question
  28. Copyright © 2019 Accenture. All rights reserved. 28 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture API Component Component Component Service url1 url2 Component Login Service Service API Consumers Views Error Management Routing State Management Models url3 Do you still think Frontent doesn’t need Architecture
  29. Copyright © 2019 Accenture. All rights reserved. 29 How to

    design a Maintainable and Extensible web app Designing a ROBUST Architecture Do you still think Frontent doesn’t need Architecture
  30. 30

  31. 31 Copyright © 2019 Accenture. All rights reserved. SonarQube Metrics

    to find how good is your code Cognitive Complexity How hard is code to understand How to design a Maintainable and Extensible web app Applying Software Design SOLID Main Principles
  32. Copyright © 2019 Accenture. All rights reserved. 32 Cognitive Complexity

    How to design a Maintainable and Extensible web app Why? Code Quality
  33. Cognitive Complexity is intended to: Copyright © 2019 Accenture. All

    rights reserved. 33 https://www.slideserve.com/aldon/solid-and-other- principles How to design a Maintainable and Extensible web app Cognitive Complexity • Measure understandability • Incent good code
  34. What we understand as common complexity is Cyclomatic Complexity: •

    Is the ”standard” subject when we talk about “complexity” • It’s absolutely spot-on for testability. • Scores exactly the minimum number of test cases in a method needed to fully unit test that method. …BUT about maintainability it misses the mark. Copyright © 2019 Accenture. All rights reserved. 34 https://www.slideserve.com/aldon/solid-and-other- principles How to design a Maintainable and Extensible web app Cognitive Complexity
  35. Copyright © 2019 Accenture. All rights reserved. 35 Guiding Principles

    • Increment for breaks in linear flow. • Increment for nesting. https://www.slideserve.com/aldon/solid-and-other- principles How to design a Maintainable and Extensible web app Cognitive Complexity
  36. Avoid! Copyright © 2019 Accenture. All rights reserved. 36 https://www.slideserve.com/aldon/solid-and-other-

    principles How to design a Maintainable and Extensible web app Cognitive Complexity
  37. Guiding Principles Increment for breaks in linear flow: – if,

    else if, else, ternary operators – switch – catch – Loops – Sequences of logical operators (a && b && c && d // +1) – Jumps to labels – Recursion Copyright © 2019 Accenture. All rights reserved. 37 https://www.slideserve.com/aldon/solid-and-other- principles How to design a Maintainable and Extensible web app Cognitive Complexity
  38. Avoid Breaks in linear flow! Copyright © 2019 Accenture. All

    rights reserved. 38 VS https://www.slideserve.com/aldon/solid-and-other- principles How to design a Maintainable and Extensible web app Cognitive Complexity
  39. Guiding Principles Complexity Increment for nesting: – Loops – switch

    – catch – if and ternary – else if, else increment nesting level – Nested method / lambda increments nesting level Copyright © 2019 Accenture. All rights reserved. 39 https://www.slideserve.com/aldon/solid-and-other- principles How to design a Maintainable and Extensible web app Cognitive Complexity
  40. Avoid Nesting! Copyright © 2019 Accenture. All rights reserved. 40

    VS https://www.slideserve.com/aldon/solid-and-other- principles How to design a Maintainable and Extensible web app Cognitive Complexity
  41. Avoid! Copyright © 2019 Accenture. All rights reserved. 41 https://www.slideserve.com/aldon/solid-and-other-

    principles How to design a Maintainable and Extensible web app Cognitive Complexity
  42. Copyright © 2019 Accenture. All rights reserved. 42 SonarQube How

    to design a Maintainable and Extensible web app Why? To measure!
  43. Copyright © 2019 Accenture. All rights reserved. 43 How to

    design a Maintainable and Extensible web app Cognitive Complexity -- SonarQube SonarQube Running Mini Demo
  44. Copyright © 2019 Accenture. All rights reserved. 44 STRONG Metrics

    ROBUST Architecture SOLID Main Principles Team How to design a Maintainable and Extensible web app The four Horsemen of the Anti-Apocalypse
  45. THANK YOU!