js framework同css framework有何分別?

由於下個project需要用js framework, 急需由angular, react, vue中選一個
睇過各種比較後, 睇到有一句話: "react.js 其實只是一個ui庫"
就係睇左依句說話, 所以就選擇左react, 因為我整ui唔太得, 希望靠react可以幫助我製作出美觀的page

但實際上學左一段唔短既時間, 岩岩想試下整ui, 發現react跟本無任何製作ui的功能, 本質上angular, react, vue三個都係一樣, 只係將data同dom產生關聯

例如react要整ui的話, 就要再裝ui library, 以bootstrap為例, 就要裝依個
https://react-bootstrap.github.io/
咁angular同vue一樣有ui libaray, 點解我要用react?
甚至唔用ui library, 直接用css framework, 同一個做法可以套晒係angular, react, vue上面, 洗乜學react-bootstrap, 淨係可以係react上面用

早知選vue依個唔洗typescript同jsx的framework, 可惜而家已經無時間再轉

所以想知道依D js framework同css framework有乜分別? 如果無分別, 我就唔再深入落去, 直接用返css framework就好, 可以慳返D時間

"本質上angular, react, vue三個都係一樣, 只係將data同dom產生關聯"你說得没錯,
"react.js 其實只是一個ui庫"中的UI庫係指MVC,MVVC,MVVM中的view那部份,
呢句係指 react.js 其實處理UI(View)那一部份的庫, 而不是一整個的Framework, 不是幫助你製作出美觀的page, 而是幫助你製作分割和制作组件. 所以一質上react.js只是提供了angular, react, vue上部份勁能.


回覆 1# 3ldk

TOP

react.js 其實只是一個ui庫
<< Not 100% correct
React handle the VIEW for the application, if u need to perform an AJAX call let say, u may need another lib.

TOP

本帖最後由 hihihi123hk 於 2019-9-21 17:45 編輯
由於下個project需要用js framework, 急需由angular, react, vue中選一個
睇過各種比較後, 睇到有一句話: " ...
3ldk 發表於 2019-9-21 01:39

簡單一個例子

一粒 Switch 有 On/Off State

用 css framework 等如你自己加 Logic 判斷 true/false 再比 Css class 佢

用 ui component framework 佢幫你做咗 Abstraction,你只需要 Pass true/false 落 properties 佢自動就會 Handle

用人地多一層寫好嘅 Component 可以寫少好多 Code 當然你要學點用啦

via HKEPC IR Extreme 4.2.3 - iOS(4.0.2)

TOP

本帖最後由 hihihi123hk 於 2019-9-21 17:50 編輯

Web 個世界好混沌,以我認知簡介下 React Vue Angular

React
== "js library for rendering ui"

React + Redux + 適當 Architect
== "js framework with Flux approach"

React + MobX + 適當 Architect
== "js framework with Reactive data approach"

ReactBootStrap/ React-Material-UI
== "ui component framework"


Vue
== "js framework with default reactive + event-bus approach"

Vue + Vuex
== "js framework with flux approach"

Vue 3.0 functional API
== "js library for rendering ui"

VueBootStrap / Vueify
== "ui component framework"

Angular
== "typescript framework with Rx approach"


所以點解 Vue 起手易寫咁多,就係佢天生已經幫你諗咗一個 Architecture,最低限度都幫你拆開咗 View-Logic / Business-Logic,大部分野唔洗自己諗點樣 Architect,跟官方 Doc 教咁做已經可以好 Nice 咁解決好多問題

React 新手通常冇好好 Architect 過,好易寫到啲 Logic 一餅野,特別難 Maintain 之餘又會中好多 Re-render 陷阱。所以新手一定要專登搵教學去學點樣去 Architect 一個 React Project,如果缺乏呢方面知識基本上好易變成一個爛 Project

另外,Styled-Component 喺 React 都算係非常普遍嘅 Styling Abtraction 比起原生 Solution 更好,有興趣可以睇埋

via HKEPC IR Extreme 4.2.3 - iOS(4.0.2)

TOP

本帖最後由 fx360bx 於 2019-9-22 15:12 編輯

「react.js 其實只是一個ui庫」呢句野完全 100% 係錯誤。
React 只係幫你做 binding、component update/rendering 既 lifecycle,佢本身沒有提供任何 UI layout components,你只能自己寫 non-standard HTML tags(即 components),或者用 standard HTML tags(div、input、h3)。如果你話你 UI 設計屎,用 React 或 Angular 或 Vue 都幫唔到你。

不過冇錯,你的確要既係一個 UI 庫,Material UI、Ant Design、Bootstrap、Semantic UI 等等,都係你既好朋友。用左佢地既話你個網頁樣衰極都有個譜,亦只需要好少 CSS styles 就可以 customize 到。

不過你揀 React 都冇錯既,只係你揀佢既原因係錯既。

我揀 React 係因為 React 最多人用,同埋用落覺得 JSX 好方便。One-way data binding 呢個做法都係易 trace bugs 啲,其餘兩個 frameworks/libraries 就有 two-way data binding,而 React 同 Vue 係用 virtual DOM,理論上會 efficient 過 Angular。不過 Angular 喺香港都有唔少 market。以我所知 Vue 就少公司用啲。

TOP

本帖最後由 3ldk 於 2019-9-23 14:45 編輯

其實我依幾日已經將之前寫既demo code全部用vue重新寫左一次
因為依個project需要長期maintain, 唔想寫成爛Project
等我經驗有返咁上下再玩返react

而且我其實唔太中意react將html寫係js code入面(jsx), html就應該寫返係html入面

而家只淨低要選一個ui component library
所以想問下React同Vue, 各自擁有最多最齊全component既library分別係邊兩套?
以前用bootstrap經常遇到既問題就係缺component, 所以外觀其次, 最緊要係夠齊夠多

另外一個問題係, 用左js ui library, 再用套多個CSS framework落去會唔會好易出問題? 畢竟js ui library實際上就係一個CSS framework, 同時用兩套css, 擔心有衝突
會想加多套css落去, 主要係因為最近發現左套正野, https://tailwindcss.com/
如果用左依套野, 就算自己設計幾差都好, 我都可以對住user real time照足要求改css
所以好想用落個project

TOP

本帖最後由 fx360bx 於 2019-9-23 19:41 編輯
其實我依幾日已經將之前寫既demo code全部用vue重新寫左一次
因為依個project需要長期maintain, 唔想寫成爛 ...
3ldk 發表於 2019-9-23 14:42



    如果係要長期 maintain,首選應該係大路既 JS library/framework 同埋 UI library。所以我會建議 Angular 同 React 二選一,而 UI library 都應該揀啲大路啲既。UI/CSS library 我都認為用一套好了,多過一套唔知啲 class names 會唔會撞。

唔係好明點解你話有返咁上下經驗先玩 React,其實 React 好易上手,我都係睇左 YouTube 一兩條 todo list 片就識寫,之後又學下用 Redux。

至於 HTML code 同 JS code 混埋一齊,其實係有好處,一個 JSX file 就搞掂,唔洗開好多個 files,而且都易 maintain,除非你寫到個 structure 唔好。

TOP

本帖最後由 shal 於 2019-9-23 22:20 編輯

我個人用VUEjs (MVVM) + bulma(UI library) + adonisjs (backend)

VUE 我就系喜歡佢JS & HTML & CSS 一個file過但又系分離的玩法
勁易mainting~

我手上用上面組合己完成左四個website 一個custorm pos+wsm
新project 就系玩Support Ticket system(for 60人公司 inhouse  use)

TOP

本帖最後由 hihihi123hk 於 2019-9-24 04:49 編輯
如果係要長期 maintain,首選應該係大路既 JS library/framework 同埋 UI library。所以我會建議 An ...
fx360bx 發表於 2019-9-23 19:39

講真,React 冇 Hooks 年代真係喊出黎,乜都用 HOC, RenderProps 解決 Code Sharing 嘅問題,難 Trace 又唔 Effective

但係自從有 Hooks 先可以 Effective Share Code 我都會鼓勵人用 React 做 Web。

不過呢,如果 Requirement 冇限制而 Developer 本身又寫過 AngularJs 1 嘅老嘢,其實係好適合用 Vue;加上 Vue 好多 Plugin 都自己 Maintain 埋一份,例如 Vue-Router/Vuex,唔似 React 幾乎乜都要 Third party,需要有啲業界公認必配嘅 Plugin 但問題係新手好難一開波就知,比起學 Vue,學 React 相對要做多好多功課

另外 Vue 3.0 function-based Component API 都會做到 React 做到嘅彈性(Composition)   兩者個差別又縮窄咗少少

via HKEPC IR Extreme 4.2.3 - iOS(4.0.2)

TOP