当前位置: 首页 > 科技观察

现代前端开发栈

时间:2023-03-18 18:44:35 科技观察

本文将介绍过去几年JavaScript开发的革命性发展。近年来,应用程序开发的方法发生了巨大变化。随着微服务架构、云计算、单页应用、响应式设计的兴起和发展,开发者需要在保证项目开发进度、用户体验和应用性能的同时做出大量决策。如今,对于前端开发和JavaScript来说更是如此。为了帮助您快速上手,让我们简要了解一下过去几年JavaScript开发的革命性发展。然后我们看看前端开发社区面临的一些挑战和机遇。JavaScript的复兴当NodeJS在2009年问世时,可以在命令行或服务器端运行的不再只是JavaScript。NodeJS围绕软件开发中一个紧迫的问题做出了革命性的贡献:为前端开发者提供一个成熟稳定的生态系统。多亏了Node及其默认包管理器npm,JavaScript在应用程序开发和应用程序构建方面获得了复兴。生态系统蓬勃发展,但由于当时Nodejs还很年轻,所以经常出错。好消息是,编码模式和代码规则在过去几年达到了顶峰。2015年,JavaScript社区见证了ES2015的发布,生态再次爆发。以下描述仅代表JavaScript生态系统中最流行的部分。在Kenzan,十多年来,我们一直在多个平台上使用JavaScript进行开发——从浏览器到机顶盒。我们见证了前端生态系统的成长、发展,并接受了社区所付出的所有积极努力。从Grunt?到Gulp,从jQuery?到AngularJS,从复制脚本到使用Bower管理前端依赖项,我们一直在其中。JavaScript已经成熟,我们的开发过程也是如此。在为客户开发和设计优雅、稳定和成熟的软件应用程序时,我们意识到强大的本地开发工作流程和技术堆栈是我们成功的基石。开发过程中对可靠性、成熟度和效率的追求,让我们觉得整个开发环境不仅仅是工具的集合,相反,一个好的开发环境有助于最终产品的成功。挑战与机遇有了如此多的选择和如此繁荣的生态系统,社区将何去何从?虽然有选择是件好事,但社区可能有点难以确定从哪里开始、需要什么以及为什么。随着用户期望的增长,在开发团队的生产力需求和项目在预期市场中的执行能力之间,应用程序应该如何运行和表现(加载速度更快、更流畅、响应更快、与本机应用程序相媲美等)启动和成功之间的平衡变得越来越具有挑战性。这种情况甚至有一个术语叫做分析瘫痪:由于过度思考和不必要地使问题复杂化,决策成为一个难题。在工程开发周期中,盲目追求最新的工具和技术会限制开发速度,阻碍重大里程碑的实现,并带来上市时间延迟和客户流失的风险。在一定程度上,一个团队需要明确自己的问题和需求,然后从备选方案中做出决策,认清利弊,这样才能更好地预测产品的长期可行性和可维护性。在Kenzan,我们的经验使我们能够定义和整合一些关键概念和理论,以确保我们的决策有助于解决我们在开发前端软件时预期的挑战:利用JavaScript语言提供的最新功能来支持更优雅、一致的和可维护的代码(例如导入/导出(模块)、类和异步/等待)。提供稳定、成熟、低维护(即开发者无需安装或维护全局开发依赖,具有直观的工作流/任务流)的本地开发环境。使用包管理器来管理前端构建依赖项。部署优化的、基于功能的捆绑包(已打包HTML、CSS和JS),为用户提供更智能、更快速的分发和下载。结合HTTP/2,可以达到小投入大产出的效果,可以大大提升用户体验和产品性能。新技术栈在这个系列中,我们主要关注前端开发技术栈的三个部分。对于每个部分,我们将研究我们认为为现代JavaScript应用程序开发提供可靠性、生产力和可维护性的最佳平衡的工具。包管理器:Yarn如何以可靠且一致可重现的方式管理和安装外部供应商或内部包的挑战对开发人员的工作流程至关重要。同时,维护CI/CD(持续集成/持续交付)也很关键。但是您选择哪个包管理器来评估上述所有功能?npm?jspm?凉亭?加速网络?或者您只是从Internet上复制和粘贴并提交版本控制?我们的第一篇文章将简要介绍Yarn以及它如何专注于速度和提供稳定的构建管道。Yarn保证本次安装的依赖版本与下次安装的依赖版本完全一致。需要保证整个过程的流畅、可靠、分布式和可扩展性,因为任何停顿都会影响开发者编程或部署应用的节奏。Yarn旨在通过提供快速可靠的npmcli替代方案来解决这些问题并管理依赖关系,但继续使用npm注册表来安装公共节点包。而且,Yarn是由Facebook维护的,他们在开发这个工具时有计划。应用程序打包:webpack?我们构建的前端应用程序通常由HTML、CSS和JS以及图像和字体等二进制格式组成,维护起来可能很困难,甚至更具挑战性。那么,如何将代码库变成优化的、可部署的项目呢?咕噜咕噜?咕噜声?浏览器?卷起?系统?这些事情中的每一个都有利有弊,但我们需要确保我们的选择符合我们上面讨论的原则。Webpack是专门设计用于将Web应用程序打包并构建为优化的载体以交付给用户的构建工具。Web应用程序可能包含HTML、CSS、JS、图像、字体等。如果我们想使用最新的语言特性,例如import/export和class,让我们的代码更干净,让工具打包代码,使其针对两者进行优化浏览器和用户,那么Webpack可以做到这一点,而且还可以做得更多!语言规范:TypeScript自盘古诞生以来,编写干净的代码一直是一个巨大的挑战。JavaScript是一种动态的弱类型语言,它为开发人员提供了一种应用各种设计模式和规范的媒介。现在,有了最新的JavaScript规范,我们可以看到一个更坚实的编程社区模型。对导入/导出和类等功能的支持为JavaScript应用程序开发带来了根本的范式转变,并确保代码更易于编写、阅读和维护。然而,编程语言仍然存在缺陷,而且随着应用程序的增长,应用程序本身往往开始受到影响:源代码的可维护性和完整性以及系统的可预测性(运行时的应用程序状态)。TypeScript是JavaScript的超集,它添加了类型安全、访问修饰符(私有和公共)以及下一版JavaScript的新功能。强类型语言的安全性有助于在浏览器中实现代码之前通过编译器对其进行验证,促进和强制执行架构设计模式,这有助于缩短开发人员的开发周期,同时也是自文档化的。这是特别有益的,因为随着应用程序的增长和代码库中代码的变化,TypeScript有助于维护回归检测,同时增加代码库的清晰度和信心。此外,IDE集成是一个巨大的胜利。如何选择前端框架?您可能还注意到,到目前为止,我们都避免推荐前端框架或库,例如Angular或React。好吧,现在是我们谈谈的时候了。不同的应用程序需要根据开发团队经验、规模、团队偏好以及对响应式编程或函数式编程等概念的熟悉程度等因素选择不同的开发方式。在Kenzan,我们坚信无论是Angular2还是React,任何兼容ES2015/TypeScript的库或框架的评估和选择,都应该根据当时开发场景的具体特点。如果我们重新审视早期的项目,我们会看到一个新的技术栈,它在前端框架的选择上提供了极大的灵活性。在前端框架的选择上提供了极大灵活性的现代开发堆栈在上层“视图”层下面有一个公共节点,我们可以通过包含一些关键原则的工具来构建应用程序。在Kenzan,我们相信这种技术堆栈为用户需求和开发人员体验提供了选择。这个结果可以使任何团队和任何应用程序受益,无论大小。请记住,此处提供的工具适用于特定类型的项目开发(前端UI应用程序),并不是可以适用于所有应用程序的一刀切的解决方案。权衡、判断和团队需求应该是决策制定的重要因素。下一步是什么到目前为止,我们已经回顾了过去几年JavaScript的复兴如何导致了快速成熟的JavaScript生态系统的形成。我们开发了核心概念,帮助我们应对前端软件开发的挑战和机遇。我们概述了现代前端开发堆栈的三个主要组件。在本系列的其余章节中,我们将更深入地了解每一部分。最后,我们希望您能够更好地评估您的前端应用程序所需的基础设施。我们还希望您将以一套核心原则、范例和理念为指导,这些原则、范例和理念将认可我们提供的工具的价值。这个系列无疑将我们自己的开发经验和开发过程暴露在了大众面前,也巩固了我们在前端工具方面的理念。我们希望您喜欢我们分享的内容,我们随时欢迎您提出任何想法、问题或反馈。在我们的博客系列的下一篇中,我们将使用Yarn来仔细研究我们的前端包管理的第一个核心组件。Kenzan是一家软件工程和全方位服务咨询公司,提供由数字化转型驱动的定制端到端解决方案。Kenzan结合领导力和技术专长,与合作伙伴和客户合作,利用尖端技术提供从构思到开发再到交付的完整解决方案。Kenzan是一家技术驱动型公司,专门从事应用程序和平台开发、架构咨询和数字化转型。