javascript

by Sacha Greif

由Sacha Greif

治愈JavaScript疲劳的研究计划 (A Study Plan To Cure JavaScript Fatigue)

Like everybody else, I recently came across Jose Aguinaga’s post “How it feels to learn JavaScript in 2016”.

像其他所有人一样，我最近遇到了Jose Aguinaga的帖子“ 2016年学习JavaScript的感受 ”。

It’s clear that this post hit a nerve: I saw it reaching the top spot on Hacker News not once but twice. It was the most popular post on /r/javascript as well, and as of right now it has over 10k likes on Medium — which is probably more than all my own posts put together. But who’s counting?

显然，这篇文章令人不安：我看到它到达Hacker News的头把交椅不是一次，而是两次。 这也是/ r / javascript上最受欢迎的帖子，截止到目前，它在Medium上的赞次数已超过1万，这可能比我自己撰写的所有帖子都多。但是谁在数呢？

This didn’t come as a surprise though: I’ve known for a long time that the JavaScript ecosystem can be confusing. In fact, the very reason why I ran the State Of JavaScript survey was to find out which libraries were actually popular, and finally sort the signal from the noise.

但是，这并不令人感到意外：我很久以来就知道JavaScript生态系统会造成混乱。实际上，我进行“ JavaScript状态调查”的根本原因是要找出哪些库实际上是最受欢迎的，并最终对噪声中的信号进行分类。

But today, I want to go one step further. Instead of simply complaining about the state of things, I’m going to give you a concrete, step-by-step study plan to conquering the JavaScript ecosystem.

但是今天，我想更进一步。我将不只是抱怨事情的状态，而是为您提供一个具体的，逐步的学习计划，以征服JavaScript生态系统。

这是给谁的 (Who Is This For)

This study plan is for you if:

该学习计划适合您：

You’re already familiar with basic programming concepts like variables and functions.您已经熟悉基本的编程概念，例如变量和函数。
You might have already done back-end work with languages such as PHP and Python, and maybe used front-end libraries such as jQuery for a few simple hacks.您可能已经使用PHP和Python之类的语言完成了后端工作，并且可能使用了jQuery之类的前端库来进行一些简单的修改。
You now want to get into more serious front-end development but are drowning in frameworks and libraries before you’ve even started.您现在想进行更认真的前端开发，但是甚至在开始之前就被框架和库淹没了。

我们将介绍的内容 (Things We’ll Cover)

What a modern JavaScript web app looks like现代JavaScript网络应用的外观
Why you can’t just use jQuery为什么你不能只使用jQuery
Why React is the safest pick为什么React是最安全的选择
Why you may not need to “learn JavaScript properly” first为什么您可能不需要先“正确学习JavaScript”
How to learn ES6 syntax如何学习ES6语法
Why and how to learn Redux为什么以及如何学习Redux
What GraphQL is and why it’s a big deal什么是GraphQL以及为何如此重要
Where to go next下一步去哪里

这里提到的资源 (Resources Mentioned Here)

Disclaimer: this post will include a few affiliate links to courses by Wes Bos, but the material is recommended because I genuinely think it’s good, and not just because of the affiliate scheme.

免责声明：这篇文章将包括一些与Wes Bos的课程相关的会员链接，但推荐该材料是因为我真的认为这很好，而不仅仅是因为会员计划。

If you would rather find other resources, Mark Erikson maintains a great list of React, ES6, and Redux links.

如果您希望找到其他资源，Mark Erikson会维护一个很棒的React，ES6和Redux链接列表。

JavaScript与JavaScript (JavaScript vs JavaScript)

Before we start, we need to make sure we’re talking about the same thing. If you google “Learn JavaScript” or “JavaScript study plan”, you’ll find a ton of resources that teach you how to learn the JavaScript language.

在开始之前，我们需要确保我们在谈论同一件事。如果您用Google搜索“学习JavaScript”或“ JavaScript学习计划”，则会发现大量的资源来教您如何学习JavaScript 语言。

But that’s actually the easy part. While you can definitely dig deep and learn the intricacies of the language, the truth is most web apps use relatively simple code. In other words, 80% of what you’ll ever need to write web apps is typically covered in the first few chapters of your typical JavaScript book.

但这实际上是简单的部分。虽然您绝对可以深入学习并学习该语言的复杂性，但事实是，大多数Web应用程序都使用相对简单的代码。换句话说，典型JavaScript书籍的前几章通常会覆盖80％编写Web应用程序所需的内容。

No, the hard problem is mastering the JavaScript ecosystem, with its countless competing frameworks and libraries. The good news is, that’s exactly what this study plan focuses on.

不，难题是如何掌握JavaScript 生态系统及其无数竞争框架和库。好消息是，这正是本研究计划所关注的重点。

JavaScript应用程序的构建基块 (The Building Blocks Of JavaScript Apps)

In order to understand why modern JavaScript apps seem so complex, you first have to understand how they work.

为了了解现代JavaScript应用为何如此复杂，您首先必须了解它们的工作方式。

For starters, let’s look at a “traditional” web app circa 2008:

首先，让我们看一下大约2008年的“传统”网络应用程序：

The database sends data to your back-end (e.g. your PHP or Rails app).数据库将数据发送到您的后端(例如，您PHP或Rails应用程序)。
The back-end reads that data and outputs HTML.后端读取该数据并输出HTML。
The HTML is sent to the browser, which displays it as the DOM (basically, a web page)HTML被发送到浏览器，该浏览器将其显示为DOM(基本上是网页)

Now a lot of these apps also sprinkled in some JavaScript code on the client to add interactivity, such as tabs and modal windows. But fundamentally, the browser was still receiving HTML and going from there.

现在，许多此类应用程序还散布在客户端的一些JavaScript代码中，以增加交互性，例如选项卡和模式窗口。但从根本上讲，浏览器仍在接收HTML并从那里开始。

Now compare this with a “modern” 2016 web app (also known as the “Single Page App”):

现在，将其与“现代” 2016 Web应用程序(也称为“单页应用程序”)进行比较：

Notice the difference? Instead of sending HTML, the server now sends data, and the “data to HTML” conversion step happens on the client instead (which is why you’re also sending along the code that tells the client how to perform said conversion).

注意区别吗？现在，服务器不再发送HTML，而是发送数据，而是在客户端执行“数据到HTML”的转换步骤(这就是为什么您还发送了告诉客户端如何执行上述转换的代码的原因)。

This has many implications. First, the good:

这具有许多含义。一，优点：

For a given piece of content, sending only data is faster than sending entire HTML pages.对于给定的内容，仅发送数据比发送整个HTML页面要快。
The client can swap in content instantly without having to ever refresh the browser window (thus the term “Single Page App”).客户端可以立即交换内容，而无需刷新浏览器窗口(因此称为“单页应用”)。

The bad:

坏处：

The initial load takes longer since the “data to HTML” codebase can grow quite large.初始加载需要更长的时间，因为“数据到HTML”代码库可能会变得很大。
You now need a place to store and manage the data on the client too, in case you want to cache it or inspect it.现在，您还需要在客户端上存储和管理数据的位置，以防您要缓存或检查数据。

And the ugly:

和丑陋的：

Congratulations — you now have to deal with a client-side stack, which can get just as complex as your server-side stack.恭喜，您现在必须处理一个客户端堆栈，该堆栈可能变得与服务器端堆栈一样复杂。

客户端-服务器频谱 (The Client-Server Spectrum)

So why go through all this trouble if there are so many downsides? Why not just stick to the good old PHP apps of old?

那么，如果有这么多缺点，为什么还要经历所有这些麻烦呢？为什么不只坚持使用旧的旧PHP应用程序呢？

Well, imagine you’re building a calculator. If the user wants to know what 2 + 2 is, it doesn’t make sense to go all the way back to the server to perform the operation when the browser is perfectly capable of doing it.

好吧，想象一下您正在构建一个计算器。如果用户想知道2 + 2是什么，那么当浏览器完全有能力执行该操作时，一直回到服务器来执行操作是没有意义的。

On the other hand, if you’re building a purely static site such as a blog, it’s perfectly fine to generate the final HTML on the server and be done with it.

另一方面，如果您要构建纯静态的网站(例如博客)，则可以在服务器上生成最终HTML并完成操作，这是完全可以的。

The truth is, most web apps fall somewhere in the middle of the spectrum. The problem is knowing where.

事实是，大多数Web应用程序处于中等水平。问题是知道在哪里。

But the key thing is that the spectrum is not continuous: you can’t start with a pure server-side app and slowly move towards a pure client-side app. At some point (the Divide), you’ll be forced to stop and refactor everything, or else end up with a mess of unmaintainable spaghetti code.

但是关键是， 频谱并不是连续的 ：您不能从纯服务器端应用程序开始，而逐渐转向纯客户端应用程序。在某个时候(分度)，您将被迫停止并重构所有内容，否则最终会陷入一堆无法维护的意大利面条代码。

This is why you shouldn’t “just use jQuery” for everything. You can think of jQuery like duct tape. It’s amazingly handy for small fixes around the house, but if you keep adding more and more things will start looking ugly.

这就是为什么您不应对所有内容“仅使用jQuery”的原因。您可以将jQuery视为胶带。这对于房屋周围的小修理非常方便，但是如果您继续添加，那么越来越多的东西将看起来很丑陋。

On the other hand, modern JavaScript frameworks are more like 3D-printing a replacement piece: it takes more time, but the result is a lot cleaner and sturdier.

另一方面，现代JavaScript框架更像是3D打印替代品：虽然花费更多时间，但结果却更加整洁和坚固。

In other words, mastering the modern JavaScript stack is a bet that no matter where they start, most web apps will probably end up on the right side of the divide sooner or later. So yes, it’s more work, but better safe than sorry.

换句话说，掌握现代JavaScript堆栈是一个赌注，无论它们从哪里开始，大多数Web应用程序迟早都可能会落在鸿沟的右边。是的，这是更多的工作，但是比后悔更安全。

第0周：JavaScript基础 (Week 0: JavaScript Basics)

Unless you’ve a pure back-end developer, you probably know some JavaScript. And even if you don’t, JavaScript’s C-like syntax will look somewhat familiar if you’re a PHP or Java developer.

除非您是纯粹的后端开发人员，否则您可能会知道一些 JavaScript。而且即使您不这样做，如果您是PHP或Java开发人员，JavaScript的C形语法也会显得有些熟悉。

But if JavaScript is a complete mystery to you, don’t despair. There are a lot of free resources out there that will quickly bring you up to speed. For example, a good place to start is Codecademy’s JavaScript lessons.

但是，如果JavaScript对您来说完全是个谜，请不要绝望。那里有许多免费资源，这些资源将Swift使您快速入门。例如， CodecademyJavaScript课程是一个不错的起点。

第一周：从React开始 (Week 1: Start With React)

Now that you know basic JavaScript syntax, and that you understand why JavaScript apps can appear so complex, let’s talk specifics. Where should you start?

现在您已经了解了JavaScript的基本语法，并且了解了JavaScript应用为何如此复杂的原因，现在让我们来谈谈细节。你应该从哪里开始？

I believe the answer is React.

我相信答案是React 。

React is a UI library created and open-sourced by Facebook. In other words, it takes care of that “data to HTML” step (the View Layer).

React是一个由Facebook创建并开源的UI库。换句话说，它负责“数据到HTML”的步骤(视图层)。

Now don’t get me wrong: I’m not telling you to pick React because it’s the best library out there (because that’s highly subjective), but because it’s pretty good.

现在不要误会我的意思：我不是要告诉您选择React，因为它是那里最好的库(因为它是非常主观的)，但是因为它很好。

React might not be the most popular library, but it’s pretty popular.

React可能不是最流行的库，但它很受欢迎。
React might not be the most lightweight library, but it’s pretty lightweight.

React可能不是最轻量级的库，但是它却相当轻量级。
React might not be the easiest to learn, but it’s pretty easy to learn.

React可能不是最容易学习的，但是很容易学习。
React might not be the most elegant library, but it’s pretty elegant.

React可能不是最优雅的库，但它相当优雅。

In other words, React might not be the best choice in every situation, but I believe it’s the safest. And believe me, “just when you’re starting out” is not the right time to take risks with your technological choices.

换句话说，React可能不是在每种情况下的最佳选择，但我相信它是最安全的 。并相信我，“正当您刚起步时”并不是选择技术选择冒险的正确时机。

React will also introduce you to some useful concepts like components, application state, and stateless functions that will prove useful no matter which framework or libraries you end up using during your career.

React还将向您介绍一些有用的概念，例如组件，应用程序状态和无状态函数，无论您在职业生涯中最终使用哪种框架或库，它们都将证明是有用的。

Finally, React has a large ecosystem of other packages and libraries that work well with it. And its sheer popularity means you’ll be able to find a lot of help on sites like Stack Overflow.

最后，React拥有一个庞大的生态系统，其中包括其他可以很好地与之兼容的软件包和库。而且它的绝对受欢迎程度意味着您可以在Stack Overflow之类的网站上找到很多帮助。

I personally recommend the React for Beginners course by Wes Bos. It’s how I learned React myself, and it’s just been completely overhauled with the latest React best practices.

我个人推荐Wes Bos的《 React for Beginners》课程。这是我自己学习React的方式，并且对最新的React最佳实践进行了彻底的改革。

您应该首先“正确学习JavaScript”吗？ (Should You “Learn JavaScript Properly” First?)

If you’re a very methodical learner, you might want to get a good grasp of the fundamentals of JavaScript before you do anything else.

如果您是一个非常有条理的学习者，则在执行其他任何操作之前，您可能希望充分了解JavaScript的基础知识。

But for others, this feels like learning to swim by studying human anatomy and fluid dynamics. Sure, they both play a huge role in swimming, but it’s more fun to just jump in the pool!

但是对于其他人来说，这就像通过学习人体解剖学和流体动力学来学习游泳一样。当然，它们在游泳中都起着重要作用，但是跳进游泳池会更有趣！

There’s no right or wrong answer here, it all depends on your learning style. The truth is, most basic React tutorials will probably use only a tiny subset of JavaScript anyway, so it’s perfectly fine to focus on only what you need now and leave the rest for later.

这里没有对与错的答案，这完全取决于您的学习风格。事实是，无论如何，大多数基本的React教程可能只会使用一小部分JavaScript，因此最好只关注您现在需要的内容，其余的留给以后使用。

This also applies to the JavaScript ecosystem at large. Don’t worry too much about understanding the ins and outs of things like Webpack or Babel for now. In fact React recently came out with its own little command-line utility that lets you create apps with no build configuration whatsoever.

这也适用于整个JavaScript生态系统。现在，不必太担心了解Webpack或Babel之类的来龙去脉。实际上，React最近推出了自己的小命令行实用程序，该实用程序使您无需创建任何构建配置即可创建应用程序。

第2周：您的第一个React项目 (Week 2: Your First React Project)

Let’s assume you’ve just completed a React course. If you’re like me, two things are probably true:

假设您刚刚完成了React课程。如果您像我，可能有两件事是对的：

You’ve already forgotten half of what you just learned.您已经忘记了所学内容的一半。
You can’t wait to put the half you do remember in practice.

您迫不及待地想将自己记得的那一半投入实践。

I believe the best way to learn a framework or a language is to just use it. And personal projects are the perfect occasion to try out new technologies.

我相信学习框架或语言的最好方法就是使用它。个人项目是尝试新技术的绝佳时机。

A personal project could be anything from a single page to a complex web app, but I feel like redesigning your own personal site can be a good middle ground. Plus, I know you’ve probably been putting it off for years!

个人项目可以是单个页面，也可以是复杂的Web应用程序，但是我觉得重新设计自己的个人网站可能是一个很好的中间立场。另外，我知道您可能已经推迟了多年！

Now I did say earlier that using single-page apps for static content was often overkill, but React actually has a secret weapon: Gatsby, a React static site generator that lets you “cheat” and get all the benefits of React without any of the downsides.

现在我确实说过，使用单页面应用程序获取静态内容通常是过大的，但是React实际上有一个秘密武器： Gatsby ，一个React静态站点生成器，可以让您“作弊”并获得React的所有好处，而无需任何其他操作。缺点。

Here’s why Gatsby is a great way to get started with React:

这就是盖茨比(Gatsby)是开始使用React的好方法的原因：

A pre-configured Webpack, meaning you get all the benefits without any of the headaches.预先配置的Webpack，这意味着您将获得所有好处，而不会遇到任何麻烦。
Automatic routing based on your directory structure.根据您的目录结构自动路由。
All HTML content is also generated server-side, so you get the best of both worlds.所有HTML内容也是在服务器端生成的，因此您可以两全其美。
Static content means no server and super-easy hosting on GitHub Pages.

静态内容意味着在GitHub Pages上没有服务器和超级容易的托管。

I used Gatsby for the State Of JavaScript site, and not having to worry about routing, build tool configuration, or server-side rendering saved me a ton of time.

我将Gatsby用于JavaScript的状态网站，而不必担心路由，构建工具配置或服务器端渲染，这节省了我很多时间。

第三周：掌握ES6 (Week 3: Mastering ES6)

In my own quest to learn React, I soon reached a point where I could get by copy-pasting code samples, but there was still a lot I didn’t understand.

在我自己学习React的追求中，我很快达到了可以通过复制粘贴代码示例获得的点，但是仍然有很多我不了解的地方。

Specifically, I was unfamiliar with all the new features introduced by ES6, such as:

具体来说，我不熟悉ES6引入的所有新功能，例如：

Arrow functions箭头功能
Object destructuring对象解构
Classes班级
The spread operator点差运算符

If you’re in the same boat, it might be time to take a couple days and learn ES6 properly. If you enjoyed the React for Beginners course, you might want to check out Wes’ excellent ES6 for Everybody videos.

如果您在同一条船上，则可能需要花费几天时间并正确学习ES6。如果您喜欢初学者的React课程，那么您可能想看看Wes出色的Everybody ES6视频。

Or if you prefer free resources, check out Nicolas Bevacqua’s book, Practical ES6.

或者，如果您更喜欢免费资源，请查看Nicolas Bevacqua的书《实用ES6》。

A good exercise for mastering ES6 is going through an older codebase (such as the one you just created in Week 2!) and converting your code to ES6's shorter, terser syntax whenever possible.

掌握ES6的一个好方法是遍历较旧的代码库(例如您在第2周刚刚创建的代码库)，并尽可能将代码转换为ES6的简短语法。

第四周：进行国家管理 (Week 4: Taking On State Management)

As this point you should be capable of building a simple React front-end backed by static content.

至此，您应该能够构建一个由静态内容支持的简单React前端。

But real web apps are not static: they need to get their data from somewhere, generally a database of some kind.

但是实际的Web应用程序并非一成不变的：它们需要从某个地方(通常是某种数据库)中获取数据。

Now you could just send data to your individual components, but that quickly gets messy. For example, what if two components need to display the same piece of data? Or need to talk to each other?

现在，您可以将数据发送到各个组件，但是很快就会变得混乱。例如，如果两个组件需要显示相同的数据怎么办？还是需要互相交谈？

This is where State Management comes in. Instead of storing your state (in other words, your data) bit by bit in each component, you store it in a single global store that then dispatches it to your React components:

这是进入状态管理的地方。您无需将状态(换句话说，数据)一点一点地存储在每个组件中，而是将其存储在单个全局存储中 ，然后将其分派给您的React组件：

In the React world, the most popular state management library is Redux. Redux not only helps centralize your data, but it also enforces some strict protocols for manipulating this data.

在React世界中，最受欢迎的状态管理库是Redux。 Redux不仅有助于集中您的数据，而且还实施了一些严格的协议来处理这些数据。

You can think of Redux as a bank: you can’t go to your local branch and manually modify your account total (“here, let me just add a couple extra zeroes!”). Instead, you fill out a deposit form, then give it to a bank teller authorized to perform the action.

您可以将Redux视为一家银行：您无法前往本地分行并手动修改帐户总数(“在这里，让我再添加几个零！”)。取而代之的是，您填写一张存款单，然后将其交给有权执行该操作的银行柜员。

Similarly, Redux also won’t let you modify your global state directly. Instead, you pass actions to reducers, special functions that perform the operation and return the new, updated state as a result.

同样，Redux也不允许您直接修改全局状态。相反，您将动作传递给reducers ，这些特殊函数执行操作并返回新的更新状态。

The result of all this extra work is a highly standardized and maintainable data flow throughout your app, and access to tools such as the Redux Devtools to help you visualize it:

所有这些额外工作的结果是整个应用程序中的高度标准化和可维护的数据流，并可以使用Redux Devtools等工具来帮助您可视化它：

Once again you can stay with our friend Wes and learn Redux with his Redux course, which is actually completely free!

再一次，您可以和我们的朋友Wes呆在一起，并通过他的Redux课程学习Redux，该课程实际上是完全免费的！

Or, you can check out Redux creator Dan Abramov’s video series on egghead.io, which is free as well.

或者，您也可以在egghead.io上查看Redux创作者Dan Abramov的视频系列，该视频系列也是免费的。

奖金周5：使用GraphQL构建API (Bonus Week 5: Building APIs With GraphQL)

So far we’ve pretty much only talked about the client, and that’s only half the equation. And even without going into the whole Node ecosystem, it’s important to address one key aspect of any web app: how data gets from the server to the client.

到目前为止，我们几乎只谈论客户，这只是等式的一半。即使不涉及整个Node生态系统，解决任何Web应用程序的一个关键方面也很重要：数据如何从服务器传输到客户端。

It won’t come as a surprise that this, too, is rapidly changing, with GraphQL (yet another Facebook open-source project) emerging as a serious alternative to the traditional REST APIs.

随着GraphQL (还有另一个Facebook开源项目)作为传统REST API的重要替代品出现，这也正在Swift改变也不足为奇。

Whereas a REST API exposes multiple REST routes that each give you access to a predefined dataset (say, /api/posts, /api/comments, etc.), GraphQL exposes a single endpoint that lets the client query for the data it needs.

REST API公开了多个REST路由，每个路由都使您可以访问预定义的数据集(例如/ api / posts，/ api / comments等)，而GraphQL公开了单个端点，该端点使客户端可以查询所需的数据 。

Think of it as making multiple trips to the butcher shop, bakery, and grocery store, versus giving someone a shopping list and sending them on their way to all three.

可以将其视为多次去肉店，面包店和杂货店，而不是给某人购物清单并将其发送到所有这三个地方。

This new strategy becomes especially significant when you need to query multiple data sources. Just like with our shopping list example, you can now get data back from all these sources with a single request.

当您需要查询多个数据源时，此新策略尤其重要。就像我们的购物清单示例一样，您现在只需一次请求就可以从所有这些来源获取数据。

GraphQL has been picking up steam over the past year or so, with many projects (such Gatsby, which we used in Week 2) planning on adopting it.

GraphQL在过去一年左右的时间里一直在加速发展，许多项目(例如我们在第2周使用的Gatsby )都计划采用它。

GraphQL itself is just a protocol, but its best implementation right now is probably the Apollo library, which works well with Redux. There is still a lack of instructional material around GraphQL and Apollo, but hopefully the Apollo documentation can help you get started.

GraphQL本身只是一个协议，但目前最好的实现可能是Apollo库，该库可与Redux配合使用。关于GraphQL和Apollo仍然缺少指导材料，但是希望Apollo文档可以帮助您入门。

超越React＆Co (Beyond React & Co)

I recommended you start with the React ecosystem because it’s a safe pick, but it’s by no means the only valid front-end stack. If you want to keep exploring, here are two recommendations:

我建议您从React生态系统开始，因为它是一个安全的选择，但绝不是唯一有效的前端堆栈。如果您想继续探索，这里有两个建议：

Vue (Vue)

Vue is a relatively new library but it’s growing at record speeds and has already been adopted by major companies, especially in China where it’s being used by the likes of Baidu and Alibaba (think Chinese Google and Chinese Amazon). And it’s also the official front-end layer of PHP framework Laravel.

Vue是一个相对较新的库，但是它以创纪录的速度增长，并且已经被主要公司采用，尤其是在中国，该市场已被百度和阿里巴巴等公司所使用(认为是中文Google和中文亚马逊)。它也是PHP框架Laravel的官方前端层。

Compared to React, some of its key selling points are:

与React相比，它的一些主要卖点是：

Officially-maintained routing and state management libraries.官方维护的路由和状态管理库。
Focus on performance.专注于性能。
Lower learning curve thanks to using HTML-based templates.使用基于HTML的模板，降低了学习曲线。
Less boilerplate code.更少的样板代码。

As it stands, the two main things that still give React an edge over Vue are the size of the React ecosystem, and React Native (more on this later). But I wouldn’t be surprised to see Vue catch up soon!

就目前而言，仍然使React胜过Vue的两个主要方面是React生态系统的大小和React Native (稍后会详细介绍)。但是看到Vue很快赶上我，我不会感到惊讶！

榆树 (Elm)

If Vue is the more approachable option, Elm is the more cutting-edge one. Elm is not just a framework, but an entire new language that compiles down to JavaScript.

如果说Vue是更平易近人的选择，那么Elm是更前沿的选择。 Elm不仅是一个框架，还是一种可以编译为JavaScript的全新语言。

This brings multiple advantages, such as improved performance, enforced semantic versioning, and no runtime exceptions.

这带来了多个优势，例如性能提高，强制语义版本控制以及没有运行时异常。

I haven’t tried Elm personally, but it’s been warmly recommended by friends and Elm users generally seem very happy with it (as shown by its 84% satisfaction rating in the State Of JavaScript survey).

我还没有亲自尝试过Elm，但是它得到了朋友的热烈推荐，而且Elm用户通常对此感到非常满意(在State Of JavaScript调查中，其满意度为84％ )。

下一步 (Next Steps)

By now you should have a pretty good grasp of the entire React front-end stack, and hopefully be reasonably productive with it.

到现在为止，您应该对整个React前端堆栈有了很好的了解，并希望可以合理地提高生产率。

That doesn’t mean you’re done though! This is only the beginning of your journey through the JavaScript ecosystem. Some of the other topics you’ll eventually run into include:

但这并不意味着您就完成了！这只是您通过JavaScript生态系统的旅程的开始。您最终会遇到的其他一些主题包括：

JavaScript on the server (Node, Express…)

服务器上JavaScript(Node， Express …)
JavaScript testing (Jest, Enzyme…)

JavaScript测试( Jest ，酶 ...)
Build tools (Webpack…)

构建工具( Webpack …)
Type systems (TypeScript, Flow…)

类型系统( TypeScript ， Flow …)
Dealing with CSS in your JavaScript apps (CSS Modules, Styled Components…)

在JavaScript应用程序中处理CSS( CSS模块，样式化组件 …)
JavaScript for mobile apps (React Native…)

移动应用程序JavaScript( React Native …)
JavaScript for desktop apps (Electron…)

桌面应用程序JavaScript( Electron …)

I can’t cover all this here but don’t despair! The first step is always the hardest, and guess what: you’ve just taken it by reading this study plan.

我无法在这里涵盖所有内容，但不要绝望！第一步始终是最难的，然后猜测一下：您已经通过阅读本学习计划来掌握了这一步骤。

And now that you understand how the various pieces of the ecosystem fit together, it’s just a matter of lining up what you want to learn next and knocking down a new technology each month.

现在您已经了解了生态系统的各个部分是如何组合在一起的，这只是将您想下一步学习的知识排成一列，然后每月取消一项新技术。

保持联系 (Keep In Touch)

Did you find this study plan helpful? Which area of JavaScript would you like me to write about next? Leave a comment or tweet to let me know!

您觉得本学习计划有帮助吗？接下来，您希望我在JavaScript的哪个方面写东西？发表评论或鸣叫，让我知道！

And if you want to know next time I publish a post, you can also sign up to the State Of JavaScript mailing list.

而且，如果您想知道下次我发布帖子，也可以注册到JavaScript状态邮件列表。

翻译自: https://www.freecodecamp.org/news/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1/