Modern Front End Architecture

When you join the Front End world or you have a lot of years on this side, some questions appear for example: What is the best way to build the front end? How can I keep a front end cleaned and organized? Should I add unit testing? That's difficult to answer but I think I can share some good tips and articles about the Front End side so, let's go!!!

Every building needs a solid foundation, four walls, and a roof. These are not negotiable so, for this reason, we decided to base our front-end development in four keys to creating better products:

1. Code
2. Process
3. Unit tests
4. Documentation

These four groups of topics, technologies, and practices are the foundation of a scalable and sustainable front-end design system.

Code

We should focus on how to approach the HTML, CSS, JavaScript/typescript of a design system, for this reason in our projects we need to create content to share related to:

1. Guidelines to write front code in different frameworks
2. Best practices and principles.
3. Conventions or methodologies to write HTML and CSS.
4. Tools and editor to improve code

Process

It was created to define the steps required to get code from the developer's brain to the user's browser. In other words, we should put the focus on software development front-end workflow, validated design, and deploy code to write the most efficient, error-free, scalable, and sustainable design system possible.

1. Set up development environments where you can properly test code changes
2. Create build processes that compile, validate, and test code.
3. Push the committed code to a central code repository.
4. Continuous Integration

Testing

New code can introduce bugs or regressions in many different ways, some regressions will affect the outcome of system computation, for example resulting incorrect product prices, check out in a shopping cart or some visual changes and generating inconsistent in user interfaces, each of them has a very similar solution: Testing!

We should take a look at 4 different methods for testing our sites. Sometimes, depending on the team size, these tests will be split between front-end, back-end, and ops, but a solid understanding of each of them will be valuable when you’re communicating with those other teams.

1. Integration tests
2. Unit testing
3. Performance testing
4. Visual Regression testing
5. Automation with JS (To evaluate)

Documentation

Front-end code is getting more and more complex with every project we start, so it isn't a bad thing, it's just that this rapid rate of growth comes with its own set of growing pains. We should look at those various types of documentation your team might need to write, the tools used to make publication easier, and the types of end-users that will ingest the content.

• Static Documentation (Style Guide)
• Code-Driven Documentation (Pattern library)
• Tools for documentation front-end code

First, let’s get the definitions straight so we can learn how some concepts are connected and how they can be used to create better products and documentation.

1. Design System – the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards. It's the who, what, where, when, why and how of a product.
2. Pattern Library – A subclass in the design system, this is the set of design patterns for use across a company, it's the who, the what.
3. Style Guide – Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc. It's the how, where and when.

Previously published at https://www.jucayovera.com/blog/article/1