大家好，我叫海瑞菌，从事web前端开发工作4年，期间在外包公司，签约咪咕数媒旗下开发咪咕项目，以咪咕阅读为主。一个手机阅读软件。
咪咕阅读APP界面，app采取webview开发模式（前端H5页面+app功能壳（B+C））。部分页面及功能采用原生开发，内容展示采用前端页面
前2年项目使用的是freemarker+css+es5+zepto(jquery)的开发模式开发的。freemarker是一种jsp模板引擎，使用碎片化开发思维，用于输出服务器响应数据转化成html，本地写好的freemarker代码复制到UES编辑系统中运行，拖入碎片进行搭建页面。页面渲染采用css+es5+zepto开发模式。
编写碎片代码，采用freemarker模板引擎+html
管理线上页面、碎片、样式、脚本、风格，采用编辑管理系统
开发样式脚本采用本地开发完传入编辑系统，并预览
本地调试线上页面采用fiddler代理调试工具
直至开发调试完成，测试通过，运营通知上线。
后2年项目采用react(es5版)+sass+webpack+gulp进行重构和新需求开发，多页开发模式，页面首屏数据是放在全局变量pageData中的json，一个页面中有多个组件，组件初始化时从props中获取到当前组件的首屏数据。前端渲染数据为视图。更新的地方使用ajax请求后台微服务接口拿到json，使用setState方式更新视图。经常使用的react生命周期：getInitialState（组件初始化）、componentWillMount（组件渲染前）、componentDidMount（组件第一次渲染后）、componentWillReceiveProps（组件接收到新属性时）、render（渲染），其他较少使用。
页面间跳转使用a链接或使用客户端打开新webview，之所以多页面是为了老架构向新架构过度，不影响原先页面。
项目react本地开发环境
tomcat+gulp本地服务器
react（es5）开发模式
sass预处理样式
cmrsdk为jsBridge对象。可调取app原生方法，进行app交互
使用假数据在本地开发调试组件。本地服务器编译查看本地效果
组件通过svn上传至测试或线上服务器，由服务器编译后，通过编辑系统管理线上页面。以及测试线上页面。完成发布。
使用fiddler抓包工具进行页面代理，调试线上页面。
作者：海瑞菌·博客
随时随地看视频
