APP项目前台开发流程和协作

  • 时间:2018-10-10 23:30 作者:BM小伟 来源:BM小伟 阅读:118
  • 扫一扫,手机访问
摘要:整体把握,从设计稿入手——技术选型并行开发,从实现静态页面开始前台自动化前台js逻辑前后台集成小问题集合总结1.整体把握,从设计稿入手 —— 技术选型新项目到手,算是运气好,设计稿都已经一律完成了,40多个页面。不用担心边做边改的情况。能够提前确定重用性和少量规范。 项目主要要求: 1. 兼容PC、
  • 整体把握,从设计稿入手——技术选型
  • 并行开发,从实现静态页面开始
  • 前台自动化
  • 前台js逻辑
  • 前后台集成
  • 小问题集合
  • 总结

1.整体把握,从设计稿入手 —— 技术选型

新项目到手,算是运气好,设计稿都已经一律完成了,40多个页面。不用担心边做边改的情况。能够提前确定重用性和少量规范。

项目主要要求:

1. 兼容PC、微信、手机端,兼容现代浏览器,IE9+等

1. 嵌入到安卓、ios用户端和微信,要求页面独立

1. 使用node.js作为中间件

我负责前台页面和逻辑,node是另一个同事负责,前台架构由前台组长负责。

前台框架选型是开发前很重要的准备:

1. UI框架: 考虑过uikit、amazeUI、bootstrap,最终选择bootstrap+自己设置样式,主要起因公司其余项目也用的bootstrap。对我来说这三个框架我之前都没用过,作为一个一年经验的前台很可笑吧,其实我觉得也没啥,马上学便是。

1. js库: 考虑过jquery和zepto,最终选择jquery

1. 前台工具: gulp,browserify,bower,less

1. node用的express,node那个同事熟习

1. 前台模板用的swig

1. greensock动画库

2.并行开发,从实现静态页面开始

经过一个星期的前期准备和调研,前台基本的架子搭起来了,gulp、bower、 规范。js这一块自动化还未准备就绪,node后端的架子也在搭建。各方进度都有不一致的地方,考虑到并行开发,我建议我先做静态页面,node后端继续搞自己的,组长继续研究架子。

这样也好,专心写页面,能更专注的考虑html、css方面的东西。做完40个页面总共花了8的工作时间(未加班),我觉得还是比较快了。

css方面从bower里引入了bootstrap的部分less源码,再覆盖少量源码需要修改的样式,而后更多的是自己定义的样式。这个过程中已经考虑了很多重用、结构、命名问题,所以前期4天的时间我的进度都很慢,由于边写就边优化了,磨刀不误砍柴工,后4天就差不多完成了30个页面。以下是文件结构,按照bootstrap规范:

APP项目前台开发流程和协作


3.前台自动化

静态页面写完了,恰好组长架子、工作流这一块也搭好了,后端也做了少量功能等待集成。

组织js用到了browserify,前后台的js逻辑都能用到require了。

项目比较紧,组长这一个架子都还没彻底搞懂,还是挺复杂的,之后松点了将会好好看看。

自动化带来了更高效率的开发,监听、打包、压缩、iconFont、require等前期做好了配置,后面几乎就不需要改动了,对于前台来说,这些都是必不可少的技术要求。

APP项目前台开发流程和协作

4.前台JS逻辑

JS这一块,为每个页面配置了viewName,写在了base.html里,所有页面将继承base,这一块当然就是开始说的swig模板,相应文件夹的里所有html文件的js将会引入page->{% viewName %}->index.js。

browserify把少量依赖js挂到了全局,比方:jquery,jq-validate,jq-form,greensock。

特定的页面配置了pageConfig,用来获取少量数据。

触发事件都用事件代理商控制,组件间通信誉trigger触发器。

view里:html写好dom节点和动态参数,自动化工具会自动拼接节点生成swig前台模板,在其余js里面即可以require了。传入相应参数,即可以输出到页面了,如图自己设置popup组件和list组件很方便就能调用。

APP项目前台开发流程和协作

5.前后台集成

如同没啥好说的,后台准备好接口,前台调用就行了,某些问题上需要多点沟通,保证需求了解一致。

6.小问题集合

  1. gulp iconFont某些字体图标残缺,暂时icomoon手动升级
  2. 手机端 active 失效: -webkit-tap-highlight-color: transparent;
  3. html5 video audio很多事件现代浏览器支持不好,特别是手机端的浏览器,可以用这个地址做测试http://www.w3.org/2010/05/video/mediaevents.html

7.总结

  1. 整体把控、注重命名和重用,出现觉得不正当的和需要重用的就应该优化。
  2. 假如有条件先实现静态页面,再最后来写js逻辑,这样开发应该会更快。
  3. 由于多少自己也做过设计,也知道有时候作为前台感觉设计师不放过每一个细节让人觉得有点累,但是我们应该尊重设计师,不要有任何抱怨由于这是他们的责任,当然我说这一点并不是我之前抱怨他们了,而是每当很忙很累的时候,看着设计师提上来的UI问题时候,我这样激励过自己,觉得这一点还是挺好,让我更积极,希望大家能多换位思考。
  4. 前后台做好各自的单元测试,尽量保证自己代码问题会是最少的,这样集成成本就变得低了。
  5. 用到第三方框架和库且不熟习的情况下,遇到需求问题,应该首先从三方文档里找处理需求的办法,实在引入的三方库没有处理方案,再考虑自己处理。
  6. 前期商定好各种规范.
  • 全部评论(0)
最新发布的资讯信息
【系统环境|】淘码库,据消息称已被调查。淘码库源码网,已经无法访问!(2020-01-14 04:13)
【系统环境|服务器应用】Discuz隐藏后台admin.php网址修改路径(2019-12-16 16:48)
【系统环境|服务器应用】2020新网站如何让百度快速收录网站首页最新方法,亲测有用!免费(2019-12-16 16:46)
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
手机二维码手机访问领取大礼包
返回顶部