HTML5和移動(dòng)終端給前端開發(fā)帶來(lái)的變化——近三年探索經(jīng)驗(yàn)漫談ppt課件

1、HTML5和挪動(dòng)終端給前端開發(fā)帶來(lái)的變化 近三年探求閱歷漫談Who am I ?姓名：曹劉陽(yáng) 阿當(dāng)Blog : hi./new/cly84920 : cly84920gmail微博 : 真阿當(dāng)公司：上海金蠶網(wǎng)絡(luò)科技 他能夠錯(cuò)過了很多東西前端進(jìn)化的階段今天的主題他正在關(guān)懷哪些問題？p模塊化 ( requireJS、commonJS )p前端mvc ( backbone )p新一代的js框架 ( angular )pcss框架 ( bootstrap )pcss預(yù)處置器 ( less、sass )pjs預(yù)處置器 ( coffeeScript、typeScript)pjs言語(yǔ)規(guī)范 ( ECMAScr

2、ipt6、犀牛書 )p可維護(hù)性問題 ( TDD、 BigPipe、自主研發(fā)框架 )p挪動(dòng)前端開發(fā) ( viewport、touch event )phybrid ( phonegap、jquery mobile )p跨終端 ( 呼應(yīng)式規(guī)劃、兼容性問題 )p后端和腳本才干 ( node.js 、express) pcss3 api ( transform 3d、animation )phtml5 新標(biāo)簽 ( article、figure )phtml5 富媒體 ( video、canvas2d、webgl )phtml5 新api ( websocket、webworker )p。工程化向左，產(chǎn)

3、品化往右p模塊化p前端mvcp新一代的js框架pcss框架pcss預(yù)處置器pjs預(yù)處置器pjs言語(yǔ)規(guī)范p可維護(hù)性問題p。pcss3 apiphtml5 富媒體phtml5 新apiphybrid前端工程師們的職責(zé)只是快速執(zhí)行？技術(shù)驅(qū)動(dòng)產(chǎn)品創(chuàng)新，我們能否做得太少他埋頭在哪兒？他能夠錯(cuò)過的一些東西 s triggerrally/ s c9.io/ web2.qq/webqq.html我們?cè)谧龅膰L試挪動(dòng)互聯(lián)網(wǎng)下的web挪動(dòng)互聯(lián)網(wǎng)下的web，他想到了什么？p 呼應(yīng)式規(guī)劃p 不用思索IE低版本，放心運(yùn)用html5p 輸入終端由鼠標(biāo)鍵盤變成了touchp 節(jié)約流量，多運(yùn)用web字體和css替代圖片p Vi

4、ewportp jQuery mobilep phonegapp 。等等，先潑盆冷水來(lái)自Flurry公布的最近一次調(diào)查報(bào)告web已死？web前端還值得玩嗎？值得玩。但玩法有變化。群眾點(diǎn)評(píng)的案例甲在APP1中選擇某餐廳乙在APP2中收到餐廳的鏈接乙在內(nèi)嵌網(wǎng)頁(yè)翻開餐廳頁(yè)面微信朋友圈、新浪微博微信公眾平臺(tái)和效力號(hào)微博游戲中心 空間android版的玩吧UC閱讀器的網(wǎng)頁(yè)運(yùn)用中心百度輕運(yùn)用firefox osfirefox marketplace宿主環(huán)境有極大的變化 broswer to webview brower提供的api是遵照W3C規(guī)范的，一致的 (或者說近乎一致的吧)，而webview宿主運(yùn)用

5、的sdk能夠?yàn)閣eb前端提供了各種千奇百怪的api：賬號(hào)登錄好友關(guān)系音訊推送調(diào)用硬件探聽話鎖定橫/豎屏定制分享banner的標(biāo)題、內(nèi)容、icon和鏈接隱藏功能按鈕。碎片化的環(huán)境，極其復(fù)雜p 不同分辨率、不同物理尺寸p 不同的操作系統(tǒng)、不同的系統(tǒng)版本號(hào)p 不同的輸入設(shè)備p 不同的閱讀器、不同的版本號(hào)p 不同的宿主環(huán)境、不同的sdkp android工程師說他們碎片化，web前端工程師們笑了我們的嘗試?yán)∮脩粑⑿判畔?以及 經(jīng)過微信傳播從微信外的渠道往微信里拉呢？weixin.rdp.uzwan/rdp/biggame/answer/light.htm?type=3&fromChannel

6、=z0 如何讓他的app被用戶發(fā)現(xiàn)他是怎樣下載app的？渠道為王p 有流量的運(yùn)用平臺(tái)非常少，和運(yùn)用數(shù)量遠(yuǎn)不成正比p 有效的引薦位非常緊張，根本排名100之外就很難被用戶發(fā)現(xiàn)p 他聽過刷榜多少錢一天嗎？p 他聽過聯(lián)運(yùn)的門檻和分成比例嗎？新的思緒 借助web推試玩版，引導(dǎo)下載p 繞開渠道的高門檻和分成p 先試用，再?zèng)Q議能否下載我們的嘗試adanghome/js_demo/45/ 關(guān)于 hybrid 和 html5 的一些思索 2019年挪動(dòng)互聯(lián)網(wǎng)迅速崛起html5同樣在2019年發(fā)熱技術(shù)圈內(nèi)技術(shù)選型和長(zhǎng)久開展1未來(lái)很快會(huì)淘汰掉嗎？( delphi、flex、silverlight、flash ba

7、nner、閃客 ) html5可以在未來(lái)十年內(nèi)鞏固嗎？2技術(shù)深度要求夠嗎？( csser、jser、phper ) html5可以將b/s的產(chǎn)品形狀做到什么程度？技術(shù)門檻可以提到多高？3高薪的理由：時(shí)髦帶來(lái)的稀缺 VS 小眾帶來(lái)的門檻 VS 深度帶來(lái)的閱歷沉淀 挪動(dòng)開發(fā)人員能否會(huì)迅速補(bǔ)上？多年的知識(shí)積累能否放棄？再論b/s構(gòu)造優(yōu)點(diǎn) 免安裝、晉級(jí)透明、跨終端曾經(jīng)我以為web app會(huì)和native app正面激戰(zhàn)所以我做了這樣的嘗試： adanghome/js_demo/birdie_queue/ 和這樣的嘗試： dev.uzwan/g78但web app時(shí)機(jī)尚不成熟我們?cè)庥隽艘幌盗袉栴}：跨終端

8、帶來(lái)的碎片化問題手機(jī)廠商定制閱讀器問題Web規(guī)范未定稿，變化帶來(lái)的問題性能問題閱讀器bug和對(duì)規(guī)范支持力度帶來(lái)的問題短少web app渠道問題用戶習(xí)慣需培育的問題支付問題鎖定橫豎屏和全屏問題。說多了都是淚。環(huán)境什么時(shí)候會(huì)成熟？Web app什么時(shí)候會(huì)井噴？2019年的時(shí)候，我以為會(huì)是2019年2019年的時(shí)候，我以為會(huì)是2019年2019年的時(shí)候，我以為會(huì)是2019年轉(zhuǎn)眼過去三年了。如今假設(shè)他再問我，我會(huì)說：不知道。也許三年之后又三年，三年之后又三年。一些人的妥協(xié) hybridp jquery mobile + phonegapp canvas + canvas加速插件 + phonegap我

9、的顧慮但 app store不讓上架 和native app相比，雖開發(fā)本錢可降低，但面向用戶優(yōu)勢(shì)何在？這算是認(rèn)輸嗎？改為native app做嫁衣？再論b/s構(gòu)造優(yōu)點(diǎn) 免安裝、晉級(jí)透明、跨終端不做敵人，不做家仆，做個(gè)互補(bǔ)的朋友p 不以web app方式硬碰p 不以hybrid方式效力p 發(fā)揚(yáng)免安裝優(yōu)勢(shì)，以內(nèi)嵌webview的方式做個(gè)合而不同的朋友也許，這才是挪動(dòng)互聯(lián)網(wǎng)時(shí)代，web的最正確出路之前預(yù)備好的工程化問題概覽html5在GUI方案上的兩個(gè)大分支 DOM 還是 Canvas，完全不同的兩條路html5的2d游戲引擎中心部分 支持canvas和DOM兩種不同方式容器封裝事件封裝影片剪輯碰

10、撞檢測(cè)全局時(shí)間軸調(diào)試Loaderadanghome/js_demo/12/插件部分 A星尋路adanghome/js_demo/18/ 插件部分 2.5Dadanghome/js_demo/19/ 插件部分 2.5D結(jié)合A星尋路adanghome/js_demo/20/ 插件部分 向量運(yùn)動(dòng)adanghome/js_demo/21/ adanghome/js_demo/22/ 插件部分 物理引擎adanghome/js_demo/23/ adanghome/js_demo/24/ adanghome/js_demo/25/ adanghome/js_demo/26/ 如何兼容不同終端的分辨率？a

11、danghome/js_demo/42/基于css的動(dòng)畫和3dadanghome/js_demo/43/基于js和canvaswebgl 的動(dòng)畫和3dadanghome/js_demo/43/這個(gè)游戲需思索和暴顯露的問題adanghome/js_demo/birdie_queue/【需思索的問題】： 針對(duì)哪些終端？ 如何兼容不同終端的分辨率？ 能否要做離線緩存？ 開發(fā)方式基于Canvas還是DOM？【暴顯露的問題】： 不同閱讀器支持的聲音格式不同 性能問題廠商定制閱讀器導(dǎo)制的碎片化問題這個(gè)游戲需思索和暴顯露的問題dev.uzwan/g78【需思索的問題和面臨的挑戰(zhàn)】： 通訊協(xié)議走websocket SPA如何組織代碼以及多人協(xié)作 如何兼容pc、ios和android 開發(fā)方式基于Canvas還是DOM？【暴顯露的問題】： 不同系統(tǒng)不同閱讀器對(duì)websocket的支持不同 無(wú)法強(qiáng)迫橫屏 無(wú)法強(qiáng)迫全屏 挪動(dòng)端同一時(shí)間只支持播放一個(gè)聲音 經(jīng)過viewport設(shè)置縮放在android下各種坑下次，找個(gè)時(shí)機(jī)我們?cè)倭陌?假設(shè)他們還感興趣的話。幾年前的web2.0時(shí)代，我的一位老同事