2019年要学习的前5个前端开发主题

1. TypeScript

TypeScript是2018年最令人惊讶的增长故事之一.npm调查发现，有46％的npm用户使用TypeScript。它现在不仅是使用Angular的默认语言，而且是React中常用的选项，也是Vue越来越常用的选项。

已经宣布Vue 3是用TypeScript编写的，而Node.js的创建者正在开发一个类似于 TypeScript 的新节点项目。

现在Babel支持TypeScript，您甚至不需要更改构建系统。

所以，如果你是一个坚持（像我一样，说实话），2019绝对是学习TypeScript的一年。

它有动力，有越来越多的工作需要它，而且很明显就像JavaScript生态系统的发展方式一样。

资源和文章

• 在5分钟内学习TypeScript。TypeScript的快速入门。
• TypeScript Deep Dive。一本完整的书，可在线免费获取。
• TalkScript。对于那些喜欢播客的人来说，这对于Sitepen的开发者来说是一个很好的TypeScript，包括我最喜欢的播客之一（以及JSParty的联合小组成员），Nick Nisi。

免费课程

• 想学习TypeScript？这是我们免费的22部分课程。这是关于课程的帖子，其中包括所涵盖主题的概述。该课程本身就在Scrimba上。

付费课程

• 了解TypeScript。Udemy上TypeScript最受欢迎的课程，由我最喜欢的教练之一MaximilianSchwarzmüller。我自己刚开始学习这门课程，但到目前为止我对此非常满意，而且我从来没有从马克斯那里得到过糟糕的课程。

2.反应

对于你们中的许多人来说，React是个老消息，但是由于两个原因，我再次把它列在榜单上。

首先 - 它仍然非常肯定赢得了“金钱”和“势头”游戏。React的工作和合约演出比前端世界的任何其他东西都多，所以如果你还没有把它拿起来，你肯定应该。

第二 - 它不断变化，一些新功能（特别是钩子，还有像上下文api这样的东西）承诺完全改变我们编写React代码的方式，所以即使你已经使用了React，你也应该对它们进行修改。

资源和文章

• 反应手册。在Freecodecamp博客上对React进行了80/20的介绍，旨在为您提供快速通道，让您在React中获得高效率。
• 钩子一瞥。对于那些在React中已经很舒服的人的钩子文档; 学习钩子可能是最好的地方。
• 全栈反应。博客和时事通讯都有很深入的React文章
• React播客。如果你是播客，Michael Chan AKA Chantastic的这个很棒。

免费课程

• 开始学习反应。我在React上发现的最全面的免费课程。非常初学者，但我没有看到任何高级课程免费。

付费课程

• 现代React与Redux [2019年更新]。我在开始使用React时采用的React课程，更新了新内容以处理最新和最强大的功能。
• React 16.6 - 完整指南（包括React Router＆Redux）。MaximilianSchwarzmüller的反应课程。我没有接受它，但我从未见过Max我不喜欢的课程。

Vue

Vue.js是我目前最喜欢的框架，大多数开发人员都表示他们希望在2018年和2017年的JavaScript状态调查中学习这个框架，而且只会越来越好。

我已经写了一篇关于如何学习Vue 的完整帖子，但是我会快速链接那些帖子中的一些资源给那些感兴趣的人。

免费资源

• Vue指南。Vue文档非常出色，是一种很好的学习方式。我一次又一次地回到本指南的内容。
• Vuejsdevelopers.com的博客和每周时事通讯都突出了深入的文章。
• Vue Feed，网站，时事通讯和推文提要，突出显示策划的Vue新闻，教程，插件等。

免费课程

• 逐步学习Vue 2（Laracasts）。一个很棒的入门课程。我认为它的排序工作不如我下面介绍的第一个付费课程那么好，但另一方面它是免费的。
• 介绍Vue.JS（VueMastery）。这是一个比上面更短的课程，我认为视频不是很好，但VueMastery能够为您提供的不仅仅是一个视频。您还可以获得文本课程，下载所使用的任何资源，并参与基于CodePen的练习。

付费课程

• Vue JS 2 - 完整指南（包括Vue Router和Vuex）。这是我开始的课程。这很棒，我强烈推荐它。

4. CSS网格

对于您可能尝试解决的几乎所有受众，CSS Grid已经达到了浏览器的临界质量，并且是以前布局技术的一个惊人的进步。

如果您仍然使用来自Bootstrap或Foundation等UI工具包的重量级网格框架，那么您就会落伍。CSS Grid以更少的标记和复杂性为您提供更多功能。

唯一的障碍是学习。这篇文章的重点是什么。因此，如果您仍然坚持，那么在学习CSS Grid的那一年就做好。

免费资源

• CSS网格初学者指南| 免费守则营。一个伟大的，简单的，非常可视的CSS Grid逐步指南。
• 网格完整指南| CSS技巧 CSS网格中最全面的在线资源之一，显示所有网格相关的属性，它们的潜在价值，以及所有这些值所做的视觉演示。
• CSS网格布局的最佳实践| Smashing Magazine CSS Grid已经存在并且使用时间足够长，我们开始看到一些最佳实践凝固。雷切尔·安德鲁通过他们自己的经验（她是CSS Grid的最重要的倡导者和教师之一，并参与了规范）以及对使用网格的开发人员的调查来了解其中的一组。
• 关于CSS Grid的另一个有趣事实的集合| CSS技巧关于如何使用CSS Grid，一些速记属性以及处理显式和隐式行和列的方法的一些经验教训。充满了基于代码笔的示例，因此您可以深入挖掘并修补您的内容的代码。
• 网格示例。一组策划的CSS Grid示例。
• CSS Grid Garden。一款出色的基于游戏的学习工具。

免费课程

• CSS Grid | Wes Bos。伟大的介绍课程，由Wes Bos教授，由Firefox赞助，所以完全免费给你或我。

付费课程

• CSS Essentials：CSS Grid入门。这是一个较短的介绍课程，在“付费”方面是一种特殊情况，因为它是通过Skillshare（包括成员，你可以通过这个referal链接获得2个月免费）。这是由Rachel Andrew提供的，如上所述，他是CSS Grid最重要的专家之一。
• 终极CSS网格课程：从初级到高级。我能找到的最全面的课程专注于CSS Grid

5. GraphQL

GraphQL是最重要的事情之一，我认为2019年可能是真正开始成为主流的一年。

它当然受到了很多关注，特别是在反应生态系统中，但是npm的数据显示，随着使用量的快速增长，嗡嗡声也随之而来。

我不确定有多少工作需要GraphQL，所以这可能不是一个直接赚钱的人，但从动机和动力的角度来看，现在学习这将使你处于一个非常有利的未来。

免费资源

• GraphQL.org文档。这里的官方文档似乎相当不错，虽然我是新手（这是我今年的名单）所以我没有尝试过那么多。
• GraphQL之路。免费书籍（虽然确实需要电子邮件注册），以及付费升级选项，为您提供一堆入门模板和相关内容。
• GraphQL每周。GraphQL相关文章的每周简报综述

免费课程

• 如何GraphQL。免费和开源，视频和书面教程的组合。

付费课程

取决于您的前端框架：

• 带有React的GraphQL：完整的开发人员指南
• 带有Angular和Apollo的GraphQL - 全栈指南
• 带有GraphQL的Full-Stack Vue - 终极指南

独立于框架（但专注于后端）

• 现代GraphQL训练营

这是我在网络上看到对前端框架总结的很好的文章。在这里分享给需要的人。

总结

资源很多，自己还是要脚踏实地去看一本书，读一些源码，多思考，多总结。