全球软件开发大会北京站2014

专题出品人:

专题日期:

星期六

随着移动时代的到来，前端面临的挑战越来越大。

从产品角度来看，前端朝着多终端的方向发展，需要考虑 PC、Pad、Phone、TV 等各种用户终端的交互实现。未来的产品形态，需要高性能跨终端的面向消费者的应用，也需要传统 PC 端面向企业的富应用。向上是移动开发，向下是企业应用，这两个方向都非常重要，对前端的挑战则各有不同。

从技术角度来看，前端不再局限于浏览器端的 Web 技术。随着 Node.js 技术的兴起，前端开发开始渗透到服务器端，将服务器端的 View、Controller 等层接管过来，成为全栈（Full-stack）开发。在全栈的模式下，前后端的分工协作更加合理高效。全栈之路究竟如何走，目前无论国内国外，都处于起步阶段，充满诱惑与陷阱。

本专题 2014 年核心关注点：

1）前端之跨终端，包括 Android 与 iOS 开发、以及 Web App 开发。
2）前端之全栈开发，包括 Node.js 技术、noBackend 等方向。
3）前端工程化，包括前端研发体系、质量保证等。

欢迎关注「移动时代的前端」专题。在移动的浪潮里，让我们一起更专业。

豌豆荚前端实践：从数据到用户体验苗梓铭是用户喜欢怎么用，而决定了设计，还是设计决定了用户的喜好与体验？在豌豆荚的实践中，我们认为这个问题有别的求解：是对数据的定义与抽象决定了界面的组织与交互，从而决定了用户的行为及其可能获得的体验。然而，从业务角度出发的数据系统设计庞大复杂，也从来没有划分清晰的、可被独立识别的领域。在这样的背景下，前端工程师能有何作为？豌豆荚如何填补具象的产品体验和抽象的业务数据之间存在鸿沟？豌豆荚的前端工程师又是如何将繁杂的数据整理建模，从而收获简单易懂的用户体验的呢？我们将结合豌豆荚不断创新的产品实践，介绍一路上的各种尝试和思考。设计 HTTP API，隔离数据业务的实现逻辑，减少关注点通过 MVC、分层设计拆解复杂度，从容面对业务膨胀对交互概念、数据业务进行二次抽象与建模，实现数据到用户体验的转化在多终端时代，这些尝试和思考仍具有普适性，能够跨越平台技术限制，帮助我们拓出了一条不太一样的道路。	跨端组件的实践王集鹄 NativeApp无疑具备了所有的端能力，但上线依赖各种分发渠道和市场审核，使用不同的语言环境开发，研发成本相对较高。 WebApp具有迭代方便的优势，包括开发迭代快、上线迭代快，但端能力受限于浏览器的实现程度。 HybridApp能扩展端能力，并保留了WebApp的开发迭代快优势，但产品上线也需要分发。 LightApp和HybirdApp很像，区别在于LightApp解决了分发渠道的问题，同时能够扩展端能力。在参与实际项目中，我们发现一种需求：期望研发的应用能在以WebApp、HybridApp、LightApp形式运行，在具备端扩展能力的环境中用户可以获得更好的体验。受Web响应式设计的启发，我们把能够自动响应端能力的组件，抽象为一个跨端组件。本次分享包括：跨端组件概念介绍；跨端组件架构相关的设计、开发和调试；产品案例讲解；围绕移动应用开发的趋势和大家做一些探讨。
跨越不可能：让WebApp如Native般顺滑 Andrew Betts The FT web app, along with many other HTML5 websites, blurs the boundaries between apps and websites, and opens a debate that still rages about what it means to build using web technologies today. For newspapers, this stuff matters. The FT is 125 years old this year, and to ensure we’re still going strong at 250, we need to fundamentally change the way we distribute our journalism. We need to invest in technologies that will stand the test of time, and create user experiences as good as reading a physical paper. So our aim is not just to create an efficient and powerful delivery channel for our own content, but also to protect and nurture the development and maturity of the web platform. Right now creating high quality user experiences in HTML5 is very hard, and to get to where we are today we need a huge bundle of hacks and extreme techniques, many of which I’ll cover in the session. In the future we hope these rough edges will get smoothed, in the same way that print production has evolved over a century to be the incredible logistical miracle it is today. Hopefully, the web won’t take that long.	Cardkit & DOMO UI - 移动时代技术与设计的十字路口蒙晨,yangyang 设计与技术的碰撞，是互联网永恒的话题。当我们走到交汇的十字路口，一切将变的不同，因为没有独立于技术而存在的设计，反之亦然。如果说桌面web时代如此，那么移动时代，就更需要设计与技术的高效融合。如何高效配合，卓有成效的执行，取得好的结果，正是我们这次要介绍和讨论的。借由豆瓣移动化项目的实例，从实际出发，诠释这些方法。作为产出物，CardKit 和 DOMO UI 紧紧将设计与技术连接在一起，相互推动，相互促进。当然起初也并不顺利，失败的经验更值得分享不是吗？经历了一次次尝试、沟通、重来，整个项目体系变得更健康起来。这次分享，我们将从两个方面呼应进行，有设计方法，也有技术解决方案。无论你现在哪个方向，最终都将在项目里汇聚一点，朝共同目标一同前行。概览项目起源和背景整体策略 CardKit和DOMO UI的诞生设计篇 PART I 从设计出发设计的需求设计的目标 PART II 当设计遇上技术设计与技术的约定设计产出物如何高效的配合 PART III DOMO UI 积木的设计思想风格指南如何更有效的标注技术篇 PART I 从技术出发传统web技术的优势传统web技术的缺点 PART II 当技术遇上设计阻碍设计的问题与设计共同面对的问题 PART III CardKit - 设计与技术共同的解决方案什么样的技术既有助于解决这些问题又能保持web技术的优势 CardKit使用的技术 CardKit提供了什么 CardKit在豆瓣的应用
基于AngularJS的企业软件前端架构徐飞企业应用在软件行业中占有很大的比重，而这类软件多数现在也都采用B/S的模式开发，在这个日新月异的时代，它们的前端开发技术找到了什么改进点呢？ B/S企业软件前端开发模式大体上与桌面软件类似，都是偏重量级的，在前端可能会有较多的业务逻辑，这些业务逻辑如何被合理模块化，与界面分离，以便测试，成为这个领域的一个重要挑战。另一方面，由于企业应用的界面相对规整，偏重的是数据存取，没有太多花哨的东西，所以常见的界面控件也是可枚举的，如何让开发界面的工作能更快完成，甚至由不擅长编写代码的业务设计人员来做，与界面原型的工作合二为一，能提高不少开发效率。在AngularJS等MV*框架出现之后，给这个领域带来一些契机，架构师们能够有机会去重新规划前端的架构，甚至是开发流程，从而让整个软件的生产更为高效。本文将探讨它给这个领域带来的变化。	构建高可用移动Web应用曹元彦快速与流畅的Web应用是用户体验的关键，同时用户对移动端访问体验相较桌面端有更高的期望。什么是构建高可用的移动Web应用的挑战？移动Web不仅只是对更多屏幕的适配，同时还有更多的平台版本，更慢的网络，更差的计算能力，更小的内存，给开发者带来了新的挑战。深挖每个挑战背后的细节，将阐述手机QQ团队以下从实践探索中总结的迎接挑战的方案：通过数据驱动的移动平台版本兼容策略面对众多尺寸屏幕的适配策略深入分析移动Web网络请求模型，通过CAPA法则指导静态资源的优化，加速页面加载通过手机QQ Webview离线技术栈实现离线优先策略通过浏览器分层模式优化页面的运行性能广义的高可用移动Web应用技术除了策略与模式，还涉及技术框架与效率工具的支撑。在最后将介绍与演示如何使用移动框架Pro与自动化工具Mod.js快速构建高可用移动Web应用。

豌豆荚前端实践：从数据到用户体验苗梓铭是用户喜欢怎么用，而决定了设计，还是设计决定了用户的喜好与体验？在豌豆荚的实践中，我们认为这个问题有别的求解：是对数据的定义与抽象决定了界面的组织与交互，从而决定了用户的行为及其可能获得的体验。然而，从业务角度出发的数据系统设计庞大复杂，也从来没有划分清晰的、可被独立识别的领域。在这样的背景下，前端工程师能有何作为？豌豆荚如何填补具象的产品体验和抽象的业务数据之间存在鸿沟？豌豆荚的前端工程师又是如何将繁杂的数据整理建模，从而收获简单易懂的用户体验的呢？我们将结合豌豆荚不断创新的产品实践，介绍一路上的各种尝试和思考。设计 HTTP API，隔离数据业务的实现逻辑，减少关注点通过 MVC、分层设计拆解复杂度，从容面对业务膨胀对交互概念、数据业务进行二次抽象与建模，实现数据到用户体验的转化在多终端时代，这些尝试和思考仍具有普适性，能够跨越平台技术限制，帮助我们拓出了一条不太一样的道路。	跨端组件的实践王集鹄 NativeApp无疑具备了所有的端能力，但上线依赖各种分发渠道和市场审核，使用不同的语言环境开发，研发成本相对较高。 WebApp具有迭代方便的优势，包括开发迭代快、上线迭代快，但端能力受限于浏览器的实现程度。 HybridApp能扩展端能力，并保留了WebApp的开发迭代快优势，但产品上线也需要分发。 LightApp和HybirdApp很像，区别在于LightApp解决了分发渠道的问题，同时能够扩展端能力。在参与实际项目中，我们发现一种需求：期望研发的应用能在以WebApp、HybridApp、LightApp形式运行，在具备端扩展能力的环境中用户可以获得更好的体验。受Web响应式设计的启发，我们把能够自动响应端能力的组件，抽象为一个跨端组件。本次分享包括：跨端组件概念介绍；跨端组件架构相关的设计、开发和调试；产品案例讲解；围绕移动应用开发的趋势和大家做一些探讨。
跨越不可能：让WebApp如Native般顺滑 Andrew Betts The FT web app, along with many other HTML5 websites, blurs the boundaries between apps and websites, and opens a debate that still rages about what it means to build using web technologies today. For newspapers, this stuff matters. The FT is 125 years old this year, and to ensure we’re still going strong at 250, we need to fundamentally change the way we distribute our journalism. We need to invest in technologies that will stand the test of time, and create user experiences as good as reading a physical paper. So our aim is not just to create an efficient and powerful delivery channel for our own content, but also to protect and nurture the development and maturity of the web platform. Right now creating high quality user experiences in HTML5 is very hard, and to get to where we are today we need a huge bundle of hacks and extreme techniques, many of which I’ll cover in the session. In the future we hope these rough edges will get smoothed, in the same way that print production has evolved over a century to be the incredible logistical miracle it is today. Hopefully, the web won’t take that long.	Cardkit & DOMO UI - 移动时代技术与设计的十字路口蒙晨,yangyang 设计与技术的碰撞，是互联网永恒的话题。当我们走到交汇的十字路口，一切将变的不同，因为没有独立于技术而存在的设计，反之亦然。如果说桌面web时代如此，那么移动时代，就更需要设计与技术的高效融合。如何高效配合，卓有成效的执行，取得好的结果，正是我们这次要介绍和讨论的。借由豆瓣移动化项目的实例，从实际出发，诠释这些方法。作为产出物，CardKit 和 DOMO UI 紧紧将设计与技术连接在一起，相互推动，相互促进。当然起初也并不顺利，失败的经验更值得分享不是吗？经历了一次次尝试、沟通、重来，整个项目体系变得更健康起来。这次分享，我们将从两个方面呼应进行，有设计方法，也有技术解决方案。无论你现在哪个方向，最终都将在项目里汇聚一点，朝共同目标一同前行。概览项目起源和背景整体策略 CardKit和DOMO UI的诞生设计篇 PART I 从设计出发设计的需求设计的目标 PART II 当设计遇上技术设计与技术的约定设计产出物如何高效的配合 PART III DOMO UI 积木的设计思想风格指南如何更有效的标注技术篇 PART I 从技术出发传统web技术的优势传统web技术的缺点 PART II 当技术遇上设计阻碍设计的问题与设计共同面对的问题 PART III CardKit - 设计与技术共同的解决方案什么样的技术既有助于解决这些问题又能保持web技术的优势 CardKit使用的技术 CardKit提供了什么 CardKit在豆瓣的应用
基于AngularJS的企业软件前端架构徐飞企业应用在软件行业中占有很大的比重，而这类软件多数现在也都采用B/S的模式开发，在这个日新月异的时代，它们的前端开发技术找到了什么改进点呢？ B/S企业软件前端开发模式大体上与桌面软件类似，都是偏重量级的，在前端可能会有较多的业务逻辑，这些业务逻辑如何被合理模块化，与界面分离，以便测试，成为这个领域的一个重要挑战。另一方面，由于企业应用的界面相对规整，偏重的是数据存取，没有太多花哨的东西，所以常见的界面控件也是可枚举的，如何让开发界面的工作能更快完成，甚至由不擅长编写代码的业务设计人员来做，与界面原型的工作合二为一，能提高不少开发效率。在AngularJS等MV*框架出现之后，给这个领域带来一些契机，架构师们能够有机会去重新规划前端的架构，甚至是开发流程，从而让整个软件的生产更为高效。本文将探讨它给这个领域带来的变化。	构建高可用移动Web应用曹元彦快速与流畅的Web应用是用户体验的关键，同时用户对移动端访问体验相较桌面端有更高的期望。什么是构建高可用的移动Web应用的挑战？移动Web不仅只是对更多屏幕的适配，同时还有更多的平台版本，更慢的网络，更差的计算能力，更小的内存，给开发者带来了新的挑战。深挖每个挑战背后的细节，将阐述手机QQ团队以下从实践探索中总结的迎接挑战的方案：通过数据驱动的移动平台版本兼容策略面对众多尺寸屏幕的适配策略深入分析移动Web网络请求模型，通过CAPA法则指导静态资源的优化，加速页面加载通过手机QQ Webview离线技术栈实现离线优先策略通过浏览器分层模式优化页面的运行性能广义的高可用移动Web应用技术除了策略与模式，还涉及技术框架与效率工具的支撑。在最后将介绍与演示如何使用移动框架Pro与自动化工具Mod.js快速构建高可用移动Web应用。