Web Popular Tools

Small and medium companies:

node. JS: The foundation of modern industrialization front-end;

REQUIREJS:AMD specification,

A JavaScript-ready modular solution that will be obsolete;

Bower: Front-end module source;

NPM; front-end tool source, another potential front-end module source;

Browserify: A CommonJS-based front-end modular solution that will be obsolete;

Less: CSS enhancement tools;

GULP: Front-end build tool;

Editor:

The above: VIM, Brackets
Optional: Atom, Sublime, Emacs
Webstorm that's called the IDE, not (just) the editor

CSS Tools:

Struggling with co-workers have been elected bootstrap, I did not seriously compare sass and less and directly all the way to use less, but the two actually not much.
Now seems to be popular after the processor (two called pre-preprocessor, I do not know where they differ), autoprefixer, etc., recommended to see PleeeaseThis is a collection of such tools

Modular Tools:

First: Browserify code schema is clear, you can plug in some parts of it yourself, such as replacing a prelude (in the browser how to load the module code, by default, each compiled after the merged JS with a small segment), or use such as Factor-bundle Such plug-ins carry out the shared build. Because the architecture is clear and the code is small, you can read through the source to understand its rationale.

Second: Webpack, have to say Webpack is very strong, if you want to use react words react-hot-loader such plug-in now this. The problem for me is that it's too big, and I can't get the whole picture out of the way.

Not recommended: Require.js Sea.js, two are to be outdated things, before I have become sea.js black, is a firm require.js black. The common problem is to write the wrapper for each file in the browser side, rather than the first two in the development and deployment phase to deal with, require.js problem is the most, at least sea.js is also compatible with node. js.

Process Tools/Pre-deployment processing:

Pre-deployment processing mainly includes packaging with the previous modular tools, generating version numbers, compressing files, and so on. I mainly use gulp to do these things, never use and do not like Grunt, Baidu's FIS have heard but do not understand, read @ Zhang Yunlong's article speculation should be good. My advice is @ Zhang Yunlong's article must read and FIS can refer to, and finally use Gulp to organize their own workflow.

If you use ripe gulp, you may be tired of starting a project just want to cut a page also to set the pomp and writing a dozens of hundred lines of gulpfile.js, then you should do subtraction, you can learn to Substack with NPM run (Package.json inside the scripts properties) or like./task.jsThis can be a few lines of code.

Package Management:

Bower: Using GitHub to do the source, domestic use is very unbearable, such as @yhben reply "100k js, cloned a 50M project." It may simplify a little bit you go to GitHub on the search code download saved work, but be to download the whole library This drawback offset, for the dependency management, I think he really did not do much.

NPM: I am whether the front end or even the CSS with NPM, the company also used @ Suchi and @ Dead horse cnpm.org a private library in use, personally think this tool must be mastered, otherwise you will denying oneself the mainstream of the development of the front-end today.

Front-End Frame:
Specific usage scenarios:
(1) Internal management system ExtJS, Angular, React etc. We encourage the use of new, hot or cutting-edge technologies in projects that are either internal or less important;
(2) Mobile Web, base library Zepto. PC Web, basic library jquery;
(3) Small projects, activity pages, usually no architecture. Large projects, in addition to the basic library, will have a business framework of their own, of course, we also have some common components of precipitation;
(4) Complex PC Web app, use knockout to do MVVM and knockout module organization code; Knockout this thing good, size suitable, compatibility good, also support component development;

Quality Assurance:
Project comparison Miscellaneous, temporarily did not introduce professional testing tools, mainly 3 points:
(1) The small test module that is written by oneself, makes a part in the workflow, can find some low-level error (like JSLint) when constructing;
(2) JS code execution error, Ajax quality, PVUV and other data reporting and statistics;
(3) Various monitoring tools on the operation and maintenance side;

Front and back end separation:
God Bless, most of our projects are non-display pages. There is not too much demand on the homepage loading speed, so we are usually completely separated from the front and back end, that is, all using AJAX to exchange data, even the first screen.

Web Popular Tools