2017 top-of-the-class framework and themes to learn JavaScript

The popularity of JavaScript has facilitated the development of a very active ecosystem of related technologies, frameworks and libraries. The diversity and dynamism of the entire biosphere has become more and more confusing for many people. What techniques should you know about? where should we spend our time to get the most benefit? What are the technical stacks for the company's recruitment requirements? Which technology has the greatest potential for development?  What are the most important technologies that need to be mastered at the moment?  This article provides a high-level overview of the technologies you need to know, along with links to each technology, which you can learn more about in this link.

remember, in the process of learning must be more hands-on writing code. You can write the code interactively through the Codepen.io website, or if you're learning ES6, try Babel repl to transcode it.  This will be a very long list, but please don't be discouraged. Believe in yourself, you can do it! If you look at the list and worry about when you can learn everything you need to build a modern application, first move to why I am thankful for JavaScript Fatigue. Then sink down to start our study: 

Notes on "optional learning"

some of the content in the article is optional *, here is the optional meaning: If you are interested in these content, I recommend this knowledge to you, or, when looking for a job may need to understand them, but do not have to learn them. Any asterisks marked with an asterisk (such as *) are optional.  any content that is not marked with "*" requires learning, but do not feel obligated to study each content. You need to know these non-optional knowledge, but you don't necessarily have to be an absolute expert on the subject.  

JavaScript and DOM Basics

before looking for a JavaScript job, you should be familiar with the relevant JS basics:

• The latest version of Es6:javascript is ES2016 (that is, ES7), but many developers have not yet fully mastered ES6. It's time to get to know ES6, at least to understand the basics: arrow function, rest parameter/spread operator, default parameter, concise object direct representation, deconstruction, etc.

• Closures: Learn how the function scope of JavaScript works;

• Functions & Pure functions: You may think you have mastered the function of functions, but the functions in JavaScript have their own tricks, and you need to learn pure functions to cope with functional programming;

• Functional Programming Basics: Functional programming by combining mathematical functions to generate programs, you can avoid sharing state and variable data. I haven't seen a lot of functional programming in a product-level JavaScript application for many years. Therefore, it is time to master the basic principles of functional programming;

• Some Applications & currying

• Native methods: Learn methods for built-in standard data types (especially arrays, objects, strings, and numbers types);

• callback function: A callback function is a basic function that is called by another function when a particular result occurs. The callback function might say, "Execute your own logic and call me when a particular event occurs."

• promises mechanism: a promise is a way to handle future return values. If a function call returns a Promise object, you can use the object's. Then () method to bind a callback function that is called when the promise is cashed. Also, the value of the promise time is passed to your callback function such as: dosomething (). Then (value = Console.log (value));
  1. Const DoSomething = (ERR) = new Promise ((Resolve, reject) + = {
  2. if (err) return reject (ERR);
  4. SetTimeout (() = {
  5. Resolve (42);
  6. }, 1000);
  7. });
  9. Const LOG = value = = Console.log (value);
  11. Using returned promises
  12. DoSomething (). Then (
  13. On resolve:
  14. Log,//Logs 42
  15. On reject (not called this time)
  16. Log
  17. );
  19. Remember to handle errors!
  20. DoSomething (New Error (' oops '))
  21. . then (log)//No called this time
  22. . catch (log); Logs ' Error:oops '
  Copy Code

• Ajax & Server API calls: The most interesting apps ultimately need to talk to the web. You should know how to communicate with APIs.

• Classes (Note: Avoid class inheritance.) Read how to use the class and Sleep at night.)

• Generators & Async/wait: In my opinion, the best way to write asynchronous code looks synchronous. It has a learning curve, but once you learn it, the code is easier to read.

• Performance: RAIL?—? starts with Pagespeed Insights & webpagetest.org

• Progressive Web Application (PWAS): read "Native apps" & "why native apps are failing"

• Node & Express:node Allows you to use JavaScript on the server, meaning that users can store data in the cloud and access it from anywhere. The most popular framework for Express is node.

• Lodash: A great, JavaScript modular use that uses functional programming for good stuff. Imports the data lodash/fp of the last function module.

Tools

• Chrome developer tools: Dom Checker and JS debugger: Best debugger, IMO, although Firefox has some very cool tools you may also want to check.

• Standard Open source package repository for Npm:javascript languages.

• Git & GitHub: Distributed version Manager-keeps track of your source code changes over time.

• Babel: Used to compile ES6 to work on legacy browsers.

• Webpack: The most popular bundle for standard JavaScript look for a simple Starter kit/Sample Configuration example to get things running quickly)

• Atom, Vscode or Webstorm + VIM: You will need an editor. Atom and Vscode are the most popular JS editors today. Webstorm is another solution with a very powerful support quality tool. I suggest learning vim, or at least add a cheat sheet, because sooner or later you will need to edit the file on the server, which is the simplest way-vim is installed on every style of Unix-compatible operating system and works well on SSH terminal connections.

• ESLint: Catching grammatical errors and style problems as early as possible. The third thing you can do after code review and TDD is to reduce errors in your code.

• Tern.js: Type inference tool for standard JavaScript, currently my favorite JavaScript type related tool-no need to compile steps or comments. I have kicked all the tires, Tern.js offers most of the benefits and almost no cost of using a static type of JS system.

• Yarn *: Similar to NPM, but the installation behavior is deterministic, the yarn is intended to be faster than NPM.

• TypeScript the static type of the *:javascript. completely optional , unless you are learning angular. If you do not use angular, you should carefully evaluate it before choosing typescript. I like a lot and I appreciate the great work of the typescript team, but you need to understand the tradeoffs. Must-read: "Amazing secrets about static types" and "you may not need to typescript".

• Flow *: Static type checker for JavaScript. See "TypeScript vs Flow" for an impressive, objective comparison of the two. Please note that I have some difficulty, let flow give me good IDE feedback, even using nuclide.
  

React

React is a JavaScript library for building user interfaces created by Facebook. It is based on the concept of unidirectional data flow, meaning each update cycle:

• React uses components as props and conditionally renders DOM updates if the data changes a specific part of the DOM. Data updates can no longer trigger rendering at this stage until the next painting stage.
• The event processing phase?—? after DOM rendering, React automatically delegates DOM events to a single event listener (for better performance) in the root of the DOM tree. You can listen for events and update the response of the data.
• With any changes to the data, this procedure repeats step 1.
  

This is in contrast to bidirectional data binding, where DOM changes may update data directly (for example, the same as Angular 1 and knockout). With two-way binding, changes to the DOM in the DOM rendering process (referred to as the digest loop in angle 1) may cause the drawing phase to be re-triggered before drawing is complete, resulting in reflow and redraw-reducing performance. react does not specify a data management system, but it is recommended to use a flux-based approach. React's unidirectional data flow approach changes our thinking about the front-end framework architecture with the idea of functional programming and immutable data structures.

For more information about the React&flux architecture, read the best way to learn code is to write code: Learn the application architecture by building an application.

• Create-react-app *: The quickest way to get started with react.
• react-router*: React's dead end is simple.
• Next.js *: Death simple Universal rendering and routing nodes and reactions.
• velocity-react*: animations-Allows you to use VMD bookmarks to make interactive visual motion designs on your page.
  

Redux

Redux provides transactional, deterministic state management for your applications. In Redux, we iterate over an action object flow to reduce to the current application state.  To see why this is important, read the "10 Better Redux architecture Tips". To get started with Redux, check out Redux's founder Danabramov's excellent course:

• "Getting Started with redux"
• "Building Applications with customary redux"
  

Redux is mandatory for learning, even if you never use Redux for production projects.  why not? Because it will give you a lot of practice and teach you to use the value of pure functionality and teach you how to think about Reducers's new approach, which is a common function of reducing the database, used to iterate over the data collection and extract some values from it. The reducer is usually useful and Array.prototype.reduce is added to the JS specification.

The reducer is important for more than just the array, and the new method of learning to use the gearbox is valuable.

Angular 2+*

Angular 2 + is the successor to Google's popular Angular framework. Since this is crazy popularity, it will look great on your resume-but I suggest learning react first. I like the response to angular 2 + because:

• This is much simpler,
• It's very popular for a lot of work (Angular)
  

Therefore, I suggest studying react, but I think angular is strictly optional *. If you have a strong preference for angular, please feel free to swap. First learn angular, and consider react optional. It will help you a lot and your resume will be good.

Whichever you choose, try to focus on it for at least 6 months-1 years before you learn another. To be truly proficient is the experience that takes time.  

RxJS *

RxJS is a collection of JavaScript's response programming utilities. Think this is Lodash stream. Responsive programming has officially entered JavaScript's usage scene. ECMAScript the implementation of the draft proposal Phase 1 and RXJS 5 + normalization standards are visible.

I like rxjs very much, if you just put the whole thing into it all at once, it really can enlarge your package size (will produce a lot of data traffic, the package is not enough). To reduce the size of the bundle production environment file, do not import all program interfaces. Using patch Imports, replace:

1. Import {Observable} from ' rxjs/observable ';
2. Then patch import only needed operators:
3. Import ' Rxjs/add/operator/map ';
4. Import ' Rxjs/add/observable/from ';
6. const FOO = Observable.from ([1, 2, 3]);
7. Foo.map (x = x * 2). Subscribe (n = console.log (n));

2017 top-of-the-class framework and themes to learn JavaScript