進度條

多想一下,或許這個專案不需要用ReactJS。

大家瘋狂學習JavaScript ES6的原因,從劣勢來反向介紹ReactJS

作者: 進度條編輯群 更新日期:

自從進度條開始打Facebook廣告後,

小編的Facebook也很常出現無論是國內還國外的文章或廣告,

前一陣子ES6這個名詞也一直出現,當然也有很多同學詢問我們課程是否會包含ES6。

 

 

 

很可惜的是,目前進度條的課程並沒有相關的規劃。

這邊需要先跟大家說聲抱歉。

 

 

不過先寫篇文章輕鬆帶過,說服大家不要擔心的時間還是有。

所以接下來簡單介紹一下ReactJS 、JavaScript、jQuery與AJAX在實務上的運用。

 

 

 

React為Facebook提出的程式架構,利用JavaScript ES6與Bable編譯器為基底。

React家族已經相當龐大,除了ReactJS寫前端外,同時也可以像NodeJS 一樣寫後端,

還有React Native可以用來寫手機程式,正所謂一鴨三吃,啊不對,應該是一箭三鵰(莫名多一鵰)

讓人覺得似乎學會了就無敵了,距離寫作業系統也不遠了吧。

 

 

但實際上,就台灣而言,同時會三項都專精的高手應該不多,畢竟React是2013年的產物(來源WIKI),

至今只有四年而已。而且前幾年是Angular js的全盛期,所以實際上開始運用在專案上可能都大多會是2015年左右。

所以小編在看2016年的人力銀行的工作需求時,大多還是Angular與ReactJS會一個即可,

畢竟很多願意擁抱新技術的公司當時前端應該都是Angular,並且打算轉換到React。

當時也有看到幾家需求是開React Native的,不過比較起來還是少一些,多半是剛起步的新創公司。

因為ReactJS可以只使用在個別頁面,使用React Native的話就是砍掉重新開始了,願意冒這風險的公司還是少。

當然等這些新創沒這麼新以後,相關職缺會不會多就不一定了。

 

 

看到這你可能會想說,標題這麼負面,不是應該要好好的鞭React嗎?

其實不是的,我想要表達的只是並不是所有情況都是用ReactJS就好棒棒。

但這裡我想從jQuery 和 AJAX開始講起。

 

 

AJAX,Asynchronous JavaScript And Xml(非同步JS與XML)

聽起來好像很神秘很帥,不會它好像就不會寫網頁似的,

(但這是事實,畢竟現在Single page website當道)

 

其實就本質上,AJAX的目的是:

 

不需要跳頁就可以跟後端送或要資料。

像這種瀏覽器會動到硬體裝置的動作,一定是利用JavaScript特定的Libary。

因為送資料到後台這個動作必須要驅動網路卡。

所以他的順序會是 JS函式庫 => Browser => 應用程式層Driver API => 系統層Driver API => 網路卡(硬體) => “發送資料”

(偷渡一些網路與機算機概論的東西,如果看不懂的話就只要記得通常都是需要使用特定函式才能驅動硬體,

如果有興趣這裡推薦Linux Network 網路程式設計這本書(已停產?),當然類似標題的書應該都有教相同的概念)

 

以AJAX來說,我們用的是 XMLHttpRequest() 這個Object。

他被jQeury包裝成$.ajax() 這個函數,當然無論是哪個都可以實現,只是通常jQuery方便些。

 

 

 

假設我們使用了$.ajax()去跟後台要資料,後台會回應我們一段資料,這筆資料可以是任何型態,

可以是純文字、HTML、XML、圖檔、或是現在最常見的JSON,甚至可以混雜著傳,

沒有人會管你,除了你的主管以及你的同事,因為後台你做的然後亂傳的話他們會很痛苦。

通常在回傳(Response)的檔頭他會說他是什麼資料型態(例如 JSON =>  application/json ),

但他也可以說他是JSON結果裡面是HTML,這種牛頭不對馬嘴的事情其實也不算少見(當然是錯誤示範)。

 

 

 

我們這邊就來一個狀況劇,

假設你這邊有一個需求,要求用一個Table表記錄所有訂單當下的狀態。

你們公司還算忙碌,所以不只一台電腦再更改這個表,

不過這個表的即時性沒那麼高,你負責的部分每5分鐘更新一次就可以了,

所以你就用PHP 或 Rails 或 C# 或不管你用什麼後台程式語言搭配HTML,

在網頁顯示的時候畫出這個表,

再使用JS的計時器(setinterval)搭配AJAX,每5分鐘跟後台要資料。

 

 

這時你有幾個選擇,直接叫後台用新的資料畫出HTML回傳,這時你只需要整個Table覆蓋掉就可以了。

第二個選擇,你可以回傳JSON,在很辛苦的用JS DOM createElement()一個一個畫出來,通常至少30行程式碼以上。

 

 

如果你偏好第一個方法,多半會被退件,因為HTML資料量比JSON大得多,而且彈性不夠。

不過資料量我覺得現在網路都很快,一點都不是問題,主要問題是彈性不夠,被HTML包住的話,

對個別資料做運算、組合是比較不方便。但這方法的好處是可以共用後台畫出HTML的程式碼(HTML都在後台產生)。

 

 

第二個方法是主流,在第一次顯示表格的時候用後台程式語言畫出來,

第二次以後就是用JavaScript的方式來重新畫出來。缺點就是每次碰到這種問題,都要寫兩次程式碼。

一次是用後台程式語言,另外一次是用JavaScript。

非常麻煩,如果資料結構改的話,兩邊都要改,而且createElement() \ appendElement() 實在是不直覺。

 

 

因此有人就想出來第三個方法。

一開啟網頁的時候不用後台程式語言畫出表格,而是網頁一準備好就AJAX,從第一次開始就使用JavaScript畫。

缺點是會多一次Request,但這不是什麼大問題。不過這一樣沒辦法解決DOM不直覺的問題。

 

 

這邊就連到了React, 在React裡提出了另外一種格式,叫JSX。

他的寫法可以把HTML直接跟JavaScript混合,看起來比較直觀。

關於HTML就直接用HTML寫,JavaScript現在則是使用ES6的語法。

(在今年2017以前,官網上的範例都還是ES5)

所以在這個案例上,寫起來就會比較直覺,但好不好維護就見仁見智。

 

 

好!可以開始學React了,什麼時候開始上課!

 

啊...先別著急,React除了這個案例的好處外,還有其他好處,同時也是麻煩的地方。

首先瀏覽器還不支援 ES6 與 JSX,所以必須要編譯過才能使用,就像Sass一樣。

現在主流的編譯軟體是Webpack,說實話,它不算是很親民,搞懂它就需要費一些時間。

而且React 要求把所有的功能都模組化,在模組化下,如何使用JavaScript就又是另外一件事。

(並不是指做成Object 或是 Class)

再來React 還有他自己的資料管理與生命週期(Life cycle),學習這也需要一些時間,並且會有些限制,

在React裡面,它把資料統一管理,有某種程度上的限制,讓初學React的人很頭痛,資料無法輕易更改。

在React這些限制下完成程式可以讓你的網站互動性與即時性大幅增加,網站程式碼管理也比較容易。

但如果你的網站根本就沒有互動性與即時性的需求,使用React只會讓你多寫很多程式碼,

而且目前比較難找到人接手(或是人比較貴)。

 

 

另外的缺點是目前所有前端架構都有的問題,可能會退流行,就像是Angular爆紅到銳減,

中間也不過 1 年的時間。就算他是Google的也一樣。

而且React還是持續在更新,像小編2016寫的程式碼用現在版本的JSX編譯器會出現一大堆警告,叫我用ES6語法。

這邊要特別提到程式語言 Swift,他也是一直再改,這對開發超過一年的案子有點傷,每年都出新版本,部分語法還會改。

 

 

 

最後要提到現在當紅的3個前端架構 ReactJS , Angular 2(不知道4有沒有公司開始用了), Vue.js的簡易看法。

小編個人是覺得ReactJS會活比較久,因為現在生態系比較完整。

Angular 與 他的好朋友Typescript 目前看起來都是微軟相關公司在推廣。

Vue.js是唯一大陸人做的,勢單力薄,所以即使目前很紅,但我並沒有那麼看好。

不過有傳言他和阿里巴巴的Weex有合作(可以想成阿里巴巴的React native,手機APP的解決方案)

真的配合得很好的話,應該會滿成功的。

Vue.js有一個比較少人注意到的特點,就是他是大陸人寫的,非英語母語。

所以語法上面不會有很多又臭又長函數名,也偏好用縮寫表示。

就算有,用的單字也比較簡單

 

 

所以結論就是,用React有很多好處,小編自己也很愛用。

但是如果專案很簡單,會讓開發週期變長很多,而且沒任何好處還有壞處。

(本來菜鳥練習等級,突然變成沒個40~50k找不到人維護。)

新技術也很容易一直改變,這都是做一個專案需要事前仔細評估的項目。

 

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

Small logo

進度條編輯群

進度條編輯團隊