AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

去哪儿SPA(面向服务)分享 by 蔡欢@Qunar

发布者 dber
发布于 1450400350418  浏览 2627 关键词 前端 
分享到

第1页

去哪⼉儿SPA分享

蔡欢 Qunar



第2页

NativeApp

NativeApp的局限 ✓ 分平台开发维护,成本⾼高 ✓ 部署成本⾼高



第3页

WebApp解决⽅方案选型 ✓ 传统page2page ✓ pjax(pushState Ajax) ✓ SPA(SinglePageApplication)



第4页

SPA的优势:

✓ 实施部署、跨平台 ✓ 前端模板渲染,前后端完全分离,数据量

最⼩小 ✓ 视图切换和url路由 ✓ 最贴近于Native应⽤用的交互体验



第5页

HTML



REST APIs



数据



Native App



数据



Middleware



Lib(s) SPA



数据



Data Store(s)



Desktop App



第6页

设计思路

✓ 模块化开发 ✓ 视图切换、URL路由 ✓ 模板前端渲染 ✓ 响应式 ✓ 浏览器及App内做功能扩充和体验差异 ✓ 开发环境及构建⼯工具





第7页

core



Compo nents



Module s



Web App



common



flight



hotel



user



jquery.ui.qunar.citypicker jquery.ui.qunar.datepicker

jquery.ui.qunar.dialog jquery.ui.qunar.message



$.location



utils



$.addPressClass



background



$.spin



$.cookie



jQuery UI jQuery



Backbone.js underscore



Require-text requirejs



Gruntjs



模块化 组件化



⾃自动化 本地化



⻚页⾯面化



⼀一体化



webserver livereload autoprefixer

jshint uglify cssmin mocha htmlmin less imageembed urlrewrite imagemin

r.js …



第8页

模块化开发-Requirejs

✓ 编译时资源打包 ✓ 实现同步、异步加载⾃自由切换 ✓ js依赖处理 ✓ 代码的拆分及复⽤用、按需加载



第9页

example





第10页

视图切换、URL路由

✓ Quickling技术切换视图 ✓ ⼆二次开发backbonejs的路由完成url hash

对querystring 参数的⽀支持 ✓ ⽀支持视图定位,url分享,⽀支持浏览器前

进后退、⻚页⾯面刷新等



第11页

example ✓ http://pad.qunar.com/ ✓ http://pad.qunar.com/#hotel

✓ http://pad.qunar.com/#hotel/list/city=%E5%8C%97%E4%BA %AC&cityUrl=beijing_city&keyword=&fromDate=2014-12-18&t oDate=2014-12-19&sortType=&orderBy=&location=



第12页

模板前端渲染-underscore

✓ 单⻚页的渲染都在前端完成,需要⼀一套简单⾼高 效的前端模版

✓ 使⽤用underscore的template,简洁、⾼高效 ✓ 采⽤用inline compress,将模版⽂文件编译成单

个模块化的js⽂文件 ✓ 模块可以和其他静态资源⼀一起做CDN部署



第13页

响应式设计-iconfont

✓ iconfont⽮矢量字体处理icon ✓ CSS控制图形外观 ✓ 兼容移动设备屏幕不同devicePixelRatio

展⽰示差异



第14页

example





第15页

开发构建环境-gruntjs

✓ 构建⼯工具,同时提供⼀一套⽅方便的开发环境 ✓ 插件式易于扩展,丰富的第三⽅方插件 ✓ ⾃自⼰己开发插件



第16页

less&autoprefixer&cssmin&uglify等

✓ Less将CSS赋予了动态语⾔言特性 ✓ CSS预编译,⾃自动补全浏览器⼚厂商前缀 ✓ ⾃自动内联图标⽂文件到CSS⽂文件中,减少

HTTP请求



第17页

实现插件完成数据mock

输⼊入⺴⽹网址 connect 匹配URL



Require本地⽂文件



代理到其他地址



不代理



第18页

✓ 对浏览器及App内WebView做体验差异化 ✓ 当运⾏行在App内WebView时候,通过

Native组件对WebApp做能⼒力扩充。



第19页

问题

✓ 针对搜索引擎的SEO

✓ http://pad.qunar.com/#hotel/list/city=%E5%8C%97%E4%BA %AC&cityUrl=beijing_city&keyword=&fromDate=2014-12-18&toDat e=2014-12-19&sortType=&orderBy=&location=

✓ http://pad.qunar.com/#!hotel/list/city=%E5%8C%97%E4%BA %AC&cityUrl=beijing_city&keyword=&fromDate=2014-12-18&toDat e=2014-12-19&sortType=&orderBy=&location=



第20页

问题 ✓ 复杂的交互体验仍然有性能瓶颈 ✓ 设备差异导致体验很难⼀一致



第21页

谢谢



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。