去哪⼉儿SPA分享

蔡欢 Qunar

NativeApp

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

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

SPA的优势：

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

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

HTML



REST APIs



数据



Native App



数据



Middleware



Lib(s) SPA



数据



Data Store(s)



Desktop App

设计思路

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

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 …

模块化开发-Requirejs

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

example

视图切换、URL路由

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

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

进后退、⻚页⾯面刷新等

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=

模板前端渲染-underscore

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

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

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

响应式设计-iconfont

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

展⽰示差异

example

开发构建环境-gruntjs

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

less&autoprefixer&cssmin&uglify等

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

HTTP请求

实现插件完成数据mock

输⼊入⺴⽹网址 connect 匹配URL



Require本地⽂文件



代理到其他地址



不代理

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

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

问题

✓ 针对搜索引擎的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=

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

谢谢