iT邦幫忙

2

Angular,React,Vue選擇,或更好的建議?

大家好,

因為原有的系統(網頁)是由他人開發無法更動且沒有RWD,在手機上面看起來會怪怪的

所以目前我寫了一個web api可以跟原本系統後端取得資料,希望前端顯示的部分就全部重寫

原有的情境以及考量點:

1.原有系統的表單(網頁)都是動態產生的,也就是所有顯示欄位(有xy座標)都存在資料庫,等到要顯示的時候再讀取欄位以及資料,接著將欄位跟對應資料結合放在表單上面顯示。

我的想法:先做出一個樣版網頁,讀到欄位後再依照座標順序塞進去,這樣方式不知道哪種框架比較適合?

2.原有的系統表單可能會有客製的JS,一樣是存在資料庫,等讀取表單的時候,會一起載入
舉例:
A.填了欄位A之後,把欄位A的值帶到欄位B。
B.或是填了欄位A,根據這個值到某個table抓另一個值回來帶到欄位B。
其實還有很多不同的情形。先不考慮能不能直接用在新的網頁上,假設可以解析知道客製的JS在做什麼,然後套到新的網頁上面,這樣哪種框架比較容易達成?

又或者說,從後端讀取了欄位跟資料跟JS,有什麼比較適合的方式來做呈現?

我看了以下三位大大的影片之後,又更加選擇困難了@@

給我一個拒絕 Angular 開發框架的理由 - Will 保哥
https://youtu.be/QNW0nYaidDY

我有一堆選擇 Vue 開發框架的理由 - Kuro
https://youtu.be/TsspHaQxYrY

給我一個放棄 React 開發框架的理由 Part1 - Sam Lee (山姆大叔)
https://youtu.be/kjlVJ10GsyU

目前看起來TypeScript可以說是必學了,因為三種技術也慢慢都支援ts

如果扣掉ts的學習成本,感覺angular還有很多規範要學?

而react則可能會面臨選擇問題?

vue雖然github的星星最多,但是不像其他兩者後面都有大靠山,就怕哪一天不再維護了?

看更多先前的討論...收起先前的討論...
這真是個好問題
我已追蹤看看有沒有什麼好答案
ckp6250 iT邦好手 1 級 ‧ 2019-12-03 20:20:31 檢舉
  這是老派做法,幾乎多數表單都是動態,依賴一支主程式吃遍天下,和我的做法如出一轍。

  小聲問一下,原設計師應該有 50 歲以上了吧?

  我猜,這題得到的答案應該會和我前幾天問的一樣,【趕快學框架,什麼框架都好。】
Shika iT邦新手 5 級 ‧ 2019-12-04 09:34:24 檢舉
原設計師不知道是誰@@只知道這個系統有5年以上的歷史了
https://www.youtube.com/watch?v=J-gzpu_-D-Y&list=PL8dIIwCMF-SPIF76TsrRmYTdgYhDgGiF0&index=5&t=117s
Shika iT邦新手 5 級 ‧ 2019-12-04 16:19:02 檢舉
我把三位大大的演說都看過一遍,反而感覺更難選了...目前就是三強鼎立的狀態,沒有最好的,只有適合你的,現在感覺不知道哪一個比較適合,因為選定了之後就一定要花時間學,學了之後發現不適合,要從一個坑到另一個坑也是需要時間的。
dragonH iT邦超人 5 級 ‧ 2019-12-04 17:24:33 檢舉
>要從一個坑到另一個坑也是需要時間的

是沒錯

不過你熟悉了其中一個後

你會發現其實他們都有很多類似的地方

e.g.

都有

props 跟 component 的概念

之類的

稍微了解一下

應該就很快能上手
yorklin iT邦新手 5 級 ‧ 2019-12-05 15:47:06 檢舉
https://www.slideshare.net/WillHuangTW/enterprise-frontend-framework-trend-2018

保哥有為此分析過,請自行參考~
我開始工作這一年來有碰 Angular 算是半個開發(大多都還是處理 web form),真心覺得 Angular 學習曲線頗高XD
不過前輩留下來的專案是 AngularJS,也得硬著頭皮接下去學 (不然要砍掉重練…)
我使用 Angular,原因有二:
1. 我負責的網站都是企業內部在使用,不需要很美的畫面,但是快速開發很重要,Angular 提供了許多制式的 component,這些 component 很適合用在企業內部的工作上。
2. 我所在的部門是 java team,大部份的人有技術底子,對於學 Angular 來說不會是難事,而且 Angular 寫出來的程式有特定風格,很好維護。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
2
dragonH
iT邦超人 5 級 ‧ 2019-12-03 18:03:41

1 .

先做出一個樣版網頁,讀到欄位後再依照座標順序塞進去,這樣方式不知道哪種框架比較適合?

都可以

2 .

假設可以解析知道客製的JS在做什麼,然後套到新的網頁上面,這樣哪種框架比較容易達成?

都可以

3 .

又或者說,從後端讀取了欄位跟資料跟JS,有什麼比較適合的方式來做呈現?

真的都可以


我知道我回的很像廢話

但是真的都可以

因為這些前端 framework

還是一樣用 js 去寫的

所以你原本的 code

稍微改寫一下

應該就能配合這些框架

甚至有些重複的部分

可以獨立出來寫成 component

減少你 code 的量

所以結論

看你喜歡哪個 framework 就挑哪個

現在應該都是 react 或 vue 兩個在挑會比較多

我的話會挑 vue

沒有為什麼

單純喜好問題

看更多先前的回應...收起先前的回應...

今天晚上有空嗎?
都可以/images/emoticon/emoticon25.gif

WQ iT邦新手 2 級 ‧ 2019-12-04 09:31:02 檢舉

看完"阿展展展"的回應...
我也是都可以

/images/emoticon/emoticon07.gif

小魚 iT邦大師 1 級 ‧ 2019-12-04 11:14:41 檢舉

阿展展展
請先洗乾淨.

Homura iT邦高手 1 級 ‧ 2019-12-04 11:17:55 檢舉

上面的在....

小魚 討厭啦 這麼直接 /images/emoticon/emoticon25.gif

小魚 iT邦大師 1 級 ‧ 2019-12-04 11:27:12 檢舉

我是說,
吃飯前要先洗手.
/images/emoticon/emoticon11.gif

/images/emoticon/emoticon30.gif

dragonH iT邦超人 5 級 ‧ 2019-12-04 11:45:34 檢舉

/images/emoticon/emoticon21.gif

恩 天氣確實變冷了呢(遠目

0
小魚
iT邦大師 1 級 ‧ 2019-12-03 19:47:30
  1. 是誰要重寫
  2. 那個人的專長是什麼?

其實前端用什麼寫都可以,
也都能達成目的,
不過從熟悉的先下手是比較快的,
如果都不熟悉,
那就擲骰子決定學哪一種吧,
反正都不會差太多.

https://ithelp.ithome.com.tw/upload/images/20191203/20105694Gj4jNOIbCH.jpg

看更多先前的回應...收起先前的回應...
ckp6250 iT邦好手 1 級 ‧ 2019-12-03 20:27:04 檢舉

骰子只有六面,可是框架不止六種,應該用
https://ithelp.ithome.com.tw/upload/images/20191203/201196629JzNT4fFht.jpg

Shika iT邦新手 5 級 ‧ 2019-12-04 09:30:41 檢舉

1.我要重寫
2.會用jqery跟bootstrap

小魚 iT邦大師 1 級 ‧ 2019-12-04 09:43:14 檢舉

既然答案都出來了,
就不用再問了,
除非你很閒有時間學新的東西,
那就學吧,
反正學會了就是自己的,
我是寫過React跟Vue,
Angular倒是沒寫過.

https://ithelp.ithome.com.tw/upload/images/20191204/20119546oeZ8w0A6UH.jpg

ckp6250 iT邦好手 1 級 ‧ 2019-12-04 10:44:51 檢舉

每面都【大吉】?
那要選什麼哩?

小魚 iT邦大師 1 級 ‧ 2019-12-04 11:14:12 檢舉

選 【大吉】

/images/emoticon/emoticon39.gif

咖咖拉 iT邦好手 1 級 ‧ 2019-12-05 14:32:40 檢舉

我還以為要切這骰子

XD

0
Lucas Yang
iT邦新手 4 級 ‧ 2019-12-03 20:09:16

雖然三個都可以,不過我個人私心推薦用 Vue.js (其實真的只是因為我在用Vue而已)

拿官網的宣傳標語:易用、靈活、高效

/images/emoticon/emoticon08.gif

不管用哪個框架,都要花時間去了解啊

0
froce
iT邦大師 1 級 ‧ 2019-12-03 20:09:51

1.原有系統的表單(網頁)都是動態產生的,也就是所有顯示欄位(有xy座標)都存在資料庫,等到要顯示的時候再讀取欄位以及資料,接著將欄位跟對應資料結合放在表單上面顯示。

阿?我第一次看到欄位是跟座標有關的...
你還要做RWD耶,欄位跟座標有關你要怎麼處理?

2.原有的系統表單可能會有客製的JS,一樣是存在資料庫,等讀取表單的時候,會一起載入
A.填了欄位A之後,把欄位A的值帶到欄位B。
B.或是填了欄位A,根據這個值到某個table抓另一個值回來帶到欄位B。

是可以做,不過你舉的2個例子都不需要從資料庫拉過來丟過去的吧...
填了欄位A,B欄位是由A欄位決定的,那你資料庫可以存A欄位就好,B欄位是拿來顯示的。

然後像這種資料連動,是MVVM框架的專長。

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2019-12-03 20:39:18 檢舉

阿?我第一次看到欄位是跟座標有關的...
你還要做RWD耶,欄位跟座標有關你要怎麼處理?

自己計算吧,
我現在的WPF專案就是這樣,
WPF做RWD XD

froce iT邦大師 1 級 ‧ 2019-12-03 21:02:34 檢舉

WPF會需要這種麻煩的設計?
現在的UI不是都靠layout來設計RWD,靠事件傳遞來處理事件?

小魚 iT邦大師 1 級 ‧ 2019-12-03 22:39:01 檢舉

客戶要求的,
在不同解析度顯示不同大小.

froce iT邦大師 1 級 ‧ 2019-12-04 08:49:45 檢舉
Shika iT邦新手 5 級 ‧ 2019-12-04 09:24:01 檢舉

1.座標是舊系統的東西,我想就依照由左到右,由上到下,這樣的方式放到新表單上面。當然新表單會先設計好如何對應。
2.舊系統的做法是有一個method的資料表,裡面有JS跟C#的code,這些code可以跟欄位對應,以前端來說,當表單載入的時候,會順便讀取JS,然後把JS應用到對應的顯示欄位。

froce iT邦大師 1 級 ‧ 2019-12-04 09:32:17 檢舉

2.舊系統的做法是有一個method的資料表,裡面有JS跟C#的code,這些code可以跟欄位對應,以前端來說,當表單載入的時候,會順便讀取JS,然後把JS應用到對應的顯示欄位。

我猜這是asp或是純php時代的寫法,以目前的網頁框架來說,你應該用不太到這種設計了。
目前的前端框架都是朝向前後端分離的走向,用這種方式你會很麻煩。

0
阿展展展
iT邦好手 1 級 ‧ 2019-12-03 23:09:31

這些需求有真的需要用到框架嗎??
如果你對於標題提到的三個名詞都不太了解

那我建議你...用原生刻 + bootstrap 就好了...

當然 如果要包出去 那就是另外一回事了....

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2019-12-04 07:33:24 檢舉

jQuery 1票

jQ 不錯 QQ

Shika iT邦新手 5 級 ‧ 2019-12-04 09:31:50 檢舉

之所以要用框架,是老闆說要用的~

那我會建議你用最輕量的 vue 就好惹

froce iT邦大師 1 級 ‧ 2019-12-04 09:34:19 檢舉

https://segmentfault.com/a/1190000000355277
你可以跟你老闆說你要用最輕量、最多人使用的框架---Vanilla JS。

XD

香草JS/images/emoticon/emoticon38.gif

ckp6250 iT邦好手 1 級 ‧ 2019-12-04 10:39:16 檢舉

看來還是大家對我比較好。

樓主的情境,其實和我前些天問的有些雷同,

https://ithelp.ithome.com.tw/questions/10196151

老派做法與框架之取捨,大家都鼓勵我放棄舊技法,擁抱框架。

恩...問題不太一樣嘛 大大問得比較偏向(這是什麼東東)
而他問的是(應該要怎麼做 怎麼選)
在我的理解...這是兩個不一樣的問題辣~/images/emoticon/emoticon48.gif

froce iT邦大師 1 級 ‧ 2019-12-04 11:26:55 檢舉

你的問題和這位的問題不太一樣啊
要怎麼做和為什麼要學這是兩碼子事...

以這位目前的狀況,除非打掉重練兼做資料轉移,要不然我也不覺得有啥非要用框架的理由。

froce 理由有阿,老闆說要換/images/emoticon/emoticon28.gif

froce iT邦大師 1 級 ‧ 2019-12-04 12:51:38 檢舉

我有給他框架啊,你瞧不起香草JS喔?XD

/images/emoticon/emoticon17.gif

ckp6250 iT邦好手 1 級 ‧ 2019-12-04 15:08:55 檢舉

  管它什麼東東,學就是了,反正不會少塊肉。

  坦白說,我還真學了不少(種類),到頭了,只精熟了 vfp 一項,但,已經是昨日黃花啦。

  當初也不曉得是怎麼掉入這個坑的?更迭這麼快。

  另外,我覺得打掉重練不是個好主意,肯定 bug 一堆,為框架而框架,未蒙其利先受其害,應該等新專案再用框架去做。

(這是我的藉口啦,舊系統穏定上線很多年了,動都不敢動。)

0

我就不針對你的問題回答了。

要嘛,你維持現況。

不要嘛,先學現在的框架後。再來框架的原理運行你要的東西。
千萬不要想用能搭配你的理論來找框架。依現代來講。你不到的。
但你會在學新的框架裏找到更適合且打翻你原本的計劃想法的做法。

所以,我不會回答你的問題就是在此。因為如果要造著你的構思去找適合的框架。很難。
但先學一個框架來應用你的想法,倒是很簡單。

ckp6250 iT邦好手 1 級 ‧ 2019-12-04 10:43:53 檢舉

我算是乖寶寶,已經在學框架了,
很有趣,大開眼界。

/images/emoticon/emoticon42.gif

0
blurblue
iT邦新手 5 級 ‧ 2019-12-04 11:33:12

Angular 就不考慮了。
React 和 Vue 到底谁更牛?听听尤雨溪怎么说
有在看尤雨溪(vue作者)的twitter,會發現他的政治立場很中國,所以,我不用vue。

國外用 react 的多。

看更多先前的回應...收起先前的回應...

哎呀 別因為政治立場啦 vue 在紅就像浪潮一樣
前端兩年一換,看他能活多久囉

但是...如果不會的話 就遜掉啦 /images/emoticon/emoticon48.gif

ckp6250 iT邦好手 1 級 ‧ 2019-12-04 15:41:44 檢舉

  我覺得,【看他能活多久囉】是一個很重要的指標,誰比誰厲害不是最重要,誰能活得久才重要。

  投入一項技術,由摸索到精熟,總要經年累月, php 從以前就開始被人嫌東嫌西,說它缺這個少那個,又說它速度不快,但人家到現在還活得好好地,而且,目前看來還沒有壽終正寢的蛛絲馬跡,投身其中至少不會蝕老本。

Shika iT邦新手 5 級 ‧ 2019-12-04 16:47:28 檢舉

為什麼會說Angular就不考慮了?

sx0800 iT邦新手 2 級 ‧ 2019-12-04 23:02:13 檢舉

花幾天看了一回 angular 後,我就決定放棄它,和以前熟悉的 js 差距頗大,沒把握駕馭。
又花幾天看了 vue,還沒開始學卻會了一些些,它就是這麼簡單 、易學、易用。

0
luandjack
iT邦見習生 ‧ 2019-12-09 10:37:10

假如是金融業可以考慮學angular,因為IBM的專案技術使用比較偏向angular,因此下遊廠商也跟著也會學習使用angular,非金融業目前應該還是react的使用人數領先,大陸在專案的使用上也是react使用的人數比vue多,也可以到幾個前端ui的官網研究對三大前端框架的支持度,也可以成為一個參考值

0
JavidHsu
iT邦新手 5 級 ‧ 2019-12-09 10:58:38

感謝分享!!!

我要發表回答

立即登入回答