JS Automation

###Preface

I remember when I was brushing up on interview questions, I learned about "frontend engineering", which is nothing more than using automation tools to help developers complete small details and improve work efficiency, but at that time I didn't think about maintainability

Building project -> Modular development -> Reuse -> Testing -> Debugging -> Validation -> Release -> Version control, many links in this entire process can use automation tools to liberate manpower and improve project maintainability

##I. Pros and Cons of Automation

The pros and cons of using automated build systems in js development are as follows:

###1. Pros

• Automatic source code control can clearly distinguish between code used for debugging and code to be released in the future, no need to worry about affecting online products during development

• Static code analysis can be completed automatically (JSLint, JSHint)

• Various processing can be done before release (merge files, compress code)

• Automated testing can find errors quickly

• It's easy to redo repetitive work (such as merging files again, compressing code)

###2. Cons

• Some developers are not used to it, because after changing code, they need to rebuild once, instead of the traditional save file, refresh page

• The code deployed online is different from the code in the development stage, making it difficult to track bugs

• Inexperienced developers may not know how to use this kind of automated build system

##II. File Directory Structure

Generally, different projects require different directory structures, but the following principles are widely applicable:

1. One object corresponds to one file

Avoid conflicts when multiple developers modify, the fewer files, the greater the probability of conflicts, one object corresponding to one file can minimize this risk

2. Group related files with folders

This makes it easier to manage code and locate corresponding code based on functionality

3. Separate third-party code

It's best to use CDN to import third-party libraries, so you don't need to perform extra source code control on third-party code

4. Separate build artifacts

Build artifacts should be placed in another folder, without source code control, to avoid time consumption caused by unintentional repeated builds

5. Put test code closer

Test code should be placed in an easy-to-find location, such as together with source code, or in a location similar to the source code path under the test/ directory

##III. Automation Steps

###1. Use Automated Build Tools

• Ant: Java-based

• Buildy: NodeJS-based

• Gmake: What UNIX fans like

• Jammit: Ruby-based

• Jasy: Python-based

• Rake: Ruby-based

• Sprockets: Rack-based

###2. Use Automated Code Checking Tools

• JSLint: A good tool made by Douglas

• JSHint: Similar to the above, but with more configuration options

###3. Use Automated File Merging/Processing Tools

Merging files, inserting version numbers, etc., can be done with the automated build tools used in the first step

###4. Use Code Minification/Compression Tools

The difference between minification and compression is that minification is optimization targeting code syntax, making source code shorter; while compression is converting plain text source code files into other smaller files, cannot be edited after compression unless decompressed first

There are many minification tools, the author recommends several:

• YUI Compressor: From Yahoo!, Java-based, can shorten variable names, remove whitespace, remove comments, and can also minify CSS

• Closure Compiler: From Google, Java-based, can perform deep optimization (remove unused methods, put methods used only once into closures), better minification effect than YUI

• UglifyJS: NodeJS-based, can also merge var statements

###5. Use Automated Documentation Generation Tools

• JSDoc: Java-based

• YUI Doc: Written in js

• Others: Docco, Dojo Documentation Tools, JoDoc, Natural Docs, NDoc, PDoc

###6. Use Automated Testing Tools

• YUI Test Selenium Driver: (The author always likes to put Yahoo! things first, good employee) YUI's unit testing framework

• Yeti: Uses various browsers for js testing

• PhantomJS: Provides WebKit browser environment, can work with QUnit and Jasmine

• JsTestDriver: Google's unit testing framework, supports automatic browser testing

• Jasmine: Behavior-driven js testing framework

• QUnit: JQuery's unit testing framework

• Selenium: Functional testing framework, supports browser testing

###7. Integrate All Automation Tools

Should build at least 3 versions:

• Development version

Requirement is to be as fast as possible, otherwise it affects developers going full speed

Specific tasks: Clean files -> Initialize build environment -> Check code -> Merge files

Note: Don't put automatic testing in this step, because it takes time, development version build requires to be as fast as possible

• Integration version

Used to troubleshoot errors, should run periodically to check and report errors

Specific tasks: Code minification -> Testing -> Documentation generation

Note: Documentation generation step is optional, because adding it may affect error checking (errors may come from the documentation generation step)

• Release version

Must guarantee 0 errors, stable and reliable product

Specific tasks: Process files (add version, copyright information, etc.)

Note: Can consider adding deployment and other release tasks, or can also choose to directly process and deploy integration results, but must ensure integration results are problem-free

###8. Use CI System

CI (Continuous Integration) system is used to enhance error checking of the integration version, continuous integration can automatically run and check code and report errors at regular intervals, even contact specific developers related to errors

###Reference Materials

• "Maintainable JavaScript"

###Afterword

This is the end of the entire book, this book was recommended by Taobao UED blog, it's quite good, and there are no particularly obscure and difficult English sentences.

A 200-page book took nearly 3 weeks to read intermittently, not too slow, of course, during this period I also finished reading "JavaScript: The Good Parts", "The Book of CSS3", learned SASS introduction, and wrote 10 blog posts