现代前端开发技术栈,看了都说好( 二 )


新的技术栈
在这篇系列里 , 我们的关注点是前端开发技术栈的三个部分 。对于每个部分 , 我们将了解下我们认为能够为现代 JavaScript 应用程序开发的可靠性、高效性和可维护性提供最佳平衡的工具 。
包管理器:Yarn
如何以可靠和持续重现的方式管理和安装外部 vendor 或内部包的挑战 , 对于开发者的工作流来说是至关重要的 。同时 , 维护 CI/CD(持续集成/持续交付)也是至关重要的 。但是 , 你选择哪个包管理器来评估上述所有的功能呢?npm?jspm?Bower?CDN?或者说你只是从网上复制粘贴 , 然后提交到版本控制器上?
我们的第一篇文章将会简单地了解下 Yarn , 了解下它是如何专注于速度和提供稳定的构建流程的 。Yarn 保证这次安装的依赖的版本和下次安装的依赖的版本是完全一致的 。保证整个过程平滑、可靠、分布式和规模化是必需的 , 因为任何停顿都会影响到开发者编程或部署应用的节奏 。Yarn 旨在通过为 npm cli 提供快速可靠的替代方案来解决这些问题、管理依赖 , 但是依然继续使用 npm registry 来安装公共 Node 包 。而且 , Yarn 是由 Facebook 来维护的 , 他们在开发这个工具的时候是有所规划的 。
应用打包:webpack
我们构建的前端应用程序 , 通常是由 HTML、CSS 和 JS 以及图像和字体等二进制格式组成的 , 可能难以维护 , 甚至会更具挑战性 。那么 , 如何将一个代码库转换为一个优化过的、可部署的项目?Gulp?Grunt?Browerify?Rollup?Systemjs?这些东西都各有优缺点 , 但是我们需要确保我们的选择能够实现我们上述讨论过的那些原则 。
Webpack 是一个专门将 web 应用打包构建为一个优化过的载体传递给用户而打造的一款构建工具 , web 应用可能会包含 HTML、CSS、JS、图片、字体等等 。如果我们想使用最新的语言特性 , 比如 import/export 和 class , 来使我们的代码更整洁 , 让工具来打包代码 , 使其对浏览器和用户都进行优化 , 那么 Webpack 可以做到这些 , 而且还可以做的更多!
语言规范:TypeScript
编写整洁的代码从盘古开天辟地时起就是一个巨大的挑战 。JavaScript 是一种动态、弱类型语言 , 为开发人员提供了应用于各种设计模式和规范的媒介 。现在 , 通过最新的 JavaScript 规范 , 我们可以看到编程社区更加坚实的模式 。支持使用 import/export 和 class 等功能给 JavaScript 应用程序开发带来了一个基本的范式转变 , 并可以确保代码更容易编写、阅读和维护 。但是 , 编程语言中仍然存在着缺陷 , 通常随着应用程序的增长应用程序本身也开始受到影响:源代码的可维护性和完整性以及系统的可预测性(运行时的应用程序状态) 。
TypeScript 是 JavaScript 的一个超集 , 增加了类型安全、访问修饰符(私有的和公共的)和下一版 JavaScript 的新特性 。强类型语言的安全性有助于代码在应用到浏览器中之前通过编译器来验证代码 , 促进并强化架构设计模式 , 这有助于缩短开发者的开发周期 , 同时也可以进行自我记录 。这是特别有利的 , 因为随着应用程序的增长、代码在代码库中发生变化 , TypeScript 有助于保持回归检测 , 同时增加代码库的清晰度和置信度 。同时 , IDE 集成也是一个巨大的胜利 。
如何选择前端框架?
你可能也发现了 , 目前为止我们都在回避推荐前端框架或库 , 比如 Angular 或 React 。那么 , 现在我们该聊聊了 。
不同的应用需要基于开发团队经验、规模、团队偏好以及对于响应式编程或函数式编程等概念的熟悉程度等因素来选择不同的开发方式 。在 Kenzan , 我们坚信 , 无论是 Angular2 还是 React , 评估和选择任何与 ES2015/TypeScript 兼容的库或框架 , 都应该基于当时的开发场景下特定的特征来定夺 。
如果我们重新审视早期的项目 , 我们就会看到一套新的在前端框架选择方面提供了极大灵活性的技术栈 。
 

现代前端开发技术栈,看了都说好

文章插图
 
在前端框架选择方面提供了极大灵活性的现代开发技术栈
在上面的“视图”层之下有一个共同的节点 , 我们可以通过包含一些关键原则的工具来进行构建应用 。在 Kenzan , 我们认为这个技术栈给用户需求和开发者体验都提供了一个选择空间 。这样的结果可以使任何团队、任何应用(大型应用或者小型应用)都受益匪浅 。请牢记 , 这里介绍的工具是用于特定类型的项目开发的(前端 UI 应用程序) , 并不是一个可以应用到所有应用的一刀切方案 。权衡能力、判断力和团队需求应该是决策的重要因素 。


推荐阅读