Toolkit for modern JavaScript developers

Since HTML5 became popular, the entire web platform has made great strides, and people are beginning to see JavaScript as a language that can create complex applications. Many new APIs are emerging, and articles about how browsers apply these technologies are popping up.

As a scripting language, JavaScript was originally created to enhance the performance of Web pages, and today JavaScript is almost everywhere you can think of. As the industry's technical capabilities continue to improve, JavaScript is now ready to run on the server side and can be compiled into the code of the native phone app. Today's JavaScript developers are part of a rich ecosystem of hundreds of of Ides, tools, and frameworks to choose from. Because of the sheer number of choices and resources, some developers will feel unaware of where to start learning. I'm happy to discuss and outline the situation that modern JavaScript developers face, and I'll start with a brief introduction to the history of JavaScript, which will then cover some of the most popular frameworks, tools, and Ides.

Quick Review History

Let's start a quick trip. Time went back to 1995, when Netscape Navigator and Internet Explorer 1.0 were the only options available for browsers. The site is flooded with annoying flickering text and too many GIF images. To load a page that contains a lot of rich content over a dial-up network, you need to wait a full two minutes. Then came a Web language that allowed these ancient sites to execute the client's code. This year was the year that JavaScript was born.

These sites, created before 20, do not have much use for JavaScript and, of course, do not fully exploit the potential of the language. Occasionally, a popup dialog will tell you some information, or you can display the news in a box by scrolling through text, or save your username with a cookie so that you will be able to display your name directly when you visit the site after a few months. There is certainly no job in the workplace where JavaScript is the main development language, and it is fortunate to be able to actually write some JavaScript at work. In short, the Web site for JavaScript was used to play some small tricks in the DOM.

Today, you can basically see JavaScript everywhere. From Bootstrap to Reactjs, Angular, Universal jquery, and even node.js,javascript running on the server, it has become one of the most important and popular web languages.

Framework

One of the biggest aspects of JavaScript's changes since its inception is the way it is applied. Call those awkward document. The days of the getElementById method and the creation of heavy XMLHttpRequest objects are gone. Instead, these basic functions are abstracted through a variety of helpful libraries, making JavaScript easier for developers to use. This is one of the main reasons why JavaScript is ubiquitous today.

Jquery

The jquery, introduced by John Resig in 2006, provides a rich set of tools to abstract and simplify a variety of cryptic, cryptic JavaScript commands and methods. The simplest way to present this tool is in the code sample.

Use pure JavaScript to create an AJAX request:

function Loadxmldoc () {    xmlhttp;    if (window. XMLHttpRequest) {        //code for ie7+, Firefox, Chrome, Opera, Safari        xmlhttp = new XMLHttpRequest ();    } else {
    //code for IE6, IE5        xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");    }    Xmlhttp.onreadystatechange = function () {        if (xmlhttp.readystate = = 4) {           if (xmlhttp.status = =) {               Alert ("Success");           }           else if (xmlhttp.status = =) {              alert ("Error")           }           else {               alert ("Something Broke")           }        }    }    Xmlhttp.open ("GET", "test.html", true);    Xmlhttp.send ();} 

Source: Stack Overflow

Instead, use jquery to create an AJAX request:

$. Ajax ({    URL: "test.html",    statusCode: {    200:function () {    alert ("Success");    },    400: function () {    alert ("error")    ,}},    error:function () {    alert ("Something Broke");}    });

jquery makes complex JavaScript functions easier to use, and DOM manipulation is a piece of cake. As a result, jquery became the first batch of widely used JavaScript frameworks, in which the idea of abstraction of JavaScript became the basis for other frameworks to build.

AngularJS

Angularjs is also commonly referred to as "Augular", which debuted in 2009. It is a framework created by Google that aims to simplify the creation of single page applications (SPAS). Similar to jquery, its goal is to abstract complex operations into highly reusable methods. It provides JavaScript with a model-view-controller (MVC) architecture.

Reactjs

Reactjs is also often referred to as "React", a novice who has just appeared in the game. It was created by Facebook and was first released in 2013. Facebook thinks react can be a angular alternative to dealing with spa issues, so if you think angular and react are rivals, then you're right. However, the biggest difference between react and angular is that it is a more efficient, higher performance, faster class library. Shows the time required to use react, Angular, Knockout (another class library, not discussed in this article), and pure JavaScript to render a list of 1000 content in the DOM:

Source: The Dapper Developer

If your application values performance, then react is the right choice.

JavaScript development environment

For efficient development, the use of the IDE is very important. The full name of the IDE is an integrated development environment, an application that provides a series of tools for developers. The most important part of this tool is usually a rich text editor that often provides the user with syntax highlighting, AutoComplete, and keyboard shortcuts to speed up annoying manual actions.

Sublime Text

Sublime text is not actually an IDE, but a lightweight, fast- Coding text editor that provides syntax highlighting and intuitive keyboard shortcuts. It is cross-platform in itself, so it is ideal for developers who want to use a Mac (or vice versa) in a PC environment. Each part of the Sublime text is almost customizable, and it provides a variety of plugins that incorporate IDE-like functionality, such as integration with Git, and code grooming. It's a great choice for JavaScript enthusiasts and novice developers. When this article is published, the price for each sublime text license is $70.

Source: Sublime Text

Webstorm

Webstorm is an intelligent IDE developed by the JetBrains team that focuses on the development of HTML, CSS, and JavaScript. It only charges a nominal license fee ($ 49 at the time of this publication), which is widely recognized among experienced JavaScript experts and has been seen as a de facto standard, which is justified by the fact that its built-in code completion features and censorship tools can be said to be unique. A rich JavaScript debugger is also available in Webstorm, and integrates with a variety of popular unit test frameworks, such as Karma Test actuators and jsdriver, and even mocha that support node. js.

One of the best features of Webstorm is its real-time editing (live edit) feature. As long as you install a plugin in chrome and webstorm, developers can see the results directly in the browser while changing the code. Developers can also configure real-time editing to highlight changes in the browser window, which greatly increases the productivity of debugging and coding.

In general, if JavaScript is your full-time job, webstorm This IDE can be a good choice.

Source: JetBrains

Brackets

Brackets is an open source, free IDE that focuses on visualization tools. Brackets provides a real-time editing feature similar to Webstorm, allowing you to see the results of code changes directly in the browser window. It also supports parallel editing, allowing you to encode and see the results of your code without having to switch between different applications or use pop-ups. One of the most interesting features of brackets, called extract (Extract), is the ability to analyze Photoshop's psd file for information such as its font, color, and size. Due to the existence of this feature, brackets is ideal for JavaScript developers who work simultaneously on the design.

Source: Brackets

Atom

Atom is a free, open-source, Rich text editor from GitHub that is very easy to use and can be run directly after installation without any configuration file changes to "run well". One of the most interesting things about atom is that it can be customized for every aspect of it (GitHub calls it "can be tossed around"), it's created on a web core, so users can customize its look by writing standard HTML, CSS, and JavaScript. Want to change a different background and text font for atom? Just change the CSS on the line. Or you can choose to download and apply a variety of themes created for atom. This flexibility allows atom to show in the way you want it to. Atom is a great tool for novice JavaScript developers and users who are passionate about customizing.

Source: Atom

Build and automate tools

Modern JavaScript projects are tending to become more complex, and the parts of the change are growing. This is not to say that the language or the corresponding tool is not efficient enough, but rather because of the immediate consequences of the richness, cool experience, and complexity of the Web application currently being created. When working in a large project, you have to do a lot of repetitive work, whether you want to check in code or build your code into a production environment. These jobs may include merging, compressing, compiling for less or sass CSS files, or even running tests. Doing this manually is not only frustrating, it's inefficient. A better approach is to automate these tasks through some kind of build tool that supports them.

Merge (bundling) and compression (minification)

Most of the JavaScript and CSS you write will be shared across multiple web pages. Therefore, you are likely to place these in separate. js and. css files, and then reference them in a Web page. The result of this approach is that the user's browser needs to send an HTTP request to get these files (or at least to verify that they have changed) in order to fully display your Web references.

The cost of HTTP requests is high. In addition to the size of the request itself, you will also pay for network delays, HTTP headers, and cookies. The merging and compression tools are designed to reduce, and even eliminate, the impact of these requests.

Merge

The simplest thing a developer can do to improve the performance of Web code is to merge the code. In the merge process, multiple JavaScript or CSS files are incorporated into a single JavaScript or CSS file. It feels like you're connecting multiple photos of individual panoramas to complete a single photo that continues. By merging JavaScript files with CSS files, we can eliminate the overhead of a large portion of HTTP requests.

Compression

JavaScript developers also have a way to improve performance by compressing the code that has just been merged. The compression process can compress JavaScript and CSS code in the smallest possible form, while ensuring that the functionality is constant. For JavaScript, this means renaming variables to meaningless single-character forms and removing all whitespace and formatting characters. For CSS, because the page style relies on the name of the variable, it usually only removes the formatting and whitespace. Compression can greatly improve network performance because it reduces the number of bytes per HTTP response.

The uncompressed Ajax JavaScript code is the same as the code shown above:

$.ajax ({    URL: "test.html",    statusCode: {    200:function () {    alert ("Success");    },    400: function () {    alert ("error")    ,}},    error:function () {    alert ("Something Broke");}    });

The same code is compressed in the following form:

$. Ajax ({url: "test.html", Statuscode:{200:function () {alert ("Success"),},400:function () {alert ("error 400");}}, Error:function () {alert ("something Broke");}});

Notice that I've divided the compressed output into two lines, just to make it easier to read in the article, and actually the compressed output usually has only one line.

Timing of merging and compressing

Typically, the merge and compress steps are only performed on the production environment, because you can debug the original code that contains the format and line numbers locally or in the development environment. Debugging the kind of compression code shown above can be very difficult because all the code is packed in one line. and the compressed code becomes completely unreadable, and when you try to debug, you'll find that the code is completely useless and frustrating for you.

Source Code Mapping File

Sometimes, some bugs in the code can only be reproduced in a production environment. This way, when you are debugging some problems, the compressed code becomes a problem. Fortunately, JavaScript supports the source code mapping file, which is capable of "mapping" between the compressed code and the original code. These code-mapping files are generated by some of the construction tools described later in the compression phase. Your JavaScript debugger will then be able to use these mapping files to provide you with clear, readable code for debugging. You should publish the mapping file with the actual code whenever possible, so that you can debug the code when something goes wrong.

Code Grooming

The Code grooming tool examines common errors and problems in your code based on predefined formatting rules, which often report errors that resemble the following: Use tab indent to be not a space, omit semicolons at the end of a line, or use braces without using an if, for, or while statement. The code grooming tools are available in most Ides, and some other Ides allow users to install their own code-grooming plugins.

The two most popular JavaScript grooming tools are Jshint and Jslint,jslint, which are the grooming frameworks developed by Doug Crockford, and Jshint are branched out of jslint by community personnel. They only have a few differences in their code formatting standards. My advice is to try both, and then choose a tool that best suits your code style.

Automation tasks: Grunt

Unlike its name, Grunt (snoring) is by no means a coarse tool, but a robust command-line construction tool capable of running various tasks defined by the user. By setting up a simple profile, you can let grunt do all kinds of work, such as compiling less or sass files, building and compressing all JavaScript and CSS files in a particular folder, or even running some sort of code grooming tool or testing framework. You can also run grunt as a git hook through the configuration, and automatically compress and merge your code as you check in the source control repository.

Grunt supports a variety of named targets because you can specify different commands in different environments, such as "Dev" and "prod" as targets. This is useful for some scenarios, such as merging and compressing code in a production environment, and ignoring this step in the development environment to facilitate debugging.

A useful feature in Grunt is called "Grunt Watch", which can monitor a file in a directory, or a change in a collection of files . This feature can be integrated into webstorm and sublime text such as the use of the IDE. By using the monitoring feature, you can trigger events based on file changes. For less or Sass compilation is a practical approach to this feature, you can set up grunt to monitor your less or sass files, compile as soon as the file has changed, and the compiled files can be used directly in the development environment. You can also let grunt monitor automatically run some sort of code grooming tool after you have modified each file. Real-time task execution through grunt monitoring is an excellent way to accelerate your productivity.

Automation tasks: Gulp

Both grunt and gulp are tools used to solve the problem of building automation, which can be said to be direct competitors. The main difference between them is that grunt is more focused on configuration, while Gulp is more focused on code. You configure the build task in the grunt file with declarative json, and in the Gulp file, you write JavaScript functions to achieve the same functionality.

The following grunt configuration file compiles a CSS file when the Sass file generates a change:

Grunt.initconfig ({  sass: {    dist: {      files: [{        CWD: "App/styles",        src: "**/*.scss",        dest: ". /.tmp/styles ",        expand:true,        ext:". css "      }]    }  },  autoprefixer: {    options: [" Last 1 Version "],    dist: {      files: [{        expand:true,        cwd:". Tmp/styles ",        src:" {, */}*.css ",        Dest: "Dist/styles"}      ]    }  ,  Watch: {    styles: {      files: ["App/styles/{,*/}*.scss"],      tasks: ["Sass:dist", "Autoprefixer:dist"]}}  ); Grunt.registertask ("Default", ["Styles", "watch"]);

Source: Grunt vs Gulp-beyond The Numbers

The following gulp configuration file will also compile a CSS file when the Sass file is generated:

Gulp.task ("Sass", function () {  gulp.src ("App/styles/**/*.scss")    . Pipe (Sass ())    . Pipe (Autoprefixer (" Last 1 Version ")    . Pipe (Gulp.dest (" Dist/styles ")); Gulp.task ("Default", function () {  gulp.run ("sass");  Gulp.watch ("App/styles/**/*.scss", function () {    gulp.run ("sass");  });

Source: Grunt vs Gulp-beyond The Numbers

I suggest you feel free to choose the one you like. Both of these tools are generally downloaded through the node. JS Package Manager NPM.

Summarize

JavaScript has undergone tremendous improvements since the early days of the Internet. Today, it has become a prominent and important part of interactive Web applications.

Developers have undergone dramatic changes since 1995, and today's developers are more likely to use rich and robust frameworks, tools, and Ides to improve the efficiency and productivity of their work.

Create your first modern JavaScript application or more simply than you think! Just choose an IDE (I recommend atom for beginners), then install NPM and grunt. Stack overflow is a great resource if you're stuck somewhere after that. With a little time to learn the basics, you'll soon be able to develop and eventually launch your first modern JavaScript app.

Resources

Framework:

• Jquery
• AngularJS
• Reactjs

Ide:

• Sublime Text
• Webstorm
• Brackets
• Atom

Code Grooming Tools:

• JSLint
• Jshint

Build and automate tools

• Npm
• Grunt
• Gulp

Useful Resources

• Stack Overflow

Toolkit for modern JavaScript developers