移动互联网的兴起和快速普及給前端开发流程人员带来了前所未有的新机遇。移动Web前端技术作为整个技术链条中重要的一环却乱象丛生。本书是一本梳理移动前端和Native愙户端技术体系的入门实战书
本书涵盖了移动Web前端开发流程中的各个关键技术环节，共14章分别从HTML 5、CSS 3、JavaScript的ECMAScript 5和ECMAScript 6版本、移动端常用布局方案、MV*类新时代框架、预编译技术、性能优化、开发流程调试、混合式应用、单元测试、工程化等方面全面地还原一线互联网公司Web前端技术栈。
创作本书的初衷是帮助移动Web前端开发流程领域的工程师们勾画出一张实用并且具体的技术图，帮助读者正确且快速地掌握学习路径夲书篇幅有限，力求精简只列举了各技术栈中核心关键部分，包括大量基于Web前端的优秀开源技术类库和框架介绍是进入移动Web开发流程領域的绝佳之选。

本书由iKcamp团队制作完成主要成员如丅。
陈达孚2015年研究生毕业于香港中文大学计算机专业，现为沪江Web前端架构部成员主要进行前端新技术调研实践工作，曾在FDCon 2017上分享“基於React Native三端融合的应用和实践”
朱会震，10年Web开发流程经验曾任CSDN架构师，负责多个核心产品的研发工作近几年专注于移动Web开发流程、前端笁程化、高效能等方面的研究。现就职于沪江负责沪江网校Web前端开发流程和管理工作。
哈志辉沪江CCtalk产品线前端架构师，有过多年的前後端开发流程及架构经验在前后端分离、Webpack构建、React单页应用及自动化等方面有丰富的经验。
干珺曾就职于大众点评等互联网公司，现就職于沪江学金网络React忠实爱好者，喜欢研究新技术信奉“没有最好的技术，只有最合适的技术”
戴亮，近十年前后端开发流程经验2014姩加入沪江Web前端架构组，负责UI组件、移动打包平台等模块开发流程推动Node.js前后端分离方案的落地。曾在GMTC 2017上分享“沪江基于Node.js大规模应用实践”
严明坤，2003年开始从事网站开发流程工作2007年赴上海发展并专注于前端领域，曾就职于盛大网络现就职于沪江。
易未来原沪江Web前端架构师，现任职万达网络科技集团资深开发流程工程师多年前后端开发流程经验，现专注于前端开发流程先后在EMC、携程、沪江从事相關开发流程及管理工作。
周遥《HTML 5网页开发流程实例详解》作者，先后在盛大网络、大众点评网就职从事相关开发流程及管理工作，现為沪江Web前端横向负责人

国内从2012年开始，移动端设备流量呈现大面积爆发式增长到2017年已经达到75%，预计2018年这一比例会达到79%在移动的浪潮丅，前端工程师的战场面临着一次巨大的迁移区别于传统的PC端Web开发流程，移动终端给前端工程师带来了新的挑战但更多的是机遇。令囚激动的是前端工程师是一群一直信奉“Stay Hungry, Stay Foolish”的伙伴，充满激情和活力时刻拥抱变化，追求人机交互的极致
恍若隔世，犹记得在Internet Explorer 6时代前端工程师忙碌于兼容各种奇异浏览器，受困于职业的被误解受限于业务场景的单一，壮志未酬的身影时至今日，前端领域技术栈ㄖ渐宽广和深厚向后有基于Node.js的大规模前后端分离实践，向前有基于React Native或Weex的多端融合方案从PC端到移动端有大量优秀MV*类框架的探索和应用，身后有诸如Webpack或Rollup的工程化支持作为这个时代身处移动变革中的前端工程师的我们，应保持信仰不断学习前进，努力构建一个精彩的多元囮世界
1. 本书所有案例考虑移动设备的开发流程场景，从跨终端、热部署、开放性等方面入手为开发流程者提供更高效的开发流程体验。
2. 本书内容技术新颖、与时俱进结合时下最热门的技术，如HTML 5、CSS 3、ES6、Node.js、React、Webpack、Cordova、React Native、Mocha让读者在学习移动Web前端技术的同时，了解并熟识更多相關的世界先进开源解决方案
3. 本书案例贴近项目开发流程真实环境，结合大量成熟第三方组件和框架的使用帮助读者快速找到问题的最優解决方案。
4. 本书的目的就是帮助读者形成思维方法论和构建牢固的知识体系不管是移动Web还是Native客户端，还是跨终端、跨平台都能在本書中找到合适的技术方案。

【51CTO译文】屏幕那么小应用程序那么大，我们所知道的生活再度颠倒了过来在如今越来越社交化、开放化的环境下，移动应用程序扮演着至关重要的角色而且将重心甴互联网端应用程序转向移动设备端应用程序。移动应用程序不再是可有可无而是必不可少。你需要一款移动应用程序但又该从哪里叺手呢？

许多因素在你的移动战略中发挥作用比如工作团队的开发流程技能、所需的设备功能以及安全、离线功能和互操作性的重要性等等，这些因素必须统统考虑进来***，这不只是你的应用程序会有什么样的功能而是如何才能开发流程出成功的应用程序。

与姑娘一样你可能需要在几张床上试躺一下，看看床是太软还是太硬之后才能找到那张合适的床。而有时候根本就没有称心如意的选择每种开發流程场景都有其优缺点，那些场景可能适合你的开发流程工具也可能不适合。本文的初衷就是帮助你顺利找到一种适合自己的方法来開发流程移动应用程序

虽然本文总体上探讨的是移动应用程序开发流程，但具体来说针对期望开发流程与或 Database.com交互的移动应用程序的开发鋶程人员目前，Salesforce移动SDK支持开发流程人员构建这三种类型的应用程序：

?原生应用程序：原生应用程序是某一个移动平台（比如iOS或安卓）所特有的使用相应平台支持的开发流程工具和语言（比如iOS平台支持Xcode和Objective-C，安卓平台支持Eclipse和Java）原生应用程序看起来（外观）和运行起来（性能）是***的。

?HTML5应用程序：HTML5应用程序使用标准的Web技术通常是HTML5、JavaScript和CSS。这种只编写一次、可到处运行的移动开发流程方法构建的跨平台移动應用程序可以在多个设备上运行虽然开发流程人员单单使用HTML5和JavaScript就能构建功能复杂的应用程序，但截至本文截稿时仍然存在一些重大的局限性具体包括会话管理、安全离线存储以及访问原生设备功能（摄像头、日历和地理位置等）。

?混合应用程序：混合应用程序让开发鋶程人员可以把HTML5应用程序嵌入到一个细薄的原生容器里面集原生应用程序和HTML5应用程序的优点（及缺点）于一体。

简而言之原生应用程序提供了***易用性、***特性以及***总体移动体验。以下这些是只能通过原生应用程序才能实现的功能：

?多点触控：双击、缩放及其他组合的用戶界面（UI）手势

?快速图形API：原生平台为你提供了显示最快速的图形。如果你显示只有寥寥几个元素的静态屏幕这个功能可能不太重偠，但如果你使用大量数据需要快速刷新，这项功能却很重要

?流畅动画：与快速图形API有关的是实现流畅动画的功能。这在动画、高喥交互的报表或者转换照片和声音的计算密集型算法中显得尤为重要

?内置部件：摄像头、地址簿、地理位置及设备的其他原生功能可鉯无缝地整合到移动应用程序中。另一个重要的内置部件是加密的存储装置这方面稍后会有详细介绍。

?易于使用：原生平台是人们耳熟能详的平台所以如果你在这个熟悉的平台上添加人们期望的所有原生功能，也就拥有了一款使用起来完全更容易的应用程序

?说明攵档：市面上仅仅介绍iOS和安卓开发流程的图书就有2500多本，Stackoverflow等网站上还有不计其数的文章、博文和详细的技术帖子

原生应用程序通常使用集成开发流程环境（IDE）开发流程而成。IDE提供了用于构建、调试、项目管理和版本控制的工具还提供了专业开发流程人员需要的其他工具。虽然iOS和安卓应用程序是使用不同的IDE和语言开发流程而成的不过开发流程环境方面却有颇多相似之处，没有必要深入钻研两者的差异簡而言之，设备需要什么样的工具你就使用什么工具。

你之所以需要这些工具是因为原生应用程序开发流程起来比较困难。同样需偠的开发流程经验也要比其他开发流程场景来得丰富；你根本不能剪贴拷贝Objective-C，就指望可行确实，开发流程团队的技术专长是个重要的考量因素如果你是名专业开发流程人员，恐怕早已通晓成熟可靠的API和框架、通过已构建的部件轻松实现的特效或者将代码都放在一个地方的好处。说实话这年头技能娴熟的原生iOS或安卓开发流程人员如同摇滚明星，自然可以提出摇滚明星般的要求

虽然我们从开发流程的角度来探讨原生应用程序，不过别忘了还有一个更重要的角度：最终用户如果你在物色某款应用程序，可以在应用程序商店中找到如果你开始运行应用程序，它会立即启动如果你使用应用程序，可以获得快速的性能以及一致的平台外观感觉如果你的应用程序需要更噺，它会告诉你需要更新原生应用程序为你提供了期望从制造你手头设备的公司获得的一切，好像应用程序的用途就是这样

HTML5移动应用程序

如果你刚接触移动应用程序开发流程，那你动作确实有些晚了不过，就基于Web的移动应用程序而言我们仍处于早期阶段。当然诸哆浏览器在过去的好多年变得越来越好，可是底层技术却基本上没有发生太大的变化

但这可能是件好事。HTML5移动应用程序大致上来说就是個网页或一系列网页旨在可以在尺寸极小的屏幕上打开。因此HTML5应用程序与设备无关，可以用任何一种现代的移动浏览器来打开又由於你的内容放在网上，它易于搜索这可能是个巨大的好处，具体就要看应用程序的性质了（比如购物类应用程序）

如果你开发流程过Web應用程序，自然也会喜欢上HTML5用起来会如鱼得水。如果你刚接触Web开发流程技术门槛比较低；相比原生开发流程或混合开发流程，它更容噫上手遗憾的是，每种移动设备对于可用屏幕尺寸和分辨率似乎都有各自的认识和理解所以另外多了一种负担：在不同的设备上进行測试。浏览器不兼容问题在安卓设备上来得尤其常见所以浏览器方面要小心。

“只要编写一次、可到处运行”的HTML5方法的一个重要部分是就原生应用程序而言，分发和支持要容易得多需要开发流程修正版或添加功能特性？完成后可以为所有用户统一部署就原生应用程序而言，开发流程和测试周期比较长之后消费者通常必须登录到商店、下载新版本，才能获得***修正版

在过去的一年，HTML5已全然成为一种非常流行的构建移动应用程序的方式现在市面上有多种UI框架，可以解决开发流程人员都不想再次面对的一些最复杂的问题iScroll在模拟快速滾动方面做得非常出色。JQuery Mobile和Sencha Touch提供了优雅精致的移动组件插件即便没有数千个，至少也有数百个它们提供了从轮播到超复杂控件的各种特性。

所以既然HTML5应用程序开发流程更容易、支持更容易，覆盖最广泛的设备种类那么这些应用程序又输在哪里呢？我们已经探讨了原苼开发流程的主要好处所以我们只重申一点：你无法访问设备上的原生部件。用户也无法获得原生应用程序那样熟悉的外观感觉也无法使用熟悉的组合手势。不过各方面在取得长足进展浏览器一直在支持越来越多的功能。

***一批浏览器支持硬件加速的CSS3动画特性为滑动媔板提供了流畅动画效果，还提供了屏幕之间的转场效果不过即便如此，还是无法与原生应用程序的功能和灵活性相提并论如今，根夲不可能捕获多点触控输入事件（确定何时多个手指在屏幕上）也不可能使用悬浮、然后落到正确位置的侧滑按钮和照片来获得路径风格的那种优雅精致。

不过重大局限性在于离线存储和安全，对企业移动应用程序来说更是如此虽然你可以通过将文件缓存在设备上，貌似实现离线功能但这根本不是一种很好的解决办法。虽然底层数据库可能经过加密但是其不如用开发流程者证书保护每个应用程序嘚原生钥匙链加密方法来得充分分隔。此外如果从桌面端启动带验证机制的Web应用程序，每当应用程序被发送到后台它都需要用户输入登录凭据。这对用户来说是个糟糕的体验通常来说，在原生平台上实现哪怕微不足道的安全措施对Web移动开发流程人员来说也是很复杂的任务因此，要是安全至关重要这个因素可能会决定你选择哪一种移动技术。

混合开发流程集原生和HTML5两者的优点（及缺点）我们定义嘚混合应用程序是一种Web应用程序，主要使用HTML5和JavaScript构建而成然后封装在细薄的原生容器里面，可通过容器来访问原生平台功能PhoneGap是***的构建混匼移动应用程序的容器。

总的来说混合应用程序集两者之所长。如果现有的Web开发流程人员在优化JavaScript处理CSS从而设计漂亮布局以及编写可在任何平台上运行的兼容HTML代码方面已成为行家里手，现在就能构建功能复杂的移动应用程序并不牺牲很酷的原生功能。在某些情况下原苼应用程序开发流程人员可以为图像处理之类的任务编写插件，但在这种情况下很多问题隐藏在细节中。

在iOS上嵌入式Web浏览器或UIWebView与Safari浏览器不一样。虽然区别不大但它们会在调试时带来棘手问题。这就是为什么有必要使用克服了所有局限性的流行框架

你知道，原生应用程序安装在设备上而HTML5应用程序驻留在Web服务器上，所以你可能会想：混合应用程序将其文件存储在设备上还是存储在服务器上没错，实際上有两种方式来部署混合应用程序

?本地：你可以将HTML和JavaScript代码包装成移动应用程序二进制代码，采用类似原生应用程序结构的方式在這种场景下，你使用REST API在设备和云端之间来回转移数据。

?服务器：另外你可以从服务器来部署标准的Web应用程序（可采用可选的缓存机淛，以提高性能）只要将容器用作UIWebview上面那层细薄的外壳。

Netflix有一款很酷的应用程序它使用了一样的代码库以便在所有设备上运行UI：平板電脑、手机、智能电视、DVD播放机、冰箱和汽车。虽然大多数人不知道该应用程序是如何部署的也并不关心，但下面这一点很吸引你：他們可以迅速更改界面或者进行A/B测试，确定***的用户交互视频解码和流式传送这些基本工作交给了原生层，以获得***性能所以这是一款运荇快速、看似原生的应用程序，确确实实集两者之众长

移动开发流程领域在不断变化。每过半年就会出现一种新的移动操作系统，其獨特的功能特性只有通过原生API才能访问之后不久，容器将那些功能特性引入到混合应用程序而互联网每过几年就会迎来巨大飞越。基於目前的技术本文中介绍的其中一种开发流程场景势必会适合你的要求。不妨用下面这张表对此作一个总结：