首页手记回忆我们这些年的移动前端开发—&mdash...

回忆我们这些年的移动前端开发——TGideas

标签：

Html/CSS Html5 CSS3

Web前端开发的技术更替日新月异，带动行业的不断发展，从Table到Div+CSS，从常规页面到互动页面，从PC端到移动端，我们经历了、见证了各种技术和业务的兴衰、变革。如今移动业务大行其道，成为了我们最重点的需求项目，而回首过去，这其中的变化历历在目。
早在2010年，我们通过PC端游戏的官网在iPad平台的兼容，初步尝试了移动端页面开发的滋味。现在看来实现的逻辑很简单，就是HTML5 Video和UA判断，但在iPad上看到官网能正常交互，还是激动万分的。

到了2011年，我们开始尝试端游在移动端的运营，发起了LOL掌上英雄联盟APP的开发项目。经过综合讨论，APP选择了Hybrid的方式。除了基础的APP框架和页面重构以外，我们大量采用了按需加载、离线和本地存储、CSS3动画等来提升整体性能和体验，深度的尝试了移动端页面的开发和优化。当然，那时候的手机性能还不行，所以Hybrid APP整体体验不太友好。
2012年开始，Chrome等高级浏览器的市场份额稍微有了一些提升，虽然远不及IE系列。于是我们开始大量在游戏活动专题页面中尝试使用CSS3和Canvas动画，在flash之外，为页面开发一些生动的体验方式和细节效果。
但那时还是PC时代，主要业务还是PC端的相关页面开发。另外，手机的配置不高，手机浏览器本身对规范支持也有很多问题。所以，虽然我们在移动端发起了一些尝试，但碍于业务和设备的问题，真正能体验到这些特性的用户其实并不多，整体效果也并不是特别好。
2012年下半年开始到2013年，腾讯逐步有了移动游戏的业务，微信发布的飞机游戏当时惊动了整个业界，各类官网、活动等页面需求开始成规模出现。基于之前的探索经验，移动端的页面开发当然没有什么太大的问题。并且，那时候移动设备的碎片化问题只是初现端倪，还未造成什么实质上的困扰。Viewport设置从那时候开始，成为移动页面的必备代码了。当然，那时候响应式开始起步并逐渐流行起来，虽然感觉是老外喜欢用一些。
2014年开始，游戏业务爆发了，我们也有了越来越多的机会，开始在移动端的技术探索上真正发力。个人感觉，可以把2014年定义为我们的移动开发元年。基于UP+发布会邀请函，我们创新的采用了CSS3、SVG等动画技术，配合陀螺仪开发了腾讯的第一支爆款H5，成为了行业的标杆案例。同时期出现的“神经猫”等小游戏也引爆了整个行业。那时候，偏向纯代码实现的H5和小游戏成为了主流。同时，我们也基于Websocket实现了手机和PC的双屏互动，并在当年的TGC官网以及斗战诛天都有了成功的使用。其中斗战诛仙的互动直接搬到了上海陆家嘴进行了线下的活动体验。

2014年下半年开始到2015年，我们开始尝试让Flash在移动端焕发青春的方式。通过Flash将动画导出成为Canvas，再借助CreateJS实现在移动端的动画展示和互动逻辑。这样的方式使得动画更加细腻和丰富，项目整体分工模式更加合理。虽然在一开始由于手机性能和浏览器兼容性，整体效果会受影响，但随着软硬件的发展，这些已不是问题。在2015年的UP+发布会邀请函、腾讯棋牌年度盛典等项目中，这种H5开放方式产生了惊艳的效果，爆发了巨大的影响力。

在2015上半年， Canvas+CreateJS逐渐成为了移动端互动H5的开发主流。但当下半年“吴亦凡参军”项目出现时，视频类H5瞬间引领了潮流，成为2015全年的两种主流H5开发模式之一。视频类更多的是前端去解决大量的兼容和适配问题，以应对早已碎片化的移动端环境。以后，H5这类互动项目形式逐渐由技术红利转向创意结合内容，更多的是视频模式了。
同年，除了HTML5本身的API（如视频、地理定位等）以外，我们也很快跟进研究和储备了其他的一些Web API，诸如媒体流、陀螺仪、设备震动、Web Speech、Web Audio等等，以及微信和手Q平台的JSSDK。2015年春节，我们就尝试使用微信JSSDK的录音功能，在天天飞车和植物大战僵尸两款游戏上开发了语音拜年的页面活动。另外，我们开始研究WebGL，以及基于WebGL的ThreeJS框架，这种在国外大量应用，但在国内还不太多见的形式。我们尝试了使用游戏的3D模型在页面展示，增加页面的展示效果和互动性。同时，为了能保证更高效率的测试移动页面，我们开发了MPT移动页面测试工具，大大减少了效果预览环节所开销的时间。
到了2016年，最火热的题材莫过于VR和AR。除了日常业务以外，我们也开始着手进行了研究。在ChinaJoy2016上，我们和龙之谷手游以及三星合作，开发了第一款WebVR互动游戏。通过ThreeJS结合WebVR Polyfill，我们将龙之谷的各类怪物、场景、武器等3D模型串成了一个通关的VR射击游戏。设备基于三星的GS7和Gear，这样避免了设备和浏览器兼容的开销，同时GS7的性能也是当时手机中很不错的。

到了下半年，基于getUserMedia和Android微信手Q集成的X5内核，我们在王者荣耀貂婵皮肤专题中实现了WebAR的3D模型互动体验，在iOS版本上使用了降级方案，只是展示3D模型动画。当然，WebAR的资源开销非常大，低端手机的体验还是不太理想。
多年以来，基于各类新技术的尝试和应用，我们努力改变着各类业务模式，产出了一个又一个优秀的案例。我想，我们至少在Web前端的互动开发技术模块上能算业界领先了。除了具有代表性的技术应用和沉淀，针对各个分辨率和浏览器的布局适配和兼容、页面性能优化等等，我们也有深入的研究。同时，我们还会进行基于页面的数据监控和效果分析，这使得我们能更好的去研究用户的行为，能帮助业务通过数据让页面产生更大的价值。
选择了技术行业，选择了Web前端，意味着可能每一天都是崭新的，你需要有很扎实的基础，也需要跟随行业最新的技术发展方向，去研究、应用、积累、总结，尤其是在移动时代。
那么，在移动时代，如何成为一名优秀的Web前端开发工程师呢？如何快速了解和学习移动端页面开发所应具备的技术能力、逻辑思维和应用技巧呢？如何在团队的移动前端开发，尤其是互动开发上能拥有一席之地呢？
《指尖上行——移动前端开发进阶之路》，由TGideas二十多位前端大神倾情编写，人民邮电出版社出版，汇聚了团队在移动页面开发上的多年经验。从页面适配、调试方式、常见框架，到CSS3、SVG、ThreeJS、移动Web APIs，到H5、WebVR，到性能优化、数据分析，到创意思路、实战案例，应有尽有，实属Web前端开发必备神器。