Shulou(Shulou.com)06/03 Report--

Today I will talk to you about how to gradually improve JavaScript coding ability, many people may not know much, in order to let you know more, Xiaobian summarized the following content for you, I hope you can harvest according to this article.

editor

At present, there are so many kinds of editors that people don't know which one to choose to improve their productivity.

For me, I mostly just use Visual Studio Code, except for Android code required to use Android Studio or iOS using Xcode.

This is an editor developed by Microsoft. This is developed by Microsoft, sounds great!!! Support for almost all languages, countless add-ons, AI code suggestions, nice interface and light tones (not Sublime Text, but…still light tones)

In the past, I only used Sublime Text(VSCode was not popular at the time). A large number of plugins (discussed below) have saved me a lot of time, such as automatic detection and repair of errors, format codes, git shots, terminals, etc., because there is no longer a need to solve small errors that are common when coding.

If you write PHP, you will love PHPStorm. If you write Python, you'll love PyCharm. These editors are undeniably powerful, but they only support one language. I am a full-stack developer with experience in JavaScript, HTML, PHP, NodeJS and React Docker... I use VSCode because it is very powerful and supports a lot of plugins, especially the autocomplete function is very good.

Love at first sight for ESLint

I spend the most time and frustrate myself the most with grammatical errors such as undeclared variables/functions, null pointers, missing accents…As code grows, having to read dozens of files at once can easily tire the eyes, clutter the mind, and start typing each line with trembling hands, making it easy to be careless and make mistakes.

When using ESLint, this plug-in can help find errors, check syntax and formatting code, thus reducing vulnerabilities in coding and making code look better when formatted according to current standards. ESLint also supports many other Big Brothers: JavaScript, React, Vue, etc.

Especially when ESLint and VSCode are used together, it's perfect. You can check your code typing right away for errors or syntax problems, and provide advice on how to use functions and variables to achieve good results. There's also auto-formatting code, you'll love it.

In addition to ESLint, you can also use Prettier to format code, but I prefer ESLint because it supports error detection and provides good code advice.

Excellent Directory Structure

I recently began to "accept" and tell myself one thing:

Don't try to optimize the project structure from the beginning

In the past, when I started a project, big or small, I spent a lot of time choosing the right project structure. I have looked at various "good practices for NodeJS folder structure"," ReactJS code structure…" on Google, but still wonder if this structure is excellent, should I choose this coding framework? This is very time-consuming.

And I realized that even though I initially tried to use a structure that would have been nice, after a few days the code was a mess. Because my system thinking is bad, it doesn't matter how beautiful the code is at first, but eventually it goes wrong.

Don't think too much about which architecture to choose and how to organize it from the start. Choose a direction or library, a framework, and start working on it, improving it as you go along, which is better and more practical.

If you are interested in a well-structured project, I will share a NodeJS framework called NestJS, I read many related documents and found that their architecture is very good (very similar to AngularJS, although I don't like Angular very much)

When you think your code is "broken," use Console.log

I'm pretty sure console.log is the one I use the most when writing JavaScript. The main purpose of this is to see if the data of interest is authentic.

Personally, I think that no matter what language you use, programming is about data, so if you see any disturbing code that may not be correct, you should use console.log to confirm it.

There are also many who think debuggers should look more professional. Google also supports placing Debug in the lines of code for better understanding. In fact, this is not necessary for me personally, console.log will also notice which line in the code, and the faster you use console.log, the more convenient it is. I also found some world-famous coding experts on Facebook who still use console.log.

It should also be noted that when console.log is complete, check everything before deleting it, not putting it on git. It's frustrating, it hurts your eyes (like me)

comment

In the coding process, there are many times when lengthy and complex code is required. The fear is that after a long time, when you read the code again, you might not know what the code does. Or humanely, hoping that future readers of this code will understand its purpose.

Personally, I find it really useful to write reviews, especially if the project involves a lot of people. Also, we don't want to ask our friend who wrote the code every time we don't understand it, and that friend is also busy fixing a lot of bugs that the testers put in place. And if the code itself is interpretable, then people who see it later can figure it out right away, saving time.

But reviews must also look reasonable and comfortable. You don't have to comment on everything. This sometimes makes the code difficult to read and uncomfortable for the eyes.

When writing code, I choose variable/function names that are easy to understand and don't let long classes/functions handle too much content. Instead, I'll split it into smaller classes/functions (but not too much, splitting has to be reasonable, and don't make your eyes hurt again). Comment when needed and practice writing code to "explain yourself." Just read it and know what it does.

Use ES6, 7, 8, 9 standards

JavaScript is a rapidly evolving language with many powerful features/libraries added. As far as I know, every year people publish JavaScript standards called ECMAScript or ES. Each of these standards includes new features built into JavaScript.

2015 ECMAScript 6(ES6)

2016 ECMAScript 7(ES7)

2015 ECMAScript 8(ES8)

2015 ECMAScript 9(ES9)

2015 ECMAScript 10(ES10)

….

So if you take advantage of ECMA's power, your code will look better, more optimized, and cooler (as cute as the author of this article) than if you just used traditional for and if, while loops.

Here are some of the functions/operators I use most when coding:

Skip Promise / Callback and go straight to Async / Await

Promise / CallbackWhile

The downside of coding is that we have to use APIs a lot. When calling the API from the backend or a third party to get data and display, you need to do the following:

If you want to invoke another API only after successfully retrieving the user list, you typically need to do the following:

Bad things happen when you try to call a series of APIs in sequence. This is what you see as projects grow in size and requests become more complex:

Async / await is the savior

Since ES6(2015) async/await has been introduced as an alternative to Promise/callbacks for handling asynchronous operations. The nice thing about async / await is that it helps you write asynchronous code that looks synchronous, runs line by line, and looks clean.

You can rewrite the above code with async / await:

There are a few caveats:

await always appears after async

Use try / catch to catch error handling operations in asynchronous functions

The essence of await is to wait for a Promise return value, so using too much await can sometimes slow down an application.

Another benefit of using async / await instead of regular Promise / Callback is that async / await errors can be discovered using try / catch. All other errors in try / catchblock will also be found, not just async/await

Using Typescript to Improve Code Quality

The story begins…

I first programmed in C, then Java. These languages are powerful, require extremely strict code, and require clear and complete definitions of data types (strings, booleans,…) or access specifications (public, private, protected…). I was tired of running code that day because I didn't know if it was public or private, what the data type was, and so I ran until I reported an error.

After that, I started using JavaScript(or PHP, Python), which was greatly simplified regardless of the data type. Simply declare variables to use:

Let x = 1const test ='This is a test' const arr = [1,2,3,4,5]

This is also one of the reasons I liked JS from the beginning, because the syntax is very "free," less confusing, and the code looks clean and beautiful. But life is not like dreams. Over time, I realized that when a project has a lot of people writing code, it rereads the code. It was really complicated. Because I don't know what this variable is, what type of data will the function return?…

const var1 = db.column1 const var2 = db.column2 const var3 = db.column3 const var4 = db.column4

What do we do now? Use console.log of course.

const var1 = db.column1 console.log（var1）//->string const var2 = db.column2 console.log（var2）//->boolean（true / false） const var3 = db.column3 console.log（var3）//- > number const var4 = db.column4 console.log（var4）//->array

It's just a waste of time, I'm unlikely to read the code again in the future, and new code readers won't understand it. Then, I or any other reader would have to do dozens of console.log statements to understand what the code was meant to do.

Typescript solves this problem.

TypeScript, in my opinion, is an "upgraded version" of JavaScript. JavaScript code will now have well-defined types (strings, booleans, numbers, etc.), accessible access functions (public, private),…and many other things. Code written in Typescript will be compiled into plain JavaScript, so it will work as usual, no need for special Typescript scripts or anything else. Here are some examples:

I heard about TypeScript two years ago, but still don't like it and don't want to use it because I only like JavaScript's freedom. Sometimes I want to try it, but my eyes are sensitive, and every time I see something messy, my eyes get more sensitive.

But not long ago, I decided to switch to TypeScript because of the headache I mentioned when reading old code or someone else's code. Also, the developer community tends to use TypeScript and review it well.

TypeScript is currently gaining popularity among JavaScript developers. Libraries or frameworks (Angular, React or Vue) focus on TypeScript support. For those of you who don't know: Vue 3 is absolutely 100% a rewrite of Typescript. At the same time, for TypeScript developed by Microsoft, you don't have to worry about quality and support issues.

CI / CD-Code-> Test-> Deployment

automated testing

Listen to me, the project you're working on will collapse sooner or later. The best approach is to improve as you go along, always spending 20% of your time improving. And the only way to make sure is to make improvements without making mistakes (or with minimal errors), or to write tests.

Be aware that tests can be written even before coding (Head First Java recommends this approach)

CI / CD -Continuous Testing and Deployment

CI / CD(Continuous Integration/Continuous Integration), a trend that helps automate code writing, testing, and deployment on a continuous basis.

In fact, almost all CI / CD tools have been integrated into Github, GitLab, BitBucket. So don't worry, all you need to do is set up and push the code. DevOps platforms (Github, gitlab, buckets) do the rest.

After reading the above, do you have any further understanding of how to gradually improve JavaScript coding power? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.