众成翻译

登录或注册

Top JavaScript Frameworks & Topics to Learn in 2017

查看译文

The popularity of JavaScript has led to a very vibrant ecosystem of technologies, frameworks, and libraries. Along with all the amazing diversity and energy in the ecosystem comes a high degree of confusion for many. What technologies should you care about?

Where should you invest your time to get the most benefit? Which tech stacks are companies hiring for right now? Which ones have the most growth potential?

What are the most important technologies to know right now? This post is a high-level overview of stuff you need to know, packed with links where you can learn all about it.

Remember as you’re learning to experiment with some actual code. You can play with code interactively on Codepen.io. If you’re still learning ES6, you can see how it translates using the Babel REPL.

This is going to be a long list, but don’t get discouraged. You can do this! If you’re looking at this list, worried about how you’ll ever learn everything you need to know to build modern apps, read “Why I’m Thankful for JavaScript Fatigue”. Then buckle down and get to work.

A Note on Optional Learning

Some of this stuff is strictly optional*, which means, I recommend them if you are interested in them, or you need to know them for a job, but you should not feel obligated to learn them. Anything marked with an asterisk (e.g., example*) is optional.

Anything not marked with a * should be learned, but don’t feel obligated to learn everything there is to know about everything. You need to be aware of the non-optional stuff, but you don’t necessarily need to be a definitive subject matter expert on absolutely everything.

JavaScript & DOM Fundamentals

Before you try to land a job using JavaScript, you should have a good grasp of JavaScript fundamentals:

  • Builtin methods: Learn methods for the standard data types (especially arrays, objects, strings, and numbers).

  • Functions & pure functions: You probably think you’ve got a great grasp of functions, but JavaScript has some tricks up its sleeves, and you’ll need to learn about pure functions to get a handle on functional programming.

  • Closures: Learn how JavaScript’s function scopes behave.

  • Callbacks: A callback is a function used by another function to signal when there is a result ready. You say, “do your job, call me when it’s done.”

  • Promises: A promise is a way to deal with future values. When a function returns a promise, you can attach callbacks using the .then() method to run after the promise resolves. The resolved value is passed into your callback function, e.g., doSomething().then(value => console.log(value));

  • Ajax & server API calls: Most interesting apps eventually need to talk to the network. You should know how to communicate with APIs.

  • ES6: The current version of JavaScript is ES2016 (aka ES7), but a lot of developers still haven’t properly learned ES6. It’s past time.

  • Classes (note: Avoid class inheritance. See How to Use Classes and Sleep at Night.)

  • Functional programming basics: Functional programming produces programs by composing mathematical functions, avoiding shared state & mutable data. It’s been years since I’ve seen a production JavaScript app that didn’t make heavy use of functional programming. It’s time to master the fundamentals.

  • Generators & async/await: In my opinion, the best way to write asynchronous code that looks synchronous. It has a learning curve, but once you’ve learned it, the code will be easier to read.

  • Performance: RAIL — Start with “PageSpeed Insights” & “WebPageTest.org”

  • Progressive Web Applications (PWAs): See “Native Apps are Doomed” & “Why Native Apps Really Are Doomed”

  • Node & Express: Node lets you use JavaScript on the server, meaning your users can store data in the cloud and access it anywhere. Express is the most popular framework for Node by a landslide.

  • Lodash: A great, modular utility belt for JavaScript, packed with functional programming goodies. Import the data-last functional modules from lodash/fp.

Tooling

  • Chrome Dev Tools: DOM inspect & JS debugger: The best debugger, IMO, though Firefox has some really cool tools you might want to check out, too.

  • npm: The standard open-source package repository for the JavaScript language.

  • git & GitHub: Distributed version manager — keeps track of your source code changes over time.

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

  • Webpack: The most popular bundler for standard JavaScript look for simple starter kit/boilerplate config examples to get things running fast)

  • Atom, VSCode, or WebStorm + vim: You’re gonna need an editor. Atom and VSCode are the most popular JS editors today. Webstorm is another solution with very robust support for quality tooling. I recommend learning vim, or at least bookmarking the cheat sheet because sooner or later, you’re gonna need to edit a file on a server, and it’s the easiest way — vim comes installed on just about every flavor of Unix compatible OS, and works great over SSH terminal connections.

  • ESLint: Catch syntax errors and style issues early. After code review and TDD, the third best thing you can do to reduce bugs in your code.

  • Tern.js: Type inference tools for standard JavaScript, and currently my favorite type related tool for JavaScript — no compile step or annotations required. I’ve kicked all the tires, and Tern.js delivers most of the benefits, and virtually none of the costs of using a static type system for JS.

  • Yarn*: Similar to npm, but install behavior is deterministic, and Yarn aims to be faster than npm.

  • TypeScript*: Static types for JavaScript. Completely optional unless you’re learning Angular 2. If you’re not using Angular 2, you should evaluate carefully before choosing TypeScript. I like it a lot and I admire the TypeScript team’s excellent work, but there are tradeoffs you need to know about. Required reading: “The Shocking Secret About Static Types” & “You Might Not Need TypeScript”.

  • Flow*: Static type checker for JavaScript. See “TypeScript vs Flow” for an impressively informed and objective comparison of the two. Note that I’ve had some difficulty getting Flow to give me good IDE feedback, even using Nuclide.

React

React is a JavaScript library for building user interfaces, created by Facebook. It’s based on the idea of uni-directional data flow, meaning that for each update cycle:

  1. React takes inputs to components as props and conditionally renders DOM updates if data has changed for specific parts of the DOM. Data updates during this phase can’t retrigger the render until the next drawing phase.

  2. Event handling phase — after the DOM has rendered, React listens for and events, delegating events to a single event listener at the root of its DOM tree (for better performance). You can listen to those events and update data in response.

  3. Using any changes to the data, the process repeats at 1.

This is in contrast to 2-way data binding, where changes to the DOM may directly update data (e.g., as is the case with Angular 1 and Knockout). With 2-way binding, changes to the DOM during the DOM render process (called the digest cycle in Angular 1) can potentially retrigger the drawing phase before the drawing is finished, causing reflows and repaints — slowing performance.

React does not prescribe a data management system, but a Flux-based approach is recommended. React’s 1-way data flow approach borrowing ideas from functional programming and immutable data structures transformed the way we think about front-end framework architecture.

For more on React & Flux architecture, read “The Best Way to Learn to Code is to Code: Learn App Architecture by Building Apps”.

  • create-react-app*: The quickest way to get started with React.

  • react-router*: Dead simple routing for React.

  • Next.js*: Dead simple Universal render & Routing for Node & React.

  • velocity-react*: Animations for React — allows you to use the VMD bookmarklet for interactive visual motion design on your pages.

Redux

Redux provides transactional, deterministic state management for your apps. In Redux, we iterate over a stream of action objects to reduce to the current application state. To learn why that’s important, read “10 Tips for Better Redux Architecture.” To get started with Redux, check out the excellent courses by the creator of Redux, Dan Abramov:

Redux is mandatory learning, even if you never use Redux for a production project.

Why? Because it will give you lots of practice and teach you the value of using pure functions and teach you new ways to think about reducers, which are general-purpose functions for iterating over collections of data and extracting some value from them. Reducers are so generally useful that Array.prototype.reduce was added to the JS specification.

Reducers are important for more than just arrays, and learning new ways of working with Reducers is valuable all by itself.

  • redux-saga*: A synchronous-style side-effect library for Redux. Use this to manage I/O (such as handling network requests).

Angular 2*

Angular 2 is the successor to the wildly popular Angular framework from Google. Because of it’s crazy popularity, it’s going to look great on your resume — but I recommend learning React first.

I have a preference for React over Angular 2 because:

  1. It’s simpler, and

  2. It’s extremely popular and used in lots of jobs (so is Angular 2)

For this reason, I recommend learning React, but I consider Angular 2 strictly optional*. If you have a strong preference for Angular 2, feel free to swap them. Learn Angular 2 first, and consider React optional. Either will benefit you and look great on your resume.

Whichever you choose, try to focus on it for at least 6 months — 1 year before running off to learn the other one. It takes time to really sink into strong proficiency.

RxJS*

RxJS is a collection of reactive programming utilities for JavaScript. Think of it as Lodash for streams. Reactive programming has officially arrived on the JavaScript scene. The ECMAScript Observables proposal is a stage-1 draft, and RxJS 5+ is the canonical standard implementation.

As much as I love RxJS, if you just import the whole thing all at once, it can really bloat your bundle sizes (there are lots of operators). To combat bundle bloat, don’t import the whole thing. Use the patch imports, instead:

Using patch imports can reduce the size of your rxjs dependencies in your bundle by ~200k. That’s a really big deal. It will make your app much faster.

EDIT: Why Didn’t You List ?

Several people have asked why I didn’t list their favorite framework. One of the important criteria I considered was “will this be useful on a real job?”.

Yes, this is a popularity contest, but the opportunities that knowing a framework will open up is an important consideration when you’re deciding where to focus your learning investment.

To answer that question, I looked at some key indicators. First, Google Trends. If you want to reproduce this Google Trends graph, remember to select by topic, not keyword, since several of these words will deliver lots of false negatives. In other words, these are topic-focused trends, not keyword searches:

JS Topics on Google Trends

What this tells us is relative interest in various projects. If people are searching for them, chances are they’re exploring their options, or searching for help or documentation. This is a pretty decent indicator of relative usage levels.

Another good source of data is Indeed.com, which aggregates job listing data from a large variety of sources. Job posting popularity has declined sharply in recent years, but they still collect enough data to make good relative comparisons that tell you frameworks that people are actually using in production projects, on the job:

To reproduce those findings, search for javascript and leave the location blank. As you can clearly see:

Angular and React dominate: Nothing else even comes close. (Except jQuery, which is used on a huge share of all websites — non-apps included — because it’s used by almost all legacy systems, including popular CMS systems like WordPress).

You might see that Angular has a significant advantage over React in these listings. Why do I recommend learning React first? Because:

  1. More people are interested in learning React than Angular

  2. React significantly leads Angular in user satisfaction

In other words, React is winning the mindshare and customer satisfaction battles, and if the trends over the past year and a half continue to unfold, React has a very real chance of unseating Angular as the dominant front-end framework.

Angular 2 has a chance to turn that around, so Angular could make a comeback, but so far, React is putting up a really good fight.

Frameworks to Watch

  • Vue.js* has a ton of GitHub stars and downloads. If things continue the way they are going, it will do very well in 2017, but I don’t think it will unseat either React or Angular (both of which are also growing fast) in the next year or so. Learn this after you have learned React or Angular.

  • MobX* is a great data management library which has become a popular alternative to Redux. It is also growing fast, and I expect it will also do well in 2017. I prefer Redux for most apps, but there are definitely cases where MobX is a better choice. For example, if you have hundreds of thousands of dynamic DOM objects on a page, it will probably perform better. Also, if your app workflows are all simple and you don’t need transactional, deterministic state, you probably don’t need Redux. MobX is definitely a simpler solution. Learn this after you have learned Redux.

Next Steps

Now that you’ve studied up on all this hot tech, read “How to Land Your First Development Job in 5 Simple Steps”.

Level up your JavaScript game. If you’re not a member, you’re missing out.


Eric Elliott is the author of “Programming JavaScript Applications” (O’Reilly), and “Learn JavaScript with Eric Elliott”. He has contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.

He spends most of his time in the San Francisco Bay Area with the most beautiful woman in the world.

众成翻译 © 2014 - 2017 (京ICP备14049726号-2) Powered by ThinkJS 2.0