JavaScript 生态系统初学者指南

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

JavaScript 的生态系统已经发展壮大。简单地将 jQuery 插入您的网站并淡入或淡出内容的日子早已一去不复返了。

进入今天的 JavaScript 世界是一项艰巨的任务,有很多可能性。这也意味着这是一个充满机遇的世界。用 Jeff Atwood ( http://blog.codinghorror.com/the-principle-of-least-power/ ) 的话来说:


任何 可以 用 JavaScript 编写的应用程序,最终 都会 用 JavaScript 编写。

JavaScript 的不同方面

现在是在 JavaScript 生态系统中寻找利基市场的最佳时机。以下是您可以深入研究的方面的列表,本文将更深入地探讨这些方面:

  1. 前端开发
  2. 命令行界面 (CLI) 应用程序
  3. 桌面 (GUI) 应用程序
  4. 移动应用
  5. 后端开发
  6. 以上的任意组合

前端开发

通过变得高度交互并将传统的服务器端任务卸载到前端,开发面向用户的网站部分变得越来越复杂。在我们的网络浏览器中运行谷歌地图、Spotify 或 YouTube 之类的东西曾经是不可思议的,但现在我们有了各种各样的工具集来制作复杂的网络应用程序。

前端 Web 开发在过去几年呈指数级增长,我将在这里简要介绍一下。

前端 Web 开发基础

很长一段时间以来,JavaScript 一直只用于 DOM 操作,并附带一些奇怪的动画。从一开始,浏览器功能之间就存在很大差异。

jQuery 通过抽象上述浏览器功能和简化 DOM 操作开始了一场革命,同时还为表格带来了很多实用程序。

现在,使用纯 JavaScript 操作 DOM 非常容易,并且有一个 非常好的备忘单就是为了这个目的

通过框架提高效率

随着网站的复杂性不断增加,网站逐渐发展为 Web 应用程序,需要解决 Web 应用程序的复杂问题(状态处理、数据绑定、视图呈现等)。许多框架迎接了这一挑战,而当今最流行的两个框架可能是 AngularJS React

很明显, Angular React 获得了如此大的吸引力,因为前者得到了 Google 的支持,而后者得到了 Facebook 的支持。虽然 Angular 包含整个 MVC 范式,但 React 更精简一些,主要被认为是 MVC 的 V。

新的框架一直在出现,时间只会告诉我们哪一个将占据主导地位(当然,如果这样的事情发生的话)。

什么是名字?

您很有可能不再使用 JavaScript ,但是任何可以转换为 JavaScript 的语言,例如:

除了向语言添加新功能之外,您很有可能通过使用 ES6 原生模块 CommonJS (主要用于 Node.js 开发 RequireJS (异步模块加载主要用于网站)来模块化您的应用程序。

模块化应用程序的转译和连接是通过构建工具( Gulp Grunt ,稍后详细提到),使用转译工具(如 Babel Traceur )和模块构建器(如 Browserify Webpack )完成的。您很可能会在 JavaScript 开发的各个方面转换和构建您的模块。

有一大堆工具没有提到。留给读者去探索它们,一个好的起点是 前端开发的令人敬畏的列表

命令行界面 (CLI) 应用程序

Gulp 运行一个 gulpfile

许多开发人员在日常开发中主要依赖 CLI——无论是代码检查、任务运行还是启动服务器,纯粹从命令行执行任务的效率都有一定的优势。

CLI 应用程序是使用 Node.js (或 io.js Node.js 的一个分支,即将被合并回 Node.js )编写的。 Node.js 是一个开源的跨平台运行时环境,它允许您通过 Chrome 的 JavaScript 运行时在任何地方执行您的 JavaScript 代码(不仅仅是在浏览器中,像以前一样)。本质上,一旦有人安装了 Node.js 并拿走了你的 CLI 应用程序(包),它就可以被执行。

包管理器

如果您必须从头开始编写每个应用程序的每个功能,那将非常糟糕。这就是 npm 介入的地方 。npm Node.js 模块的包管理器,使用包非常简单——安装并需要它们。

您编写的 CLI 应用程序也可以打包为 Node.js 模块并通过 npm 分发。这是将您的 CLI 应用程序(或 Node.js 模块)提供给其他人的首选方式。

许多流行的库和工具都有更容易使用的 CLI 应用程序,例如 Gulp Grunt 。还有一个 很棒的 Node.js CLI 应用程序列表

构建工具

构建工具(和任务运行器)得到特别提及,因为无论您正在构建哪种类型的应用程序,它们都是您将使用的最基本的工具。

现在最流行的构建工具是 Grunt Gulp ,它们使将代码转换为可用代码的过程变得更加容易。一个典型的场景是:

  • 将您的 JavaScript 从 EcmaScript 6 转换为 EcmaScript 5
  • 将 SCSS 编译为 CSS
  • 缩小并连接生成的文件
  • 将所有内容复制到分发文件夹

桌面 (GUI) 应用程序

松弛

应用程序大多转移到 Web 或移动设备上。尽管如此,桌面应用程序仍能提供 Web 应用程序几乎无法提供的沉浸感。

使用 JavaScript 编写桌面应用程序的最大优势是对您正在编写代码的平台进行抽象。您的应用程序是跨平台的,您使用的模块简化了典型桌面功能(例如托盘图标、通知、全局键盘快捷键等)的使用。

拥有良好的项目结构可以让您在 Web 和桌面应用程序之间重用大量代码。这反过来导致更容易维护。

可用工具

有两个流行的项目允许您通过 HTML/JS 编写桌面应用程序:

  • NW.js — 以前称为 node-webkit,它是编写本机桌面应用程序的最流行方式
  • Electron—— 由 GitHub 开发的一个较新的竞争者,它已经在同一领域获得了巨大的吸引力

重要应用

上面提到的两个项目都用于很多流行的桌面应用程序中。

使用 NW.js Electron 完成的著名应用程序包括 Slack、Game Dev Tycoon、GitHub Atom、WhatsApp Desktop、Facebook Messenger Desktop、Popcorn Time 和 Microsoft Visual Studio Code。有大量使用 NW.js 制作的 项目 和大量使用 Electron 制作的 项目 (都包含用于学习或贡献目的的存储库链接)。

移动应用

使用 React Native 制作的 Facebook 移动应用程序

面对如此繁荣的市场,开发移动应用程序是有意义的。 JavaScript 生态系统为开发跨平台(iOS、Android 和 Windows Phone)应用程序提供了一些解决方案。提供跨平台移动应用程序的最受欢迎的项目包括:

Ionic Phonegap 在您的 HTML/JS 周围使用浏览器包装器,并提供对平台其他不可用功能(相机、各种传感器等)的访问。 Ionic 正在利用 Angular 的强大功能来提供一个经过良好测试的稳定平台。

Facebook 的 React Native 有一种有趣的方法,它们将您编写的应用程序渲染到更高级别的特定于平台的组件,以实现应用程序的真正原生外观。这意味着您必须为每个平台编写一个单独的视图层,但您将以一致的方式进行。 用 Facebook 软件工程师 Tom Occhino 的话来说 ,他们正在尝试“学习一次,随处编写”的方法,这完全符合像这样一个多样化生态系统的精神。

重要应用

虽然 React Native 目前还不支持 Android,但 Facebook 已经在他们自己的应用程序(Facebook Groups 和 Facebook Ads Manager)中使用它是件好事。 Android 支持应该会在不到两个月的时间内到达。

Ionic Phonegap 编写的移动应用程序包括流行的应用程序,例如 Sworkit、Mallzee、Chefsteps、Snowbuddy 和 Rormix。有大量 使用 Ionic 构建的应用程序 使用 Phonegap 构建的应用程序

后端开发

Node.js 也是 JavaScript 后端开发的主要驱动力。

Node.js 的主要优点是它的事件驱动、非阻塞 I/O 模型。也就是说 ——Node.js 非常擅长处理具有许多并发请求的数据密集型实时应用程序。 Node.js 通过在单个线程上处理所有这些并发请求来实现这一点,从而大大减少了所需的系统资源并实现了极大的可扩展性。

这些优势的典型示例是聊天应用程序。它们需要从客户端到聊天室的不间断连接( 实时、非阻塞 )和新消息通知( 事件驱动 ),您应该在其中支持大量客户端和聊天室( 数据密集型 )。

您还可以拥有一个相当不错的用 JavaScript 编写的 Web 服务器。这里的主要收获是它的主要目的不应该是 CPU 密集型任务或与关系数据库的连接,而是大量的连接。

与后端开发相关的最受欢迎的模块是:

  • express — 用于 Node.js 的简单 Web 框架
  • socket.io — 用于构建实时 Web 应用程序的模块
  • forever — 确保给定 Node.js 脚本连续运行的模块

这些模块如何组合在一起

首先,您需要一个 Web 服务器,它可以处理各种路由上的典型 HTTP 请求,例如 http://localhost:3000/about 。这就是 快递 进来的地方。

为了与服务器建立不间断的连接, socket.io 与建立连接的服务器端和客户端组件一起使用。

由于 express 在一个线程上运行,我们必须确保异常不会停止进程(以及服务器)。为此,我们使用 forever。

要了解有关这些模块的更多信息,请访问它们各自的网站,其中包含许多教程( socket.io 甚至让您将聊天服务器和客户端构建为 hello world 应用程序)。

以上的任何组合

Meteor JavaScript 应用平台

很容易想象所有这些方面是如何结合在一起的。

最流行的组合它们的方法之一是拥有一个像 MEAN Meteor 这样的全栈 JavaScript 框架。

MEAN 结合了 express、Angular、Node.js MongoDB ,提供了一个后端和前端都用 JavaScript 编写的 Web 平台。
Meteor 是一个使用 JavaScript 提供全栈 Web 和移动应用程序开发的平台。

另一个例子可能是一个 JavaScript 压缩器,您可以为其编写 Node.js 的基本模块,然后在 CLI 应用程序、桌面应用程序、移动应用程序和 Web 应用程序(当然由 express 提供服务 )中使用该模块——所有这些都在JavaScript

可能性是无限的,我们可能只是触及表面。这个生态系统正在随着新技术、框架、模块甚至语言规范的不断定义而爆炸式增长。这真的很令人兴奋。

我应该从哪里开始?

这取决于您现在对 JavaScript 的熟悉程度。

如果您只是刚开始,有很多资源可以让您从 JavaScript(或编程,就此而言)开始,例如 Codecademy Nodeschool Codeschool ,它们都是互动且有趣的。

如果您掌握了一些 jQuery 知识并且一直在涉足纯 JavaScript,请知道没有任何框架或库可以取代对核心 JavaScript 的良好理解。从真正深入挖掘 JavaScript 的本质开始。为此,我不能推荐 Kyle Simpson 的 You don't know JS series enough。它是开源的,可在 GitHub 上获取。开放源代码的性质使您很容易为您在书中发现的错误做出贡献。如果您喜欢以支持作者的额外好处阅读,这些书也可以作为硬拷贝提供。

凭借强大的 JavaScript 核心,温习 Node.js 是明智之举。如您所见,它是几乎所有方面的基础。 Node.js 提倡异步编程,需要一段时间才能习惯,但解决了阻塞UI的问题。上述学习资源( Nodeschool Codeschool )也可以在这里使用。

之后,沿着看起来最有趣的路径走。很有可能,您会陷入更深的兔子洞,发现新事物并更加享受这种体验。