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.

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