HTML和移动终端给前端开发带来的变化近三探索经验漫谈.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,Who am I?,姓名：曹刘阳（阿当）,Blog :cly84920,微博,:,真阿当,公司：上海金蚕网络科技有限公司,你可能错过了很多东西,前端进化的阶段,Web1.0,（很久以前,2006,）,table,布局,js,做表单验证和广告特效,flash,做旗帜广告,Web2.0,（,20062010,）,css2,布局,js,框架兴起（大而全，百花齐放到,jQuery,一统天下）,ajax,和,DHTML,流行，,UED,兴起,js,面向对象编程流行，,SPA,蓄势中，前端潜力初见端倪,flash,往页游和视频播放器方向发展，和前端渐行渐远,近期,（,2010,现在,),今天的主题,Web1.0,（很久以前,2006,）,table,布局,js,做表单验证和广告特效,flash,做旗帜广告,Web2.0,（,20062010,）,css2,布局,js,框架兴起（大而全，百花齐放到,jQuery,一统天下）,ajax,和,DHTML,流行，,UED,兴起,js,面向对象编程流行，,SPA,蓄势中，前端潜力初见端倪,flash,往页游和视频播放器方向发展，和前端渐行渐远,近期,（,2010,现在,),这段时间，你在关注什么？,你正在关心哪些问题？,模块化,(requireJS,、,commonJS),前端,mvc(backbone),新一代的,js,框架,(angular),css,框架,(bootstrap),css,预处理器,(less,、,sass),js,预处理器,(coffeeScript,、,typeScript),js,语言标准,(ECMAScript6,、犀牛书,),可维护性问题,(TDD,、,BigPipe,、自主研发框架,),移动前端开发,(viewport,、,touch event),hybrid(phonegap,、,jquery mobile),跨终端,(,响应式布局、兼容性问题,),后端和脚本能力,(node.js,、,express),css3 api(transform 3d,、,animation),html5,新标签,(article,、,figure),html5,富媒体,(video,、,canvas2d,、,webgl),html5,新,api(websocket,、,webworker),。,工程化向左，产品化往右,工程化,产品化,模块化,前端,mvc,新一代的,js,框架,css,框架,css,预处理器,js,预处理器,js,语言标准,可维护性问题,。,css3 api,html5,富媒体,html5,新,api,hybrid,前端工程师们的职责只是快速执行？,技术驱动产品创新，我们是否做得太少,你埋头在哪儿？,你可能错过的一些东西,mobile,phonegap,。,等等，先泼盆冷水,来自,Flurry,公布的最近一次调查报告,web,已死？,web,前端还值得玩吗？,值得玩。,但玩法有变化。,大众点评的案例,甲在,APP1,中选择某餐厅,乙在,APP2,中收到餐厅的链接,乙在内嵌网页打开餐厅页面,微信朋友圈、新浪微博,微信公众平台和服务号,微博游戏中心,QQ,空间,android,版的玩吧,UC,浏览器的网页应用中心,百度轻应用,firefox os,firefox marketplace,宿主环境有极大的变化,broswer to webview,brower,提供的,api,是遵循,W3C,标准的，统一的,(,或者说近乎统一的吧,),，而,webview,宿主应用的,sdk,可能为,web,前端提供了各种千奇百怪的,api,：,账号登录,好友关系,消息推送,调用硬件,打听话,锁定横,/,竖屏,定制分享,banner,的标题、内容、,icon,和链接,隐藏功能按钮,。,碎片化的环境，极其复杂,不同分辨率、不同物理尺寸,不同的操作系统、不同的系统版本号,不同的输入设备,不同的浏览器、不同的版本号,不同的宿主环境、不同的,sdk,android,工程师说他们碎片化，,web,前端工程师们笑了,我们的尝试,拉取用户微信信息 以及 通过微信传播,从微信外的渠道往微信里拉呢？,delphi,、,flex,、,silverlight,、,flash banner,、闪客,),html5,能够在未来十年内坚挺吗？,2,）技术深度要求够吗？,(csser,、,jser,、,phper),html5,能够将,b/s,的产品形态做到什么程度？技术门槛可以提到多高？,3,）高薪的理由：时髦带来的稀缺,VS,小众带来的门槛,VS,深度带来的经验沉淀,移动开发人员是否会迅速补上？多年的知识积累是否放弃？,再论,b/s,结构优点,免安装、升级透明、,跨终端,曾经我以为,web app,会和,native app,正面激战,所以我做了这样的尝试：,app,时机尚不成熟,我们遭遇了一系列问题：,跨终端带来的碎片化问题,手机厂商定制浏览器问题,Web,标准未定稿，变化带来的问题,性能问题,浏览器,bug,和对标准支持力度带来的问题,缺少,web app,渠道问题,用户习惯需培养的问题,支付问题,锁定横竖屏和全屏问题,。,说多了都是泪。,环境什么时候会成熟？,Web app,什么时候会井喷？,2011,年的时候，我以为会是,2012,年,2012,年的时候，我以为会是,2013,年,2013,年的时候，我以为会是,2014,年,转眼过去三年了。,现在如果你再问我，我会说：,不知道,。也许三年之后又三年，三年之后又三年。,一些人的妥协,hybrid,jquery mobile+phonegap,canvas+canvas,加速插件,+phonegap,我的顾虑,但,app store,不让上架,和,native app,相比，虽开发成本可降低，但面向用户优势何在？,这算是认输吗？改为,native app,做嫁衣？,再论,b/s,结构优点,免安装,、升级透明、跨终端,不做敌人，不做家仆，做个互补的朋友,不以,web app,方式硬碰,不以,hybrid,方式服务,发挥免安装优势，以内嵌,webview,的方式做个合而不同的朋友,也许，这才是移动互联网时代，,web,的最佳出路,之前准备好的工程化问题概览,html5,在,GUI,方案上的两个大分支,DOM,还是,Canvas,，完全不同的两条路,html5,的,2d,游戏引擎,核心部分,支持,canvas,和,DOM,两种不同模式,容器封装,事件封装,影片剪辑,碰撞检测,全局时间轴,调试,Loader,A,星寻路,2.5D,2.5D,结合,A,星寻路,&A,