>

二〇一八年又有怎么样的盼望

- 编辑:至尊游戏网站 -

二〇一八年又有怎么样的盼望

推荐15个 JavaScript 和 CSS 库

2018/03/23 · CSS, JavaScript · 库

原文出处: [Georgi

Georgiev]()   译文出处:[为之漫笔

众成翻译]()   

Tutorialzine的使命是让开发者与最新的Web开发发展同步。因此,我们每月都会精选一批最优秀的资源推荐给大家,相信这些资源你绝对值得拥有!


图片 1

以下为我在知乎问题「2017年前端有什么样变化?即将来临的2018有什么样的期待?」下的回答,稍作整理分享给大家。如有遗漏欢迎在评论中指出。原文如下:

ClarifyJS

ClarifyJS可以让你串联一串方法,以任意顺序执行。通常的JavaScript方法是从左到右执行的,ClarifyJS可以让你改变它们执行的顺序。而且,通过选择是否让进程等待某个特定的异步方法完成还是执行后继续,也能控制异步方法。


图片 2

在即将过去的2017年里,我们回顾:

Superstruct

Superstruct提供了一种验证数据的简单方式。它受到了Typescript、Flow和GraphQL的启发,其主要目的是在运行时验证数据,并返回详细的运行时错误信息。可以在使用REST或GraphQL API时通过它来验证用户输入。


图片 3

逃不过的三大框架

Muuri

JavaScript布局引擎,用于创建差异化多功能的交互布局。通过内置拖放、快速动画及筛选排序,支持对布局的完全定制。它使用Web Animations处理动画,使用Hammer.js实现拖放。


图片 4

  1. React 继续在前端领域占据着主导地位,并在 2017 年发布了最受期待的版本之一 - React 16。 它包含了可以实现异步 UI 渲染的 fiber 架构。通过提供包括错误边界在内的很多其他特性。但 React 在这一年中所取得最重要的成就不是它推出的新特性,而是修改了它的开源协议:BSD 协议 -> MIT 协议。除此外,Jest、Flow、Immutable.js 和 GraphQL 授权也都改为 MIT 协议。

  2. Angular 市场占有率持续下滑(相较于 React ),发布了V4 (3月23日)以及 V5 (11月2日),在 V4 中看到了 Angular Universal  成为官方项目的一部分以及 Angular Animation 从核心包中被抽离出来,V5 中则对 PWA 支持进行了改进、对编译器优化达到更快地构建等。

  3. 即便 React 获得了巨大成功,Vue(作者尤雨溪)也仍然越来越受欢迎。该框架提供了非常友好、简单的 API,是 React 的主要替代方案之一。它已经被包括 GitLab 在内的大公司所采用,该公司回顾了在过去的一年里使用该框架的故事。

Neutrino

Neutrino基于Webpack创建JavaScript项目,支持预设和共享配置。预设是Neutrino的核心,使用它的基准预设可以构建各种项目。你也可以通过扩展来创建自己的预设。


图片 5

图片 6

CCXT(CryptoCurrency eXchange Trading)

这是一个用于加密货币和电子商务交易的JavaScript/PHP/Python库。通过它可以连接加密货币交易所并完成支付。支持比特币/以太币/替代币交易市场,完全实现了各交易所的公共和私有API,能够快速访问交易数据,可用于存储、分析及可视化。


图片 7

注:上图为三大框架过去一年中在 NPM 的下载量对比图,以下类似的框架/包对比图均采用 npmtrends 一年内下载量进行对比,同时附有 GitHub 上 star/fork 等状态信息。

Reactopt

Reactopt是一个CLI React优化工具,可以识别应用中可能导致不必要重绘的事件。这个库是为了替代react-addons-perf模块开发的,后者在React 16以后就不被支持了。当前,它支持Click/Double click、Drag、KeyPress、KeyDown和Input事件。


图片 8

ECMAScript

Luxon

Luxon是强大的日期和时间库,支持DateTimeDurationInterval类型,可以解析和格式化常见或自定义的日期。Luxon支持使用时区和使用原生Intl API实现国际化。


图片 9

  • 在一个详尽的提案过程结束之后,六月份发布了 ECMAScript 规范的2017年版本,其中包括一些开创性的功能,如异步功能,共享内存和原子操作(atomic operations)。其中,共享内存将使 JavaScript 中的高性能并行计算更容易处理,而且效率更高。拥有共享内存的并行架构对于任何想用 WebGL 和 web worker 创建游戏的人来说都是巨大的诱惑。

  • 该版本在2017年12月已经被所有主流浏览器所支持,Edge 表示将从 v16 版本开始对这些功能进行支持。由于 Node 不支持 web worker,所以他们也没有对共享内存的支持,但他们正在重新思考该项决定。

WordPressify

前端构建系统,用于自动化WordPress开发工作流。提供集成的Web服务器和自动重载、PostCSS及Scss预处理器,还有灵活的定制化构建。还内置了Babel编译ES6代码,支持新的JS语法。


图片 10

WebAssembly

Spectre

Spectre是一个完全免费的响应式的CSS框架。支持基本的样式、排版、基于Flexbox的响应式且移动优先的布局系统,以及漂亮的纯CSS组件。非常小巧,压缩后只有10KB,但支持大多数现代浏览器。


图片 11

  • 所有主流浏览器现在都支持 WebAssembly,五月份 Chrome 开始支持,Firefox 则是从三月份就开始支持,Edge 是十月份。 Safari 则在第十一次发布中开始支持。Chrome for Android 和 Safari Mobile 也支持 WebAssembly。详情可以参考 WebAssembly support now shipping in all major browsers – The Mozilla Blog

Rapid.js

针对自定义API路由,Rapid.js可以加速API封装及构建类ORM的接口。它提供基本的CRUD方法,以及get()post()put()patch()delete()head()方法,实现基本的请求。几乎不用配置,适合构建任何API。


图片 12

Progressive Web Apps

Parcel

Parcel是一个飞快的Web应用打包工具,无需配置。支持打包JavaScript、CSS、HTML、文件资源,并使用Babel、PostCSS和PostHTML进行自动模块转换。它还有一个非常友好的错误日志,支持语法高亮,方便定位问题。


图片 13

  • 我们一直在寻找弥补 web 和其他客户端之间体验差距上的解决方案。Google 一直主导通过将 web 应用转换为 Progressive Web Apps(PWA) 来增强它的能力,而这一方法在 2017 年迅速获得采用。一个 PWA 应用利用现代浏览器技术来提供更像移动应用程序的 web 体验。它提供了改进的性能和离线体验,以及以前仅可用于移动的功能,例如推送通知。 PWA 的基础是一个 manifest.json 文件和对 service workers 的利用。详情见 Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)。

Shards

免费的现在UI工具包,基于Bootstrap 4,超轻量,全响应。包含10个自定义组件,2个预置着陆页及基于Material和Font Awesome包的图标库。开发者可以自定义其SCSS文件,以修改已有布局,或者创建自己的布局。


图片 14

包管理器

Mark.js

可以对通过关键词或正则表达式匹配的文本动态添加高亮。内置支持变音符号(diacritics)、独立词搜索、自定义同义词、iframe、自定义过滤器等。可以单独使用,也可以作为jQuery插件。


图片 15

  • Bower 市场占有率持续下降,它的最后一次发布在2016年11月,之后官方正式推荐用户使用 NPM 用于管理前端项目中的软件包。

  • NPM 自从最初发布以来已经有了相当长的一段时间,但它仍然缺少一些关键特性,而这正是 Yarn 希望补充的。Yarn 的主要贡献是包缓存,一个确保确定性构建的锁文件,并行操作以及依赖关系。这些功能非常成功,以致于 NPM 在其 5.0 版本中实现了它们。Yarn 下载量超过 10 亿次(目前每月下载量达到了 125 万次)并拥有惊人的 29000 多个 GitHub stars。即使你没在使用 Yarn,JavaScript 的包管理整体上由于 Yarn 的发布也得到了显著地提升 。

  • 针对 Yarn 的出现, NPM 回击以 v5 版本的发布,这个版本显著提高了性能(包括上述的 Yarn 发布的功能) 。

List.js

通过这个微型库,可以对不同HTML元素实现搜索、排序、筛选。它小巧、简单、易用,无依赖。Chrome、Safari、Firefox和IE6+都有插件。


图片 16

图片 17

Uppy

Uppy是一个开源模块化文件上传库。可以从本地、Google Drive、Dropbox、Instagram、远程URL及其他位置选择文件,然后将它们上传到最终目的地。非常小巧,而且接口简单,很适合移动浏览器。

2 赞 2 收藏 评论

图片 18

样式布局

  1. 网格布局最终被 CSS 采纳为标准,浏览器也正在快速地采用它。过去,网格系统在 CSS 中曾被 tablesfloatflex 以及 inline-block 实现过。

  2. 2017 年见证了 styled-components(由 Max Stoiber、Glen Maddern 和 Phil Plückthun 创建) 在流行程度上逐渐占据主导地位。Emotion(由 Kye Hohenberger 创建)是最新的 JavaScript 库之一,但它已经被迅速采用。另一个可选方案是 glamorous(由 PayPal、Kent C. Dodds 和一群热情的贡献者创建),它封装了 glamor 库。

  3. 在过去的几年里,像SASS,Less和Stylus这样的CSS预处理器已经流行起来。PostCSS 于2014年推出,而在2017年真正火爆起来,成为目前最受欢迎的 CSS 预处理器。

  4. 另一方面,在 2017 年,主要的进步来自 CSS-in-JS 的明显改进与采用,其中所有样式都是通过代码而不是样式表进行构建的。目前还不清楚这是否将成为前端社区的最终方向,但这是目前最新的方法。

  5. PostCSS 仍然是首选的 CSS 预处理器,但是很多都在切换到 CSS-in-JS 解决方案。

注:评论中有同学谈到 PostCSS 是后处理器,根据定义,CSS 后处理器是对 CSS 进行处理,并最终生成 CSS 的 预处理器,它属于广义上的 CSS 预处理器。由于本人回答时的定位以及参考的文献中所指,故这里不做细分,认定 PostCSS 为预处理器。细致的同学可以做进一步的细分。

图片 19

工程模块化工具

  1. Webpack 2 于今年2月份发布。 它带来了诸如 ES6 模块(不再需要 Babel 转换 import 语句)和 tree shaking (消除了打包中未使用的代码)等重要功能。 此后不久,V3 发布了一个名为“scope hoisting”的功能,将所有的 webpack 模块放入一个单独的 JavaScript 包中,从而大大缩小了它的尺寸。

  2. 7月份,Webpack 团队从 Mozilla 开源支持计划获得了一笔赠款,以便为 WebAssembly 提供一流的支持。

  3. Parcel 作为一个有趣的项目,在短短十天内便在 GitHub 上获得了 10000 个 star。 它主要通过利用多个 CPU 内核和一个高效的文件系统缓存来实现。 它还基于抽象语法树进行操作,而不像 Webpack 使用字符串。

  4. 除此外,Rollup 的发展也不容小觑。4月 React 团队从 Gulp 切换到了 Rollup 进行开发。除此外,Webpack 团队也推荐在某些方面使用 Rollup 而不是 Webpack。

图片 20

TypeScript

  • JavaScript 中缺少类型一直是很多人的抱怨所在。为了解决这些问题,TypeScript 出现。它由微软创建,TypeScript - JavaScript that scales.JavaScript 中缺少类型一直是很多人的抱怨所在。为了解决这些问题,TypeScript 出现。它由微软创建,由于其出色的表现赢得了很多 JavaScript 开发者的追捧,而 Flow 提供了一种在不需要激进的重构下更为灵活的方式来引入类型,后者是 Facebook 的成果。

图片 21

应用状态管理

  • Redux 仍然作为 React 项目推荐的状态管理解决方案,并在 2017年获得了五倍的增长速度(NPM 下载量)。

  • Mobx 成长的也很快,并被一些高利润公司所使用,例如 IBM,美国银行以及 Lyft。

  • 除此外,MobX 团队正在努力,希望在新项目—— mobx-state-tree(MST) 中结合 Redux 和 MobX 的优点。

图片 22

GraphQL

  • GraphQL 似乎在 REST 之上迅速占据了一席之地,Samer Buna 甚至声称 REST 已经死亡。GitHub 已经使用 GraphQL 编写了最新版本的 API,与此同时为了使 GraphQL 对所有开发人员可用,许多公司正在开发产品,例如 Johannes Schickling 开发的 Graphcool框架。

静态网站生成方案

  • 2017 见证了静态网站卷土重来。像 Gatsby 这样的框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 web 应用。由于采用与预构建标记(原文 prebuilt markup),静态网站生成方案使你获得服务器端渲染的好处和绝无仅有的速度。如果你正在寻找一个很好的例子,React 官方文档就是用 Gatsby 构建的。

在即将到来的2018年中,我们期待:

  • 基于组件应用中的样式是否是组织 CSS 的最佳方式?有关该内容的讨论或许会激化。

  • 越来越多的公司采用具有统一代码库的移动端解决方案,如 React Native,Flutter 或 Weex 。

  • 因为离线能力和无缝的移动端体验,web 变得更加原生,再加上苹果对 Service Worker 的表态 Release Notes for Safari Technology Preview 46, PWA 在2018年可能会被全面支持。

  • WebAssembly 可以取得长足的进步,提供一个更好的 web 体验。

  • GraphQL 正在并继续挑战 REST。

  • 由于不再有对开源协议上的争议,React 强化了它的地位。

  • Flow 和 TypeScript 采取更强大的举措,使 JavaScript 更具结构。

  • 虚拟现实使用类似 A-Frame、React VR 和 Google VR 这样的库正在向前迈进。

  • 人们使用区块链和 web3.js(由 Marek Kotewicz 和 Fabian Vogelsteller 创建)构建了一些非常酷的应用程序。

  • 构建方案的持续发展,Webpack ,Rollup 以及后起之秀 Parcel 等在构建方案份额中扮演这一种合久必分、分久必合的轮回。


本答案在撰写过程中参考了以下内容:

  1. Frontend in 2017: The important parts

  2. A recap of front-end development in 2017

基于第二篇参考文章的译文已经翻译成中文,感兴趣的同学也可以点击以下链接查看。

【编辑推荐】

本文由技术教程发布,转载请注明来源:二〇一八年又有怎么样的盼望