当前位置:主页»新闻动态»公司新闻»

大型 Web 应用插件化架构探索-软件资讯_爱游戏

文章出处:爱游戏 人气:发表时间:2021-05-20 01:52
本文摘要:简介:随着Web技术的逐步成熟,越来越多的应用往往会复杂化,例如阿里巴巴云和其他巨大的控制台项目,每个产品都有自己的团队负责维护和迭代。无论是维护还是释放,随着业务量的增加,控制成本逐渐无法控制。 在此背景下,微前应用诞生,微终在ALI中具有许多成熟的实践,这里将不会描述。本文使用微观领先的主(热)来探索其他Web应用程序所面临的类似问题。前言随着Web技术的逐步成熟,越来越多的应用往往会复杂化,例如阿里巴巴云和其他巨型控制台项目,每个产品都有自己的团队负责维护和迭代。

爱游戏

简介:随着Web技术的逐步成熟,越来越多的应用往往会复杂化,例如阿里巴巴云和其他巨大的控制台项目,每个产品都有自己的团队负责维护和迭代。无论是维护还是释放,随着业务量的增加,控制成本逐渐无法控制。

在此背景下,微前应用诞生,微终在ALI中具有许多成熟的实践,这里将不会描述。本文使用微观领先的主(热)来探索其他Web应用程序所面临的类似问题。前言随着Web技术的逐步成熟,越来越多的应用往往会复杂化,例如阿里巴巴云和其他巨型控制台项目,每个产品都有自己的团队负责维护和迭代。无论是维护还是释放,随着业务量的增加,控制成本逐渐无法控制。

在此背景下,微前应用诞生,微终在ALI中具有许多成熟的实践,这里将不会描述。本文使用微端到底漆来探索其他Web应用程序所面临的类似问题。在现代文本编辑之后,2018年后,原子通常会带来荒谬,往往会带来原子。

在第一端工程师编辑器的情况下,Atom的状态非常尴尬,性能与电子的VS代码峰值相同,插入件,去年的插件总数,已超过1W标记,并早期原子 释放超过一年仍保持在8k +。与Microsoft的官方领导的LSP / DAP和其他重量级协议相结合,目前已长期以来一直受到VS代码的维权作为网/电子技术基准的雕像。讨论互联网上的原子越来越大,始终离不开性能。

原子确实太慢,原因在很大程度上被其插件架构拖动了。特别是,原子对UI级别开放以定制插件开发人员,即插即用的质量是均匀的,并且UI带来的安全危险完全打开到插件。即使是FileTree,Tab列等的重要组件,也可以通过插件实现主接口的设置视图。

相比之下,VS代码已关闭,VS代码插件在Node.js中完全运行,并且只有UI的可自定义只被包装为称为API的纯方法。另一方面,VS代码是相对封闭的插入UI方案,一些需要更强大的,无法满足,更多的插件开发人员启动魔法变化与底层甚至源代码进行自定义。例如,社区非常热的VS代码背景。

此插件通过在VS代码安装文件中强制CSS实现编辑器区域的背景图。另一个VSC网易音乐更具侵略性,因为VS代码包中的电子无法在WebView视图中播放音频视频,并使用此插件替换FFMPEG的动态链接库。这些插件不必对VS代码安装包造成一定程度的损坏,导致用户卸载重载。超过编辑 - 飞行马图形是一个在线协作UI设计工具,与跨平台的优势相比,与素描相比的实时合作,近年来逐渐受到UI设计师的青睐。

最近,Figma还正式推出了它的插件系统。作为Web应用程序,Figma的插件系统自然基于JavaScript,这降低了开发阈值。自去年6月以来,Figma官员宣布打开了插件系统测试,已经有了越来越多的Designner / Developer开发了300多个插件,包括图形资源,文件归档,甚至导入3D模型。

Figma的插件系统如何工作? 这是一个使用webpack构建的figma插件目录结构的类型签字+反应技术堆栈。package.json├ - src│├─code.ts││─徽标。ui.css││─;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;webpack.config.js包含一些 其Manifest.json文件中的简单信息。

{“name ”:“React Sample ”,“ID ”:“738168449509241862 ”,“API ”:“1.0.0 ”,“main ”:“dist / Code.js “,”UI “:”dist / ui.html “}可以看出,图形将插件分为两部分:min和ui,包含plugin实际的逻辑 运行时,UI它是一个插件HTML片段。也就是说,UI与逻辑分开。安装彩色搜索插件后,可以发现页面结构可以在iframe中加载Main中的JS文件,并有一个详细说明主条目的沙箱机制。

UI中的HTML最终包装在IF帧中,它将有效避免插件UI层CSS代码导致全局风格污染。第一个插件的一章运行的简单介绍了其插件系统运行机制。

简单地,Figma为插件的逻辑图层创建了一个最小的JavaScript执行环境,它在浏览器主线程上运行。在此执行环境中,插件代码无法访问全局API的一些浏览器,这不会影响代码级别中的图形本身。UI层只有一个HTML代码片段,在激活插件后渲染到弹出窗口中。

其插件的沙箱机制在图的官方博客中详细解释。起初他们尝试了Iframe的方案,浏览器附带沙箱环境。从iframe包装插件代码,这将确保插件代码不能在图形主界面的一楼中运行,而仅打开插件呼叫的白色列表API。

乍一看,它似乎解决了这个问题,因为iframe中的插件脚本只能通过postmessage与主线程通信,这导致插件中的任何API调用被打包为异步异步/等待方法,这是 无疑是Figma的目标用户非专业前端开发人员的设计师是不友好的。其次,对于更大的文档,后期通信序列化性能太高,甚至导致内存泄漏。Figma Team选择返回浏览器主线程,但直接在主线程中运行第三方代码,该代码是不可避免的。最后,他们在第2阶段发现了一个领域API。

域旨在创建一个域对象,该对象隔离第三方JavaScript范围的API。设g =窗口; // @ @ r(); // root realmlet f = r.evaluate(“(”)“); f()=== 17 // truereflect.getprototypeof(f)=== g.function.prototype // falsereflect.getprototypeof(f )=== r.globalthis.function.prototype // true值得注意的是,领域还可以使用JavaScript当前现有的特征。要实现,即使用代理。

这也是一个流行的沙箱方案。const whitelist = {windiw:未定义,文档:未定义,控制台:window.console,}; const scopeproxy = new代理(白名单,{get(target,prop){if(prop in target){return target [prop]} return undefined}}; with(scopeproxy){eval(“console.log(document.write )“)//无法读取未定义的属性”write“!eval(”console.log('hello')“)// hello}前一篇文章中的图形插件包含域的范围 结束,可以在这个示例代码中被认为是一个白名单API。毕竟,它保持在白色,列表比黑名单更简洁。但实际上,由于JavaScript Prototype继承,插件仍然可以通过Console.log方法的原型链访问外部对象,并且理想的解决方案是将这些白名单API封装一次,从而完全 隔离原型链。

const safelogfactory = realm.evaluate(函数safelogfactory(unsaceelog){return函数safelog(... args){unsaceelog(... args);}}); const safelog = safelogfaactory(const); const superintrinsics = safelog instanceof功能; constindintrinsics = realm.evaluate(`log instanceof函数`,{log:safelog}); if(!suildintrinsics ||内intrinsics)投掷新的typeerror(); realm.evaluate(`log(“hello worls! ”)`,{log:safelog};显然,这个操作的工作非常复杂,很容易为每个白色名单造成错误。那么如何建立一个安全且易于添加API的沙箱环境? Duktape是由C ++实现的嵌入式设备的JavaScript解释器,它不支持任何浏览器API,自然可以编译为WebasseMbly,而Flobma团队将Duktape嵌入到RealM上下文中,并且该插件最终将通过DukTap解释执行。这可以安全地实现插件的API,并且不要担心插件将通过原型链进行外部访问。这是一种编程模式,称为膜图案,用于在程序中实现具有子组件(在广义上)的中间层的层。

简单地,它是一个代理(代理),为对象创建一个可控访问边界,以便它可以将脚本的一部分保持为第三方,而屏蔽部分不想被访问。关于膜细节,您可以在JavaScript中使用膜和膜查看隔离应用程序子组件。这是最终的Figma插入方案,它在主线程中运行,不需要担心由后期通信引起的运输损失。

许多Duktape解释了执行的消耗,但受益于Webasembly的优秀表现,这部分消费并不大。此外,Figma还保留了原始的IF帧,允许插件创建IFRame本身并插入任何JavaScript,同时它可以与沙箱中的JavaScript脚本进行通信。鱼和熊掌如何? 我们总结了在Web应用程序中运行第三方代码的需求及其自定义控件,这对开头提到的顶端架构具有一些问题。

在一定程度上,javascript代码沙箱隔离机制,应用程序体具有一定的控制第三方代码(或子应用程序),第三方代码风格不会在社区中生成CSS污染JavaScript Sandbox obistation 是一个遗失的话题。最简单的iframe标签sandbox属性已经可以从javascript运行时隔离。

社区更受诸多语言特征(API等等,API)掩码(或代理)窗口更受欢迎。文档和其他全局对象,建立一个白色列表机制,以覆盖可能危险操作的API(例如ALI Cloud Console OS - 浏览器VM)。

还有一个JavaScript解释器试图嵌入平台,所有第三方代码都由嵌入式翻译来执行。并使用Web工作者进行DOM Diff计算,并将计算结果发送回UI线程以呈现。该计划于2013年实施。本文普遍受欢迎。

在web工作者运行的测试库。近年来,还有项目 - 工作者 - DEMO,React-Worker-DOM等,基于Web工作者的DOM渲染器尝试尝试将DOM API尝试到Worker线程。谷歌AMP项目是Web工作者方面的DOM API,Web工作者方面仍然存在一些问题。

它取得了一定的结果。这些解决方案广泛用于各种插件架构中的Web应用程序,但大多数情况都是通过情况,每个解决方案都有自己的成本和命中。CSS范围CSS样式隔离方案,如上面的图形使用IFME渲染插件界面,牺牲了一部分性能,以便相对完善的样式隔离。

在现代前端工程系统中,CSS模块可以在类模块的翻译中实现,这更依赖于插件代码编译过程。越新的潮流是使用Web组件的shadow dom,用web组件包装插件元素,而阴影根的外部样式不能在内部工作,阴影根内的样式不能影响外部。最后,本文列出了当前编辑器,设计工具和社区惯例的解决方案所面临的一些问题。

无论是爱和仇恨Iframe,还是领域,Web工作者,影子DOM等,现在每个程序都有自己的优势和缺陷。但是,随着Web应用程序的复杂性,插件的需求逐渐附加到主要的标准化组织。

下一篇文章将侧重于凯特安ID中的插件架构的探索和实践,包括JavaScript Sandbox,CSS隔离,Web工作者等。作者:开发人员Assistant_LS本文是阿里巴巴云原始内容,不允许重新打印。


本文关键词:爱游戏

本文来源:爱游戏-www.borneoline.com

同类文章排行

最新资讯文章