Apr18

百度前端的七巧板 - infoQ百度技术沙龙第13期

上周六做为infoQ百度技术沙龙讲师,给大家分享了《百度前端的七巧板——Tangram JavaScript库》,讲的是在设计Tangram的时候,我们有过什么样的考虑,采用了怎样的解决方案,契合这次沙龙的主题:“JavaScript库的设计与应用”的前半部份。但是由于这个slide是第一次讲,准备不够充分,比预计时间提前十分钟就结束了。其实还有很多重要的细节和有意思的东西没有介绍到。 不过,来参加沙龙的朋友中,很少有在企业和团队中做通用技术的研发工作的人。后面QA时间,我收到了20多张提问纸条,大多是问一些技术细节和功能实现方面的问题。而事实上,做为一个开源项目,所有的细节都可以在 http://tangram.baidu.com里面找到。 大家可以去SlideShare上看到我的slide。 如果大家还有什么问题或看法,欢迎在下面留言讨论。

trackback Tags: 评论 (1)

Dec30

Tangram base的设计

上周,Tangram开源了,有不少人阅读代码后提出了自己的意见、对Tangram的期望,很感谢这些热心的朋友的支持。与此同时,也看到了一些对Tangram设计的疑问,因此想在周末写一篇小文来介绍一下,但由于恰逢年底,小组内一堆杂务要处理,加上咳嗽很严重,一直延到今天。 这篇文章主要是介绍在设计Tangram base时的一些考虑,以及它适合做什么事情。 细粒度拆分 只要看过Tangram文档或源码的人,一定会发现它拆分粒度够细。将每一个方法独立写成一个文件,用户可以通过codeSearch功能,获得定制好的Tangram,然后基于其开发业务组件和逻辑。 在百度来说,前端工程师一直都很关注流量和加载性能,按需定制可以最大程度的节省带宽、加快页面的加载和渲染速度。 同时,Tangram面向的产品跨度广,从搜索产品到社区产品到商业产品,而工程师动手能力都很强,他们能很轻松的基于Tangram提供的方法集,封装一套适合自身的产品底层库。不同的产品间,封装差异会比较大,但是由于底层库相同,交流沟通并不会产生多少障碍。 静态方法,无污染 除了拆分粒度细之外,Tangram库名字空间整洁,所有的方法都是静态的,对环境的污染很小。 一些老产品中总会有一些匪夷所思的代码,而且很多产品中会有第三方代码,为了最大程度的避免冲突,Tangram仅仅暴露一个变量到window中,而且用户完全可以把Tangram放在闭包中使用,这样即使页面上出现两套Tangram,他们之间也不会有任何冲突。 复杂的RIA产品需要一个开发框架时,采用Tangram做为底层库也很有优势,因为Tangram是静态的,封装和覆写都特别方便,如果发现在自身环境下对某些函数有特别的要求(如性能要求极高),可以自己编写新函数覆盖。函数是独立而且简单的,开发人员也可以很方便的对其进行研究,了解原理进而更好的使用。 上面的内容大多是Tangram针对产品团队的设计考虑。而对于一些通用组件开发者,基于Tangram开发时,他可以把Tangram当成一个函数库,仅仅选取他需要的部分,保证组件的体积精简。同时不必遵从Tangram的封装方式,可以按照需求,封装出自己想要的风格然后release。事实上,百度内已经有数个以这种形式存在的通用组件。 改进 Tangram一直都在不断升级,简单说说我们接下来要做的几件事情: 修改库中方法调用的baidu前缀,这件事情会在下一个版本发布前完成,做为一个开源项目,它应该保持自己的独立性。 Codesearch整理后,也会被随项目放出,这样大家就能很方便的在本地选取任何一个版本的Tangram代码了。 我们会不断整理Tangram的设计细节,开发规范,工具,并且在社区和blog中发布,即使你不使用Tangram,也完全可以参考和借鉴我们的思路。 不断完善文档,良好的中文文档也是Tangram相对其他库的一个优势。 开发团队 在百度FE,我所在的小组叫通用组,负责包括Tangram的所有前端通用技术的研发与维护,同时所有工程师都可以贡献代码到Tangram。开源后,Tangram将接受更多来自百度外部的意见,保持Tangram的不断成长和进步。欢迎前往github的network(base,component)围观我们每天的代码提交,更欢迎各位fork,为Tangram提供想法和代码。 小结 这篇文章介绍了Tangram base的设计特点、面向场景等,做为一个基础函数库,Tangram base很容易被封装和扩展,你也可以很放心的使用它来进行二次开发。 Tangram的文档地址是:http://tangram.baidu.com,你也可以前往github查看最新的源码(dev分支) 我们基于Tangram base,开发了Tangram component,这是一个组件库,它的设计考虑和实现方式就更复杂了,这部分留到下次再谈,如果你关注Tangram,欢迎订阅我的blog。

trackback Tags: 评论 (4)

Dec22

Tangram Javascript库开源了!

2009年中旬,百度FE开始系统的整理、开发自己的前端Javascript库,从那时起,Tangram这个名字就诞生了。Tangram是”七巧板”的英译,选择Tangram(读音)这个词,是因为我们希望这个JS库,能够自由地组合到各个百度产品中,通过七巧板搭建出丰富多彩的产品。 经过一年多发展,Tangram已成为公司内部产品基础库的首选,近20个百度产品线已经使用Tangram做为其基础库。而现在,我们决定将这个库开放给整个互联网,希望有更多的团队和公司,通过Tangram搭建出自己的产品。 一方面我们希望能通过开源,促进国内前端开发者的交流,更重要的是促进自身的成长和进步。业界通行的开源工作方式的引入,来自社区的反馈和建议,都能让Tangram更加完善。 Tangram的目标是成为一个容易扩展和定制,集轻巧和高效于一体的团队开发类库。 我们的开源站点是:http://tangram.baidu.com,上面有详细的文档,DEMO和一些使用介绍。Tangram遵循BSD授权协议,你可以自由的使用他。你可以从github上获取源码,欢迎大家fork和pull。 Tangram分作两个部分,Base和Component。 Base部分是基础工具库,现包含200多个基础接口,已经发展到1.3版本,代码比较稳定; Component部分是组件库,现包含20余个UI组件和行为,19个动画特效,现在仍处于beta状态,我们还在不断的完善和改进。 除了现在已经开源的Base和Component部分,Tangram系还包括Tangram Editor(在线编辑器)和Tangram Mobile(移动设备库)。Tangram Editor已经使用在百度空间、百度百科、百度经验等产品线上,正在不断完善;Tangram Mobile集合了百度产品移动版的通用功能,仍在紧张开发中。这两部分我们也会择期开源,希望百度FE能不断地给中国前端带来惊喜。

trackback Tags: 评论 (3)