写点什么

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

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

关注

评论

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

15 道超经典大厂 Java 面试题!重中之重

程序员鱼皮

Java c++ 面试 后端 Go 语言

网络攻防学习笔记 Day96

穿过生命散发芬芳

态势感知 网络攻防 8月日更

电商秒杀系统架构设计

华仔架构训练营

前端之数据结构(二)

Augus

数据结构 8月日更

异或位算法的高效玩法

陈皮的JavaLib

Java 面试 算法 8月日更

KIE(Knowledge Is Everything)

LeifChen

drools 8月日更 KIE 知识库

就这?腾讯云高工熬夜手写'Java微服务学习笔记'也就让我月薪涨3k

Java~~~

Java spring 面试 微服务 架构师

脚本测试服务器处理URL非法传参

liuzhen007

8月日更

架构实战营 模块四 作业

一雄

作业 架构实战营 模块四

架构实战营 - 第四模块作业

李东旭

「架构实战营」

15道常考SpringBoot面试题整理,字节跳动Java金三银四解析

欢喜学安卓

Java 程序员 面试 后端

手把手教你,从零开始搭建Spring Cloud Alibaba!这份笔记太牛了

Java~~~

Java 面试 微服务 Spring Cloud 架构师

前方高能预警!阿里大佬出品“Spring实战学习笔记”震撼来袭

Java~~~

Java spring 面试 微服务 架构师

毕业设计

方堃

圆梦腾讯之后,我收集整理了这份“2021春招常见面试真题汇总”

Java~~~

Java 面试 微服务 多线程 架构师

JVM实践--实例解析字节码常量池

JVM 常量池 字节码

2020年五面蚂蚁,中级Java开发人员要掌握的技术

欢喜学安卓

Java 程序员 面试 后端

Java程序员3个月从月薪6k涨到15k,你知道我是怎么过来的吗?

Java~~~

Java 面试 微服务 JVM 架构师

【Vue2.x 源码学习】第二十六篇 - 数组依赖收集的实现

Brave

源码 vue2 8月日更

秒杀系统架构设计,教你画好架构图!

九灵

Java 架构 面试 服务端

16条代码规范建议,快看看自己做到没,Java从基础到高级知识点汇总

欢喜学安卓

Java 程序员 面试 后端

配置ssh免密码登录

一个大红包

8月日更

Java并发--synchronized原子性的底层机制剖析

JVM 并发 线程安全

我从外包辞职了,10000小时后,走进字节跳动拿了offer

Java~~~

Java 面试 微服务 JVM 架构师

涨薪50%,从小厂逆袭,坐上美团L8技术专家(面经+心得)

Java~~~

Java 面试 微服务 JVM 架构师

Linux之lsof命令

入门小站

Linux

深入学习 CSS 中的伪元素 ::before 和 ::after

devpoint

CSS css3 CSS语法 8月日更

Java程序员3个月从月薪6k涨到15k,你知道我是怎么过来的吗?

Java~~~

Java 面试 多线程 高并发 架构师

🏆(不要错过!)【CI/CD技术专题】「Jenkins实战系列」(3)Jenkinsfile+DockerFile实现自动部署

洛神灬殇

Docker Dockerfile jenkins 8月日更

【前端 · 面试 】HTTP 总结(五)—— GET 和 POST

编程三昧

面试 大前端 HTTP 8月日更 get和post

15-Java枚举类详解【干货笔记,2021年Java高级面试题

欢喜学安卓

Java 程序员 面试 后端

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