2017 Required JavaScript Development guide

Over the past few years you may have been writing interfaces. may have been optimizing the search speed of your company data, or writing embedded programs for the microwave. Remember when you were fiddling with prototype.js, it's been a long time. Now that you've decided to upgrade your front-end skills, you'll see a landscape like this:

Of course you're not looking for someone in there, and you're randomly looking for 25 people, and you don't even know their name. This feeling of drowning is very common in the JavaScript community, so the word "javascript fatigue" is real. When you are free, you can look at this article, which is very apt to reflect this phenomenon.

You have no time now, but you are in a huge maze, you need a map, so I made this map.

A small disclaimer: This is a memo list that allows you to learn quickly without having to make too many choices. I will list some tools to meet the front-end development of most scenarios. When you finish this article, you will have enough confidence to adjust your technology stack.

⊙ overview

I'll divide the map into the problem you need to solve. For each issue will contain:

• Description of the problem and required tools

• Decide which tool to use to solve the problem

• Explain why I chose this tool.

• Give a few alternatives

⊙ Package Management

• Problem: Your projects and dependencies that need to be managed by your organization

• Solution: NPM and Yarn

• Why: NPM is a very good package management tool on the market. Yarn runs on NPM, optimizes dependency resolution, and locks your third-party dependent version into a single file.

• Other options: As far as I know, not yet.

⊙javascript

• Question: ECMAScript 5 It's old school, it sucks.

• Solution: ES6

• Cause: ES6 contains several useful features that have existed for a long time in other languages. Say a few interesting features: arrow functions, module import and export capabilities, object deconstruction, template strings, let and const, generators, promises, and more. If you are a Python programmer, you will feel at home.

• Other options: TypeScript, Coffeescript, Purescript, ELM

⊙ Grammar Conversion

• Problem: Many browsers do not yet have large-scale support ES6. You need a program to convert the ES6 syntax to ES5.

• Solution: Babel

• Reason: Perfect operation, near-de-facto standard. Complete the conversion on the server side.

• Other options: Traceur

• Note: You will use the Babel loader, which is a webpack loader. If you use a language such as coffeescript, you need to convert it.

⊙ Inspection Tool

• Problem: There are countless ways to write JS, so it is difficult to achieve code consistency. Use the grammar checker to block some bugs.

• Solution: ESLint

• Reason: Good code checker, but also configurable. can help you adapt to the new grammar well.

• Other options: JSLint

⊙ Packaging Tools

• Problem: Third-party dependencies and module loading issues need to be handled.

• Solution: Webpack

• Cause: Highly configurable. Various dependencies can be loaded, pluggable.

• Other options: Browserify

• Cons: First-time configuration can be tricky

• Note: You need to take some time to understand the Webpack operating mechanism. And to understand Babel-loader, Style-loader, Css-loader, File-loader, Url-loader.

⊙ test

• Problem: Sometimes your code is weak and you need to test it.

• Resolution: Mocha (Test Runner), Chai (assertion library).

• Reason: Easy to use, powerful.

• Other options: Jasmine, Jest, Sinon, Tape.

⊙ front-end frame/state management

• Question: This is a big problem. Single-page applications are becoming more complex, and mutable states are cumbersome.

• Solution: React and Redux

• Why use react: the excitement is that react has broken many traditional dogmas, better component thinking: using functional partitioning instead of the original pass (Html/css/javascript) to divide the way components.

• Why use redux: If your application is complex, you need to use a tool to manage your state. There are many tools on the net to realize, in order to save your time please learn redux directly. It's easy to implement and Facebook is also in use.

• Other options: Angular2, Vue.js.

• Warning: When you first see the JSX code, you may want to curse. Please believe me, writing html,javascript and CSS to a file is super cool and feels like unlocking a new world.

⊙ Operation Dom

• Problem: You occasionally need to manipulate the DOM

• Workaround: JQuery.

• Reason: Yes, jquery is still alive, react and jquery are not incompatible. You think you can also use react native to provide ' queryselector ', but jquery's cross-browser compatibility can save you a lot of trouble.

• Other options: Dojo (not sure if you have one now).

⊙ style

• Problem: Each component needs to have a separate style and can be reused.

• Workaround: CSS Module

• Reason: I like to use inline style, but I have to admit that it has a lot of limitations. Of course it can be used in react, but you can't locate pseudo-class selectors (such as: hover).

• Other options: inline style. I particularly like using inline styles in react so that you can handle styles as JS objects, and they are very easy to maintain in a file. Some people may advocate using sass/scss/less, but add new steps that are not as lightweight as CSS modules/inline styles.

• Need the Web front-end free course classmate, QQ login http://www.kgc.cn/index.php?tuin=7124, you can receive the free

2017 Required JavaScript Development guide