李晶,花名拔赤,阿里-去啊 H5 开发工程师,在团队协作、组件开发、移动 WebApp 等方面有较深研究,曾参与淘宝首页、KISSY等项目研发。翻译过《JavaScript Web 富应用开发》、《JavaScript 权威指南》、《编写高可维护的JavaScript》等书籍,喜欢折腾和开源,偶尔写写小文章。

“阿里-去啊”是一款小而美的旅行类App,这款 App 内嵌大量的 H5 页面,但直接用 URL 内嵌 H5 不解决弱网加载速度问题,在 2014 年我们通过 H5 资源的离线化将我们的 Hybrid 大大提速,做到弱网下H5的秒出,和PhoneGap式的H5包装不同,我们对PageFlow、数据打通、H5多端共享也有针对性的设计和实现,这些都在推动可靠的Native与灵活的Web之间的融合,我们对新时期的终端开发(前端开发)也有了新的理解,本次分享将由阿里旅行的前端工程师李晶(花名拔赤)和客户端架构师邢舰(花名坦丁)带来,和大家聊聊极致的 Hybrid 模式如何影响、推动前端技术的革新与进步。

演讲大纲:

1. 阿里-去啊 App 的Hybrid 架构的演变;

2. 这些过程中带给我们的新的挑战,痛并快乐的采坑;

3. 极致的体验要求使得前端技术不得不前所未有的和Native容器技术打通,这对App的架构和扩展性有了新的定义和要求;

4. 可靠的Native与灵活的Web如何互相取长补短,互为备份,未来的Native容器技术是怎样的;

5. 整个行业无线 All In的大背景下,前端技术、前端工程师、终端工程师都在悄悄的发生蜕变,未来我们对无线开发人才的需求到底是怎样的,怎么样的组织和人才能加速我们将无线技术和体验推向极致?

阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(1)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(2)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(3)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(4)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(5)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(6)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(7)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(8)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(9)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(10)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(11)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(12)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(13)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(14)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(15)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(16)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(17)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(18)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(19)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(20)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(21)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(22)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(23)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(24)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(25)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(26)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(27)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(28)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(29)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(30)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(31)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(32)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(33)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(34)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(35)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(36)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(37)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(38)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(39)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(40)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(41)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(42)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(43)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(44)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(45)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(46)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(47)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(48)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(49)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(50)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(51)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(52)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(53)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(54)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(55)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(56)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(57)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(58)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(59)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(60)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(61)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(62)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(63)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(64)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(65)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(66)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(67)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(68)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(69)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(70)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(71)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(72)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(73)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(74)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(75)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(76)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(77)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(78)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(79)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(80)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(81)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(82)
阿里去啊 H5 开发工程师 李晶:极致的 Hybrid — 从阿里「去啊」的架构插图(83)