今天,Uber可视化团队开源deck.gl5.3，决赛deck.gl数据可视化软件V5版本发布。v5版本代表了对deck制作的主要努力。Gl比以往任何时候都更容易使用，我们希望通过分享这些改进背后的故事，我们可以让用户兴奋地尝试deck。gl v5新的简化api和特性。

当我们下水的时候。Gl v1在2016年的时候，我们想到越来越多的人想要在网上做大数据可视化。特别是通过开源平台。Gl，我们邀请其他人使用和构建这个框架。我们怀有希望创建一个协作的WebGL可视化社区，它将超越Uber自己的工程组织，让我们与其他对可视化有同样热情的人交流。

deck.glv4 followed a phase of rapid feature development, during which we introduced support for advanced geospatial exploration along with new non-spatial visualization capabilities. But while we worked on adding features, we listened to the growing community to understand what makes adopting deck.gl appealing and what gets in the way of using it. We soon realized that in order to continue growing the deck.gl community, we needed to remove as many barriers to adoption as possible.

在v4中，我们引入了一系列新的演示和示例，目的是让其他人更容易开始使用该框架。建筑在此基础上，甲板的主要目标。gl v5has been to make using the framework easier, and enabling quicker and more seamless development of WebGL-powered visualizations.

主要重点是通过哪些桥面。Gl v5解决了这一挑战:

• 纯Javascript API- - - - - -deck.glaccessibility for all (non-React) JavaScript users
• 框架不可知论-关于甲板的陈述哲学。gl到各种UI框架
• 脚本支持支持普通程序员使用deck.gl可视化数据
• 易用性-移除甲板粗糙的角落。gl API

纯Javascript API

制作桥牌。Gl对更大的用户群体是可访问的，我们的第一项业务是使deck成为可能。没有React的gl。毕竟，在web上可视化大数据的需求显然不是React开发人员所独有的，而是以前版本的deck。gl只与React兼容，这为不熟悉或无法使用React框架的用户创建了一个重要的入门障碍。

虽然很多代码需要修改，但最重要的部分是制作甲板。gl独立于React决定新的非基于React的API应该是什么样子。我们希望React、Javascript和脚本API尽可能相似，所以我们确定了“一个API”的理念，这意味着，在API初始化的方式上有一些差异，几乎所有的类和属性在不同版本中都有相同的名称和语义。

我们的“一个API”方法适用于甲板。因为，即使在React版本中，几乎整个甲板。gl APIwas already exposed in the form of plain, React-independent Javascript classes. Only the mainDeckGL组件，需要使用API的其余部分，是一个React组件。我们增加了一个顶层甲板Javascript类，采用与现有React组件完全相同的属性。(为了保持api的同步，我们重新构建了React组件，使其成为Deck组件的包装器。)

和任何一副牌一样。gl开发人员可以在下面的代码中看到一个非基于react的甲板。Gl应用程序使用与DeckGL反应的版本。它们只是通过new中略有不同的API提供的甲板类:

框架不可知论

通过我们对deck中纯Javascript API的工作。gl v5，we engineered out all of the hard React dependencies from deck.gl. As a result, since deck.gl now both officially supports being used without any specific Javascript UI framework (such as React) and can now be used as a base for building integrations with other UI frameworks (such as perhaps Angular), we are able to say that deck.gl is framework agnostic. Below, we outline what framework agnosticism actually means for both new and existing users:

React怎么样?

虽然框架不可知论，甲板。gl仍然100%致力于React集成。虽然DeckGLReact组件现在是新组件的包装器甲板Javascript类，deck中的每个Javascript类。gl经过精心设计，可以在React应用程序中高效工作。(虽然对这意味着什么的完整解释超出了本文的范围，但为了了解所涉及的问题，请考虑React应用程序在每次应用程序状态的某些部分更改时都会在概念上重新绘制整个UI。)

其他框架(Angular、Polymer、Vue等)

我们想看看甲板。Gl与其他框架一起使用。随着官方纯Javascript API的可用性，我们使应用程序开发人员更容易使用他们所选择的框架进行所需的集成，并使社区更容易构建此类集成的预打包版本。虽然我们目前还没有进行这些集成，但我们很乐意支持这种移植工作。

新的脚本API

新的Javascript API是我们扩大用户基础的一个很好的开始。现在我们问自己是否可以做桥牌。Gl对我们的开发人员来说更容易使用。即使是甲板。gl不再要求使用React，我们仍然要求开发人员在开始之前建立一个完整的web应用程序。我们知道，为构建配置文件、包安装等设置必要的需求可能既令人生畏又疲惫，特别是对于只想快速可视化的新用户。

为了使开发更容易，我们打包了deck。gl的新的，更易于使用的react独立的Javascript API，具有一些额外的便利，如自动Mapbox基础地图集成，并将结果包作为deck.gl的脚本版本发布。

这个脚本版本的deck。gl在CodePen和Observable环境中开箱即用。Gl可以用于更多的用例，如协作原型和调试，在这些用例中，完整的项目设置是不必要的。查看我们的“开始使用deck编写脚本。Gl的博雷竞技到底好不好用客文章更多细节和一些令人兴奋的例子，什么甲板。Gl脚本只需要几行代码就可以完成。

易用性

第三个重点是制作桥牌。gl更容易访问(在框架不可知论和脚本支持之后)是为了进一步完善API，以减少新用户的学习曲线，特别是那些编写代码来支持主要任务而不是作为专门的软件工程师工作的用户。

一个更具声明性的API

我们在牌组中针对的特定易用性方面。Gl v5的释放周期是取消对甲板的需求。Gl应用程序来实现回调。这一改变尤其引人注目。gl APIalready has a strong declarative flavor to it, due in large part to its React roots.

请注意，术语“声明性API”指的是用户通过一组静态属性指定框架行为的能力，而不是通过函数定义动态行为，声明性API通常被认为更容易学习和使用。

while deck。Gl演示和简单的应用程序已经可以用一种近乎声明式的方式编写，需要实现简单操作的回调，比如跟踪窗口大小，破坏了这种干净的流程，给示例增加了混乱，给用户带来了更多需要担心的事情。

为了解决这个问题，deck。gl v5’s five new automatic features ensure that a range of small but common programming complications can now be handled trivially by deck.gl programmers:

自动高亮显示

我们从一个很小但非常有用的特性开始易用性列表:基于gpu的对象高亮显示。deck.glis designed to be extremely performant when rendering large static data sets. However, highlighting a single object (e.g., when hovering over it with a mouse) could require updating those data sets, which could result in both a significant performance impact as well as requiring a frustrating amount of callback-style code to implement.

进入自动高亮显示功能，它可以让程序员直观地高亮显示任何桥牌中的对象。Gl层简单设置autoHighlight财产真正的．

我们认为这个功能是我们正在进行的通用GPU (GPGPU)开发的早期开胃菜。期待在未来的deck中看到更多gpu支持的功能。gl版本。有关如何使用这个小而强大的特性以及它是如何实现的详细信息，请查看我们的博雷竞技到底好不好用客关于这个话题。

自动调整大小

像跟踪浏览器窗口大小这样简单的事情给我们的基本示例增加了大量额外的代码。但是，几乎每个应用程序都必须这样做。为了简化这个过程，我们添加了直接在甲板上指定相对大小的支持。gl组件。这一添加让我们从甲板上删除了窗口调整事件侦听器的混乱。Gl示例，如下所示:

注意:对于熟悉HTML和CSS大小说明符的人来说，自动调整大小功能可能看起来微不足道，但它需要添加一个新的视图类系统来支持整个API中相对大小的声明性规范。当然是新的视图类还将服务于许多其他重要的功能，但它仍然是一个典型的例子，说明简单的功能通常需要与其他功能同步开发。

自动控制

在甲板上。gl v5，even the smallest deck.gl examples needed to remember and continuously update a view state in response to user events (which they did by defining aonViewStateChange回调)。但是，现在大多数应用程序(不需要细粒度交互控制)只能指定initialViewState财产和依靠甲板。Gl自动处理用户交互:

自动加载层数据

此前,甲板上。Gl层只能接受数据(通过它们的数据(通常是从提供JSON格式数据的URL加载的)。在甲板上。gl v5．3.，a deck.gl layer’s data property can now alternatively be set to a URL string, and deck.gl will load the data from the indicated Internet address and display it when ready. This feature allows a compatible data source to be specified with a single property, and avoids the typical 5-10 lines of callback code typically required to asynchronously load the data before instantiating the layer.

自动组件pos过渡

组件自动定位允许应用程序有额外的HTML组件，如基本地图和标签，自动定位在甲板下。Gl视口，它在使用多个视图时特别强大。

属性的转换

最后，我们正在进行GPGPU开发的另一个特性是甲板。Gl在不同大数据集之间自动平滑过渡的能力。该功能类似于经典web开发中的CSS过渡，不同之处在于甲板。gl直接在GPU上每秒多次插值数百万个值。

简化的例子

作为另一个努力，使甲板。gl对于新用户来说更容易实现，我们正在检查示例的源代码，仔细重写源代码以利用新的v5特性，以确保我们没有错过任何机会(包括使用新的少回调api)，使新程序员更容易理解它们。

特性

而我们的重点是制作甲板。Gl更容易为更广泛的用户(技术和非技术)实现，我们当然没有停止添加可视化功能。

TextLayer

晚做总比不到好，新的TextLayer填补了甲板上的一个主要空白。Gl的层目录，最后提供甲板。WebGL用户能够在WebGL中更有效地处理文本。

新的TextLayer提供了一组自定义功能，比如指定字体和字符集的能力。如果性能的TextLayer恰好是一个问题，这展示在甲板上。Gl网站将有望消除任何挥之不去的疑虑。

多视点的API

一个新的甲板。views属性允许应用程序指定多个View类。新的视图接受相对大小参数，使它们能够与新的自动调整大小功能无缝地工作。

深选

随着越来越多的交互式、混合可视化应用程序的使用，甲板。gl需要匹配传统的基于场景图的WebGL库提供的功能。最受欢迎的功能之一是能够识别特定像素下的所有对象，而不仅仅是屏幕上呈现的最顶端的对象。

为此，甲板。gl v5provides a new picking function with a depth parameter that enables the application to identify multiple matches under the cursor when picking (effectively picking occluded objects).

甲板上。pickMultipleObjects({x, y, depth: 10});

可视化回归测试支持

一副新牌。Gl子模块(@deck.gl / test-utils)提供了自动化测试支持，为WebGL测试社区中通常被认为是空白的领域提供了强大的框架支持。

对牌的额外投资。gl社区

更快的发布周期

为了更快速地响应新要求，甲板。Gl采用了一个更快的每月发布计划，目标是每月发布大约三个小版本(包含增量的新功能)，然后再发布一个大版本。

开放的路线图

我们还需要牌组。Gl路线图将尽可能开放，让用户了解即将推出的功能，并让贡献者能够在平等的基础上与我们合作。

为此，我们出版了广泛的目录技术rfc，允许任何用户加入围绕新功能的设计讨论，我们还添加了一个路线图页面。我们正在考虑增加参与的其他方法。如果你有建议，请打开一个Github问题。

前进

主要集中在制作桥牌上。gl v5framework easier to use has transformed it into a significantly more user-friendly and accessible data visualization platform.

与新的，更灵活的释放周期结合在甲板的开放。Gl路线图，我们希望带来更多基于deck的组件、贡献、合作和伙伴关系。Gl到数据可视化社区。我们已经有几个大的东西在工作中，我们期待着甲板的未来。Gl项目和它不断增长的贡献者社区!

Uber的可视化团队已经开源了以下项目:deck.gl，kepler.gl，luma.gl，react-vis,react-map-gl．如果你想了解Uber所有的开源项目，请查看我们的Github页面，如果你有兴趣加入我们的团队，请访问优步职业页面．

订阅我们的通讯以跟上优步工程公司的最新创新。