【译】如何学习JavaScript框架

JavaScript Web 开发社区发展迅速,新的框架层出不穷。如今有许多人正在学习 ReactAngularVueSvelte。他他们不仅像过去一样是计算机科学专业的毕业生,而且还有来自训练营和其他背景的自学成才的程序员。

我觉得近年来,通过组织和公司提供的各种机会,进入这个领域的门槛大大降低了,这是令人惊奇的。我之所以在这里说西方世界,是因为在其他国家往往很难发现对这些话题的教育不足。能够在这个领域工作是一种巨大的特权,因此我希望人们珍惜这个特权,并尽一切可能在全球范围内使其他人也能分享这种特权。

以下文章应该为您提供如何学习 JavaScript 框架的指导。它应该帮助您摆脱分析瘫痪,并将您内心的模式从消费转变为生产。

REACT、ANGULAR、VUE、SVELTE?

我只能猜想对于初学者来说,JavaScript 生态系统必定是一片混乱。这是个每个人都追逐最新创新的狂野之地。这只是因为每个人都在关注 Hacker NewsTwitter Reddit上的最新消息。但没有人谈论真实世界中的情况,即公司不使用最新技术的地方。80% 的公司必须坚持多年前做出的选择。这是因为他们的主要目标是增加业务价值,而不是每年更换底层技术栈。关键在于您能为公司、自由职业客户或您自己的产品提供的价值,而不是您所携带的技术栈。

每天都有人问起这些主要框架中的哪一个应该学习和使用。是 AngularVue 还是 React?我也曾试图在 Quora 等平台上回答一些这样的问题,但跟不上。它们每天都在涌现。这就是我写这篇文章的原因。

过去,我曾写过关于我从 Angular 转向 React 的经验,因为我一直觉得给人们第一手经验比技术比较文章更重要。了解在使用这些框架中的人的动机以及为什么他们在某个时候从一个框架转向另一个框架是很好的。它使人们能够接触到真实世界的经验,而不仅仅是技术方面的比较。但最终,这篇文章也沦为了与其他比较文章一样的一堆废文,并且只是增加了更多的重量。

摆脱选择综合症

无论是技术比较还是第一手经验,许多文章都让人们陷入选择综合症。其中许多文章没有立竿见影的效果,因为它们最终没有提供明确可行的建议。他们只是为消费者友好的读者提供了更多的输入。他们的读者并没有推动他们去生产,而是继续消费,从一篇文章逛到另一篇文章。他们永远不会开始学习事物本身。它们消费,但最终不会得到产出。

毕竟,如果你想学习新东西,你必须从消费转变为生产。无论你选择 VueAngularSvelte 还是 React,都无关紧要,因为它们都解决了同样的问题。它们使您能够构建Web应用程序。就是这样。不管你精通哪一种,学习另一种都不难。

如果你一直陷入选择综合症,那么明年还会有另一个框架要学习。所以关键是要动手实践。去生产。别再消费了。

JavaScript 是基础,其他都不重要…

毕竟,JavaScript 是任何 JS 框架的基础。如果你已经积累了足够的 JavaScript 知识,你就不必太担心你现在正在学习和使用的框架。JavaScript 应该为你提供使用任何这些框架的所有工具。所以你的最终目标应该是掌握 JavaScript,而不是仅仅对你来说可能只有一年时间相关的框架。

掌握 JavaScript 的核心原则。无论你是采用自下而上(JavaScript -> 框架)还是自上而下(框架 -> JavaScript)的学习方法,都取决于你个人的学习方式。重要的是你理解 JavaScript,可以轻松地从一个框架转移到另一个框架。这不仅适用于 ReactVueSvelteAngular,还适用于诸如 ReduxMobX 等库。当你从一种技术转移到另一种技术时,你需要理解底层机制。所以花些时间学习这些核心原则:

  • 函数在 JavaScript 中是一等公民
  • bind()、apply() 和 call()
  • 作用域和闭包
  • this
  • 对象(例如 Object.keys(myObj).map(key => myMap[key]))
  • 数组(例如 [1, 2].reduce((sum, summand) => sum + summand, 0))
  • 原型继承 -> ES6 类
  • 回调函数和 Promises
  • 事件循环
  • 事件冒泡
  • 正则表达式
  • 错误处理(promise.then(…).catch(…), try { } catch(e) { })
  • JavaScript ES6 及以上
  • 变量提升,记忆化
  • 声明式 vs 命令式编程
  • 函数式 vs 面向对象编程

你不需要在这些方面成为一个专家。但至少要掌握这些原则,以了解 JavaScript 的工作方式,并且不依赖于繁重的框架/库来使用它。例如,人们往往过早地引入诸如 Lodash 这样的实用库。但大多数基本情况都可以使用原生JavaScript完成。

并非每个人都有精力学习任何东西。这需要花费时间。如果你经历上受到限制,最重要的建议是关注就业市场。你的自由职业客户可能不在乎你是用 VueReactSvelte 还是 Angular 构建了他们华丽的 Web 应用程序,但就业市场显示出明确的趋势,公司的发展方向。密切关注这一点,以学习一些能够保持相关性的东西。有大量的开发者调查报告,尤其是在年底时,你会在 Google TrendsStackOverflow 上找到更多这些趋势。

马上开始

我坚信学生应该缩小他们的学习范围,以便更轻松地学习更多东西。因此,购买 10 门 Udemy 课程是没有帮助的。这是一个永无止境的消费故事,你实际上永远不会通过自己编程来动手实践。再次,有许多平台上的故事,人们都在谈论同样的问题:他们已经观看了所有视频课程,但没有一个能够让他们入门编程。

相反,如果你有很多时间用来消费学习材料,试着增加其中的多样性。通过一个视频课程,再辅以一本书、一个播客和一个带有编码播放环境的真实动手课程,来刺激所有感官。这就是我学习机器学习的方式。如果你一边进行个人项目的编码,你应该能够保持前进中的挑战和你技能的平衡。最终你将会进入一种状态。

如果你觉得自己属于那些消费过多的人群,那么对你来说最重要的一步是开始创作。我相信你现在已经消费了大量的学习材料,所以坐下来,开始用你选择的框架编写一些代码。如果遇到困难,使用你喜欢的搜索引擎,在 StackOverflow 上提问,或加入一个 Discord 社区,从他人那里寻求帮助。

学习新东西从来都不容易。虽然有些人在视频中轻松地在一个小时内构建一个东西,而你却要花费很长时间和大量的精力来实现同样的事情。但这是正常的。99% 的视频课程都是为了展示最佳方式并隐藏了努力。这正是观看它们如此愉快的原因。人类天生会避免紧张的事情。然而,冒出一身冷汗并花费很长时间来实现这件事实际上会帮助你学习这个主题。所以,坐下来,开始编写代码。
选择一个项目

那么,你如何开始编写 VueAngularSvelte React 的代码呢?选择一个激励你的项目。选择你喜欢的爱好,并为其构建一个应用程序。它不需要是一个完整的应用程序。如果你喜欢数学,可以实现一个计算器。从小处着手。

如果你仍然陷入选择综合症,那么在所有框架中实现相同的计算器。将项目保持小型,这样你就不会花太多时间来比较主要框架。例如,在计算器的情况下,只实现加法、减法、乘法和除法功能。最后,选择感觉最舒适的框架并使用它。

如果你想不出一个项目的想法,看看其他开发者正在构建什么来学习 SvelteReactAngular Vue。他们中的大多数都会在社交媒体上分享他们的努力。让他们激励你,尝试做类似的事情或者只是尝试复制他们。

如果你没有爱好(什么?)或者没有人激励你(不可能!),第三种获取灵感的方法是克隆你最喜欢的网络应用。你不应该实现下一个 Facebook,但是一个简化的 Trello克隆怎么样?最重要的建议是:保持项目的规模可控,并选择一个激励你的主题,以帮助你度过项目的困难部分。

2016 年,我决定从 Angular 转向 React。那时我每天都在使用 SoundCloud 听我最喜欢的艺术家的音乐(现在也是如此),因此我想在React中实现一个 SoundCloud 应用程序。那时有一个名为 sound-redux SoundCloud 克隆,如果遇到问题,我可以查看其源代码。我花了三个月的时间从零开始实现 favesound-redux。尽管我犯了一个错误,学习了 React Redux,这增加了学习曲线,但我还是设法完成了。这并不意味着你应该自己实现这样一个大型项目。我处于一个很好的位置,可以将许多底层 JavaScript 知识从 Angular 转移到 React。它展示了如果你选择了一些你喜欢的东西并坚持一段时间,一个项目会变成什么样子。

那么在你建立了第一个项目之后会发生什么?在 RedditHacker NewsTwitter 或你的 Discord 社区与社区分享它。获取反馈。成为这些平台上的生产者 - 不仅仅是一个消费者。充分参与社区将帮助你获得大量的反馈,这有助于你成长。带着这些反馈,改进你的项目,并开始另一个项目,以更多地了解如何使用你的框架。在每个项目中重复学习过程,专注于关于一般编码、JavaScript 或你的框架的新东西。每个项目都带来了自己的挑战和学习机会。

最后,学习任何框架都归结为这个简单的过程:

  • (1)缩小你的学习材料范围,并补充所有感官的项目
  • (2)消费学习材料,并开始在一边进行生产
  • (3)选择一个让你保持激励的项目
  • (4)冒出一身冷汗,花几个小时在你的项目上调试
  • (5)使用搜索引擎、人工智能、Discord 或 StackOverflow 寻求帮助
  • (6)完成你的项目,并从他人那里收集反馈
  • (7)如果陷入分析瘫痪,那么在另一个框架中实现相同的项目
  • 重复(3)至(6)

我希望本文能够鼓励你开始学习 ReactSvelteVueAngular 或任何其他框架。选择哪一个并不重要,但你必须从消费转向生产。现在就开始编码吧。在此过程中,更深入地了解 JavaScript 的核心原则。我相信如果你现在开始学习其中之一,今年你就能在就业市场上使用其中之一。