大家好,我是Echa。 最近有不少的粉丝们私信我,作为前端程序员学什么框架比较好?当前最流行的前端框架有哪些?各大企业前端岗位需要哪方面的人才?作为资深全栈工程师的小编,这条程序员道路上走来,每个时间段市场需求不一样,所需技能和前端框架都有所不同,但是只要满足老板们实际需求,能落地实现都是好框架,好技术。但是最近前端技术新框架,新技术更新太快,几乎每三个月就有新知识新技术出现,学无止境。但还是建议粉丝们选择了前端程序员这条路,坚持每天学习一个知识点,每周快速看完一本书,把基础打牢,我相信在程序员这条路上前途光明并且宽阔。今天小编给粉丝们盘点28个前端里程碑式的Github开源项目,咱们一起回顾前端程序员的过去,由于小编知识面有限,个人知识累计汇总,如果有哪些里程碑梳理不对的,请多多指点。 创作不易,喜欢的老铁们加个关注,点个赞,后面会持续更新干货,速速收藏,谢谢!你们的一个小小举动就是对小编的认可,更是创作的动力。全文大纲jQuery由JohnResig创建并于2006年发布,在Ajax框架与Prototype。js,Dojo或YUI之类的库的争夺中胜出。Node。js2009年5月由RyanDahl在JavaScriptV8引擎之上创建的Node。js将JavaScript带到了服务器端Express2009年6月,Express几乎与Node。js一样古老,但仍被认为是Node。js的标准Web框架。D32010年9月MikeBostok创建的经典数据可视化库在将近10年后仍然有用。Angular2010年1月来自Google的Angular通过提供可在浏览器中运行的完整框架,开始颠覆开发人员构建应用程序的方式ember。js2011年5月一个UI框架,该框架倾向于使用强约定以使Web开发人员更加高效。Bootstrap2011年7月Bootstrap由Twitter在2011年开源,是一组JavaScript和CSS元素,用于向网页添加常见的小部件。Webpack2012年3月Webpack是前端工具的关键部分,它能够从任何种类的资产生成JavaScript捆绑包。TypeScript2012年10月为JavaScript提供静态类型安全性的JavaScript的超集。electron2013年4月使用Web技术构建桌面应用程序的解决方案。React2013年5月React由Facebook开源,以创建动态,快速的UI。Vue。js2013年7月Vue。js在React之后仅两个月发布,采用了另一种方法来处理反应性。babel2014年9月最初称为6to5的编译器Babel帮助使JavaScript的ES6版本流行,这是React成功的关键部分。reactnative2015年1月利用ReactNative,开发人员可以利用对React框架的了解,为iOS或Android构建移动应用程序。VsCode2015年9月基于Electron的最流行的IDE,用于编码JavaScript和TypeScript应用程序。next。js2016年10月成为最受欢迎的框架,用于构建全栈JavaScript应用程序(在前端和后端均运行的应用程序)。puppeteer2017年5月一个Node。js库,用于控制无头Chrome浏览器执行诸如浏览器测试或Web抓取之类的操作。deno2018年5月Node。js发行9年后,RyanDahl再次采用新的服务器端JavaScript运行时。Sveltejs2018年4月前端领域风起云涌,框架层出不穷,前端三大马车React、Vue、Angular始终稳居前三甲。同时我们也注意到在众多前端框架中,由RichHarris(Ractive,Rollup和Bubble的作者)开发的Svelte有望成为一批黑马,在前端框架中脱颖而出。SolidJS框架由RyanCarniato创建并于2018年开源,但最近凭借其细粒度反应性的卖点获得了一些人气。snowpack2019年2月一种构建工具,可利用有关JavaScript模块的最新更改来提供出色的开发人员体验。Vite2019年Vite下一代前端工具。qiankun(乾坤)2019年8月是由蚂蚁金服推出的基于SingleSpa实现的前端微服务框架,本质上还是路由分发式的服务框架,不同于原本SingleSpa采用JSEntry加载子应用的方案,qiankun采用HTMLEntry方式进行了替代优化。Rome2020年2月Rome由SebMcKenzie创建,旨在提供一个依赖项来处理所有前端工具(皮棉,测试,构建。。。)。Alpine。js2020年6月Alpine创造者CalebPoizio称Alpine。js提供了疯狂的小尺寸功能,无需安装NPM。Corepack2021年9月发布,是一个处于实验阶段的工具,用于助你管理你本机packagemanager的版本。也就是用来管理包管理工具(npm、yarn、pnpm、cnpm),即包管理器的管理器。Pinia2021年11月24日正式成为vuejs的一员。SvelteKit2022年12月14日发布,包括服务器端渲染(SSR)、路由、针对JS和CSS的代码分割,以及针对不同Serverless平台生成不同代码的适配器等功能。jQuery 官方网址:https:jquery。com Github(57k):https:github。comjqueryjquery jQuery由JohnResig创建并于2006年发布,在Ajax框架与Prototype。js,Dojo或YUI之类的库的争夺中胜出。 成为几乎所有网页中都包含的事实上的标准库,即使在今天。 一个源于广阔的插件生态系统的精美软件。 提供统一的API来处理浏览器不一致的工作非常出色。 如下图: Node。js 官方网址:https:nodejs。org Github(92。3k):https:github。comnodejsnode Node。js2009年5月由RyanDahl在JavaScriptV8引擎之上创建的Node。js将JavaScript带到了服务器端。 强大的API,命令行工具,IoT设备和所有现代Web开发工具。 如下图: Express 官方网址:https:expressjs。com Github(59。4k):https:github。comexpressjsexpress 2009年6月Express几乎与Node。js一样古老,但仍被认为是Node。js的标准Web框架。由于其极简的方法,因此拥有深厚的中间件生态系统。 更现代的替代方法包括Nest,Fastify或Next。js。 如下图: D3 官方网址:https:d3js。org Github(104k):https:github。comd3d3 d3js2010年9月MikeBostok创建的经典数据可视化库在将近10年后仍然有用。许多图表库都建立在其强大的原语之上。 d3js是一个JavaScript库,用于使用web标准可视化数据。D3帮助您使用SVG、画布和HTML将数据带入生活。D3将强大的可视化和交互技术与数据驱动的DOM操作方法相结合,为您提供现代浏览器的全部功能,并为您的数据设计正确的可视化界面。 如下图: Angular 官方网址:https:angularjs。org Github(59。3k):https:github。comangularangular。js 2010年1月。来自Google的Angular通过提供可在浏览器中运行的完整框架,开始颠覆开发人员构建应用程序的方式。 它没有增强服务器生成的DOM,而是将页面的控制移至客户端,从而进入了单页面应用程序时代。 Angular2在2014年作为一个单独的项目发布。 AngularJS(Angular。JS)是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供Web应用的架构,无需进行手工DOM操作。AngularJS很小,只有60K,兼容主流浏览器,与jQuery配合良好。 如下图: ember。js 官方网址:https:emberjs。com Github(22。4k):https:github。comemberjsember。js 2011年5月一个UI框架,该框架倾向于使用强约定以使Web开发人员更加高效。 在JavaScript的现代化过程中发挥了重要作用。 Ember。js是一个开源的JavaScript客户端框架,用于开发Web应用程序并使用MVC(模型视图控制器)架构模式。在Ember。js中,路由用作模型,句柄模板作为视图,控制器处理模型中的数据。 如下图: Bootstrap 官方网址:https:getbootstrap。com Github(161k):https:github。comtwbsbootstrap 2011年7月Bootstrap由Twitter在2011年开源,是一组JavaScript和CSS元素,用于向网页添加常见的小部件。 得益于整洁的文档,一致的开发人员体验和灵巧设计的响应式设计功能,它闪闪发光。 当开发人员在智能手机上浏览网页时,已帮助开发人员使网页适合移动设备浏览。 使用Bootstrap构建快速、响应式布局的网站。强大、可扩展、功能丰富的前端开发工具包。它提供的功能包括:基于Sass进行编译和定制、内置的网格系统和组件、强大的JavaScript插件等。 如下图: Webpack 官方网址:https:webpack。js。org Github(62。2k):https:github。comwebpackwebpack 2012年3月Webpack是前端工具的关键部分,它能够从任何种类的资产生成JavaScript捆绑包。 第五版主要版本将于2020年仍在CreateReactApp或Next。js等项目中使用,即将推出。 包裹和汇总是最受欢迎的两种。 webpack是代码编译工具,有入口、出口、loader和插件。webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部构建一个依赖图(dependencygraph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个bundle 如下图: TypeScript 官方网址:https:www。typescriptlang。org Github(87。1k):https:github。commicrosoftTypeScript 2012年10月为JavaScript提供静态类型安全性的JavaScript的超集。 赢得了转译者与竞争对手Flow的战斗,几乎成为前端和后端开发的标准。 DefinitelyTyped项目为7000多个软件包提供了其他类型! 如下图: electron 官方网址:https:electronjs。org Github(105k):https:github。comelectronelectron 2013年4月使用Web技术构建桌面应用程序的解决方案。 由流行的桌面应用程序使用,例如VSCode,Slack。。。 Electron是一个使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。它基于Node。js和Chromium,被Atom编辑器和许多其他应用程序使用。 Electron兼容Mac、Windows和Linux,可以构建出三个平台的应用程序。 如下图: React 官方网址:https:reactjs。org Github(200k):https:github。comfacebookreact 2013年5月React由Facebook开源,以创建动态,快速的UI。 不是像Angular这样的完整框架,因为它仅处理视图层。 它的组件方法和JSX语法变得非常流行,并启发了许多项目。 React特点1。声明式设计React采用声明范式,可以轻松描述应用。2。高效React通过对DOM的模拟,最大限度地减少与DOM的交互。3。灵活React可以与已知的库或框架很好地配合。4。JSXJSX是JavaScript语法的扩展。React开发不一定使用JSX,但我们建议使用它。5。组件通过React构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。6。单向响应的数据流React实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。 如下图: Vue。js 官方网址:http:v2。vuejs。org Github(201k):https:github。comvuejsvue 2013年7月Vue。js在React之后仅两个月发布,采用了另一种方法来处理反应性。 通常被认为对初学者更友好。 没有像React与Facebook或Angular与Google这样的大型公司的支持,而是由EvanYou创建的。 强大的社区,尤其是在中国。 版本3提供了巨大的改进,包括更好的TypeScript支持和CompositionAPI。 Vue。js(读音vju,类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue。js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 如下图: babel 官方网址:https:babel。dev Github(41。7k):https:github。combabelbabel 2014年9月最初称为6to5的编译器Babel帮助使JavaScript的ES6版本流行,这是React成功的关键部分。 让开发人员使用JavaScript的最新功能编写代码,而不必担心浏览器的支持。 作为许多项目的依赖项包括在内。 Babel是编写下一代JavaScript的编译器。 ES2015andbeyond。Babel默认使用一组ES2015语法转换器,允许你使用新的语法,无需等待浏览器支持。 JSXandReact。Babel内置支持JSX,与babelsublime包一起结合,将语法高亮功能带到一个新的高度。 Pluggable。Babel支持用户插件。允许你插入强大的Babel转换层。 主要特性支持ES2015支持JSX和React支持用户插件 如下图: reactnative 官方网址:https:reactnative。dev Github(107k):https:github。comfacebookreactnative 2015年1月利用ReactNative,开发人员可以利用对React框架的了解,为iOS或Android构建移动应用程序。 ReactNative将原生开发的最佳部分与React相结合,致力于成为构建用户界面的顶尖JavaScript框架。 酌量添加,多少随意。随时都可以把ReactNative无缝集成到你已有的Android或iOS项目,当然也可以完全从头焕然一新地重写。 如下图: VsCode 官方网址:https:code。visualstudio。com Github(141k):https:github。commicrosoftvscode 2015年9月基于Electron的最流行的IDE,用于编码JavaScript和TypeScript应用程序。 GitHub上的Atom于2012年推出,它是该概念的先驱:使用Web技术构建的代码编辑器,可通过安装插件进行扩展。 凭借其TypeScript支持而发光这两个项目均来自Microsoft。 VSCode(全称:VisualStudioCode)是一款由微软开发且跨平台的免费源代码编辑器,可选择Windows、Linux、macOS的不同系统对应安装。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能,并且内置了命令行工具和Git版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置,也可以通过内置的扩展程序商店安装扩展以拓展软件功能,VSCode使用MonacoEditor作为其底层的代码编辑器。 VSCode默认支持多种编程语言,包括JavaScript、TypeScript、CSS和HTML;也可以通过下载扩展支持Python、CC、Java和Go在内的其他语言,对于部分语言可以使用IntelliSense。它也支持调试Node。js程序,和GitHub的Atom一样,VSCode也基于Electron框架构建。它还支持同时打开多个目录,并将信息保存在工作区中以便复用,允许用户更改文件的代码页、换行符和编程语言等。 如下图: next。js 官方网址:https:nextjs。org Github(98。1k):https:github。comvercelnext。js 2016年10月成为最受欢迎的框架,用于构建全栈JavaScript应用程序(在前端和后端均运行的应用程序)。 在前端使用React,并提供服务器端渲染功能,以提供最佳的用户体验。 Next。js的一些特性:支持两种预渲染方式,静态生成SSG和服务器端渲染SSR。基于页面的路由系统,路由零配置自动代码拆分。优化页面加载速度。支持静态导出,可将应用导出为静态网站。内置CSSinJS库styledjsx方案成熟,可用于生产环境,世界许多公司都在使用应用部署简单,拥有专属部署环境Vercel,也可以部署在其他环境 如下图: puppeteer 官方网址:https:pptr。dev Github(81。3k):https:github。compuppeteerpuppeteer 2017年5月一个Node。js库,用于控制无头Chrome浏览器执行诸如浏览器测试或Web抓取之类的操作。 Puppeteer是NPM库,它提供了NodeJS高级API来控制Chrome。Puppeteer默认以无头(无界面)方式运行,但也可以配置为运行有界面的Chrome。 Puppeteer提供了一系列API,通过ChromeDevToolsProtocol协议控制ChromiumChrome浏览器的行为 如下图: deno 官方网址:https:deno。land Github(87k):https:github。comdenolanddeno 2018年5月Node。js发行9年后,RyanDahl再次采用新的服务器端JavaScript运行时。旨在解决与Node。js相关的几个问题。 没有集中的程序包管理器,可以从任何URL加载任何JavaScript依赖项。 2020年最受欢迎的项目之一。 Deno是一个JavaScriptTypeScript的运行时,默认使用安全环境执行代码,有着卓越的开发体验。 Deno含有以下功能亮点:默认安全。外部代码没有文件系统、网络、环境的访问权限,除非显式开启。支持开箱即用的TypeScript的环境。只分发一个独立的可执行文件(deno)。有着内建的工具箱,比如一个依赖信息查看器(denoinfo)和一个代码格式化工具(denofmt)。有一组经过审计的标准模块,保证能在Deno上工作。脚本代码能被打包为一个单独的JavaScript文件。 Deno是一个跨平台的运行时,即基于GoogleV8引擎的运行时环境,该运行时环境是使用Rust语言开发的,并使用Tokio库来构建事件循环系统。Deno建立在V8、Rust和Tokio的基础上,它的架构如下: 如下图: Sveltejs 官方网址:https:svelte。dev Github(64。2k):https:github。comsveltejssvelte Sveltejs2018年4月前端领域风起云涌,框架层出不穷,前端三大马车React、Vue、Angular始终稳居前三甲。同时我们也注意到在众多前端框架中,由RichHarris(Ractive,Rollup和Bubble的作者)开发的Svelte有望成为一批黑马,在前端框架中脱颖而出。 Svelte是一种全新的构建用户界面的方法。传统框架React和Vue在浏览器中需要做大量的工作,而Svelte将这些工走放到构建应用程序的编译阶段来处理。 与使用虚拟DOM差异对比不同。Svelte编写的代码在应用程序的状态更改时就能像外科手术一样更新DOM。 减少代码量 重复利用你所掌握的编程语言HTML、CSS和JavaScript,构建的组件无需依赖模板文件。 无虚拟DOM Svelte将你的代码编译成体积小、不依赖框架的普通JS代码,让你的应用程序无论启动开始运行都变得迅速。 真正的反应能力 无需复杂的状态管理库,Svelte为JavaScript自身添加反应能力。 如下图: SolidJS 官方网址:https:svelte。dev Github(24。3k):https:github。comsolidjssolid Solid是一个由公共贡献者团队支持的开源项目。Solid在MITlicense下分发。是一个由公共贡献者团队支持的开源项目。Solid库和社区由核心团队和贡献者创作。 SolidJs一个用于构建用户界面,简单高效、性能卓越的JavaScript库。性能始终在UI速度和内存利用率基准测试中名列前茅强大可组合的响应式原语与JSX的灵活性相结合。实用合理且量身定制的API使开发变得有趣而简单。生产力人体工程化设计和熟悉程度使得构建简单或复杂的东西变得轻而易举。 如下图: snowpack 官方网址:https:www。snowpack。dev Github(19。7k):https:github。comsnowpackjssnowpack 2019年2月snowpack一种构建工具,可利用有关JavaScript模块的最新更改来提供出色的开发人员体验。 snowpack核心特征:开发模式启动仅需50ms甚至更少。热更新速度非常快。构建时可以结合任何bundler,比如webpack。内置支持TS、JSX、CSSModules等。支持自定义构建脚本以及三方插件。 如下图: Vite 官方网址:http:vitejs。dev Github(50。8k):https:github。comvitejsvite 2020年Vite下一代前端工具 Vite是Vue的作者尤雨溪开发的Web开发构建工具,它是一个基于浏览器原生ES模块导入的开发服务器,在开发环境下,利用浏览器去解析import,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随启随用。同时不仅对Vue文件提供了支持,还支持热更新,而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。即时服务器启动快如闪电的HMR丰富的功能优化的构建通用插件接口全类型API 这将是2021年的成功项目吗?还将有待时间验证! Vite在法语中意为快速的,它是一种新型的前端构建工具,能够明显提升前端开发体验,主要由两部分构成:一个开发服务器,基于原生ES模块提供了丰富的内建功能,比如速度极快的热更新HMR一套构建指令,使用Rollup打包代码,并且是预配置的,可以输出用于生产环境的高度优化过的静态资源。 Vite意在提供开箱即用的配置,同时它的插件API和JavaScriptAPI带来了高度的可扩展性,并有完整的类型支持。 如下图: qiankun 官方网址:https:qiankun。umijs。orgzh Github(13。8k):https:github。comumijsqiankun qiankun是一个基于singlespa的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 qiankun孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台,在经过一批线上应用的充分检验及打磨后,我们将其微前端内核抽取出来并开源,希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统,同时也希望通过社区的帮助将qiankun打磨的更加成熟完善。 目前qiankun已在蚂蚁内部服务了超过2000线上应用,在易用性及完备性上,绝对是值得信赖的。 如下图: Rome 官方网址:https:docs。rome。tools Github(21。9k):https:github。comrometools 2020年2月Rome由SebMcKenzie创建,旨在提供一个依赖项来处理所有前端工具(皮棉,测试,构建。。。)。 这个冒似还不是非常出名,这将是2020年的成功项目吗?还将有待时间验证! 如下图: Alpine。js 官方网址:https:alpinejs。dev Github(22。5k):https:github。comalpinejsalpine 2020年6月Alpine创造者CalebPoizio称Alpine。js提供了疯狂的小尺寸功能,无需安装NPM。 Alpine。js通过很低的成本提供了与Vue或React这类大型框架相近的响应式和声明式特性。 你可以继续操作DOM,并在需要的时候使用Alpine。js。 可以理解为JavaScript版本的Tailwind。 如下图: Corepack Github(1。2k):https:github。comnodejscorepack Node。js默认提供npm包管理器,Corepack为您提供Yarn和pnpm,而无需安装它们。 提出问题 Node。js除了本身自带的npm包管理器,还有很有多的包管理器,比如Yarn和pnpm等等,不过上面三个是最最流行的方案。 参与不同项目,尤其是为开源项目贡献代码,会遇到两个问题:代码都拉下来了结果发现还要安装对应的包管理器,等下载下来贡献代码的热情都没了。项目是pnpm的项目却使用了npm来安装。项目使用pnpm的版本不低于v7。1。5开发,自己的版本却是v6。32。22。Node。jsCorepack就是为了解决上面问题的。 如下图: Pinia 官方网址:https:pinia。vuejs。org Github(9。5k):https:github。comvuejspiniapinia是由vue团队开发的,适用于vue2和vue3的状态管理库。与vue2和vue3配套的状态管理库为vuex3和vuex4,pinia被誉为vuex5。pinia没有命名空间模块;pinia无需动态添加(底层通过getCurrentInstance获取当前vue实例进行关联);pinia是平面结构(利于解构),没有嵌套,可以任意交叉组合。 如下图: SvelteKit 官方网址:https:kit。svelte。dev Github(12。2k):https:github。comsveltejskit SvelteKit经过两年的开发,SvelteKit1。0已正式发布,现在可用于生产环境。 SvelteKit是一个用Svelte构建Web应用程序的框架,满足不同规模的应用开发,提供一个非常灵活和良好体验的基于文件系统的路由架构。Svelte是一个UI组件框架,因其出色的性能和易用性而受到开发者喜爱。 SvelteKit包括服务器端渲染(SSR)、路由、针对JS和CSS的代码分割,以及针对不同Serverless平台生成不同代码的适配器等功能。 与目前部分主流的Web框架不同,SvelteKit具有以下特点: 与传统的多页应用程序或MPA框架不同,它在初始服务器渲染的页面加载后默认为客户端导航。这可以实现更快的页面转换、页面之间持续存在的状态(例如侧边栏的滚动位置)以及更少的数据使用。它还避免在每次页面加载时重新运行第三方脚本,如分析脚本。 与传统的服务器框架不同,它允许开发者使用一种语言,而不是拥有两个紧密耦合的应用程序(一个用于生成HTML,一个用于处理客户端交互)。由于SvelteKit在JavaScript运行的任何地方运行,开发者可以将对应的应用程序部署为传统的节点服务器,或使用serverless功能包括边缘。 与静态站点生成器不同,开发者可以使用个性化或动态数据构建应用程序,而不会在页面加载后从浏览器中获取数据,从而降低性能、改变布局。 详情查看发布公告和迁移指南。 团队表示,SvelteKit1。0是一个开始。虽然它已准备好用于生产环境,但对他们来说这只是刚刚开始。目前计划的路线图包括内置i18n支持、增量静态重新生成、对部署区域和运行时的精细控制、图像优化以及许多其他改进。 如下图: