继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

慕无忌3168803
关注TA
已关注
手记 1
粉丝 1
获赞 6

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前端开发必备神器。

本书面向具备一定基础的Web前端工程师和重构工程师,通过大量代码和实际案例,深入浅出的为你介绍移动端页面开发所应具备的各类能力和技巧,助你快速成为一名优秀的从业者。

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP