中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2022-06-20    分類: 網(wǎng)站建設(shè)

近日云適配發(fā)布了開源的HTML5前端框架AmazeUI,目前處于內(nèi)測期。根據(jù)Amaze UI的官網(wǎng)介紹,該框架的特點是mobile first,解決Web應(yīng)用從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)成為了的當(dāng)下互聯(lián)網(wǎng)最熱門的技術(shù),而前端開發(fā)者在開發(fā)網(wǎng)頁時,時常會陷入重復(fù)解決繁復(fù)的跨屏、適配問題,耗費精力,影響工作效率,產(chǎn)品開發(fā)進度慢這樣的惡性循環(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的擴展也很多,這是其他框架所無法比擬的,也是其最受歡迎的條件之一。
Foundation宣稱是世界最好的響應(yīng)式前端框架,默認(rèn)支持5種網(wǎng)格布局,是三款框架中最復(fù)雜也是最靈活的。Bootstrap默認(rèn)支持四種網(wǎng)格布局,Pure默認(rèn)支持一種。
Semantic UI是語義化設(shè)計的前端框架,開發(fā)更加直觀,UI組建可實時調(diào)試輸出,其大的特點是充分利用CSS3動畫特效,簡潔實用漂亮的樣式。
以上各種產(chǎn)品我們也用過,當(dāng)時我們發(fā)現(xiàn)全球有將近6%的網(wǎng)站是基于Bootstrap做的。不過對于中國開發(fā)者來說,Bootstrap門檻仍然較高,而且本土化支持不夠好。首先,Bootstrap只支持英文字體,并沒有對中文字體做設(shè)置。在不同操作系統(tǒng)、不同瀏覽器下,默認(rèn)的中文字體可能是不一樣的,這樣會導(dǎo)致網(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的體積不到j(luò)Query的1/3,對移動端的性能很大提升。因此,一個針對中國市場的、移動優(yōu)先的跨屏前端開發(fā)框架開發(fā)者有很強的需求,也是一個行業(yè)的空白。
Amaze UI應(yīng)該是中國首個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)”的理念,可先從移動設(shè)備開始開發(fā)網(wǎng)站,逐步在擴展的更大屏幕的設(shè)備上,專注于最重要的內(nèi)容和交互,適應(yīng)移動互聯(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ā)時間和成本,用標(biāo)準(zhǔn)化作業(yè)流程,能有更高的產(chǎn)出。
從云適配創(chuàng)立之初,我們就開始積累自己的前端框架,同時也借鑒了Bootstrap等國外框架的優(yōu)點。在內(nèi)部使用過程中,大家一致反映不錯,我們就希望把這個產(chǎn)品開源,希望分享給更多的人,也希望更多的人來貢獻代碼,來共建中國前端開源生態(tài)環(huán)境。在最近幾個月,我們投入人力將這個項目整理成一個開源產(chǎn)品。目前有2個軟件工程師全職在開發(fā)這個產(chǎn)品,還有一個設(shè)計,一個PM也在盡力配合。產(chǎn)品發(fā)布之后,我們會投入更多全職的工程師來專心打磨這個產(chǎn)品,同時也呼吁更多的前端開發(fā)愛好者共同來完善這個框架。
InfoQ:Amaze UI現(xiàn)在在內(nèi)測期,有什么期待和下一步計劃?
陳本峰:Amaze UI目前處在內(nèi)測期,希望能盡可能多的收集到優(yōu)秀的、有建設(shè)性的反饋建議和看法,與廣大優(yōu)秀前端開發(fā)者共同完善Amaze UI 的功能,推動中國移動跨屏前端技術(shù)的發(fā)展。

下一步計劃:AmazeUI的目標(biāo)是幫助開發(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ā)的標(biāo)配工具,供開發(fā)者使用,使更多的前端開發(fā)者不再受前端復(fù)雜代碼困擾。


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

網(wǎng)頁題目:從Bootstrap到Amaze UI,中國的開源HTML5前端框架
分享地址:http://www.rwnh.cn/news/169581.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站制作全網(wǎng)營銷推廣、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計定制網(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)

外貿(mào)網(wǎng)站建設(shè)
桐城市| 封开县| 榆树市| 贡嘎县| 绿春县| 南部县| 吉安县| 调兵山市| 宁安市| 神池县| 基隆市| 城固县| 蒲城县| 永靖县| 梁河县| 宁安市| 自贡市| 德保县| 固安县| 乳源| 图木舒克市| 铜川市| 黄平县| 鞍山市| 永福县| 土默特左旗| 邵阳市| 夏津县| 伊川县| 揭阳市| 平江县| 龙里县| 房山区| 保山市| 靖边县| 新昌县| 锦屏县| 敦化市| 连云港市| 竹北市| 南宁市|