前端框架

http://www.iteye.com/news/29029?page=2#comments

每種產品都是有自己的定位!根據項目業務來選擇技術平臺纔是正確的,平臺好不好,要看是否適用當前項目!下面筆者根據自己的開發經驗談談自己的看法,個人經驗之談!還有一句話要說明一下:任何一個開發人員都不喜歡去設計界面!設計師的邏輯跟程序員的邏輯思維是不一樣的!設計師面對的是用戶爲用戶體驗而設計,程序員面對的是代碼爲系統的性能而編寫!

1、ExtJs

ExtJs 開源、商業應用收費的前端富客戶端框架!強大的組件庫、完美的瀏覽器差異兼容!能大大減低開發人員的開發難度,提高開發效率!出色的佈局能力使得即使沒有一點設計基礎的人員也能搭建漂亮、豐富的界面!通過內置的強大Ajax類實現了完美的後臺交互能力!由於太過豐富、重量!使得他更適合應用企業級系統應用開發!

Component類使得任何一個OO開發人員都能駕馭該框架,設計很好的界面與功能!不在需要開發人員編寫大量的Html元素!即使在沒有美工、設計師在情況下,你也能開發出一個相當成功的項目!大大降低了研發成本!當然了需要一個出色的OO開發人員!

  • 豐富、出色的組件庫、主題樣式

  • 完美的獨立性、不需要集成任何第三方插件、使得瀏覽器兼容性不再是問題

  • 強大、豐富的文檔、社區支持

  • 對JS原生對象的擴展,使得我們更好的應用JS對象;如:Array、Date、Function、String

  • 脫離傳統B/S軟件對美工的依賴,純粹依靠開發人員來構建軟件系統。

  • 目前版本:Ext 4.2

總結:目前99%的企業級應用都能使用它來開發!對於我們當前項目來說就挺好的,多媒體坐席系統Demo就是基於這個開發的,看到界面還是很不錯的吧!簡單的入手,可以提高項目的研發進度!(隨便拉一個人都能做一個Ext項目)(筆者不是很喜歡這個東西,至於原因……呵呵……)

2、jQuery EasyUI

jQuery EasyUI是基於JQuery的一個前臺ui界面的插件,功能相對沒extjs強大,但頁面也是相當好看的。一些功能也足夠開發者使用,相對於extjs更輕量。

jQuery EasyUI有以下特點:

  • 基於jquery用戶界面插件的集合

  • 爲一些當前用於交互的js應用提供必要的功能

  • 使用 EasyUI你不需要寫很多的javascript代碼,通常只需要寫HTML標記來定義用戶界面即可

  • 支持HTML5

  • 開發產品時可節省時間和資源

  • 簡單,但很強大

  • 支持擴展,可根據自己的需求擴展控件

  • 目前各項不足正已版本遞增的方式不斷完善

總結:由於把視圖層與控制層的分離,所以需要我們編寫大段的html代碼,導致代碼不義易維護,很難定位到當前的組件!功能相對薄弱、需要自己定製組件、不利於瀏覽器的兼容!同樣他優秀的組件庫、強大的擴展能力使得我們依然可以用它架構一個出色的項目、對於開發人員能力要求比較高(精通Ajax、Html/Css,熟悉JS),由於是免費的(好像不開源),目前擁護人員也是相當的多!

3、Flex

作爲新一代的富客戶端互聯網技術的佼佼者,Flex這種技術已經被越來越多的公司所採用,被越來越多的用戶和程序員所接受。可是隨着html5的發展,Flex的前景不是那麼的明朗!畢竟他是爲了開發人員能夠使用到Flash的一些功能而設計!從目前的Html5發展程度,很有可能取代Flash,Adobe公司也表示已經降低的Flash、Flex的研發精力轉而投入到Html5的研發!雖然這樣,但是Flex的優勢也是顯而易見的!筆者也使用過Flex開發項目,總的來說還是很不錯的!也表示希望繼續使用此技術!

由於程序是運行在Flash Player虛擬機裏面,所以有着良好的跨平臺性和兼容性!支持多種後臺交互技術(筆者表示分佈式的系統架構能更好的體現Flex的優勢)!

Flex技術包括以下幾個主要技術框架:

  • 描述應用程序界面的XML語言(MXML);

  • 符合ECMA規範的腳本語言(ActionScript),處理用戶和系統的事件,構建複雜的數據模型;

  • 一個基礎類庫;

  • 運行時的即時服務;

  • 由MXML與ActionScript文件生成swf文件的編譯器。

Flex的優勢:

  • Flex與Flash:可以讓普通程序員開發製作Flash成爲可能

  • 界面表現能力一流。

  • RIA富客戶端應用,解決了異步調用,界面無刷新,瀏覽器兼容性等多項難題

  • 對流媒體的支持:Flex是被公認爲流媒體技術支持最好的應用

  • 平臺的可用性:根據ADOBE公司的說法,Flash player在全世界一半的PC機器上安裝度爲99.8%

  • 跨平臺:Flash player能夠在linux下運行,也可以在手機上運行,所以不用擔心綁死在WINDOWS上

  • 對底層的可操作性:Flex能夠調用底層的東西,比如可以調用攝像頭實現視頻,而且視頻本身就嵌入在Flex應用中,由Flex player直接播放。

  • 平臺的後續運營和發展前景:Flex是由ADOBE公司推出的且開源

  • 有充足的學習環境: Flex官方樣式配置工具,可以在線配置Flex應用程序各種控件的外觀樣式,改程序也是用Flex編寫的,大家可以想象Flex可以做到什麼程度的應用了,而且這麼漂亮的界面,根本不用做任何圖片和美工,都是直接用樣式實現即可。

  • 可以用任何你熟悉的WEB編程平臺作爲後臺數據訪問層,可以使用.net,php,jsp,webservice 。

  • 脫離傳統B/S軟件對美工的依賴,純粹依靠開發人員來構建軟件系統。試圖讓開發人員在完全不需要學習Flash情況下,直接進行Flash RIA編程,這樣的話,避免了B/S中遇到的情況,加重了開發人員的學習負擔,且這些東西本來就不是開發人員所擅長的。

總結:根據目前我們當前項目的業務來說,我覺得Flex比較適合,多媒體聯絡中心門戶,由於我們需要多種數據格式的傳輸,以後可能會做在線視頻業務(不過筆者對於多媒體是沒什麼概念的!我真的不懂,而且不懂),多媒體坐席系統的架構Flex也是能很好的實現的,畢竟flex就是做企業級開發的,有良好的消息推送技術!當然了,當前項目也有很多設計是不適合使用此技術的!

4、Dojo

(筆者表示沒有用過,從網上參考了一些建議)

優點:

  • 背後強大的支持:IBM、Sun、BEA等,這是非常重要的優勢。

  • 功能的強大,Full Stack的框架,擴展了DHTML的能力,例如:

  • 支持與瀏覽器Back/Forward按鈕的集成。

  • Dojo Offline,一個跨平臺的離線存儲API。

  • Chart組件,可以方便地在瀏覽器端生成圖表。

  • 基於SVG/VML的矢量圖形庫。

  • Google Maps、Yahoo! Maps組件,方便開發Mashup應用。

  • Comet支持,通過通用的Buyeux協議。

  • 強大的UI(Dijit)。

  • 面向對象的設計,統一的命名空間,包管理機制(The Package System and Custom Builds)

  • 可擴展性。

缺點:

  • 複雜,學習曲線陡。

  • 文檔的極端不全,這是一個很大的問題。

  • API很多不穩定,各版本間改動較大,現在還不是一個成熟的框架。

  • 侵入性太大,頁面中大量使用dojo的屬性,例如<button dojoType="dijit.form.Button" id="helloButton">,如果將來dojo升級或者換一個框架時,負擔會很大。

  • 性能問題,由於dojo加載採用了同步的機制,會暫時鎖定瀏覽器,導致CPU使用率達到100%。另外,很多Widget的速度很慢。

5、AngularJS

(筆者正在學習使用,想了想不是很適合我們當前的項目)

6、jQuery

做Web前端開發人員都知道的一個東東!不論是框架本身的設計、架構、還是展現出來的功能都是上上之選!但它是一個類庫,不是一個框架,它提供的是函數、方法、功能!這樣一來問題也就暴露出來了,由於它本身不帶任何UI層的東西!雖然它擁有強大、豐富的插件擴展!但是由於各個開發者技術能力良莠不齊,導致插件的兼容性、穩定性大大降低!對於當前的幾個jQuery UI庫還是很不錯的!比如上面說到的EasyUI與jQuery UI、jQuery mini UI!都有一個同樣的問題就是需要編寫大量的html代碼,所以看個人愛好了!

7、Bootstrap

說到Bootstrap,這方面的資料就比較少了!所以我只是一個瞭解,沒用過!但是由於其流行性,我又不得不去了解他!打開它的官方網站我們可以看到一句話:簡潔、直觀、強悍的前端開發框架,讓web開發更迅速、簡單。看到這句話我就動容了!在看完整個文檔介紹,確實它值得這樣宣傳自己!

Bootstrap是Twitter推出的一個開源的用於前端開發的工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範,它即是由動態CSS語言Less寫成。

Bootstrap是基於jQuery框架開發的,它在jQuery框架的基礎上進行了更爲個性化和人性化的完善,形成一套自己獨有的網站風格,併兼容大部分jQuery插件。同樣它擁有強大的Web UI組件庫!但是上手難度比較大,至少我看完整個文檔後,我還是不知道怎樣去運用它!可是它潮流、精美、優雅的界面吸引着我!我想我該去嘗試學習它了!

========================================

26 樓 lohasle 2014-05-14 09:09  
EXT 做出來的東西很難看~  千遍一律 一看就是沒有經過前端設計師過頭 程序員自己弄的。。
25 樓 white_crucifix 2014-05-13 19:07  
其實Extjs真要做出一個系統來,絕對是會完爆下面所有框架或工具。

但絕大部分人都承認Extjs用起來比其他框架要難用。

其本質在於大部分時候,我們做的頁面不需要達到Extjs提供的那些強大、完善的功能。

比如,用Ext創建一個基本的grid(表格),在表格頭上,表格行上,都存在很多現成的功能或者事件。換句話說,用其他工具要達到這個效果,就得自己寫下大量(零碎醜陋,可能與業務邏輯混在一起)的UI代碼。
當然我們往往不需要這些功能。。。。
24 樓 flasheep 2014-05-13 16:48  
ZHE JIBA WANYI SHENME SHIHOU XIEDE!
23 樓 malie0 2014-05-12 16:03  
easyui對ie8以下的支持太差了
22 樓 shenshouer 2014-05-12 09:44  
欠缺的就是前臺UI這塊啊,業務編程還是覺得簡單啊
21 樓 endual 2014-05-12 09:00  
國產的DWZ也不錯的
20 樓 ZC168 2014-05-12 02:26  
extjs,dojo偶有用過,感覺費勁,還是自定義的UI好用
http://dl2.iteye.com/upload/p_w_upload/0097/0119/10bbda48-3dba-3f1a-b458-8a2e220d656f.png
19 樓 xf326521 2014-05-11 22:09  
Kendo有點小清新 但真實用嗎 沒人真正用過 實用上手DWZ我覺得也不錯 居然沒有上榜
18 樓 yixiandave 2014-05-11 21:47  
flyfan 寫道
fly_宇光十色 寫道
目前99%的企業級應用都能使用 EXTJs進行開發??這個數據是不是有待考量!

請看清楚,“都能使用 EXTJs進行開發”,不是“都使用EXTJs進行開發”!!

ExtJs學習曲線過於陡峭,我不覺得現在公司有那麼多extJs的人才儲備
17 樓 flyfan 2014-05-11 13:21  
fly_宇光十色 寫道
目前99%的企業級應用都能使用 EXTJs進行開發??這個數據是不是有待考量!

請看清楚,“都能使用 EXTJs進行開發”,不是“都使用EXTJs進行開發”!!
16 樓 lgscofield 2014-05-09 21:51  
竟然easyui都上了,YUI呢,EXTJS放第一,怎麼着dojo和YUI都能放第二第三把,這小編感覺不懂什麼叫UI
15 樓 fly_宇光十色 2014-05-09 13:50  
目前99%的企業級應用都能使用 EXTJs進行開發??這個數據是不是有待考量!
14 樓 hellostory 2014-05-09 13:21  
引用
都有一個同樣的問題就是需要編寫大量的html代碼


請問樓主,這算是問題嗎?你本來就是在搞HTML網頁開發啊!個人認爲寫HTML比Extjs直觀多了!
13 樓 joe9i0 2014-05-09 09:33  
建議把 《前端 UI 框架對比》 標題中的UI去掉, 完全就是文不對題.
12 樓 mfkvfn 2014-05-09 09:27  
442488160 寫道
AngularJS、jQuery是前端UI框架?bootstrap是基於jQuery進行開發的?那AngularJs的Bootstrap UI算什麼?
感覺現在怎麼什麼人都敢發文章,不要誤人子弟好麼

+1

連鼎鼎大名的YUI和jQuery UI都沒有。
如果Flex也算的話,JSF和JavaFX、GWT也算吧。
11 樓 wade200 2014-05-09 08:40  
ligerUI也沒得
10 樓 zhmn99 2014-05-09 08:24  
正在用DOJO,感覺很好
9 樓 442488160 2014-05-09 08:20  
AngularJS、jQuery是前端UI框架?bootstrap是基於jQuery進行開發的?那AngularJs的Bootstrap UI算什麼?
感覺現在怎麼什麼人都敢發文章,不要誤人子弟好麼
8 樓 allenny 2014-05-08 23:34  
YUI沒提?
7 樓 mathgl 2014-05-08 21:54  
這是什麼時候的文章?

只說dojo這一項。1.7後已經支持amd。

也不再使用 dijit.form.Button 的用法

至於文檔,早期確實缺乏,現在大有改善。
6 樓 Java4ever 2014-05-08 21:51  
flex不好看,編譯是個很噁心的問題,bootstrap相對看好icon_biggrin.gif
5 樓 yixiandave 2014-05-08 20:02  
flex個人不看好,在跨平臺的支撐上已經越來越弱了。linux的flash插件早就停止更新,只能用chrome自帶的。至於移動平臺,呵呵。。。
4 樓 yixiandave 2014-05-08 19:58  
bootstrap僅僅是一個UI樣式庫,簡單加上了幾個控件而已,根本算不上前端框架

我們目前在用AngularJS,MVVM分離的相當徹底,除了少數幾個維護directive的人員,普通前端開發人員根本不用關心dom結構問題,美工的設計html拿來可以直接用

我也不是很喜歡extjs,樣式限制太死,完全壓制了美工的設計發揮
3 樓 franciswang 2014-05-08 17:10  
gwt在哪裏?
2 樓 ytll21 2014-05-08 16:17  
AngularJS和Bootstrap放在一起?
1 樓 blooming 2014-05-08 16:16  
KendoUI ?


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章