您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

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

时间:2019-12-06 10:26:42  来源:  作者:

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

 

这篇文章将会介绍过去几年 JAVAScript 开发方面的革命性发展。

最近几年,应用开发的方法论发生了翻天覆地的变化。随着微服务架构、云计算、单页应用和响应式设计的兴起和发展,在保证项目开发进度、用户体验和应用性能的同时,开发者需要做大量的决策。如今,对于前端开发和 JavaScript 更是如此。

为了帮助大家跟上节奏,我们先来简单了解下最近几年 JavaScript 开发方面的革命性发展。然后,我们会了解下前端开发社区所面临的一些挑战和机遇。

JavaScript 的文艺复兴

2009 年 NodeJS 横空出世时,它已经不仅仅是可以在命令行中运行或在 server 端运行的 JavaScript 了。NodeJS 围绕着迫切需要解决的软件开发方面的问题做出了革命性贡献:针对于前端开发者的成熟稳定的生态系统。正是由于 Node 和它默认的包管理器 npm 的存在,在应用开发和应用构建方面,JavaScript 兴起了一场文艺复兴。生态系统繁荣起来了,但是由于当时 Nodejs 还很年轻,所以经常会出问题。

让人欣慰的是,过去几年代码模式和代码规范达到了顶峰。2015 年,JavaScript 社区见证了 ES2015 的发布,生态系统再一次爆发式繁荣。下面的描述仅仅展示了 JavaScript 生态系统中最流行的一部分。

 

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

 

2017 年 JavaScript 生态系统一览

在 Kenzan,我们在多种平台上——从浏览器到机顶盒——使用 JavaScript 开发了十多年。我们目睹了前端生态系统的成长、发展,拥抱社区所付出的所有积极的努力。从 Grunt™ 到 Gulp,从 jQuery® 到 AngularJS,从复制脚本到使用 Bower 来管理前端依赖,这些我们都经历过了。

JavaScript 日渐成熟,我们的开发流程也是如此。在为客户端开发设计优雅、性能稳定、成熟的软件应用时,我们意识到健壮的本地开发工作流和技术栈是我们成功的基石。在开发过程中对可靠性、成熟性和高效性的追求让我们感受到整个开发环境不仅仅是一套工具的堆积,相反,好的开发环境有助于最终产品的成功。

挑战和机遇

伴随着如此多的选择、如此繁荣的生态系统,社区将何去何从?尽管有选择是件好事情,但是对于社区来说,确定从何开始、需要什么和为什么需要是有些困难的。随着用户期望的增长,应用程序应该如何运行和表现(加载速度更快,运行更顺畅,响应式,可以和原生应用媲美等等),在开发团队的生产力需求和该项目能够在预期市场上推出并取得成功之间求取平衡,变得越来越具有挑战性。针对于此,甚至有一个名为分析导致瘫痪(analysis paralysis)的术语:由于过于思考和不必要地使问题复杂化使得做决策变成了一个难题。

在工程开发周期,一味追求最新的工具和技术会制约开发速度,阻碍重大里程碑的实现,带来推迟上市和客户流失的风险。在一定程度上,一个团队需要明确自己的问题和需求,然后从可选的方案中做出决策,认清利弊,这样才可以更好地预测产品的长期可行性和可维护性。

在 Kenzan,我们的经验使我们能够定义和整合一些关键的概念和理论,以确保我们的决策有助于解决我们在开发前端软件时所预料到的挑战:

  • 利用 JavaScript 语言提供的最新功能来支持更优雅、一致和可维护的代码(比如import/export (modules)、class 和 async/await)。

  • 提供一个稳定成熟的、低到无需维护的(即,开发人员不需要安装或维护全局的开发依赖,且具有直观的工作流/任务流)本地开发环境。

  • 利用包管理器来管理前端构建依赖。

  • 部署优化过的、基于功能特性的 bundles(已经打包了htmlcss和JS),为用户提供更智能、更快速的分发和下载。结合 HTTP/2,可以获得小投入大产出的效果,可以大大提高用户体验和产品性能。

新的技术栈

在这篇系列里,我们的关注点是前端开发技术栈的三个部分。对于每个部分,我们将了解下我们认为能够为现代 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 应用程序),并不是一个可以应用到所有应用的一刀切方案。权衡能力、判断力和团队需求应该是决策的重要因素。

接下来要做的

到目前为止,我们回顾了过去几年 JavaScript 复兴如何导致了快速成熟的 JavaScript 生态系统的形成。我们制定了核心理念,帮助我们应对前端软件开发时遇到的挑战和机遇。我们概述了现代前端开发技术栈的三个主要组成部分。在本系列的剩余章节中,我们将会深入了解每个部分。我们希望,最终你将能够更好地评估你的前端应用程序所需要的基础架构。

我们也希望你能够以一套核心原则、范式和理念为指导,认识到我们所提供的工具的价值。这个系列无疑已经将我们自己的开发经验和开发流程都暴露到了众目睽睽之下,并且在提及前端工具的时候也巩固了我们的理念。希望你能够喜欢我们分享的这些东西,我们也随时欢迎你的任何想法、问题或反馈。



Tags:前端   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者:maomincoding 来源:前端历劫之路 前言说起文档,我们可能会第一时间会想起很多技术文档,比如Vue.js文档、React.js文档、TypeScript文档,它们都有相似的布局和样式。那么,作为...【详细内容】
2021-12-23  Tags: 前端  点击:(8)  评论:(0)  加入收藏
作者:damyxu,腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足...【详细内容】
2021-12-16  Tags: 前端  点击:(17)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  Tags: 前端  点击:(20)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  Tags: 前端  点击:(15)  评论:(0)  加入收藏
开头最近要研究有什么新奇的产品和项目,发现一个网站很有意思,可以纯前端一键随机生成头像,刚好他们的代码是开源,并且基于vue3,我想开源拿出来给大家分享。效果: 开始项目本身基...【详细内容】
2021-12-03  Tags: 前端  点击:(15)  评论:(0)  加入收藏
本文参考内容:京东凹凸实验室前端代码规范 :https://guide.aotu.io/docs/js/react.html vue风格指南:https://cn.vuejs.org/v2/style-guide/index.htm HTML规范<!-- HTML文件...【详细内容】
2021-12-02  Tags: 前端  点击:(20)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: 前端  点击:(19)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个由百度开源的低代码前端框架&mdash;&mdash;amis...【详细内容】
2021-11-05  Tags: 前端  点击:(68)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: 前端  点击:(34)  评论:(0)  加入收藏
很多新手司机倒车一直秉承着驾校遗留习惯的执念,就是要找个特别准的点打轮倒车。在直角倒车入库时,一般垂直距离需要大于1.5米,才能保证在点位准确的情况下,顺利完成倒车入位。...【详细内容】
2021-11-01  Tags: 前端  点击:(41)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的&emsp;&emsp;程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条