THX from Alimama FE

THX 是一系列前端开发相关的工具,框架和类库的集合,也是阿里集团阿里妈妈、一淘网和无线产品线 以及小微金服部分前端工程师的技术组织名称。THX站点目前由阿里妈妈用户体验中心的前端团队运维。 THX是Thanks的缩写,感谢所有促成THX的力量。

我们:

  • 专注应用层前端技术产品的研发和积累.即基于各种前端基础类库及模块加载器之上,让各类前端架构,模式和新技术,新理念充分整合落地于复杂商业产品的生产实践中,带来效率,质量和用户体验上的实质提升。
  • 并行开发多项前端技术产品和开源项目,如:Magix、Brix、Crox、RAP、MockJS、IconFont等等。确保每个产品都经过线上商业产品的检验,并通过本站点不断提供高质量文档。
  • 逐步促成各技术产品的充分协调,形成覆盖前端的开发、测试、运维的全链路解决方案。

Products

Magix是用于构建大型富交互单页应用的前端MVC框架。它提供了基于树状结构的视图系统,页面初始渲染以及URL变动都将从根View开始逐层进行,这使得局部变化井然有序;同时遵循Magix的开发约定可以很好的控制页面内存的使用,避免单页系统常见却致命的内存泄露和过度膨胀等问题。

Brix是写组件的一组约定,在其下可以:将HTML结构生成与交互事件绑定分离,让其分别在前后渲染的多种前端架构中通用;促成填空式的组件开发,让代码即是文档;解决组件批量渲染、绑定和嵌套问题,引入局部刷新或双向绑定都将更容易。而本质上Brix是对innerHTML方法的扩展,对HTML原标签系统的扩充。

Crox是一个由JavaScript语言实现的高性能跨语言模板引擎。Crox模板可以直接在JavaScript环境中使用,也可以翻译成PHP、JSP等其他编程语言的可执行方法或翻译成Velocity、Smarty等其他模板引擎的源模板,Crox通过独有的“模板逻辑直译”技术保证翻译后的结果在各种环境下都具备最佳执行效率。

RAP是数据接口管理工具。在开发时前端将请求转至RAP,由RAP提供模拟数据;而后端使用RAP测试接口的正确性。这样RAP就成为了开发过程中的强依赖,进而确保接口文档的实时正确性。RAP采用JSON-Schema规范描述HTTP请求及其JSON响应。除了异步的HTTP接口,输出给模板系统的任何数据结构都将被RAP管理起来。

一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。

一款小巧轻便的数据双向绑定库,旨在帮助前端攻城师快速开发Web组件和应用。支持所有主流浏览器(包括 IE6),可以单独使用,也可以方便地集成到第三方框架。目前基于模板引擎 Handlebars.js 实现,可扩展支持其他基于语法树的模板引擎。

Cube是一套跨终端、响应式、低设计耦合的CSS解决方案。包含全新基础重置、布局、按钮、工具类、字体图标等相对独立的模块。此外还提供专为中文排版优化的type.css,可以快速美化文章的排版。

Canvax采用Flash AS3相同的模式来对绘制元素进行抽象,采用OO的模式方便的管理绘制在Canvas上面的每个元素和进行事件绑定和检测触发,解决Canvas开发面对无状态的Canvas画布无从下手的尴尬;独树一帜的心跳包主动渲染机制(不再需要定时器轮询)提升渲染性能;在IE9-中使用FlashCanvas解决Canvas的兼容问题。

Chartx是一套数据可视化解决方案,其底层基于自有canvas渲染引擎Canvax(canvax的基于心跳包的主动渲染机制在图表这样并不需要高帧率的场景中有着非常良好的性能)。能自动适配AMD,CMD,KISSY的模块加载环境。能自动适配到ie6,7,8等低端浏览器。能适配PC,Mobile终端。

Pat 是一个轻量级的指令型模板解决方案,如果你用过 Angular 或者 Vue,应该对指令(directive)这个概念不会陌生,Pat 在 Vue 的基础上结合指令与虚拟 DOM 的优势,实现了一套专注于模板问题的解决方案。

本工具旨在基于脚手架快速创建magix项目,包含初始化,代理服务器,RAP同步本地models,daily部署,cdn发布,view自动生成等

Brix Animation是一个旨在解构复杂序列化动画顺序执行的轻量级框架,通过节点上的bx-animation钩子配置来顺序执行指定动效,配合定义好的css3动效class,以及自定义执行的动画脚本,几乎可以实现所有复杂动效。

Services

Iconfont是最大的矢量图标库,最强的图标管理平台。提供从AI文件导入,图标挑选,到项目维度自定义图标库生成,字体库下载或直接上传CDN,到图标字体库的页面中引入、样式定义等功能的一站式矢量图标字体库解决方案。在阿里妈妈、淘宝、天猫等站点广泛应用。

魔贴,是阿里妈妈推出的一款全息化商品创意工具。通过制作个性化装饰标签、声音植入、多图动态展现等多种创意模式,魔贴让宝贝得到全面、多方位地呈现,也为商家提供多样化的推广选择,从而更好满足消费者对于商品的了解、促成购买。

创意中心是互动广告牌制作平台。它提供了一系列创意模板,而模板又是由多数据源数据获取、点击跟踪、无阻加载、动画效果等多个小型模块组合而成。最终产生的广告牌中内置了小型模块加载器和模板引擎,这样每个创意不会有外部依赖进而保障了创意展现的速度和稳定性。网上所见的淘系广告牌多数出自此平台。

BannerMaker创建于08年初,是使用Flash技术搭建的Banner制作工具,可以生产动态的广告Banner、淘宝店招牌、互动商品展示区块、互动广告牌等,也可以产出静态图片。BannerMaker聚集了上千名专业的设计师,通过接入旺铺装修等产品,设计可以快速产生价值。

Demo中心是针对阿里集团的产品团队(更准确地说,是面向UED团队)设计的协作平台,专注于产品设计原型的交付和版本控制,减少项目过程中的沟通成本。目前集团多个事业部都在日常工作中使用demo中心管理产品设计。

DTime是工作日志记录平台,在DTime中首要建立的是一个完善的任务体系,这样才能让每项时间消耗都能找到相应的埋单者;只要团队成员坚持使用DTime,就可以方便的从团队、项目等各个维度统计资源消耗情况,定期生成个人、团队和项目报告。DTime适合百人左右的团队,可以部署多个实例为不同团队服务。

MUX Library是MUX部门图书和设备借阅站点,暂不对外。

Projects

KsLite是10年开发的一个短小精悍的模块加载器,特别适合在广告投放、广告创意等第三方应用中使用。它的种子文件本身支持异步加载,并可以被多次加载。而其本身已具有现代模块加载器必备的异步的多层依赖处理机制和较完善的包管理及打包机制。

Cupid是个Feed聚合工具,支持RSS2与Atom,是Venus的替代,是 http://planet.alibaba-inc.com背后的服务程序。

ImageGrabber是一个使用Canvas技术实现的PS钢笔与魔棒工具。

Darko是个站点生成工具,与Jekyll兼容,在不便安装Jekyll的平台上,可以试试Darko。

THX 应用范例

仅限阿里内网访问:

淘宝直通车系统原型

淘宝直通车系统(移动版)原型

Tanx DMP 数据营销系统原型

Adhoc 大数据查询系统原型

钻石展位系统原型

钻石展位营销平台原型

智无线原型

资质系统原型

海淘系统原型

钻石展位 4.5 系统原型

阿里妈妈营销平台

淘宝直通车营销平台