2016/05/19 - 工作整体规划

[GuoYongfeng]

YYFED 2016-05-19工作日志

公司新成立了iUAP前端技术部（FED），主要职责有：负责公司前端框架开发、提供工具库集合、提供解决方案、开发公司前端框架、提供模板库资源、承担公司前端技术交流和培训的工作、提供精选优站资源。

期望很高，理想很丰满，现实很骨感，因为目前我们只有六个小伙伴，其中只有四个能投入进来，而且每个人都还担着其他的事情，所以大概每人只有一半的时间投入上来。换句话，我们综合起来只有2个人的全职时间投入到基础框架的开发上。

1. 说一下背景

成立新部门的初衷是公司在前端工程化能力上的缺失，无论是什么样的描述，我觉得工程化能力是最好的体现。那么最直观的体现是什么呢，领导看到各条业务线都在吭哧吭哧的做网站，写页面，而且都还那么丑。这还能忍？所以这也是我们当前需要聚焦并且紧急的问题。

2. UI 框架

基于这样的背景，首先需要考虑做的事情，便是在UI框架上去进行聚焦突破。也许大家会想，这还不好办，那么多开源而且炫酷叼炸天的UI框架和模板库，拿来用就是了，何苦去造那么多轮子。真实的需求是：

• 开源的框架在交互体验上和企业开发是有差距的，无法完全满足需求
• 插件的缺失，有很多开源插件，但是企业级应用，比较复杂，开源产品无法满足
• 业务线缺前端，直接用开源的，出了问题，或是功能缺少，不好玩，用公司的还可以有我们这群苦逼的人给一起出谋划策。

其实UI框架是一个事，但不是全部，只能说是冰山一角，比如整套前端解决方案、工具库等等。那就是后面的事情了，这里暂且按下不表。

3. 讨论分析

方向有了，目标也有了，具体如何从天上到地下，把想法都落实下来，这个是关键。我是深有体会的，当初一个项目，也是基于各个领导的规划和讨论，最终写代码的只有我一个，哎，说多了都是泪。

那么具体应该怎么搞呢。

• 全局的 CSS 样式
• 框架基础样式：CSS组件
• 扩展的CSS样式板
• 框架核心插件，以及扩展插件
• 提供开发实例，能够快速生成代码，并看到效果
• 提供框架定制能力，能够让开发者只打包需要的资源
• 图标字体库，也是必不可少的
• 网站博客，做了那些工作，具有什么功能，不用网站展示出来，那别人也不知道怎么用怎么玩啊
• 基于框架产出默认的几套主题风格，日韩的，欧美的，地中海的...噢，不对，是适用于不用产品的网站配色风格
• 优站精选，不来几套基于UI框架好用的示例站点，也看不出你做的多棒啊，所以，还得搞几套，秀一下，也许别人正好想用呢

多的也不说了，满满当当的也罗列了不少。等等，让我安静待会，有点懵，这么些东西，别说要多么高的技术，就是体力活，也得安排出个轻重缓急，日期排程。

4. 如何推进

这些需求，完成了，对产品开发可以快速提高开发速度。具体如何推进，需要结合当前现状。

4.1 关于UUI

UUI是一个轻量级企业应用前端控件库，分为UI插件和基于ko封装的biz两大部分，致力于解决前端复杂交互问题。

公司内外有大小20多个团队在使用，帮助企业在前端开发上解决了很多问题，但同时也暴露出了不少问题，比如样式不够美观大气、不够开放自由、文档不够齐全等，那么，这些都是需要解决的。

同时，我们接下来要做的UI框架也是基于此来演进的。

4.2 UUI中UI部分和Datatable相分离

UI是交互和样式部分，Datatable是基于knockout这个古老的MVVM前端框架上的再一次封装，解决企业应用中复杂数据传输的问题，同时也提供了很多基于ko的插件。

而在新的规划中，我希望能够更加纯粹一点。UI框架应该是独立的，Datatable部分也应该是独立的，单独或组合提供出去使用都可以。

但基于时间成本和维护成本，暂时先不考虑分离，原来的继续维护，UI框架部分重新建一个Git仓库进行开发和维护。

4.3 技术元素

主意已决定了，在Github上新建一个Git库进行开发和维护。那么接下来的事情是，如何进行这个UI框架的搭建。

技术元素：

• sass 用sass来作为css预处理器
• gulp 使用gulp作为构建工具，打包
• es6 支持使用es6语法写插件
• babel 解析es6语法
• jekyll 网站博客的建设
• eslint代码规范
• bower包的发布
• npm包依赖管理和包的发布
• 测试：浏览器兼容性测试和覆盖测试
• autoplefixer 浏览器后缀

4.4 目录规划和构建

项目目录：

• js
  • a.js
• scss
  • a.scss
  • extend
    • b.scss
• plugin
  • a
    • a.js
    • s.scss
• docs
  • dist
  • jekyll资源
• fonts
  • a.eot
• dist
  • js
  • css
    • u.css 全局样式和组件样式
    • u.extend.css CSS样式板
  • fonts

4.5 需要开展的工作

• 全局css样式
  • 定义能力：布局，栅格，响应式，排版，工具类....
  • 参考bootstrap
  • 补充哪些
• 核心css样式板（加强）u.css 框架基础样式
  • bootstrap样式参考
  • 能力不够
  • css3 动画 animate
• 扩展css样式板：u-extend.css 扩展的css样式板
  • 提供使用的组件样式，能力增强
• 核心插件
  • 哪些放在核心插件：20个（原生js）
  • image 图标字体
  • 图标字体（推动）：炫酷网站，颜色色彩，图标，动画，合理的布局
• 扩展插件plugin
  • grid
  • tree
  • 第三方
  • 打包，调用到，concat，u.date();
  • ue效果

4.6 开发实例

详细的开发实例，所见即所得，基于提供的UI框架快速生成页面模板

4.7 定制能力

样式和插件可定制打包

4.8 网站博客

使用jekyll搭建，需要整合现有的资源

5. 具体任务分配

• 王皓：50%时间，工作内容： 样式板
• 郭永峰：60%时间，工作内容： 搭建
• 丁锐锋：50%时间，工作内容： 迁移，文档和ppt
• 田孝启：不定，数字营销
• 刘月凯：50%时间，工作内容： grid控件，拆分，ue，共享服务
• 刘认华：30号投入

6. 脚手架

脚手架提供基础UI框架、NODE开发服务、模块化方案、框架（React，ko，vue，angular，backbone），iuap-init

提供以下技术内容：

• 完整技术选型的脚手架
• 培训
• 开发方式指导