【转】组件化的Web王国

本文由 埃姆杰 翻译。未经许可,禁止转载! 英文出处:Future Insights。

内容提要

以群单身组件构建应用程序的想法并无殊。Web
Component的产出,是重复回忆基于组件的应用程序开发模式之好机会。我们可以由这过程被受益,了解什么利用现有技术形成目标,并且以未来做出自己的前端Web应用。

嘿是组件?

软件开发是一个语义丰富(术语通常持续一个意思)的领域。很肯定,这里的“组件”是一个很泛的称,所以产生必要指明我们怀念使发挥的,在前者Web应用之言语环境遭受的意思。

前者Web应用中之零部件,是指部分计划也通用性的,用来构建较大型应用程序的软件,这些零件有多表现形式。它好是起UI(用户界面)的,也足以是用作
“服务”的纯逻辑代码。

坐有视觉及之表现形式,UI组件更便于了解。UI组件简单的事例包括按钮、输入框和文本域。不论是汉堡包状的菜单按钮(无论你是不是喜欢)、标签页、日历、选项菜单或者所展现就所得之有余文本编辑器则是一对进一步高档的事例。

提供服务类型的机件可能会见叫人口为难明白,这种类型的例子包括超过浏览器的AJAX支持,日志记录或提供某种数据持久化的法力。

因组件开发,最重点的哪怕是组件可以据此来整合任何零件,而丰厚文本编辑器就是独好好之例子。它是由按钮、下拉菜单和片可视化组件等整合。另一个例是HTML5达到的video元素。它一样富含按钮,也还要涵盖一个可知从视频数据流渲染内容的要素。

干什么而构建组件?

既然如此现在就了解组件的意,就看用组件的主意构建前端采用的便宜。

模块

卿或许听说过 “组件是先天性模块”的传道。好吧,感谢其,我们以要诠释这里的术语!

您恐怕会见当“组件”的传教更为符合用来叙述UI,而“模块”更符合描述提供服务之功用逻辑。而于我来说,模块和零部件意思相近,都提供团体、聚焦和包裹,是同有意义单位相关的。

高内聚

再者是一个软件工程的高频词! 咱拿相关的有些功效集团以一道,把一切封装起来,而在组件的例子中,就可能是连锁的意义逻辑和静态资源:JavaScript、HTML、CSS以及图像等。这就是咱所说的内聚。

这种做法用吃组件更便于保障,并且这么做下,组件的可靠性也以加强。同时,它吧能给组件的效能明确,增大组件重用的可能。

可重用

您瞧底以身作则组件,尤其是Web
Component,更体贴而选用的题材。功能肯定,实现清晰,API易于理解。自然就能推进组件复用。通过构建而选用组件,我们不但保持了 DRY(不要还过去轮子)原则,还拿走了对应的益处。

此处要提拔: 不要过分尝试构建而选用组件。你再度当关注应用程序上所急需之那些特定部分。如果后相应要求出现,或者零部件的确到了不过选用的境界,就花费一点分外时间让组件重用。事实上,开发者都爱去创造而选用功能块(库、组件、模块、插件等),做得最好早以见面被您后来痛苦不堪。所以,吸取基于组件开发的外利益,并且接受不是持有组件都能用的事实。

可互换

一个成效明确好组件的API能于人擅自地改变其内部的功效实现。要是程序中的组件是松耦合的,那实在可以就此一个零部件轻易地更迭另一个零件,只要依照平等之 API/接口/约定。

设若你用GoInstant提供的实时效益劳务组件,那他们当即周关闭服务如此的新闻会影响至公。然而,只要提供了一如既往之多寡同步API,你为可自行构建以一个 FirebaseComponent 组件或者 PubNubComponent 组件。

可组合

前为讨论了,基于组件的架让组件组合成新组件更加便于。这样的统筹于组件更加小心,也于任何零件中构建和露的效用又好利用。

无是为程序上加效果,还是用来做完的次第,更加复杂的力量为克使法炮制。这就算是这种措施的第一利益。

是否出必要把具备的东西转换成为组件,事实上在你协调。没有任何理由让您的主次由 你自己 的零部件组合成你最惊叹的功能 ,乃至 最花哨的功能。而这些零部件又转成任何零件。如果您于这法子中获了便宜,就想尽地去坚持其。然而如果专注的凡,不要为此平等的法门将事情变得复杂,你并不需要过分关注如何为组件重用。而是使关注呈现程序的功能。

现在即使从头构建组件

在 Caplin
Systems 构建基于组件的于来应用程序时,我使用了几条原则以及施行。这些规则由 BladeRunnerJS(BRJS) 开源工具集支撑。它为叫作”BladeRunnerJS”
是坐我们以次第功能都封装在如作 Blades 的事物被。Blade是可以以有应用被选用的职能特色,但是未得以于程序中用。当效
真的
变得更为通用的时段,我们将相应的定义移到仓库文件被,供各个程序中用。特定应用中的组件(blade)和我们先后中的通用组件可以采用,我们而找到最好满足急需的任何库和框架。

那么,现在什么库与框架能够帮忙我们构建组件为?

每当支配构建以时应采取何种技术时,只需要看流行的 TodoMVC 网站就可以看到大方不过供应选择的前端库和框架。你也许会认为任何一样种方案还能够因此来构建基于组件的应用程序。然而,他们中的组成部分方案内置了对组件的支撑。其中于著名的凡AngularJS、Ember
和 React。

组件间是哪些通信的?

每当深刻示例之前起必不可少简单地关系组件间通信的问题。如果组件之间是“独立”、“模块化”的,他们以是何等相互通信的为?

最为明白的答案就是让组件间互相引用并经她们之间的API交互。这样做的题材即使在,这种做法会被组件相互依赖。短期内或者还吓,一段时间以后,你以窜程序的当儿程序会失控,修改一个组件就会见对任何一个零部件有大的影响。决定移除一个非可知带来预期价值组件可能会见吃你的应用程序停止工作,因为其背后会生出频繁单零件依赖让她。

这儿,解决方案是供松耦合的,让组件之间充分少要几不知道彼此的方案。组件并无直接开立其他零件,在她们需要通信的时,他们通过“接口/约定”或者经过 “服务”。我们在构建BRJS程序时考虑了森这些地方的物,并且使用 ServiceRegistry 访问用于组件间通讯的劳动或者是Web
API这般的资源。Angular和Ember采用了劳务和凭借注入解决当下类似题目。

演示组件my-avatar

为了显得我们怎样用这些库以及框架构建最中心的组件,我们树立了一个带有UI,用于取回跟出示用户头像的简单示例。在或的状况下,该零件会产生 my-avatar 标签,会打以下简单单特性被赢得头像:

  • service 允许设置一个劳务。例如 twitter 或者 facebook
  • username 用于博回该用户名相对应之头像

AngularJS

AngularJS 可能是今日用于构建程序太风靡的前端解决方案了。作为创作者的Google,重新思考HTML,考虑怎样还发明,满足如今Web开发之要。

Angular中好利用打定义指令概念组件。之后,你得行使 HTML
标记声明起定义组件。

查阅代码演示: http://jsbin.com/lacog/2/edit

以此例子展示了使Angular指令的大概程度。值scope 定义了打
 my-avatar 元素中拿走,并且之后用来构建相应的img标签以及渲染成用户头像的性质。

Ember

框架和库底争执旷日持久,总的来说框架是挟持你仍某种方式开业务,所以她是邪恶之。很强烈,Angular是独框架,而Ember的撰稿人,Yehuda
Katz和Tom
Dale啊死愿意把Ember看作框架。

Ember 有对她叫组件的内建支持。Ember
Components背后的见解是尽量的向Web
Components看并,当浏览器支持允许时,就得死便利地搬到Web
Components中。

翻代码演示: http://jsbin.com/nawuwi/4/edit

点的例子中行使了 handlebars 做模板,所以元素的概念不是千篇一律种语法。

React

React 虽然是只新人,但是可已经发生多之维护者。它由Facebook开发,并且就全面用于Instagram的UI和片Facebook的UI。

采用React构建组件的引进方法是采取叫做 JSX 的东西来定义其。这是平等种植“推荐以React上用的JavaScript语法转换”。请不要因此分心。他们已经于文档中指出,这个想法就是用来帮衬您当JavaScript中形容来HTML标记的。

自家非是说您连无可以直接在HTML中上加标签,而必须下JSX创建好的机件。但是,只要您定义了一个零件,你虽可以动用此组件创造其他零件。

查看代码演示: http://jsbin.com/qigoz/5/edit

从而,组件使用的宣示语法需要相应的HTML元素和对 React.RenderComponent 的调用。

未来:Web Component和其他

Web
Component才是前景!正而名字所代表的那么,他们许将带来好拿效能封装成组件的浏览器原生支持。

自己以简单展示Web
Component并且演示我们本足怎么行使其。更加深刻的始末请参考本文末尾的 “外部资源” 一节。

她们提供的功能包括:

自打定义元素

咱们以点关注之是因此Angular、Ember和React构建 my-avatar 的例证。可能的状况下,这样的章程以因页面及要模板上长的自定义元素表示。Web
Component包括经过于定义元素得的原生支持
– 绝对是Web Component标准的着力有。

概念新元素,包括走访元素生命周期的局部事件如何时创建(createdCallback)、何时添加于DOM树上(attachedCallback)、何时从DOM树上分离(detachedCallback),何时元素属性改变(attributeChangedCallback(attrName, oldVal, newVal))。

自从定义元素的一个重要的部分即使是出力量由原始元素扩展,因而获得原有元素相应的功力。示例中我们扩张了 <img>元素 。

终极,我们所描写的代码中,自定义元素正在以倾向去做的就是是以复杂的事物抽象化,让用户关注为单个组件有的值,从而用来构建更加丰富的机能。

Shadow DOM

尚记iframe们也?我们尚于动其,是坐他俩会管组件和控件的JavaScript和CSS不见面影响页面。 Shadow
DOM 也能提供这样的护卫,并且没有iframe带来的负担。正式的说教是:

Shadow
DOM的计划性是当shadow根下隐藏DOM子树从而提供包装机制。它提供了成立与保DOM树之间的效应界限,以及让这些树提供相互的意义,从而在DOM树上提供了再度好之法力封装。

HTML导入

咱们抬高日子先就是好导入JavaScript和CSS了。 HTML导入功能提供了从另外HTML文档中导入和起用HTML文档的力量。这种简单性同时意味着可以好便利地用一些零件构建另一部分零件。

终极,这样的格式很漂亮,适合不过选用组件,并且可就此而顶爱的保险管理解决方案公布(例如: bower、 npm 或者 Component)。

模板

咱饱受之成百上千总人口既以像handlebars、mustache或者underscore.js中的模板这样的化解方案(就如我们当地方的Ember示例中因故的同一)。Web
Component通过 template元素 提供了模版的原生支持。

原生模板被您得声明分类为“隐藏DOM”但是解析成HTML的符片段。他们于页面加载时并未用处,但是好当运作时实例化。他们可
被摸到 ,但是在插入活动的DOM树前不会见加载任何有关资源。

Platform.js

不过,就比如每次提到新特色一样,我们不克确定浏览器是否支持这些特色。

图片 1

直至2014年6月27日,Web Component 的浏览器支持情况

平等,我们为能够通过一些神奇之匹配代码,开始使用一些Web
Component所提供的职能。

图片 2

发出矣兼容库的Web Component支持情况

吓信息是有限独极先进的浏览器厂商Google和Mozilla正在大力完善兼容库
,帮助我们下Web Component。

以下示例展示下platform.js后我们可什么定义作为img元素扩展的my-avatar元素。最精的凡它能用到原生img元素的享有力量。

翻开代码演示: http://jsbin.com/pihuz/4/edit

点击 HTML5 Rocks Custom Elements
tutorial 以查看创建于定义元素的还多信息。

注:如果你针对platform.js感兴趣,也得看看 bosonic。

原生技术之支撑目的就被我们提供相应的构建基础。所以Web
Component并无是仓与框架的季信号。

Polymer

Polymer 是演示构建基于原生Web
Component功能的顶尖示例。它提供了挑的体制用来创造于定义之Polymer元素,并且提供了不少主干的UI组件,让你可以创造和谐之应用程序。

图片 3

下面你得看 my-avatar 元素的粗略创建过程,同时我们啊收获了想只要之标记。

查代码演示: http://jsbin.com/gukoku/2/edit

Google正以竭力推动Polymer。请查看 Polymer getting started
guide 查看更多示例。

X-Tag和Brick

Mozilla开发了好的自定义元素
兼容库,叫做 X-Tag。X-Tag是一个也启用Web
Component进行多起兼容的堆栈,并将提供对Web Component的共同体支持。

以下就是利用X-Tag的 my-avatar 自定义组件,与标准文档十分像样:

查代码演示:http://jsbin.com/wexiz/2/edit

Mozilla同时还创立了一个叫 Brick 的堆栈,其中包X-Tag,提供“一组用来便宜快捷构建Web应用程序的UI组件”,使用与Google的Polymer相似的办法。

总结

动用基于组件的架构构建应用程序有成千上万益处,你会从现有的框架中学至,也克以构建前端Web应用程序时由引进的Web
Component中上学及。

这场组件化Web王国的旅程,让咱们以面临框架和工具的选时犹豫不决不决。但是,Web
Component会是终极的点灯!

Web
Component会提供构建应用程序的原生统一之法子
。现有的框架很有或会见转而下Web
Component或者证明什么跟它们一同下。Ember的策略是被迁移到Web
Component更加惠及,而Facebook的React则是现身说法整合的好例子,已经起一个 ReactiveElements 演示其了。因为Angular和Polymer都是Google的类别,他们生有或会见走至一同。

标资源(英文)

  • Eric Bidelman – Google I/O 2014 – Polymer and Web Components change
    everything you know about Web
    development
  • Ryan Seddon – Web Directions – Web Components, The Future of Web
    Development
  • Addy Osmani – LXJS – Componentize The Web: Back To The
    Browser!
  • WebComponents.org a place to discuss and evolve web component
    best-practices

相关文章