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

@GuoYongfeng 2016-06-16 01:42:05发表于 iuap-design/blog

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

提供以下技术内容:

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