理念

HALO 是一种 SPA(Single Page Applciation) 页面,其意味着加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的 Web 应用程序。考虑到实现时,HALO 存在着以下潜在的问题。

  • 整个项目非常大,依赖的包多
  • 前端文件太大可能会超过预期,影响加载速度和初始化速度
  • 逻辑复杂,交互部分的实现较为棘手
  • 需要维护大量的数据来保持页面正确的更新

为了实现业务,同时避免上述问题的出现,我们对 HALO 进行了严谨的架构设计,具体参考系统架构部署架构

前端采用 React 框架,是一款基于基于 JavaScript 的用户界面库。采用 React 库不仅仅是因为它是最流行的前端框架之一,而是它提出的 Virtual DOM 概念可以把复杂的界面组件化,每个组件只需要维护自身视图,根据接收的数据相应改变界面和变换交互。以 Virtual DOM 的方式拆分页面组件并组合成 SPA 可以大幅度减少代码量,同时确保数据流传输正确无误。除此之外,React利用它的生命周期对 DOM 更新进行了优化,相同数据的情况下不会进行 DOM 更新,当数据发生变化时,只对有变化的部分进行 DOM 更新,保证大量的数据显示和更新的流畅性得到一定的优化和保障。

就如同在浏览器中一样,现在我们也可以在服务器上运行 JavaScript,从前端跨越到后端,这样巨大的反差让人难以想象,但 NodeJS 可以做到这一切。Node.js 的主要思路是:使用非阻塞的,事件驱动的 I/O 操作来保持在处理跨平台 (across distributed devices) 数据密集型实时应用时的轻巧高效。这听起来有点绕口。Node 真正的亮点在于建设高性能,高扩展性的互联网应用——因为它能够处理庞大的并且高吞吐量的并发连接。这也是我们后端采用 Node 的重要原因。

它的工作原理是相当有趣的。传统的网络服务技术,是每个新增一个连接(请求)便生成一个新的线程,这个新的线程会占用系统内存,最终会占掉所有的可用内存。而 Node.js 仅仅只运行在一个单线程中,使用非阻塞的异步 I/O 调用,所有连接都由该线程处理,在 libuv 的加分下,可以允许其支持数万并发连接(全部挂在该线程的事件循环中)。

对技术选型的严禁筛选以外,我们还对项目进行了拆分:HALO 负责打包管理和通用逻辑代码、USkin 为页面组件的集合、dashboard/admin 等项目是每个可视化单独应用,应用之间互不干扰,具体文件及代码结构可以参考前端开发指南