Frontend Guideline

screenshot of Frontend Guideline
react
vue

Front-end Guideline by Juntos Somos Mais

Overview

In the fast-paced world of front-end development, adhering to coding standards and guidelines is crucial for maintaining a consistent and efficient workflow. This document serves as a valuable resource for developers involved in front-end projects using technologies such as HTML, CSS, JavaScript, TypeScript, React, and Vue. With an emphasis on collaboration, it aims to ensure that every line of code aligns with a unified style, thus fostering a seamless development experience.

The guidelines outlined here are not rigid rules but rather living suggestions that evolve with the team’s practices. They cover essential practices, from code formatting to architecture, creating a framework that encourages clarity, maintainability, and teamwork in code contributions.

Features

  • Consistent Code Style: The use of Prettier ensures that code is formatted consistently across all projects, making it easier to read and maintain.
  • Emphasis on Testing: Refactoring is encouraged only when accompanied by tests, promoting a culture of reliability and 100% code coverage.
  • Clear Import Guidelines: Differentiating between relative and absolute imports enhances clarity in the codebase, which in turn boosts performance and organization.
  • Explicit Naming Conventions: The recommendation to use explicit file names instead of generic index files greatly improves maintainability and understanding of the code structure.
  • Structured Architecture: Guidelines on folder and file naming conventions help keep the project organized, which is vital for scalability.
  • Avoidance of Barrel Files: The advice to steer clear of barrel files aids in achieving better tree-shaking and enhances TypeScript performance.
  • Iterative Document Updates: The living nature of the document means it evolves with the team, ensuring that guidelines remain relevant and tailored to current workflows.
  • Career Opportunities: The document also highlights job vacancies for aspiring front-end developers, making it not just a technical guide but a potential career pathway for readers.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.