SOLID Frontend Architecture. Do we need it? Yes! for Commit Conf 19

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! José Suárez Technology Architect COMMIT CONF 2019
2. José Suárez Technology Architect Spain ATC Frontend Architecture Chapter Lead Frontend & Fullstack Chapter Lead Honorable mention: Assembly C Visual Basic Delphi Java VB.NET C# Objective-C Swift C++ ES6 TypeScript N-Tier & N-Layers Client-Server! Windows Desktop Smart Clients Native J Mobile Apps Hibrid LMobile Apps Web Sites SPAs Special thanks to my architecture Mentors: Jorge Hidalgo Senior Technology Architect Julio Palma Technology Architect Spain ATC Architecture & DevOps Squad
3. SOLID FRONTEND ARCHITECTURE DO WE NEED IT? YES!
4. “Frontend technologies are not as stronger as Backend ones” SOLID Frontend Architecture. Do we need it? YES! “Frontend is only a Box… if any” @devSparkle “JavaScript is to Java what fun is to a funeral” Jeremy Keith Me “JavaScript is dead!, long life to TypeScript! “JavaScript is a nightmare”
5. SOLID Frontend Architecture. Do we need it? YES! True Story time The Hero: an old fashion Project Manager (Me) When: during a Mobile Project Plan presentation in 2010 The Villain: a Bank Senior-Master-Blaster Mainframes Manager
6. SOLID Frontend Architecture. Do we need it? YES! Boss! The “dinosaur” said Mobile Apps are a joke but programming in Cobol is Art!
7. SOLID Frontend Architecture. Do we need it? YES! Frontend vs Backend
8. From Monolithic applications to Containerized microservices evolving into complementary microservice models: Event-based (reactive) and Function-based (lambdas) Monoliths J2EE – Java EE – Spring Framework Miniliths Java EE – Jakarta EE – Spring Framework – Spring Boot Microservices Spring Boot – Spring Cloud – Docker – Kubernetes – Istio Spring Boot Reactive µS Akka – Lagom – Kafka – Spark – Vert.x – Spring Reactive Function-based µS AWS Lambda – Google Functions SOLID Frontend Architecture. Do we need it? YES! Backend History
9. From very simple Static Webs to complex Enterprise Applications. • Static Webs. HTML + CSS • Web sites with some dynamic data. Welcome ECMAScript • SSR Web applications with ASP & JSP • Single Page and Progresive Web Applications SOLID Frontend Architecture. Do we need it? YES! Complexity Frontend History Trending now? Microfrontends!
10. Server-Side Rendering JavaScript as First Citizen language ES2016 - ES2018 ES6 Trending Microfrontends! 2013 2014 2015 2017 2016 2010 2006 Client-Side Rendering 2002 2003 ECMAScript JavaScript HELL 2011 SOLID Frontend Architecture. Do we need it? YES! Best Launches Frontend History
11. Help! He heard Frontend and Architecture words… in the same sentence!!! SOLID Frontend Architecture. Do we need it? YES!
12. SOLID Frontend Architecture. Do we need it? YES! Languages • JavaScript / TypeScript vs Java / C# Frameworks • Angular FW / React Ecosystem vs Spring FW / ASP.NET FW Data • SQLite / IndexedDB vs MongoDB / PostgreSQL Only in Frontend • Client Side • Browsers! IE11, Opera, Firefox, IE9, Chrome, IE6, IE, IE, IE, IE… • Responsiveness, UX, SEO… • CSS, HTML Frontend vs Backend ( from Frontend-Web point of view, very opinionated and oversimplificated for dramatic purposes ;)
13. Microservice Microservice Microservice Microservice Microservice Frontend Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Microservice Backend super design SOLID Frontend Architecture. Do we need it? YES! Frontend vs Backend Me
14. SOLID Frontend Architecture. Do we need it? YES! … real example SPA in Angular
15. SOLID Frontend Architecture. Do we need it? YES!
16. Monolith Backend Component API “We need a ”web app” very simple, that access an API endpoint to retrieve a list of items with their detail” Of course, a Backend using Microservice Architecture Desing Pattern And of course, no time for thinking, start programming directly! SOLID Frontend Architecture. Do we need it? YES! url1 Frontend vs Backend
17. Backend API Component Component Component “Now we want to have a list with only the names, one page with the detail and another with the pictures” • Each component reinvents the wheel • No shared classes, 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 SOLID Frontend Architecture. Do we need it? YES! Monolith Frontend vs Backend
18. Backend API Component Component Component Login Service url1 url2 “Now we want to add authentication and a new endpoing, more ‘screens’ and want to retrieve only logged user items” • 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 SOLID Frontend Architecture. Do we need it? YES! Monolith Frontend vs Backend
19. Backend Component Component Component Login Service • Each component retrieves data from whatever place each developer finds • 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. Let the chaos begin!” Component SOLID Frontend Architecture. Do we need it? YES! API url1 url2 Monolith Frontend vs Backend Maintenable and Extensible ???
20. SOLID Frontend Architecture. Do we need it? YES! that cube again ! Where do you think we need better engineering, in the Frontend or in the Backend Heaven? If Frontend is Chaos
21. SOLID Frontend Architecture. Do we need it? YES! Development is Art Margaret Hamilton Development is Art Science When she started using the term "software engineering", software development was not considered a science. Responsible for developing the on-board flight software in Assembly necessary to navigate to and from the Moon and to land on the Moon for Apollo missions.
22. SOLID Frontend Architecture. Do we need it? YES! Margaret Hamilton Engineering applied to Software Development in a systematic method Software Engineering Let’s apply it to Frontend Development
23. SOLID Frontend Architecture. Do we need it? YES! is NOT only and ONLY about coding Frontend Development as any other development is about: • Applying Systematic methods and methodologies • Applying lessons already learnt, Good Practices • Reuse how to solve known problems, Design Patterns • Defining requirements, Functional & Not Functional • Taking decisions from the start, not later • And more, more and even more… I like cubes Architecture is about Delivering a Realiable and Quality solution Engineering applied to Software Development in a systematic method Software Engineering Frontend Development
24. SOLID Frontend Architecture. Do we need it? YES! Accenture Delivery Architectures (ADA) Key aspects of a Technology Blueprint Architecture is about Delivering a Realiable and Quality solution Wiiiiiiiiii About ADA I’ll tell you about it another day
25. Frontend objective Delivering a Realiable and Quality solution • Designing a ROBUST Architecture • Applying SOLID Design Principles • Defining and measuring STRONG Metrics SOLID Frontend Architecture. Do we need it? YES! How?
26. STRONG Metrics ROBUST Architecture SOLID Principles Team The four Horsemen of the Anti-Apocalypse SOLID Frontend Architecture. Do we need it? YES! Empathy your code will be debugged, reviewed, enhanced, refactored... By others
27. Backend API Component Component Component Service url1 url2 Component Login Service Service API Consumers Views Error Management Routing Models url3 Do you still think Frontent doesn’t need Architecture? SOLID Frontend Architecture. Do we need it? YES! Frontend Monolith ? State Management
28. SOLID Frontend Architecture. Do we need it? YES! Frontend Monolith ?
29. SOLID Frontend Architecture. Do we need it? YES! Nice and polished Frontend Component Component Component Service backend Component Login Service Service API Consumers Views Error Management Routing Models State Management Frontend Monolith ? Me
30. Code Time? I like C Sharp! SOLID Frontend Architecture. Do we need it? YES!
31. Single Responsibility Open/Closed Liskov Substitution Interface Segregation Dependency Inversion SOLID Frontend Architecture. Do we need it? YES! SOLID Principles The four Horsemen of the Anti-Apocalypse STRONG Metrics ROBUST Architecture SOLID Principles Team Robert C. Martin
32. Keep It Simple, Stupid SOLID Frontend Architecture. Do we need it? YES! Don’t Repeat Yourself You Aren’t Gonna Need It … and not forgetting to use common sense! Be a happy Frontend Developer More Principles
34. Cognitive Complexity Why? Measure Code Understandability Incent Code Quality SOLID Frontend Architecture. Do we need it? YES!
35. What we understand as common complexity is Cyclomatic Complexity: • It’s 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. SOLID Frontend Architecture. Do we need it? YES! …BUT about maintainability it misses the mark. Cognitive Complexity
36. Guiding Principles • Increment for BREAKS in LINEAR FLOW. • Increment for NESTING. SOLID Frontend Architecture. Do we need it? YES! Measure understandability Incent good code Cognitive Complexity
37. SOLID Frontend Architecture. Do we need it? YES! Cognitive Complexity Increment for BREAKS in LINEAR FLOW Increment for NESTING Minimize! Measure understandability Incent good code
38. Increment for BREAKS in LINEAR FLOW: • loops • switch • catch • if, else if, else, ternary operators • sequences of logical operators • jumps to labels • recursion SOLID Frontend Architecture. Do we need it? YES! Cognitive Complexity Measure understandability Incent good code VS
39. Increment for NESTING: • loops • switch • catch • if, else if, else, ternary operators • nested method / lambda SOLID Frontend Architecture. Do we need it? YES! Cognitive Complexity Measure understandability Incent good code VS
40. SOLID Frontend Architecture. Do we need it? YES! Cognitive Complexity Measure understandability Incent good code
41. SOLID Frontend Architecture. Do we need it? YES! Cognitive Complexity Measure understandability Incent good code
42. SOLID Frontend Architecture. Do we need it? YES! Cognitive Complexity Measure understandability Incent good code
43. To measure automatically! SOLID Frontend Architecture. Do we need it? YES! Why?
44. “It's very common to think that 'the UI' is a simple thing that doesn't deserve the same effort as the Backend, even some architects think it's only a 'box' in their design” José Suárez SOLID Frontend Architecture. Do we need it? YES THANK YOU GRACIAS Robots & Cubes and Frontend dancers! Legos The talk with SOLID Frontend Architecture. Do we need it? YES! COMMIT CONF
45. SOLID Frontend Architecture. Do we need it? YES! Question Time!
46. GRACIAS SOLID Frontend Architecture. Do we need it? YES!