红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

如何使用 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:006232
用户头像

发布了 255 篇内容, 共 144.7 次阅读, 收获喜欢 576 次。

关注

评论

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

资源使用率提高25%,成本降低90%,云函数是怎么做到的?

最新动态

MODBUS RTU 485 协议简要说明

矜辰所致

Modbus RS485 9月月更

阿里云视觉智能开放平台商品图智能生成开启邀测啦

夏夜许游

人工智能 AI 电商 图像分割

阿里云视觉智能开放平台离线人脸识别SDK开启邀测啦

夏夜许游

人工智能 AI 人脸识别 离线包

编译器优化:何为别名分析

华为云开发者联盟

开发 编译器 企业号九月金秋榜

数据库发展史2--数据仓库

数据库 数据仓库 叶正盛 玖章

计算机网络——码元、波特

StackOverflow

编程 计算机网络 9月月更

实操指南:如何为 SAST 工具设置误报基准?

SEAL安全

应用安全 静态应用安全测试 SAST 应用安全测试 软件供应链安全

PhotoView——支持图片缩放、平移、旋转的一个优雅的三方组件

OpenHarmony开发者

Open Harmony

力扣151 - 反转字符串中的单词【双指针与字符串的火花】

Fire_Shield

双指针 LeetCode 9月月更

华为云宣布全面建设全球初创生态,3年内赋能10000家高潜初创企业

华为云开发者联盟

云计算 创业 创新创业 企业号九月金秋榜

iofod - Echart 图表全支持

iofod jude

Java 前端 低代码

FreeRTOS记录(十、FreeRTOS实现带 I2C 通讯的 ModbusRTU 协议从机实例)

矜辰所致

FreeRTOS 9月月更 ModbusRTU

PSYNC 命令的实现

急需上岸的小谢

9月月更

现代数据栈如何降低数据平台的复杂度?

Kyligence

数据分析 云原生 指标中台 指标自动化

【HTML-CSS】小游戏--渣灰哥的愿望之砍砍渣灰

Sam9029

JavaScript HTML5, CSS3 9月月更

3D打印机打印模型的10大技巧

Dylan

3D模型

Redis复制的实现

急需上岸的小谢

9月月更

荣耀帐号服务,让用户获取变得更简单

荣耀开发者服务平台

手机 物联网 安卓 移动开发 honor

Spring 框架使用了哪些设计模式?

Java快了!

spring框架

心血来潮,手绘一张Spring学习思维,内容详细全面,秋招面试必看!

收到请回复

Java 云计算 开源 架构 编程语言

Pipy + Sentinel 实现 Redis 的高可用

Flomesh

Service Mesh 服务网格

送你5个MindSpore算子使用经验

华为云开发者联盟

人工智能 算子 企业号九月金秋榜

阿里云视觉智能开放平台2D视频转3D视频开启邀测啦

夏夜许游

人工智能 AI 3D

【死磕JVM】用Arthas排查JVM内存 真爽!我从小用到大

Java快了!

一步步搞懂MySQL元数据锁(MDL)

京东科技开发者

MySQL 数据库 元数据 数据库锁 mdl

住宅代理IP在网络攻击中的作用

郑州埃文科技

代理IP 安全检测 撞库攻击

mysql 查询执行过程

急需上岸的小谢

9月月更

论监控中事件管理的艺术

穿过生命散发芬芳

事件管理 9月月更

为超级品牌打造「上瘾算法」|Whale 帷幄发布全新 DAM & VAP 内容数字化产品

科技热闻

压测平台在全链路大促压测中的实践

得物技术

中间件 全链路压测 QPS 企业号九月金秋榜

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