Stop Over-Engineering your Medium Size Front-End Application
Writing maintainable code without falling into the trap of over-engineering has become increasingly uncommon in the field of programming
Stop Over-Engineering your Medium Size Front-End Application
Developing a small application is easy.
Developing a large-scale application, on the other hand, is extremely hard, but at least there are plenty of available resources to guide you.
However, the middle ground, where the majority of real-life applications exist, remains a subject that receives little attention. The practice of writing maintainable code without falling into the trap of overengineering has become increasingly uncommon in the field of software development.
Let’s explore which popular ingredients may be beneficial for a medium-sized application and evaluate whether they will help you manage complexity or create more problems than they will solve.
Typescript
- YES ✅
Let’s get this out of the way first. It’s 2023, and there is simply no excuse for not using TypeScript in your development workflow. It is recommended by all of the top front-end frameworks and their build process makes it very easy to get started.
Typescript is a superset of JavaScript that adds type annotations, interfaces, and other features to make it easier to write maintainable and scalable code. It can help catch errors early in the development process and can make it easier to refactor code as your application grows.
10 Best TypeScript Courses for Beginners to Learn in 2023
Testing
- YES & NO ❓
Testing is an essential part of any application development process. Unit testing, integration testing and end-to-end testing are some of the commonly used testing approaches that increase code quality and save time in the long run. Testable code is in general better code and creating test cases at the early stage of development ensures that the application will have fewer bugs and will be easier when new people will be onboarded.
On the other hand, there are many types of testing that you can encounter in a large-scale application that might not be essential for a smaller codebase. Some of them are mutation tests, load tests, stress tests, performance tests, visual tests snapshot tests and more.
When it comes to medium-scale applications, it’s important to find the balance between writing enough tests to ensure stability and not over-engineering the testing process. The focus should be on creating a solid base of unit and integration tests to cover the application.
CI/CD
- YES ✅
Another essential part of modern software development is continuous integration and delivery. With CI/CD, you can automate the build, testing and deployment processes, saving time and reducing errors. Using a good CI/CD tool can make your development process more efficient and ensure that your application is always ready for deployment.
16 Best Tools to Design Your CICD Engine ⚙️ 🚀
Domain Driven Design
- NO ⛔️
Domain Driven Design is an approach to software development that emphasizes modelling the core business domain, building a ubiquitous language shared by developers and stakeholders, and designing software components based on the domain’s complexity. While DDD can be extremely useful in large-scale applications with complex business logic and multiple teams working together, it might be overkill for medium-sized applications.
For medium-sized applications, a simpler architecture and a focus on clean, modular code can often be enough to ensure maintainability and scalability. DDD can add unnecessary overhead and complexity that may not bring significant benefits to the project. Instead, consider adopting simpler architectural patterns and practices that promote code organization, separation of concerns, and reusability.
Hexagonal Architecture
- NO ⛔️
Hexagonal architecture, also known as Ports and Adapters, is another architectural pattern that aims to create a clear separation between an application’s core business logic and its external dependencies, such as databases, APIs, and UIs. This separation allows for greater flexibility, testability, and maintainability.
Similar to DDD implementing hexagonal architecture can be beneficial for large applications with complex business logic and numerous external dependencies, but it’s definitely an overkill for a medium-sized application.
Micro Frontends
- NO ⛔️
Micro frontends are a popular architectural pattern that splits a large application into smaller, independent applications based on features or domains. These smaller applications can be developed, tested, and deployed independently, allowing for greater scalability and flexibility.
However, for medium-sized applications, introducing micro frontends might not be necessary and could add complexity and overhead that outweigh the benefits. A more traditional monolithic architecture, combined with a well-organized codebase and proper use of components, may be more suitable for most medium-sized applications. If the need arises in the future, the decision to transition to micro frontends can be revisited.
The Dark Side of Micro Frontends
CDN
- YES ✅
Using a CDN is a quick, easy and cost-effective way to improve the performance and reliability of your application by caching the content and serving it from a server closer to the end user.
Adding and Leveraging a CDN on Your Website | CSS-Tricks
Linting
- YES ✅
Linting is the process of analyzing your code to detect potential errors, inconsistencies, and deviations from established coding standards. It is an easy and fast way to maintain code quality, catch issues early, and improve overall readability and maintainability.
Top 10 Front-end Linting Tools for Web Development
Observability
- YES ✅
Medium-size applications are when observability starts to be essential and will potentially save a lot of time and money. By setting up observability in your application, you can easily monitor, understand, and troubleshoot the performance and overall health of your system.
There are several tools and techniques available for building observability into your application, such as logging, metrics collection, and distributed tracing. The goal is to quickly identify and address issues, maintain application performance, and minimize downtime.
Accessibility
- YES ✅
Accessibility is not just an option, it’s a responsibility! Ensuring that your application is accessible to all users, including those with disabilities, is not only the right thing to do, it’s also a legal requirement in some countries. As Front End Engineers it is our duty to create accessible websites and we should have it in our workflow as part of our definition of done.
Design system
- NO ⛔️
A design system is a collection of reusable components, guidelines, and principles for designing consistent user interfaces across multiple applications or platforms. While implementing a design system can be highly beneficial for large organizations with multiple products and teams, it may be unnecessary for medium-sized applications.
Instead of investing time and resources into creating a full-fledged design system, focus on configuring an existing component library according to your needs and establishing a set of guidelines and reusable components within your application to maintain consistency and improve developer efficiency.
Conclusion
Over-engineering is the root of all evil. And when it comes to medium-scale application development most of us are guilty as charged. Some tools and techniques are crucial and some others don’t justify the investment, but the important thing is to set and maintain a common coding style, use automation to prevent bugs from reaching production and keep the technical debt low.
Of course, your experience may differ and some tools that I consider harmful might be essential for you. If that’s the case or if I’ve missed something that has caused headaches for you in the past, please leave a comment below.
