做為後端開發人員,如何選擇合適的前端框架,angular or vue?
我是一名後端工程師,但偶爾也會寫寫自己的項目,所以前端部分也自己寫。剛開始用js原生的寫過(當然那時候沒前端這個概念,也就實現很簡單的功能),後來接觸到jquery感覺巨好用,近段時間工作上的原因也稍稍接觸了下angularjs,也是感覺巨好用,再也不想用jquery了,所以想找一個前端框架。
網上也搜索資料,對比過。大體上感覺angular更全面、更複雜,vue更輕量;angular 國外火,適合大公司;vue 國內火,適合中小公司。但畢竟每個人的情況不一樣,還是想請教下前端大牛們。
我個人的情況和想法:
1、首先主要是我個人或者兩三個人用。但我偏後端,前端技術很渣。希望這個框架能減少我的工作量,技術積累並不重要。
2、我更看中的是生態環境,希望碰到什麼坑能百度谷歌的到,想實現什麼效果網上會有比較多的解決方案
3、第三方ui庫更全。基本上沒時間也沒能力自己搞ui,比如以表格為例,希望表頭固定、過濾、拖動等效果ui庫都有現成的。
4、有現成的系統最好,類似這種
PanJiaChen/vue-element-admin?github.com
如果是 Java 程序員,建議先體會一下 Angular,如果是 IntelliJ 用戶,更應該馬上實驗下,你會發現一切都很熟悉。
遇到問題不用擔心,官方文檔能解決大部分問題,解決不了的,來知乎問就是了。
如果你想
- 自己去找 AJAX 庫
- 自己去找測試庫
- 自己去想文件組織形式
- 自己去找 i18n 方案
- 自己探索 TypeScript 最佳實踐
- 自己探索表單驗證方案
- 自己探索路由最佳實踐
就用 Vue。
否則用 Angular……用了 Angular 上面這些你都不用花時間想了,看文檔即可。
既然你是後端,我當然是推薦 Angular 了。
想開始爽用vue,想後期爽用ng!!!
vue國內生態比較好,入門也簡單,國內生態也比較好。但同時也意味著,很多坑得你自己去填,很多問題得你自己去想辦法解決。
ng的話,有現成的編程範式,入門是想對難一點,但基本能保證多人協作的代碼一致性,後期維護起來不會很累。所以,如果你們公司大多數人,水平很好,用vue,並且定好規範。如果這點不能保證,那就選ng吧,畢竟,不會以後改別人代碼的時候想罵人
推薦Vue+ElementUI, 既然你是做後端的,可能更多還是做管理端的列表表單多一些,有個容易上手的UI組件最重要。
如果有HTML基礎,上手Vue很快很快。
Vue的生態如路由 狀態管理 等 官方文檔已經給了足夠的介紹和demo。
react更有嚼頭
為什麼不考慮react了呢。react社區也挺成熟的啊。
雖然我還是會推薦Angular。開箱即用真的是首推這個。如果不需要什麼來自東方(大概西方也可以吧)的神秘優化,ng中文官網的文檔看一上午差不多就能開始幹活了,有什麼比這個更爽的嗎……
如果你是一個對項目負責人,推薦你用angular,如果不是,就選擇你喜歡的
深度用過 Angular 和 Vue,少量用過 React,個人意見供參考:
1.A/R/V三大框架都能減少你的工作量。
2.如果使用 Angular(新版本),很多問題百度、谷歌起來有點麻煩,因為你可能會找到 Angular.js 的,另外,官方文檔也不一定能很方便地找到你要的東西,比如什麼時候需要 exports,forRoot 什麼時候用,……。
3.Angular 目前的第三方 UI 庫中,我司的 Clarity Design System 算是較大較全的,Angular Material 還不夠完善。Vue 中的 Vue.js Material Component Framework — Vuetify.js 很全面易用,Element 在表格方面應該能滿足你的大部分要求。
4.項目模板也是各個框架都有,Angular 有一個 ngx-admin-lte,感覺還可以,不過也不算太成熟。
補充一點,開發過程中堅持 lint、test,不同框架不管前期、後期都一樣爽~~~
如果你是搞後端的,vue和angular的話,推薦angular,沒什麼門檻,項目質量相對更有保障一點,還省心。但angular有問題的話,百度一般是找不到解決方案的,只能google和StackOverflow,一般都會有相應的解答,而且很細緻。angular的ui庫和後台模板等其實也不少,只是國內用angular2+的人不算多,因此國內的輪子不多,找輪子要費一點心,但肯定都是有的,因為,angular在國外熱度還不錯。如果你非常看重目前國內熱度的話,那就選vue,國內生態不錯,有問題也可以方便問
akveo/ngx-admin?github.comng-alain?github.com如果你的重心是在後端,沒有專職的前端工程師,那你可以試試layUI,layUI可以說是給後端攻城獅(前端技術很渣的)用的前端框架。
如果你的項目需要前後端分離,ng、vue、react都可以,angular or vue?我覺得這個問題有點像啃甘蔗,看你喜歡先甜還是後甜。
推薦Angular,以下是原因。
1、首先主要是我個人或者兩三個人用。但我偏後端,前端技術很渣。希望這個框架能減少我的工作量,技術積累並不重要。
答:使用Angular(+TypeScript),你會發現大部分時間你就是在寫「後端」代碼。
以用戶註冊為例,你會寫兩份「後端」代碼,第一份是MVCMVVM中的Model(一個獨立的TypeScript文件user.service.ts),它負責用戶註冊的業務邏輯:
import { Http } from @angular/http;
import { Observable } from rxjs;
import { map } from rxjs/operators;
export class UserService {
constructor(private http: Http) {
}
addUser(userName: string, password: string): Observable&<{success: boolean, message: string}&> {
return this.http.post(/user/add-user, {userName, password}).pipe(map(x =&> {
return x.json() as {success: boolean, message: string};
}));
}
}
第二份是MVCMVVM中的ControllerViewModel(一個獨立的TypeScript文件user.component.ts),它負責用戶交互和應用邏輯:
import { Component } from @angular/core;
import { UserService } from ./user.service;
@Component({
templateUrl: ./user.html
})
export class UserComponent {
userName: string;
password: string;
constructor(private userService: UserService) {
}
register() {
this.userService.addUser(this.userName, this.password).subscribe(x =&> {
if (!x.success) {
console.log(`註冊失敗${x.message}`);
return;
}
console.log(註冊成功);
})
}
}
以上兩份代碼之所以被稱為「後端」代碼,是因為它們跟前端HTML沒有任何關係,並且它們承擔了所有業務邏輯和應用邏輯的實現。
當然,作為Web應用程序,前端代碼是免不了的。為了完成用戶註冊功能,你還需通過這麼一段HTML(一個獨立的HTML片段文件user.html)來完成MVCMVVM中的View:
&
好了,基於MVCMVVM的用戶註冊功能完成了。當用戶輸入用戶名和密碼時,UserComponent的實例的屬性userName和password的值會分別被綁定為用戶輸入的用戶名和密碼;而當用戶點擊「註冊」按鈕時,UserComponent實例的register()方法會被調用。
接下來會發生什麼相信你已經知道了:UserService的實例的addUser()方法被調用,userName和password被POST到服務端路徑為/user/add-user的Web API,從而完成用戶的註冊。
完美的MVC模式和MVVM模式的合併,習慣後端代碼的你,一定會喜歡它。
PS. 上面三份代碼還需要通過一個叫「模塊」的TypeScript類來「封裝」,但並不複雜。
2、我更看中的是生態環境,希望碰到什麼坑能百度谷歌的到,想實現什麼效果網上會有比較多的解決方案
答:構建單頁面應用程序(SPA)需要的路由,實現數據綁定的表單功能,實現列表等數據綁定的指令,實現和Web API通信的HTTP包,簡單的依賴注入,還有動畫和服務端渲染等等,這些都是Angular框架內置的。所以,生態環境很好,絕對綠水青山。
至於能不能谷歌到。。我已經快兩年沒有用谷歌了。。但我可以必應(國際版)到結果(多數是Stackoverflow和一些博客)。。那你覺得是不是應該肯定也能谷歌到。。
PS. 我已經用Angular做了兩個項目了,小團隊三個人,另外兩個絕對的Angular新手,但就是把項目完成了。下面是項目運行效果圖(我也不善前端啊)。
3、第三方ui庫更全。基本上沒時間也沒能力自己搞ui,比如以表格為例,希望表頭固定、過濾、拖動等效果ui庫都有現成的。
答:Angular Docs(UI Component部分)列舉了很多UI庫,我用過其中列舉的這個PrimeNG,跟Angular集成的很好,但沒深入使用。
PS. 如果事件充裕,個人覺得使用UI庫不太好,它帶來了更多的學習和維護成本。
4、有現成的系統最好,類似這種
答:呃。。前面有先烈回答過了。。我也沒有試著去找過。。
最後的PS. 不好意思,沒有詳細地對比過Vue.js和Angular,但它們的以下核心區別讓我選擇了Angular。
Vue.js:「Vue 的核心庫只關注視圖層」。
Angular:讓你(盡量)只關注你的應用程序業務的實現。
先用VUE,然後再去了解ng,過程很自然。
如果是後端用,用angular吧。
之前使用後端強類型語言比如Java,個人建議Angular2+(ngx),對於後端開發人員來說ngx入門門檻和學習曲線都不是問題 雖然ngx國內學習資料相對較少 不過官方文檔和stackoverflow基本可以解決問題 掌握以後用起來相當流暢
如果All in one, 建議PHP Yii2即可,或者Java的Vaadin
用JQuery or Vue做一些動態JS輔助。
或者LayUI。
如果前後端分離,前端可以考慮Angular,
其實有巨多選擇: F#+Fable+Elmish; Golang + Angular/React/Vue; Kotlin + React; XXX + Dart 每種大的後端都有一個可以編譯為JS的配套方案。
如果你是後端的話,特別是 java,推薦 angular
個人建議Vue。
本來我是沖著Google的大名學Angular的,後來一段時間Angular的原佈道師大漠先生硬杠Vue的創造者尤雨溪先生,連發很多條知乎文章懟Vue,反而激起了我的好奇心,於是去Vue的官網看了看,發現Vue正是我等後端需要的前端框架。
與Angular不同,Vue的教程一開始就顯得平滑而自然。
Angular,開始學習的時候你會發現前端開始走向了需要第三方語言(typescript)編譯的恐怖路線,這裡並沒有對typescript的不滿,相反用過之後感覺typescript確實優秀,跟JAVA語言有很多類似之處。但讓前端走向先用第三方語言書寫,再用編譯器編譯,最後再到瀏覽器運行編譯好了的完全不需要你理解的HTML,CSS,JS,我感覺有點彆扭,而且也不希望我的開發機除了後端開發環境,再裝一些前端的編譯環境,我需要的只是一個輕量,簡單,能迅速將我後端應用的核心價值體現到瀏覽器的前端小框架,而不是另一種前端編程體系。
而Vue,跟著官方教程走,你會發現它一開始超級類似jQuery,包括手寫HTML,接著引入vue的js,然後開始根據規範寫vue的app等,這一切都何其親切,簡直跟我第一次使用jQuery的愉快體驗一模一樣。接下來Vue會迅速帶你了解雙向數據綁定,用來解決jQuery需要頻繁手工更新dom的痛點,這一點簡直太棒了(在Angular中,要等你花上一大段精力熟悉Angular體系之後才能體驗到這種G點)。然後Vue會帶你走向component組件,通過各種示例,你會發現將擁有類似行為,只是某些參數需要做調整的HTML代碼片段,封裝成一個個的component是多麼實用,於是你會自發地、發自內心地去接受和認同。(在接觸Angular的初期,安裝完開發環境後,就強制要你理解組件、模塊等概念,大多數時候你都是被動地去接受Angular中的概念,內心是模糊的,而不是清晰而認同的)
總之,如果你跟我一樣,只是作為一個後端工程師,在尋找一個輕量,小巧,實用的前端框架,甚至很多時候只是想要在HTML中的某一小塊區域,來上一個雙向數據綁定的toolkit,那麼,Vue是再適合不過了,如我所說,Vue會幫你將來自後端的核心價值,迅速體現到瀏覽器前端上,你什麼開發環境都不用安裝,一個常用的文本編輯器(sublime,notepad++...)就能搞定。
推薦一下vue。
其實angular對後端人員更友好,而且在傳統企業中使用的比較多。但這一部分人在開源社區並不活躍。相對來說vue社區就要繁榮多了,遇到坑直接去問作者尤雨溪就行了。而且更適合小而輕巧的項目,ui組件也很多。
個人比較傾向vue吧, 國內生態還是很可以的, star數95K足以說明問題, 剛特意看了下star數總排名第6。
你要的vue生態庫, 裡面有所有你想要的和你想不到的(現成的後台也有, 去裡面搜索Admin Template)。
vuejs/awesome-vue?github.com推薦閱讀:
※Web前端面試題總結
※前端日刊-2018.02.24
※前端組件庫大合集-必備收藏
※自學編程,從【前端開發】開始。
※用Lerna管理多包JS項目