机票H5单页项目实践讲述.PDFVIP

机票H5 单页项目实践 郑开文 H5 单页体验 目录 •项目概况 • 技术选型项目搭建 • 遇到的问题 •数据分享 • 总结规划 PART ONE 项目概况 项目概况 2014年 2015年 2016年 • 体验粗糙，功能简单 • 2015.08 超越online 成为机 • 日均航段突破3万 票第二大流量 技术层面 • 旧系统已运营3年多，经手多个团队，历史代码冗余，结构混乱 • 旧系统仍采用传统的.NET Web 开发模式，整个架构过重，无法 满足产品快速迭代业务需求 • .NET后续扩展和维护难度高 • 跟上脚步，学习新技术 产品层面 • 旧系统国内经过两次改版、国际经过一次改版，国内国际差异较 大，体验不一致 • 多页模式中白屏问题导致用户体验不佳 • 期望为用户提供app-like的体验 • 趁机提需求呗 PART TWO 技术选型项目搭建 挖掘机哪家强？ Vue VS React Why Vue • size(Vue:40Kb,react:60Kb) • api(通俗易懂) • learn(学习成本，简单上手) • animation(动画支持) • doc(文档手册) Swift 组成 PM2+Node+Express redis abtest cdn seo fplus front end Vue LizardLite webpack vuex component router model store user dev server 主要工作 • 模块化 ES6 import + System.import + vue单文件组件 • 单页路由控制 vue-router + async component • 服务器通信 同构的businiess model （LizardLite.AbsModel） • 状态管理 vuex store • 代码质量 standardjs + eslint + mocha + chai • 构建发布 webpack dev server + npm scripts + html-minifier/uglify js/clean css Router Store 乘机人信息、联系 LocalStorage 手机等 Store SessionStorage 保险勾选状态等 Model 数据转换 mapping l 缓存 store e d o M 日志上报