50个好用的前端框架，千万收好以留备用!

那时向你所推荐现阶段较为炙手可热番茄靠前的50款后端辅助工具，期望在捷伊两年里，对你略有协助。

Parcel是这款全速零实用性WEB应用领域装箱工具，加速、基本上零实用性是它最小的特征，照相狸尾豆。较之webpack，Parcel对初学者而言惟有并非两个较好的优先选择。

这款webpack的应用程序，它可以很方便快捷的实用性H55N关键性css( critical CSS ),余下的css部份则会触发器读取，虽然它不采用镰叶应用程序(headless browser)呈现出文本，因而加速小巧。

，比如Typescript，JSX和Flow。

webpack.jakoblind.no/

这款建模的新浪网辅助工具中文网站，你只须要优先选择后端工程项目利用到控制技术和有关实用性，就能全屏帮你聚合webpack.config.js，省却你许多的麻烦事。

JSUI 是两个建模展开分类、构筑和管理工作 JavaScript 项目的辅助工具。无论是后端应用领域却是后端应用领域，也无论采用的是何种架构，如果工程项目有两个 package.json ，方可展开管理工作。

pwa.cafe/

这款钢架构筑工具，方便快捷建立如前所述Preact，React，Vue和Svelte的工程项目，照相及全力支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！

VuePress 由两部份组成：第一部份是两个极简静态中文网站聚合器，它包含由 Vue 驱动的主题系统和应用程序 API，另两个部份是为书写控制技术文档而优化的默认主题，它的诞生初衷是为了全力支持 Vue 及其子工程项目的文档需求。

每两个由 VuePress 聚合的页面都带有预渲染好的 HTML，也因而具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被读取，Vue 将接管这些静态文本，并将其转换成两个完整的单页应用领域（SPA），其他的页面则会只在用户浏览到的时候才按需读取。

通过功能丰富的WEB组件加速帮你构筑功能齐全的PWA中文网站工程项目，基本上零实用性，完成了构筑、测试和加速部署。

两个不太常规的CSS架构，如果你期望你的中文网站有手绘风格感觉，优先选择它准没错。

是 Google 开源的两个游戏架构，旨在允许游戏作者将游戏规则从本质上转化为一系列简单的函数，这些函数用于描述当两个指定动作发生时游戏的状态变化，架构负责处理表述性状态传递。 无需再手动编写任何网络或后端代码。 功能特性：

状态管理工作：自动跨应用程序、服务器和存储器无缝管理工作游戏状态；

加速成型：在渲染游戏之前调试界面以模拟更改。

多人游戏：所有连接到同一游戏的应用程序都实时同步，无需刷新。

私密状态：私密信息可从客户端隐藏。

日志：游戏日志可查看任意时间的信息。

UI 辅助工具包：常用于游戏中的 React 组件。

Stimulus是两个适度的后端架构，它并不试图接管整个后端的方方面面，不关心如何渲染HTML，相反用来增强HTML的有关行为。如果你的团队规模较小，但又想要和那些采用较为费力的主流方案的较大团队竞争，那么这是两个较为适合的后端架构方案。

sapper.svelte.technology/

Sapper是两个类似Next.js的架构，具有极高的性能和内存效率，具备代码分割，服务端渲染的现代架构功能，是这款军工级别的架构。

采用这个架构能让你加速搭建漂亮的React UI 交互站点。

）

三、HTML和CSS辅助工具

keyframes.app

这款如前所述时间关键性帧，新浪网制作网页动画的中文网站，你无需在编辑器和应用程序直接互相切换，及所见即所得。keyframes.app提供新浪网制作和谷歌应用程序扩展应用程序两种形式。制作完成后，你能很方便快捷的将自动产生的CSS代码复制到你的工程项目中。

emotion.sh/

Emotion是这款用JavaScript编写css的库，全力支持字符串和对象两种方式声明CSS变量，如果你在采用React，试用这个库将让你以更加优雅的方式用JavaScript编写CSS。

normalize.css能让应用程序以接近标准的方式一致地渲染所有元素，而且不同于cssrest，只针对须要正常化的元素。modern-normalize只针对现代应用程序，而且足够现代，甚至IE和Edge都已经放弃。

这款你只须要编写HTML就能很轻松实现菜单、画框、弹出层、滚动视察、缩放、触摸手势等众多效果的架构，这个架构代码压缩版只有30KB,很方便快捷与各种后端架构集成(Angular,VueJS,React),全力支持响应式和触摸，并且不依赖任何库就能实现。

这款受 CSS Modules, BEM 和 Atomic CSS 架构启发，为你的web应用领域组件提供完美的CSS模块方案。

这款你只须要设计表单，无需编写后端代码，就能很方便快捷的将表单应用领域集成到你的工程项目里。

这款适合初学者的CSS架构，但是看起来还蛮不错，模块化，开源，压缩版只有6KB，全力支持FLEX,Grid布局和自带一些漂亮UI,比如进度条，表单、按钮等，虽然小，但功能齐全。

两个JS库，用于指示元素能水平滚动，并带有指针图标，如果你在做两个初学者引导，这个辅助工具将会是两个不错的优先选择。

强大的Markdown编辑器tui.editor,方便快捷集成到你的工程项目里，这款强大的富媒体编辑器有以下特征：

全力支持 CommonMark 与 GFM（GitHub Flavored Markdown）两种标准

全力支持丰富的扩展应用程序，如颜色优先选择器、图表、UML、表格合并

提供了所见即所得与 Markdown 这两种模式，在编辑过程中可以随时切换，非常方便快捷。在所见即所得模式下，能直接从应用程序、 Excel、PPT等复制文本，并且保留原来的格式

Filepond 是两个用于文件上传的 JavaScript 库，能上传任何文本，优化图像以获得更快的上传速度，并提供两个出色的，可访问的，流畅的用户体验。

Filepond 提供了多种上传方式：拖放，复制和粘贴文件，浏览文件系统或仅采用库的API。 gzip 压缩后仅有 21KB ，并且内置了图像优化和图像自动调整功能。

Filepond 适用于 React ， Vue ， Angular 和 jQuery 。

两个用来建立、计算和格式化货币价值的不可变的架构。

无论在银行应用领域程序、电子商务中文网站却是证券交易所平台，我们每天都在与金钱互动。我们也越来越依赖控制技术来处理问题。

然而，关于如何以编程处理货币价值尚无共识。虽然金钱是现代社会中普遍存在的概念，但相较于日期和时间之类的东西，它并并非任何主流语言中的一流数据类型。结果，每一种软件都有自己的处理方式，且伴随着陷阱。

Dinero.js遵循Fowler的模式更多一点儿。它允许你在JavaScript中建立、计算和格式化货币值。你能展开数学运算、解析和格式化对象，使你的开发过程更加轻松。

该库设计为不可变和可链接的模式。它全力支持全局设置，具有扩展格式选项，并提供本机国际化全力支持。

这款适合初学者的架构，方便快捷灵活易用，让你能加速制作专业级的页面转场动画效果。

简单易用的建模，全力支持鼠标拖拽、采用Cmd/Ctrl+click 优先选择页面元素的库（全力支持分组优先选择），大大节省了你的开发时间。只有3KB大小，不依赖jQuery。

两个超加速(25毫秒读取)，轻量级(小于3KB)，无依赖性(不须要jQuery)的制作幻灯效果的后端库，全力支持响应式，易于扩展，方便快捷自定义事件等…，更多特性等待你的发现！

这款帮你制作专业级Scroll滚动效果（滚动视差）的架构，架构大小不到1KB,采用回调的方式将有关动画元素的属性展开实时分配，方便快捷你做出个性化的动态效果。

自己是从事了五年的后端工程师，许多人私下问我，2019年后端该怎么学，方法有没有？

没错，年初我花了两个多月的时间整理出来的学习资料，期望能协助那些想学习后端，却又不知道怎么开始学习的朋友。

多达6000专业免费的SVG矢量图标，还全力支持深度的定制，比如更换配色，更改线条粗细，变换图标风格(细线条、粗线条、扁平)，全屏聚合有关代码。

这款简单、专业、开源、现代风格的SVG报表辅助工具,不须要任何依赖库，代码风格简单，简单易用。全力支持全屏导出svg代码。

如果您期望将Web图形提升到两个捷伊水平，那么动画SVG就是您的优先选择，而SVGator是您能用来建立它们的最简单的辅助工具之一。

这款专业级的SVG动画制新浪网制作辅助工具。SVGator还具有代码管理工作器面板，因而您能准确地看到应用领域程序聚合的代码。SVGator导出干净，格式良好的代码。

ApexCharts.JS 是两个现代化 JavaScript 图表库，用于采用简单的 API 构筑交互式图表和建模，功能十分强大。方便快捷你将图表嵌入到你的Vue、React工程项目中。

这款苹果公司提供的地图辅助工具，如果想制作和苹果官方中文网站一样的地图风格，这个辅助工具将是两个不错的优先选择，允许你在地图上添加交互事件，丰富你的地图应用领域。

这款图片自动预读取和缓存辅助工具，防止图片闪烁，并采用模糊滤镜预先显示图片延迟图片读取，提高网页读取速度，采用起来非常简单，你只须要采用替代标签方可，采用起来就是这么简单！

Lozad.js 是如前所述 IntersectionObserver API 的轻量级、高性能、可实用性的纯 JavaScript并且无依赖的懒读取器，其能够被用于展开图片、iframe 等多种形式的元素。

通过gzip压缩过后，仅仅1kb大小，相对常用的jquery.lazyload.js而言，lozad.js实力碾压，虽然jquery.lazyload.js也才几kb大小。在github上，已经收获了4800+的star。

React Suite 是一套 React 组件库，为后台产品而生。由 HYPERS 后端团队与 UX 团队打造，主要服务于公司大数据产品线。

经历了三次大的版本更新后，累积了大量的组件和丰富的功能。并全力支持新浪网定制个性化主题，更重要的是有中文版，方便快捷我们学习采用。

这款神奇的新浪网UI设计制作辅助工具，你只须要拖动和布局页面，这个辅助工具就会给你自动聚合质量高的React组件代码，更多功能等待你的发掘。

…

这款拖拽页面元素的React辅助工具，拖拽效果平滑，让你轻松就能实现卡片、列表、表单组件的的拖拽。

两个捷伊状态管理工作类库 unstated.js：简单易用/合理。和之前的 state 管理工作库思路完全不同，这个unstated主打 local state（并非全局store，两个小改动导致整棵树 rerender），多个 local state 之间也能共享， 兼具了redux的易用性与flux的合理性，令人耳目一新；unstated完全就是为React设计的，“足够React”，让你感觉不到在用第三方组件。

reach.tech/router

Reach-Router 是前 ReactRouter 成员 Ryan Florence 开发的一套如前所述 react 的路由控件. 那么已经有较为成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学能去了解一下,小编认为主要有以下几个特征值得你看看：

小，就4kb,压缩后比react-router小40kb左右。

更少的实用性

更好用

基本一样的api,学习成本非常低

源码非常简洁，总共就3个文件，900行，如果你想深入理解单页应用领域的路由是怎么实现的，reach-router,绝对是绝佳的下手资料

svgr是两个将SVG转换为React组件的辅助工具，svgr由JavaScript实现。整个文档也非常的小，已开源在github上。

用于React类似于Excel的网格组件，具有自定义单元格编辑器，高性能滚动和可调整大小的列。

Webhint工程项目提供了一种用于检查代码的可访问性、性能和安全的开源检查（Linting）辅助工具。在建立Web站点和应用领域中，有越来越多的细节问题亟待完善。为此，Webhint力图协助开发人员标记这些细节。

Webhint以命令行接口（CLI）辅助工具和新浪网扫描器两种形式提供，采用新浪网扫描器是最快的上手方式。采用新浪网扫描器须要为其提供两个公开的URL，用于运行报告并洞悉应用领域的运行情况。

在测试应用领域时，Webhint提供三种运行环境：jsdom、Chrome和Edge。后两种运行环境采用了Chrome DevTools协议，第一种运行环境采用Node.js环境加速地执行有限次数的检查，无需应用程序的全力支持。

还有更多强大的功能，还有待你试用挖掘。

…

Airtap 是一种在应用程序中测试 JavaScript 的简单方法，号称能覆盖800多种浏览器，能够在数秒内开始在本地测试你的代码，并无缝转移到由 Sauce Labs 提供的如前所述云的应用程序上，以获得更好的覆盖测试。

Airtap 与其他跨应用程序测试运行器的不同之处在于其简单性，以及能够在许多应用程序中轻松运行测试套件而无需在本地安装它们。它能让你在开发过程中加速迭代，并在发布前提供良好的应用程序覆盖率，而不用担心缺少应用程序全力支持。

不要只是声称你的 JavaScript 全力支持“所有应用程序”，用测试证明它！

…

HTTPS 是 Web 发展的趋势，用于提高中文网站的安全性。采用 HTTPS 须要实用性 TLS 证书，得益于 ACME 协议和 Lets Encrypt 证书，远程环境能很容易部署。但是对本地环境，还没有普遍有效的证书。

mkcert 被设计的足够简单，隐藏了基本上所有聚合 TLS 证书所必须的知识。它适用于任何主机名或者 IP，包括 localhost ，因为它只在你的本地环境采用。

证书是由你的私有 CA 签发，当你运行 mkcert-install 会自动实用性这些信任，因而，当应用程序访问时，就会显示安全标识。现阶段全力支持 MacOS、Linux 和 Windows，以及 Firefox、Chrome 和 Java。甚至全力支持一些手机设备。

…

Puppeteer 是两个Node库，它提供了两个高级API来控制DevTools协议上的Chrome或Chromium，常用于爬虫、自动化测试等，你在应用程序手动完成的大多数事情都能采用它来完成。

，复制URL就能开始发送HTTP数据请求。POST请求将保存数据，PUT请求修改数据，DELETE请求删除数据和GET请求检索数据。大大方便快捷了后端开发人员展开测试接口的集成，后端页面制作完成就能展开接口测试，采用起来就是这么简单。

这款为开发人员定制打造的工作台，通过谷歌应用程序插件安装方可采用，通过此工作台你能轻松订阅你感兴趣的git工程项目、跟进有关问题、pull有关操作，查看版本历史，订阅Stack Overflow有关的文本，管理工作查看Gists有关文本，能说两个主流控制技术平台聚合工作台。

原文作者：AmberSiYing