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

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

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

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

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

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

成都網(wǎng)站建設(shè)公司_創(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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)