做為後端開發人員,如何選擇合適的前端框架,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 用戶,更應該馬上實驗下,你會發現一切都很熟悉。

遇到問題不用擔心,官方文檔能解決大部分問題,解決不了的,來知乎問就是了。


如果你想

  1. 自己去找 AJAX 庫
  2. 自己去找測試庫
  3. 自己去想文件組織形式
  4. 自己去找 i18n 方案
  5. 自己探索 TypeScript 最佳實踐
  6. 自己探索表單驗證方案
  7. 自己探索路由最佳實踐

就用 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.com圖標ng-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:

&

用戶名:&
&

密碼:&
&

&

Web前端面試題總結
前端日刊-2018.02.24
前端組件庫大合集-必備收藏
自學編程,從【前端開發】開始。
用Lerna管理多包JS項目

TAG:前端開發 | 前端框架 | Angular | Vuejs |