從Bootstrap到Amaze UI，中國的開源HTML5前端框架

近日云適配發(fā)布了開源的HTML5前端框架AmazeUI，目前處于內(nèi)測期。根據(jù)Amaze UI的官網(wǎng)介紹，該框架的特點是mobile first，解決Web應用從PC向多屏適配的問題，兼容國內(nèi)主流瀏覽器和平臺，并且專注解決中文排版優(yōu)化問題。
InfoQ中文站跟云適配CEO陳本峰進行了交流，了解有關(guān)AmazeUI框架的更多細節(jié)。
InfoQ：現(xiàn)在前端框架這么多，為什么還要開發(fā)Amaze UI？
陳本峰：國內(nèi)前端框架確實不少，但能解決瀏覽器存在的跨屏適配和兼容性問題的技術(shù)卻很少。再加上國內(nèi)對開源技術(shù)的思想意識不夠，很多成熟的技術(shù)主要封閉在自己的公司內(nèi)，這樣造成整個產(chǎn)業(yè)鏈在技術(shù)上很難互惠互通。
與此同時，移動、跨屏已經(jīng)成為了的當下互聯(lián)網(wǎng)最熱門的技術(shù)，而前端開發(fā)者在開發(fā)網(wǎng)頁時，時常會陷入重復解決繁復的跨屏、適配問題，耗費精力，影響工作效率，產(chǎn)品開發(fā)進度慢這樣的惡性循環(huán)中。
InfoQ：跟Amaze UI功能類似的之前的框架有哪些？你覺得它們什么地方不好用？
陳本峰：目前功能相似的能解決同類需求的主要是國外的開源框架，如Bootstrap、Foundation、Semantic UI。
Bootstrap是由Twitter在2011年8月推出的開源WEB前端框架，集合CSS和HTML，使用了最新的瀏覽器技術(shù)，為快速WEB開發(fā)提供了一套前端工具包，包括布局、網(wǎng)格、表格、按鈕、表單、導航、提示，其核心就是基于Less框架構(gòu)建的CSS。Bootstrap框架擁有美觀的樣式和封裝完善的JQ插件，使用方便，基于Bootstrap的擴展也很多，這是其他框架所無法比擬的，也是其最受歡迎的條件之一。
Foundation宣稱是世界最好的響應式前端框架，默認支持5種網(wǎng)格布局，是三款框架中最復雜也是最靈活的。Bootstrap默認支持四種網(wǎng)格布局，Pure默認支持一種。
Semantic UI是語義化設計的前端框架，開發(fā)更加直觀，UI組建可實時調(diào)試輸出，其大的特點是充分利用CSS3動畫特效，簡潔實用漂亮的樣式。
以上各種產(chǎn)品我們也用過，當時我們發(fā)現(xiàn)全球有將近6%的網(wǎng)站是基于Bootstrap做的。不過對于中國開發(fā)者來說，Bootstrap門檻仍然較高，而且本土化支持不夠好。首先，Bootstrap只支持英文字體，并沒有對中文字體做設置。在不同操作系統(tǒng)、不同瀏覽器下，默認的中文字體可能是不一樣的，這樣會導致網(wǎng)頁在某些時候顯示得不太好看。而且英文字號和中文字號的大小也不一樣，直接用Bootstrap來做文字排版并不能達到最好的效果。另外，國內(nèi)瀏覽器種類繁多，Bootstrap也無法照顧到對國內(nèi)瀏覽器的支持，我們希望不斷加強對各種本土瀏覽器的支持，幫助廣大前端開發(fā)者從最繁瑣痛苦的瀏覽器性問題中解脫出來。其次，Bootstrap還沒有把重點放在豐富界面組件上，而Amaze UI非常注重提高開發(fā)者的效率，我們會不斷增加跨屏的界面組件，讓開發(fā)者盡量少些代碼。第三，Bootstrap 因為最早是從PC端開始做的，所以有些地方是先PC后移動，而Amaze UI的思路是先移動后PC。例如，Bootstrap使用了jQuery庫，而Amaze UI使用了Zepto.js，Zepto.js的體積不到jQuery的1/3，對移動端的性能很大提升。因此，一個針對中國市場的、移動優(yōu)先的跨屏前端開發(fā)框架開發(fā)者有很強的需求，也是一個行業(yè)的空白。
Amaze UI應該是中國首個HTML5跨屏前端開發(fā)框架，其不僅兼容前幾者的優(yōu)勢，還具有以下優(yōu)勢：
1． 加入更多符合中國市場特性的元素：中文排版更優(yōu)化，兼容中國本土主流瀏覽器
2． 更輕量化，不僅適用于桌面端，更適合移動端
3． 包含一些封裝好的Widgets，其他框架則沒有
InfoQ：Amaze UI針對上述痛點，提出了什么不同的解決思路？
陳本峰：解決思路上，通過拆分、封裝一些常用的網(wǎng)頁組件，以規(guī)范化通過云適配平臺開發(fā)的移動網(wǎng)站，統(tǒng)一用戶體驗。
具體措施上：
語義化。Amaze UI開發(fā)遵循語義化原則，意圖通過類名（class）等信息直觀傳達元素的功能角色，同時關(guān)注結(jié)構(gòu)、樣式、行為分離，降低各部分的耦合程度，提高開發(fā)效率和可維護性。
移動優(yōu)先，跨屏適配。遵循“移動優(yōu)先（Mobile First）”、“漸進增強（Progressive enhancement）”的理念，可先從移動設備開始開發(fā)網(wǎng)站，逐步在擴展的更大屏幕的設備上，專注于最重要的內(nèi)容和交互，適應移動互聯(lián)潮流。輕松創(chuàng)建跨屏適配的網(wǎng)頁。
模塊化，按需定制。AMUI使用LESS編寫樣式，結(jié)構(gòu)良好，易擴展，易維護；使用Seajs模塊化開發(fā)、組織 JavaScript，自然、優(yōu)雅。
專注于HTML5。AMUI 基于輕量的Zepto.js開發(fā)，有效減少為兼容舊瀏覽器的臃腫代碼；基于 CSS3 的交互效果，平滑、高效。AMUI專注于現(xiàn)代瀏覽器（支持HTML5），不再為過時的瀏覽器耗費資源，為更有價值的用戶提高更好的體驗。
本地化支持：相比國外的前端框架，Amaze UI專注解決中文排版優(yōu)化問題，根據(jù)操作系統(tǒng)調(diào)整字體，實現(xiàn)中文排版效果；針對國內(nèi)主流瀏覽器及App內(nèi)置瀏覽器提供更好的兼容性支持，為你節(jié)省大量兼容性調(diào)試時間。

InfoQ：Amaze UI開發(fā)多久了？有幾個人在開發(fā)？
陳本峰：這個項目最開始是作為內(nèi)部使用工具來開發(fā)的。我們云適配本身就是一個前端產(chǎn)品，Amaze UI能幫我們降低開發(fā)時間和成本，用標準化作業(yè)流程，能有更高的產(chǎn)出。
從云適配創(chuàng)立之初，我們就開始積累自己的前端框架，同時也借鑒了Bootstrap等國外框架的優(yōu)點。在內(nèi)部使用過程中，大家一致反映不錯，我們就希望把這個產(chǎn)品開源，希望分享給更多的人，也希望更多的人來貢獻代碼，來共建中國前端開源生態(tài)環(huán)境。在最近幾個月，我們投入人力將這個項目整理成一個開源產(chǎn)品。目前有2個軟件工程師全職在開發(fā)這個產(chǎn)品，還有一個設計，一個PM也在盡力配合。產(chǎn)品發(fā)布之后，我們會投入更多全職的工程師來專心打磨這個產(chǎn)品，同時也呼吁更多的前端開發(fā)愛好者共同來完善這個框架。
InfoQ：Amaze UI現(xiàn)在在內(nèi)測期，有什么期待和下一步計劃？
陳本峰：Amaze UI目前處在內(nèi)測期，希望能盡可能多的收集到優(yōu)秀的、有建設性的反饋建議和看法，與廣大優(yōu)秀前端開發(fā)者共同完善Amaze UI 的功能，推動中國移動跨屏前端技術(shù)的發(fā)展。

下一步計劃：AmazeUI的目標是幫助開發(fā)者提高開發(fā)效率，提升網(wǎng)頁效果，即用最短的時間做出最贊的網(wǎng)頁。 Amaze UI 將會在所有測試反饋處理工作結(jié)束后，內(nèi)部進一步完善和豐富功能，滿足更多開發(fā)者的需求，屆時會正式以開源形式向眾多開發(fā)者免費開放。Amaze UI是云適配成功轉(zhuǎn)向PaaS后一項重要的戰(zhàn)略部署，除了Amaze UI，云適配將會陸續(xù)開放其他產(chǎn)品使之成為前端開發(fā)的標配工具，供開發(fā)者使用，使更多的前端開發(fā)者不再受前端復雜代碼困擾。

關(guān)鍵詞：成都品牌網(wǎng)站建設公司, 網(wǎng)站制作公司, 重慶網(wǎng)站建設, 網(wǎng)站設計, 網(wǎng)站建設, 手機網(wǎng)站開發(fā)

文章題目：從Bootstrap到Amaze UI，中國的開源HTML5前端框架
分享URL：http://www.muchs.cn/news31/169581.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站營銷、網(wǎng)站收錄、ChatGPT、品牌網(wǎng)站制作、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)