Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
GuoYongfeng opened this issue Jun 16, 2016 · 0 comments
Open

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

GuoYongfeng opened this issue Jun 16, 2016 · 0 comments

Comments

@GuoYongfeng
Copy link
Member

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

提供以下技术内容:

  • 完整技术选型的脚手架
  • 培训
  • 开发方式指导
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant