怎麼評價國產框架MUI跟ReactNative的對比帖?
非廣告貼,題主只是一個比較好奇而已..
剛看到一篇 MUI 跟RN 對比的帖子, 因為對兩家的東西沒有深入的掌握,所以問下大家如何評價這個對比貼.鏈接: 文檔 - DCloud問答------------------------------------------------------------------------這個帖子的最後一段是這麼說的:HTML5需要強化毋庸置疑,但到底該怎麼強化?一種是重訂語法重寫引擎,一種是把HTML5不流暢的部分使用原生動畫補齊。很明顯後者的方向更靠譜。一個HTML5移動站,通過5+略加改造就可以變成原生體驗的App。但如果是react native,就需要重頭學重頭寫,代價高昂,收益卻沒有提升多少。功能:5+遠大於react native性能:兩者各有千秋,5+的plus擴展部分&>react native&>純HTML5部分包體積:5+遠小於react native OS支持範圍:5+大於react native
國內開發者支持:5+優於react native長期演進生命力:react native像過渡產品,隨著手機硬體的提升,該項目存在的意義在下降----------------------------------------------------------------------------如果真如他所說的這樣,我很想知道為什麼在RN圈活躍的開發者們比MUI多...
如果MUI真如帖中說的那麼強於RN,為什麼它沒有火起來,只是因為開發團隊沒有FaceBook的名氣大么.----------------------------------------------------------------------------我下載了他家的演示APP ,發現對原生的各種實現簡直無可挑剔HTML5+ - DCloud-------------------------------------------------------------------------------還為了體驗下面鏈接中的流應用, 專門去下載了360手機助手, 秒安裝的APP 雖然不太流暢,可是感覺這個秒裝立馬就能用的功能實在太棒,為什麼會沒有流行起來呢.流應用 - DCloud
感覺是廣告題呢,大概看了下,所謂 html5+ 不就和 Cordova 差不多麼... 流暢度什麼的無非就是用 CSS transform 唄,也不用裝那麼神秘... 雖然 CSS transform 用得好確實可以做出媲美原生的 UI,但要說得彷彿一定要用貴產品才能做到就不厚道了。
和 ReactNative 的對比槽點太多,唯一贊同的一點就是長線來說 RN 的意義是逐步下降的。
---
嗯,又仔細看了看,5+ runtime 在性能方面確實有一些特別的考慮,我收回上面 CSS transform 那一段。基本上總結起來一句話,就是多個 webview。在一些特定的地方,比如列表、下拉刷新,利用一些低版本 Android 上 webview 的滾動性能優於單個元素 overflow: scroll 的性能這一點,用多個 webview 來規避滾動性能問題。這個確實解決了國內 hybrid 開發的一些痛點,但是 webview 方案並不是從本質上解決了 hybrid 性能的問題,難道切屏、滾動、下拉刷新就囊括了所有的『動畫效果』了?這也太小看交互設計師了吧。在 webview 內部 5+ 其實和普通的 hybrid 沒有什麼區別,原本會卡的 HTML5 動畫並不會神奇地就不卡了。另一方面來說,這些性能問題其實大部分只在低版本 Android 上面存在,所以這些所謂的性能增強的意義其實也是隨著手機硬體的提升在下降嘛...
我覺得 5+ runtime / Native.js 和多 webview 方案思路還是不錯的,但是在文案上... 可以少一些『吊炸天』的即視感,語氣更平和實在一些。
至於 MUI 框架,設計思路實在是比較滯後了,開發體驗比較捉急,樓下有人提到了。不過 5+ 並不一定要用 MUI 框架吧,其實我覺得主推 runtime,做 Cordova/RN/NativeScript 的競爭者就好,上層 UI 框架這種東西變化很快,保持靈活性更好。利益相關:兩個都用過,都開發過中等大小的應用————先下結論:MUI是國內優秀的跨平台開發框架,或許是最優秀的曾用它做discuz論壇通用的app,包括讀帖,發帖,評論等一系列內容優點:簡單到不能再簡單了,遇到不懂的再看文檔完全沒問題(都是現成組件)最符合人習慣的開發方式是什麼,就是一個標籤一個標籤地寫頁面,這也是web開發最初的形式,哪像現在,我在項目里寫了三個月js還不知道它是幹嘛的對於頁面不多,交互簡單的移動端,我是提倡這種方式的拿一個簡單的頁面跳轉為例,分別看看兩者怎麼實現
MUI
mui.openWindow({
url:"info.html",
id:"info.html",
extras:{//頁面間傳值
name:"mui",
version:"0.5.8"
}
});
renderImages: function() {
return (
&
);
},
//再看myview
var MyView = React.createClass({
bigImage : function(){
this.props.navigator.push({
title: "title",
component: NavigatorIOSExample,
rightButtonTitle: "保存",
leftButtonTitle: "返回",
onLeftButtonPress:() =&> this.props.navigator.pop(),
onRightButtonPress:()=&> this.PressSave()
});
},
.......
.......
我覺得RN使用Pop和PUSH的方法是沒問題的,但我還是覺得前面直接url定向簡單
你可以說pop和push容易管理,而我只是覺得這僅僅是RN幫你做了一部分事情而已MUI的各種組件有點web component的味道,不同之處一個用css類來封裝,一個用新的html標籤封裝
在調試方面,MUI/HBuilder要比RN更友好,我不需要花一下午把我的xcode升級到7.2就可以使用模擬器,安卓的打包也可以在線完成
ok,優點說完了,下面說說缺點,在性能上的表現,一個WebView裡面嵌套一個scrollView後,MUI在安卓機上的表現就有點不如人意了,同樣的場景RN還未發現問題
綜上,如果再讓我選一次的話我選RN
因為說實在的,用過RN createClass的寫法之後,真的沒勁再去寫一個個html頁面了也不用每個html一個css文件,第一段一定是*{
margin:0px,
padding:0px
}
MUI自我標榜靈活性,但在簡潔性上輸了RN一截,這麼說其實有點冤枉,這應該是html和css的債,不該由MUI背,RN的組件化理念是要高於MUI的
----------回答題主的問題1.為什麼活躍度不如RN?facebook出得嘛,大家懂不懂都願意跟風看看fb有了什麼新玩具而且恕我直言,RN中文社區的活躍度極其一般,不少文檔翻譯到一半丟那裡了害我還得找官網2.MUI還有沒有可以改進的地方?肯定有,如果不是css組件化而是標籤組件化的話,我想我會更喜歡它
例子:一個MUI的tabbar,這是基友寫的,輕噴&
var subpages = ["tab-webview-subpage-main.html", "group-forum.html", "tab-webview-subpage-message.html", "tab-webview-subpage-aboutMe.html"];
var subpage_style = {
top: "46px",
bottom: "50px"
};
//mui.init();
//創建子頁面,首個選項卡頁面顯示,其它均隱藏;
mui.plusReady(function() {
if (mui.os.android) {
plus.screen.lockOrientation("portrait-primary");
}
main = plus.webview.currentWebview();
var self = plus.webview.currentWebview();
for (var i = 0; i &< 4; i++) { var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); if (i &> 0) {
sub.hide();
}
self.append(sub);
}
});
跟RN比起來,上面這坨就是渣渣
談談dcloud這一套,rn沒有接觸。
接觸較早,被html5+和mui兩個demo吸引,然後走上了開發之路。mui不僅僅是ui框架,
包括了ui,js操作,native封裝,mui的ui方面,
像是bootstrap+amazeui+framewor7的糅合,js操作,簡直就是對jquery赤裸裸的抄襲,native方面,對nativejs做了些封裝,優點
簡單易上手吧,基本會用bs的上手無壓力缺點
ui,適合在它這套ui中可以做出來的app,如果app有太多不同就沒戲了js,當真是畫虎不成反類貓,坑很多nativejs,封裝了一部分,還好捨棄
直接壯士斷腕,砍掉mui,讓用戶自行選擇ui層用am還是bs還是f7還是自己寫,js層也自己選擇原生js還是jq還是zepto等對nativejs那一點點封裝也沒必要保留專註
專註於nativejs的開發,三方插件的集成,性能的優化,文檔同步,更多示例,更多宣傳。試想
bootstrap,amazeui,framework7,metrouicss當ui,seajs,requirejs,es6當js模塊化,gulp,fis,webpack,coolie前端構建,sass,less預編譯css,vuejs,angularjs,mvvm雙向綁定,如此多前端技術自由選擇,開發者肯定更多,而dcloud只需要做好nativejs和雲打包的事情。
個人感覺就不會像現在對dcloud來說精力分散,對開發來說技術選擇比較少,束手束腳。
題外話,
流應用這東西感覺方向有點偏了,必須是android外加集成了h5+基座的360手機助手才有可能實現所謂的秒級安裝的流應用。方向太窄太偏,ios一天不放你過去,這個一天也沒有前途~---------------
以上都是說的mui,稍微說下hbuilder+mui+nativejs這套開發app,優點是入門容易,上手容易,
熟悉後,開發app很快,而且大部分app都可以開發出來,只要不是有太多自定義動畫的就好。也就是說找些剛畢業會寫html js css的人就可以開發app,對比原生開發的價格,著實節省一大筆錢。
性能問題,ios上很流暢,android這個趨勢,千元機已經很牛逼了,所以也不需要太顧慮。MUI用過很長一段時間,做過幾個項目,RN學習了很長一段時間,正在做項目,應該還是有發言權的。
首先,澄清一下,我說的MUI泛指通過HBuilder 開發App應用,用到了MUI框架、HTML5+等Dcloud的相關技術。MUI好多人沒用過,先說說MUI的實現方式:MUI的核心還是webview ,和phonegap或者自己編寫的webview核心原理差不多。只是MUI通過CSS動畫、預載入、多個webview的顯示隱藏等技術,比常規的純webview還是好很多。同時,html5+提供很多與手機原生交互的介面,實質就是通過JS調取原生系統介面。當然,MUI也支持通過JS完全調用原生UI。雖然框架支持調用原生的,但是和原生開發工作量和技術難度差不多,所以調用原生框架只能在極少情況下使用,這裡就不討論了。MUI核心依然是webview,通過官方提供非常便捷JS調用原生系統的常用介面。再簡單說說RN:
RN最近兩年太火了,介紹的文檔很多,與MUI最大的區別就是,RN不是Webview的方式進行開發,語法雖然是JS,但是和MUI是完全不同的兩個東西,產生的UI、動畫基本都是原生的UI、動畫,流暢度媲美原生。優點不說了,最後說說使用中的坑:
MUI:Webview至今無法過去的坎,那就是流暢性。不要再相信Webview能達到原生的性能,項目越大,頁面越多,流程性越差,有天花板,優化的效果並不明顯。稍微具有一定規模的項目,或者對流暢性要求較高的項目,建議不要用MUI。RN:學習成本和學習曲線還是比較高的,真的需要一段時間去學習。JSX看起來像JS,但是部分語法很奇葩。界面布局和CSS完全不一樣,state和props相對還是比較好理解的,團隊的學習成本更高。性能上可以說是完勝MUI。結論是:對流暢性要求不太高的,可以考慮MUI。開發速度快,成本低。對流程性要求高的,還是用RN吧。赤裸裸的廣告貼
是不是廣告貼我不知道,我們就用mui做了一版app
坦白的說,熟悉了5+和mui後,做一個app確實快。
開發方面,掃碼定位分享這些常用的5+都集成好sdk可以直接調用,mui就是bt+簡化版jq,做頁面很快,打包還能在線打包下載。總的來說,入門快,開發速度快尤大大說是css3,其實他的頁面切換是多個webview之間截圖動畫,所以窗口切換的效果還好
因為iphone的描繪優先順序最高,所以做出來的app在蘋果上體驗還不錯,安卓上就不怎麼樣了,尤其是長列表+低端機了,沒有官方宣傳的那麼好
最後要吐槽的就是,這玩意兒對官方的依賴太大,如果你要集成一個官方沒做的插件,你就得自己學他的插件開發,插件開發好後再離線打包,享受不到在線打包的便利了~
文檔也跟不上,經常需要自己看源碼知道有哪些黑方法可以調用-- 好在不難,然後他們好像人手也不太夠,有的bug和功能在他們一句評估後就只能幹等著,也不知道啥時候能好。。
如果是展示型,時間和人手又緊張,可以用一下這個,有能力的話還是上原生吧!牢記一句話: 所有不限定場景、不限定需求的對比都是詭辯,不管他自己宣稱多麼理中客。唯一能讓我信服的對比來自VanillaJS,全世界使用最多、性能最好、體積最小、社區最繁榮的框架。只有這個是真的。其實如果你仔細看各種學術造假事件,幾乎無一例外都存在人為篩選數據和角度的情況,手法跟這個如出一轍。而民科們則無一例外都會預設一個符合自己利益的評判標準,你只要信了就掉在邏輯陷阱里了。當然,我對這項技術本身不了解,不做評價,只是認為它的這種宣傳手法太下作。如果你真想跟他接洽,可以先問一句: 你光說優點了,有什麼缺點呢?如果他不能說得有理有據,請立即撥打防忽悠熱線。
可能還是生態的問題,一個是基於標準開源的生態,一個是基於各家不同的runtime的生態,就會比較小眾了
瀉藥
偶是看都沒看
因為光看描述就覺得這就是兩種東西H5+的意思肯定是H5+(Native) 之類的
plugin 啥的它也說了無非就是套殼的但要做的好還得有點底子才行H5 現在能力不足+ 這部分得起碼會點 Native 開發而 React 做成這樣就是為了快速開發常見場景用的
JS HTML 什麼的寫一起跟學前端入門時候一樣所以它的意義在於降低開發的門檻畢竟前端入門容易這樣搞入門的前端也能開發常見場景了所以他們面對的開發人群就不一樣只有共同點是APP開發其它么純粹倆玩意用mui做了一些app,技術選型前研究了很久,用mui擔心其他網友說的卡頓等性能問題,用rn明顯要重新培訓團隊。
最後在這裡找到了一些信心,決定用mui。那時候是2015年現在項目已經上線了,開發過程遇到的坑不多,畢竟只是簡單app。
但是卡頓真的是太折騰人了,預載入也處理不了了,畢竟頁面多了之後就卡。導致最後把所有切換頁面動畫全刪,沒動畫還能忍而且html就是html,那些控制項和原生比起來差很多,不如原生看起來漂亮。和上面某哥的意見一致,如果重新選,我選rn。現在rn已經出了很多的案例開源程序組件庫,雖然官方還在不斷更新,不斷挖坑,但是網友的填坑能力更好。原生組件看起來更舒服。看了一下官網,第一回聽說。宣傳不到位和RN是兩個東西想像空間不大,FB那是個論文,自己看著實現,這是個文檔照著實現。顯然前者的優勢更容易在已有項目找到思路改進現在前端開發,我覺得痛點並不在於展現性能,在可見的將來都不是問題。關鍵是工作流的規範。顯然看這個的官方文檔來說,缺乏點工作流思想。技術上,是個思路,沒事看兩眼…
推廣做的不好。你看有幾個人聽過HTML5+ 和 HBuilder。哪像React Native所有媒體都報。
說個題外話 半年前我們原本用HBuilder 後來都改webstorm或sublime 實在卡出翔 完全沒宣傳的行雲流水 不知是不是使用方式不對
這完全就是兩個東西啊。
他們除了那個簡單的神似framework7的移動端UI框架mui,還有個叫HTML5+的,可以想像這家公司宣傳的真是不到位。 正好曾經接觸過這個mui和HTML5+,和rn是完全不像,但是確實挺像cordova的一個手機端瀏覽器殼子,不過這個產品還是優化了不少東西,比如有人提到的webview里超長長列表的滾動承載列表webview單獨拆分出來,用移動webview的方式來滑動。還有個比較好用的就是native.js,可以很方便做二維碼掃描,推送,第三方登錄這些,開發效率還是很不錯。
題主也真是的,那對比貼就是我寫的,竟然又邀請我來回答你的帖子。
首先糾正下,那對比貼對比的是HTML5+和RN,不是mui和RN的對比。對比內容不再重複,觀點還在那個對比貼里。這裡只提一點,react native的問題在於過於輕視了HTML5。題主提到DCloud的產品沒有RN火,我想這是公眾知名度問題。事實上在HTML5領域,不知道DCloud的人不多。
DCloud的開發者數量已經很多了,使用DCloud工具開發的App數量已經幾十萬,實際是遠多於RN的。至於流應用,剛剛面世,但目前大眾點評、360、京東、網易等公司的流應用也都上線了,還有很多一線互聯網公司的流應用正在開發中。相信流應用對整個產業定會產生巨大的影響。另外,Facebook的幾個技術人員出了一個開源產品,國內這麼多人像追星一樣捧,而近在咫尺的國產DCloud卻想當然文人相輕,不認真研究就瞎噴。這怪像不對。望各位回答問題時,如果沒研究明白,就別瞎評論。
-----後補----看到不少人在討論開發模式的問題。我也補充下我的觀點。其實大多數職業前端所研究的開發模式,都不是站在把HTML5拿出來和原生App比的角度看的。HTML5當前的核心問題不是開發模式,不是mxx模式,而是達不到原生的功能和體驗。程序員首先要思考的是讓用戶爽,然後才是讓自己爽。目前程序員研究的mxx模式都是讓自己爽,但是最簡單的dom、最原生的js操作,雖然看著代碼多,但卻是最高執行性能的。HTML5+是開放前端框架的,開發者可以挑選自己喜歡的封裝前端框架來配合5+做App。但DCloud的mui前端框架是遵循執行性能最高為原則設計的,它是反mxx模式的設計思路。所以也請不要談mui是落後的思想這種話,這些人並沒有理解mui的設計是深思熟慮的。風馬牛不相及
一個Native Bridge跑的Native UIKit Object,一個JavaScript Bridge跑的WebKit UI Object,這完全是對比汽車和火柴人的帖子吧…
mui只是UI框架,應該拿html5+和ReactNative去比較,或者說是拿hybrid這個模式和ReactNative去比較,dom操作在安卓機器上的操作是比較弱,通過多webview模式來改善轉場動畫和listview的滾動的確有些成效。但一些特殊的交互在很多安卓機器還是無法實現,這源於安卓webview碎片化。cordova的開發者通過更換crosswalk這個瀏覽器內核來解決,但是這個內核集成後應用體積增加20兆(最小可以8兆),讓開發者難以接受。各大廠商的hybrid app也有自己定製的webview內核(比如騰訊家的x5還提供其他開發者使用,不過其自家產品已經使用了新的基於blink的內核)。之前和dcloud的工作人員聊過,他們的確也有提供瀏覽器內核替換的打算。。。說著說著不知道說哪去了,下面進入廣告-&>寫native.js和自定義插件可以找我付費搞
用了mui一年多,最近準備放棄。當初也是因為被它的Demo吸引,使用才發現只有看起來比較美好。
推薦閱讀:
※網頁上長得令人髮指的id和class是用什麼實現的,又是基於怎樣的原因?
※怎麼看待一個阿里工作四年出來的,但卻連children()這樣的方法都不知道是什麼意思的前端?
※為什麼我將知乎文章保存在本地後不能打開?
※英語是否會成為開發工程師的發展瓶頸?
※沒有為 position: absolute 元素賦予 left、top 等值,與賦予 left:0; top:0; 的效果為何不一樣?
TAG:前端開發 | JavaScript | Nodejs | HTML5應用 | ReactNative |