写点什么

如何使用 WebAssembly 将命令行 JSON 处理工具 JQ 移植到浏览器?

  • 2019-05-18
  • 本文字数:2505 字

    阅读完需:约 8 分钟

如何使用WebAssembly将命令行JSON处理工具JQ移植到浏览器?

命令行 JSON 处理工具jq最初使用 C 编写,最近被移植到了 WebAssembly,故现在可以在浏览器的 JavaScript 环境中使用它了。InfoQ 采访了Invitae公司的生物信息软件工程师Robert Aboukhalil,探讨了将现有软件移植到WebAssembly(wasm)所面临的挑战,以及由此给开发人员带来的好处。


命令行 JSON 处理工具jq,好比处理 JSON 数据的sed,它具有友好的命令行接口,允许用户对结构化数据进行切片、转换和重组。下面是一个 GitHub 请求的 JSON 结构响应结果片段:


  {    "sha": "d25341478381063d1c76e81b3a52e0592a7c997f",    "commit": {      "author": {        "name": "Stephen Dolan",        "email": "mu@netsoc.tcd.ie",        "date": "2013-06-22T16:30:59Z"      },      "committer": {        "name": "Stephen Dolan",        "email": "mu@netsoc.tcd.ie",        "date": "2013-06-22T16:30:59Z"      },      "message": "Merge pull request #162 from stedolan/utf8-fixes\n\nUtf8 fixes. Closes #161",      "tree": {        "sha": "6ab697a8dfb5a96e124666bf6d6213822599fb40",        "url": "https://api.github.com/repos/stedolan/jq/git/trees/6ab697a8dfb5a96e124666bf6d6213822599fb40"      },      "url": "https://api.github.com/repos/stedolan/jq/git/commits/d25341478381063d1c76e81b3a52e0592a7c997f",      "comment_count": 0    },    "url": "https://api.github.com/repos/stedolan/jq/commits/d25341478381063d1c76e81b3a52e0592a7c997f",    "html_url": "https://github.com/stedolan/jq/commit/d25341478381063d1c76e81b3a52e0592a7c997f",    "comments_url": "https://api.github.com/repos/stedolan/jq/commits/d25341478381063d1c76e81b3a52e0592a7c997f/comments",    "author": {      "login": "stedolan",
复制代码


按照如下参数查询:


curl 'https://api.github.com/repos/stedolan/jq/commits?per_page=5' | jq '.[0] |{ message: .commit.message, name: .commit.committer.name} '
复制代码


提取响应结果的第一个元素,并只保留感兴趣的字段:


{  "message": "Merge pull request #162 from stedolan/utf8-fixes\n\nUtf8 fixes. Closes #161",  "name": "Stephen Dolan"}
复制代码


为了搭建 jq 在线运行环境,有两种可行的方法。第一种方法是在服务器上搭建沙箱环境,在该沙箱中进行查询并通过 API 调用的方式返回结果给用户。这意味着需要托管、保护和清理用户输入,以及要忍受由于往返服务器而导致的延迟。第二种方法是在浏览器上模拟命令行接口。这就意味着需要使用 JavaScript 重写已经实现的代码逻辑,并要通过实景测试。移植到 WebAssembly 似乎成了有吸引力的第三种选择。


Aboukhalil 解释到:


权衡安全性(在服务器上搭建沙箱环境)及学习成本(学习用 JavaScript 重写原工具逻辑)后,这两种解决方案都不够完美。最理想的情况是,不借助任何服务器或模拟器,我们就可以在浏览器上直接运行命令行工具。恰巧,WebAssembly 正是我们实现这一目标所需要的解决方案。


jq 的在线运行环境jqkungfu.com



Aboukhalil详细介绍了jq向WebAssembly移植的步骤。并且和 Infoq 记者分享了移植的宝贵经验。


InfoQ:您是如何将 jq 移植集成到 Web 的?


Robert Aboukhalil: 我想构建一个 Web 应用程序,用以展示使用 WebAssembly 在浏览器中构建交互式命令行在线运行环境的能力。我们将 jq 从 C 编译到 WebAssembly,使它能够在浏览器中运行,这与将 jq 托管到服务器上,搭建独立环境执行用户请求相比,更快、更安全也更方便。


InfoQ:您还有其他比较感兴趣的 wasm 移植推荐吗?


Aboukhalil:  我比较感兴趣的是克隆版的《毁灭战士 3》,它也是通过 WebAssembly 移植到 Web 上的:http://www.continuation-labs.com/projects/d3wasm/。其他使用 WebAssembly 的热门应用程序还有AutocadFigma


InfoQ:能分享下您使用 WebAssembly 的经验以及遇到的挑战吗?


Aboukhalil:  我最初研究 WebAssembly 是为了加快一个分析 DNA 测序数据 Web 工具的速度(我曾经在 Smashing 杂志上写过相关文章


遇到的最大的挑战是:虽然我知道 WebAssembly 很有前景,但是它的学习曲线比较陡,那是因为:


1、WebAssembly 支持最多的是底层语言,如 C、C++及 Rust,作为一个近十年来没有接触过 C 的 Web 前端开发,还是很有挑战性的。


2、大多数关于 WebAssembly 的在线文档或教程,要么太简单(如“Hello World”级别的初级教程),要么太复杂了(关于深入研究 WebAssembly 内核结构的)。


InfoQ:对于希望在浏览器上集成现有工具的开发者,您有什么建议可以给到他们?


Aboukhalil: 我个人对此是比较有倾向性的,不过我最近写过一本关于 WebAssembly 的书(可以在http://levelupwasm.com获取),这本书包含了很多 WebAssembly 实践,并且深入探讨了如何使用它构建完整的应用程序。


InfoQ:最佳实践,还是仍有缺陷?


Aboukhalil:  尽管 WebAssembly 是一个非常强大的工具,但它并非在任何场合都适用。比如,如果你的应用程序需要大量内存,或者需要在 JavaScript 和 WebAssembly 之间进行大量通信,那么 WebAssembly 可能就不适合你了。


InfoQ:在您所从事的生物信息学领域,WebAssembly 可能有哪些实践应用呢?


Aboukhalil: 以下是一些如何在生物信息学 Web 应用程序中使用 WebAssembly 的例子:


1、在浏览器上可视化质量度量。这对于那些不习惯使用命令行,并且希望不需要等待文件上传到服务器而快速预览数据的科研人员来说是很实用的。我为 Smashing 杂志写过相关的案例研究:https://www.smashingmagazine.com/2019/04/webassembly-speed-web-app/


2、为常用的生物信息学工具搭建在线运行平台(类似jqkungfu.com,但是针对生物信息学),既可以作为学习工具又可以通过交互界面在线修改参数之后快速验证结果。


WebAssembly 的主要贡献在于增加了代码的可移植性以及 Web 应用程序性能优化的潜力。由于许多生物信息学工具已经是用 C、C++或 Rust 编写的了,因此非常适合用通过 WebAssembly 将它们移植到 Web 上。


查看英文原文https://www.infoq.com/news/2019/05/web-assembly-jq-cli-port


2019-05-18 08:006505
用户头像

发布了 415 篇内容, 共 286.7 次阅读, 收获喜欢 657 次。

关注

评论

发布
暂无评论
发现更多内容

Java 程序经验小结: 慎用可变参数

后台技术汇

28天写作

想学AI开发很简单:只要你会复制粘贴

华为云开发者联盟

GitHub 开源 AI mindspore 推理

架构师训练营第九周作业

zamkai

【面试必备】Swift 面试题及其答案

ios swift

数据库表数据量大读写缓慢如何优化(3)【Elasticsearch的使用】

我爱娃哈哈😍

大数据 elasticsearch 架构 优化 死磕Elasticsearch

见证产品成长,共享AI力量!

百度大脑

目标岗位差异化对比

Geek_6a8931

常见运维监控系统的技术选型

OpsMind

运维 监控系统

重学JS | Set和Map是如何过滤重复值的?

梁龙先森

面试 大前端 编程语言 28天写作

产品思维和产品意识

ALone

高承实:区块链是一个技术结构组织 而不是技术

CECBC

大数据

都在用Kafka ! 消息队列序列化怎么处理?

李尚智

Java kafka 架构 消息队列 消息中间件

区块链挖矿到底是什么,该怎么挖?

v16629866266

第一周作业-产品备忘录

Eva

软件架构模式之分层架构

架构精进之路

架构设计 七日更 28天写作

拍乐云技术分享 | 美术教学中视频矫正是怎么做的?

拍乐云Pano

音视频 RTC 图像处理 拍乐云 视频处理

谷歌面试题:如何从无序链表中移除重复项?

田维常

面试

第一章作业

tera

红河州加速区块链等新技术与实体经济的深度融合

CECBC

数字经济

焱融科技借公有云出海,服务国际知名卡车制造商自动驾驶业务

焱融科技

自动驾驶 分布式 存储 自动驾驶训练

第四周作业

oooh-la

喜讯 | 拍乐云Pano荣获「2020大数据产业创新技术突破」奖

拍乐云Pano

大数据 音视频 RTC 拍乐云

别让假“努力”毁掉了你!面试了10家企业软件测试岗位,面试题整理

程序员阿沐

程序员 面试 软件测试 自动化测试 测试工程师

测试一下

TJJ

Hbase内核剖析

永健_何

大数据 HBase 底层技术 分布式数据储存

LocalDateTime、OffsetDateTime、ZonedDateTime互转,这一篇绝对喂饱你

YourBatman

LocalDateTime OffsetDateTime ZonedDateTime

老熟人,新朋友!写作平台邀新季!

InfoQ写作社区官方

热门活动

PostgreSQL中Oid和Relfilenode的映射

PostgreSQLChina

数据库 postgresql 开源 软件

Java程序员福音!阿里最新产物分布式小册:存储+计算+通信+资源调度

Java架构追梦

Java 阿里巴巴 架构 面试 分布式

图解 | 原来这就是TCP

程序员 网络协议 架构师

应对新冠病毒传播-粤政协委员建议构建公共卫生区块链平台

CECBC

区块链 公共卫生

如何使用WebAssembly将命令行JSON处理工具JQ移植到浏览器?_语言 & 开发_Bruno Couriol_InfoQ精选文章