未加星标

Clean Code Checklist in Angular

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
Clean Code Checklist in Angular:heavy_check_mark:
Clean Code Checklist in Angular
Introduction

Angular has rapidly grown to become one of the most popular frameworks for building front-end, cross-platform web applications. While Angular is an extremely powerful framework with a broad toolkit, it’s overwhelmingly hard to master, especially if it’s your first javascript framework. In an attempt to reduce complexity and help other developers out, I decided to put together a clean code checklist which covers my personal recommendations for writing clean production-ready Angular code.

Note! The principles outlined here should by no means be strictly followed. They are meant as guidelines and nothing more, but stem from my own experience after several years in the field.

Background

As we become better developers, structuring and organizing code becomes more and more important. We want to write code that improves readability, scalability, maintainability and performance and minimizes the time spent debugging.

As Martin Golding stated:

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.

Sounds disturbing, but it doesn’t make the message any less true. Programmers are really authors and other developers are their target audience. The time spent attempting to understand someone else’s code takes up large portion of our day to day operations. Therefore, we should consciously try to improve our code by writing clean understandable, well-structured code. It’s essential for creating a successful maintainable product.

Style Guide

The logical place to start looking for best practices in Angular is the Angular Style Guide . This is an opinionated guide on syntax, conventions, and application structuring. The style guide presents preferred conventions and explains with examples why you should use them.

Angular CLI

The Angular CLI is a great tool for creating and working with Angular applications. It increases productivity by taking away the tedious work of creating each file manually. With only a few commands, your able to:

Create a project from scratch Scaffold components, directives and services Lint your code Serve the application Run unit- and end to end tests

You can find more information about the Angular CLI here .

Folder Structure

As the application grows in size, it’s important to have a structure in place that allows for easy management and maintenance of your code base. Whichever structure you decide to use, it’s important that you are consistent and choose a structure the entire team is happy with.

The article “ How to define a highly scalable folder structure for your Angular project ” discusses these topics, and can be used as a reference point for building scalable folder structures.

Write ReadableCode

If you want the refactoring to be as efficient as possible, it’s important to have readable code. Readable code is easier to understand, which makes it easy to debug, maintain and extend.

File names

While adding new files, pay attention to the names you decide to use. Names should be consistent and describe the feature by dot separation.

|-- my-feature.component.ts or |-- my-service.service.ts Variable- and functionnames

You need to name the variables and functions so the next developer understands them. Be descriptive and use meaningful names ― clarity over brevity .

This will help us avoid writing functions like this:

function div(x, y)) { const val = x / y; return val; }

And hopefully more like this:

function divide(divident, divisor) { const quotient = divident / divisor; return quotient; } Write Small pure functions

When we write functions to execute some business logic, we should keep them small and clean. Small functions are easier to test and maintain. When you start noticing that your function is getting long and cluttered, it’s probably a good idea to abstract the logic to a new function.

This avoids functions like this:

addOrUpdateData(data: Data, status: boolean) { if (status) { return this.http.post<Data>(url, data) .pipe(this.catchHttpErrors()); } return this.http.put<Data>(`${url}/${data.id}`, data) .pipe(this.catchHttpErrors()); } }

And hopefully more like this:

addData(data: Data) { return this.http.post<Data>(url, data) .pipe(this.catchHttpErrors()); } updateData(data: Data) { return this.http.put<Data>(`${url}/${data.id}`, data) .pipe(this.catchHttpErrors()); } Remove unusedcode

It is extremely valuable to know if a piece of code is being used or not. If you let it stay, then in the future, it can be hard or almost impossible to be certain if it’s actually used or not. Therefore, you should make it a high priority to remove unused code.

Avoid codecomments

Although there are cases for comments, you should really try to avoid them. You don’t want your comments to compensate for your failure to express the message in your code. Comments should be updated as code is updated, but a better use of time would be to write code that explains itself. Inaccurate comments are worse than no comments at all, as stated by anonymous :

Code never lies, comments do.

This avoids writing code like this:

// check if meal is healthy or not if (meal.calories < 1000 && meal.hasVegetables) { ... }

And hopefully more like this:

if (meal.isHealthy()) { ... } Separation ofConcerns

Angular is built around separation of concerns. This is a design-pattern that makes our code easier to maintain and extend, and more reusable and testable. It helps us encapsulate and limit the logic of components to satisfy what the template needs, and nothing more. Separation of concerns is the core of writing clean code in Angular, and uses the following rule-set:

Don’t create more than one component, service, directive per file. Every file should be responsible for a single functionality. A service shouldn’t be responsible for multiple actions or features. Just the opposite. As soon as we notice that our service starts to exceed the singular purpose, we should create another one. You should create something like “common frame” for your application where you will include common components and services for the entire application. This comes in handy when you don’t want to contaminate your components with the same code. Split the application into multiple modules. The project becomes more organized, maintainable, readable and reusable, and we’re able to lazy load features (more on this later). Utilize TypeScript TypeScript is a superset of JavaScript which primary provides static typing, classes and i

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Clean Code Checklist in Angular
本站链接:https://www.codesec.net/view/610968.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(59)