Alice 现状和未来

[fool2fish]

alice 是什么

• 样式库构建规范
• 一套通用组件库
• 样式命名规范
• aliceui.com
• 支付宝样式解决方案
• root名

alice 在支付宝的应用

1. 使用 mvn 作为包管理工具，用 pom 文件来打依赖。

   $ mvn clean deploy
   

   通用组件存放在 01.Arale 目录下，有 release 过程，开发版本用 SNAPSHOT 后缀进行标注。

   $ mvn release:prepare
   $ mvn release:perform
   

2. 在 arale.alipay.im 上进行展现。目前拥有一套包括通用规范和各产品线的共90多个通用组件。

   当初搭建的思路是建造一个资源池，所有的组件都往里丢，采用 使用/贡献 的方式进行运作。

   

3. 一站式样式库 alice.style，目标是从资源池中挑选所用的组件生成一个页面进行展示，用作预览和产品线实际使用，基于 arale.alipay.im ，形似 bootstrap。

通用规范样式库：http://d.*.*.net/al/demo/alice.style.general-1.0-SNAPSHOT.html
个人应用样式库：http://.dev..net/al/demo/alice.style.apps-1.3-SNAPSHOT.html
商业产品样式库：http://tools.*.im/SH_F2E_Lab/index.html

alice 运作中碰到的问题

1. alice 样式规范难以落地，很多组件不是严格的模块化。组件数量多但良莠不齐，缺乏维护。
2. mvn 方案速度慢，和新 arale 解决方案不统一。急需基于新 arale 和 spm 的样式方案。
3. alice.style 逐渐沦为纯展现型样式库。公用的样式库无人敢升级维护。
4. 一站式的样式库是刚需，自动化组装各组件到页面的方案是解决问题的关键。
5. 组件带来的合并图片问题。（提供了生成 peaches 的土壤）
6. 样式组件版本升级问题，高版本必须兼容低版本的 dom 结构，否则无法升级。

---

新东西

1. spm 和 seajs 带来的样式内联方式，使得 arale 模块依赖样式模块成为可能。

   #581

2. retina 屏幕。

3. iconfont：http://site.alipay.im/rei

   

4. css3，动画和各种漂亮的显示效果。

5. 蔡伦开发的 peaches，大大减轻拼图的工作量。

未来：新 alice

定位：Arale 的子集，支付宝的样式解决方案。

1. 定义样式模块构建规范。
2. 定义模块化样式书写规范，包括 alice 命名规范。
3. 定义样式模块之间如何依赖，JS模块如何引用样式，样式使用何种方式引用。
4. 提供一套支付宝通用的标准 alice 命名规范的精选样式模块。
5. 提供模块集成为展现型样式库的方案。

特性

1. 模块化，不依赖 base.css，模块和模块间不互相影响。
2. 为现代浏览器设计，渐进增强，视觉上使用纯色和简单渐变效果。
3. 基于 iconfont 和 CSS3，无样式图片。
4. 使用 spm 管理打包样式，alice 作为统一的 root，进入 cmd 生态圈进行维护。集成peaches。
5. 精选集，控制数量和通用性。各产品线的组件使用各自的 root 进行管理。

计划

1. 现在已经整理了几个基础组件（base、animate、grid、iconfont、button），等 iconfont 图标完善后，完成模块整理工作。2013Q1

   

2. 完成 spm 打包依赖管理的功能。2013Q2

3. 建立新的 aliceui.com 网站，包括规范、模块集、一站式样式库。2013Q2

4. 在项目中有实际使用案例。2013Q2

[ze00ro]

你好

为什么都不可以访问哪?

2013/1/29 fool2fish notifications@github.com

https://a248.e.akamai.net/camo.github.com/84efce5f35db074d94f6a5bdcdb819fbef860fed/687474703a2f2f616c69636575692e636f6d2f77702d636f6e74656e742f7468656d65732f616c69636575692f696d616765732f6c6f676f2e706e67
alice 是什么

• 样式库构建规范
• 一套通用组件库
• 样式命名规范
• aliceui.com
• 支付宝样式解决方案
• root名

alice 在支付宝的应用

使用 mvn 作为包管理工具，用 pom 文件来打依赖。

$ mvn clean deploy

通用组件存放在 01.Arale 目录下，有 release 过程，开发版本用 SNAPSHOT 后缀进行标注。

$ mvn release:prepare
$ mvn release:perform

2.

在 arale.alipay.imhttp://arale.alipay.im/projects?category=framework&parentId=alice-components-parent上进行展现。目前拥有一套包括通用规范和各产品线的共90多个通用组件。

当初搭建的思路是建造一个资源池，所有的组件都往里丢，采用 使用/贡献 的方式进行运作。

https://i.alipayobjects.com/e/201301/22zhoNnUA8.png
3.

一站式样式库 alice.style，目标是从资源池中挑选所用的组件生成一个页面进行展示，用作预览和产品线实际使用，基于
arale.alipay.im ，形似 bootstrap。

通用规范样式库：
http://dev.assets.alipay.net/al/demo/alice.style.general-1.0-SNAPSHOT.html
个人应用样式库：
http://assets.dev.alipay.net/al/demo/alice.style.apps-1.3-SNAPSHOT.html
商业产品样式库：http://tools.alipay.im/alipay_SH_F2E_Lab/index.html
alice 运作中碰到的问题

alice 样式规范难以落地，很多组件不是严格的模块化。组件数量多但良莠不齐，缺乏维护。
2.

mvn 方案速度慢，和新 arale 解决方案不统一。急需基于新 arale 和 spm 的样式方案。
3.

alice.style 逐渐沦为纯展现型样式库。公用的样式库无人敢升级维护。
4.

一站式的样式库是刚需，自动化组装各组件到页面的方案是解决问题的关键。
5.

组件带来的合并图片问题。（提供了生成 peaches 的土壤）
6.

样式组件版本升级问题，高版本必须兼容低版本的 dom 结构，否则无法升级。

---

新东西

spm 和 seajs 带来的样式内联方式，使得 arale 模块依赖样式模块成为可能。

#581 spmjs/spm#581
2.

retina 屏幕。
3.

iconfont：http://site.alipay.im/rei

https://i.alipayobjects.com/e/201212/1rlk9BYn5x.png
4.

css3，动画和各种漂亮的显示效果。
5.

蔡伦开发的 peaches，大大减轻拼图的工作量。

未来：新 alice 定位：Arale 的子集，支付宝的样式解决方案。

1. 定义样式模块构建规范。
2. 定义模块化样式书写规范，包括 alice 命名规范。
3. 定义样式模块之间如何依赖，JS模块如何引用样式，样式使用何种方式引用。
4. 提供一套支付宝通用的标准 alice 命名规范的精选样式模块。
5. 提供模块集成为展现型样式库的方案。

特性

1. 模块化，不依赖 base.css，模块和模块间不互相影响。
2. 为现代浏览器设计，渐进增强，视觉上使用纯色和简单渐变效果。
3. 基于 iconfont 和 CSS3，无样式图片。
4. 使用 spm 管理打包样式，alice 作为统一的 root，进入 cmd 生态圈进行维护。集成peaches。
5. 精选集，控制数量和通用性。各产品线的组件使用各自的 root 进行管理。

计划

现在已经整理了几个基础组件（base、animate、grid、iconfont、button），等 iconfont
图标完善后，完成模块整理工作。2013Q1

https://i.alipayobjects.com/e/201301/230VKsHwOj.png
2.

完成 spm 打包依赖管理的功能。2013Q2
3.

建立新的 aliceui.com 网站，包括规范、模块集、一站式样式库。2013Q2
4.

在项目中有实际使用案例。2013Q2

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/230.

[popomore]

@ze00ro 有些是内网地址

[q13]

哦，原来是这个样子滴