前端er們如何最快開發h5移動端頁面？

聲明在前：本文原創，一字一字手打，轉載還請消息M我一下，求伸手黨手下留情。

 

一直以來對web移動端的東西作的比較多，老是在作確歷來沒總結過，因而想對移動端的框架選擇到相關技巧，進行一個概括。首先聲明，我也是隻萌新，不是大神，確定會有寫得不夠嚴謹的地方，歡迎指正~互相交流，如有忍不了的地方，求輕噴，輕噴，噴.....

 

如下爲正文：

 

互聯網已經進入2.0時代，手機應用井噴式爆發，很多公司和我的都必須考慮到用戶在web移動端的體驗，可是相對PC，移動端有許多兼容設配問題。因此總結了一下最快開發移動端H5的較優方案。

 

在web移動端開發要以精簡爲主，知足基本業務需求，設計儘量扁平化。這樣就兼顧了性能又不影響美觀，會極大的提升用戶體驗。

首要推薦最基礎的庫-Zepto，它很是的輕，只有10K，語法和jquery也很類似，極大的下降了移動端開發的門檻，簡直是新入門級小白的福音啊！

 

zepto的API：http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fzeptojs.com%2F&h=15000&c=&n=zeptojs

 

 

h5之於APP：

現現在H5的出現可讓移動端的web作到全平臺適配，實現一套代碼多個平臺適用，可是也會形成低配系統的用戶操做卡頓，乃至一些bug，因此就要在不一樣系統作相應的適配。

一、IOS系統內存管理十分優秀，能夠在IOS上作最優體驗，用一些H5新技術有能hold住。

二、 Android系統下，用戶手機配置相差太大，因此只能選擇兼容較低配置的的交互及渲染方式。

 

固然目前，最優方案就是原生+H5的混合式應用，用原生語言作外殼和交互效果，保證用戶操做上有一個流暢的體驗。用嵌套的H5渲染內容，可使內容保持即時的更新迭代，即時響應，不再須要用戶每次更新SDK。這就是如今最流行的App開發模式---HybridApp。

 

單位-rem：

這裏說一個開發細節，就是在移動端用什麼作單位的問題。通常來講，經常使用單位就是px,em,rem，在移動端個人選擇是，用rem作圖片，寬高的單位，用px作文字的單位，這樣作的好處就是不管設備是安卓仍是IOS，大屏仍是小屏，都能很好的適配，同時文字看起來也不會太大，很是好的解決了移動端適配可貴問題。即便在PC網頁或橫屏pad中打開，咱們只要給全部元素的最高父級設max-width:640px;整個頁面在width爲640px之內進行縮放， 也不會樣式因屏幕大小改變而錯亂了。

例如m.taobao.com 淘寶的首頁在PC端下：

 

 

因爲每一個公司前端開發團隊的規模和實力不盡相同，因此，在不一樣團隊中的應用也是有區別的，下面是給出的一些建議：

 

初級前端團隊(1-5人)

·  首先，能夠本身配一個集成環境，能夠是XAMPP，集 Apache+MySQL+PHP+PERL爲一體的集成包，可以輕易地安裝本來複雜的各軟件。

·   MVC模式組織代碼。

·   庫的選擇仍是Zepto，簡單易用，好吃不貴，只要10K你就能得到在PC端用Jquery寫代碼的體驗。至於模塊化神馬的就算了，畢竟人手不夠，開發任務又比較重，仍是以完成需求爲第一目標。

 

總結：xampp+zepto+rem+CDN

 

中級前端 團隊（5-20人）：

·Zepto能夠做爲庫，用sea.js進行模塊化管理，backbone.js做爲基本MVC架構，用於分離數據。underscroe.js作爲前端模板引擎。

這個時期團隊也會有幾個牛人了，能夠爲整套系統搭建一個半自動化的開發模式，減小沒必要要的重複工做，交由機器去完成，讓開發人員專一於代碼 。今後

有了基礎的「前端架構」的概念。

 

總結： zepto.js+sea.js+backbone.js+underscroe.js+rem+CDN

 

大廠前端團隊（20人以上）：

這個階段自沒必要多說，大神遍地走，那還不是想搞什麼就搞什麼，逼格得有，還要引領前沿技術，不只要知足業務需求，在性能，SEO，安全，代碼架構和質量等等細節要求上追求完美。

前端View層，angularjs或react做爲框架，node.js做爲中層，處理從後端接口拿來的數據，操做渲染模板文件，至關於幹了MVC中controller層的活，底層就是數據庫和後端（能夠是java、php、phyton等）。grunt或gulp爲自動化管理工具。css預處理（sass/less ）。用CDN存放大量靜態文件也是必不可少的。

 

總結： angularjs或react+node.js+sass/less+grunt+rem+CDN

 

最後說一句，沒有最NB的框架和語言，只要合適場景和用戶需求的就是最好方案。

 

目前思路有點混亂，想到哪兒就寫到哪兒了，後期會持續作更新補充。。。