寫了這一篇好像是在戰框架,還是我跑錯棚?
身為目前使用Angular 前端開發者,我認為Angular是新手入門最難上手的框架沒有之一。
回想起以前看到了一篇文章有關給初學者學 Rails的文章.
他指出初學者在學Rails框架的各種痛處,最近在學Angular後,又複習了這一篇文章,忽然有種既視感。
Angular 最大的問題就在於:它太過於嚴謹。
相較於其他的框架,他一開始的設計是偏向開發大型專案用
而Angular 為了規範每個開發者在專案開發的一致性,所以替工程師預設了許多立場(convention)以及大量地使用services、module等實作 設計模式。
但新手連基本的 web application 知識、設計模式 都不知道,
直接去學的 framework和 convention,絕對不是好事,也非常辛苦。
我們從 Angular 的官方入門教學來舉例吧:
它會帶新手去學很沒必要的5件事情:
官方教學介紹了產生 components 相關檔案的指令:
ng generate component heroes
然後angular cli會顯示以下訊息:
CREATE src/app/heroes/heroes.component.html (21 bytes)
CREATE src/app/heroes/heroes.component.spec.ts (628 bytes)
CREATE src/app/heroes/heroes.component.ts (270 bytes)
CREATE src/app/heroes/heroes.component.scss (0 bytes)
UPDATE src/app/app.module.ts (475 bytes)
只不過想做個簡單頁面,居然跑出了好幾個檔案,而且還改了某個檔案,還不知道改在哪一行。
對新手來說,這非常不友善。新手想要的,是在資料夾裡面一次建立一個檔案,然後在裡面寫一點東西。
接著看看程式有什麼反應、跑不跑得動。這樣才知道自己在做什麼、在學什麼。像這種打一個指令就蹦出很多檔案的學習方法,就算真的做出了東西,之後大概連怎麼修改程式都不知道,很容易有挫折感。
當透過Angular cli 建立專案後會看到專案資料夾有以下的檔案
然後去看官方的文件更悲劇。
Angular 專案中的每一個檔案又有它的故事XD(說明文件),整個資訊爆炸。
初學者一開始只想做簡單網頁或是個人Blog而已,真的有必要去面對這麼多檔案嗎?
這種架構是Angular 替工程師的軟體專案長遠著想,而詳細分工的結果。
新手並沒有要開發大型專案,做出幾個能跑能動的頁面就夠了。
結構或是程式碼醜一點無所謂,好上手就好,實在沒必要一開始就碰這麼複雜的。
官方提到了使用 Angular Form 相關的功能(Input、Form..etc)時,要include
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
之後才能使用Angular Form相關的功能。
我之前剛使用 Angular 的時候,常有直接使用 Angular Input 的 Function然後因為沒有 Inlcude 而直接報錯,然後畫面直接空白,要打開瀏覽器看 Error才知道問題點。
Routing也是,有時候初學者只想要做一兩個簡單的頁面去跑跑看。
最簡單的方式應該是透過像是 Live Server 等一系列的工具直接起一個Local Server 看結果,其連結對應資料夾結構的檔案,而不是學設定 Routing對應的 Components。
Angular 在發Request請求(簡單講就是跟後端要資料)時,會透過依賴注入的方式透過Service 要完資料後,再透過非同步的方式傳給compoents。
但是這基本上就要使用 Rxjs中的 Subscribe方法了,初學者可能就連非同步都不知道了,更何況還要學Rxjs。
他應該先學jquery基本的ajax方法、fetch或是 axios請求資料的方式
假如你原本就有寫過程式,而且有用過像是Java、C# 等強行別語言,那恭喜你,基本上學Typescript對你來說沒什麼障礙。
但假如你是完全的程式初學者,你還要學型別(Type)、類別(Class)、介面(Interface)…etc,還有物件導向的特性。
他應該先把Javascipt一些基本的特性跟es6的特性先弄懂就好
初學者對於開發網站的想像,不外乎就是「寫幾行程式碼,做出幾個小頁面」。
他一開始對於專案架構與設計模式沒有興趣,也負荷不來。
這個時候,使用Vue.js 或是 jQuery會是最舒服的路徑。
學框架至少要碰幾個東西:
對前端新手的建議是這樣的:
基本上只要先專供這三點就好,可以參考Vue.js或是jquery的基本教學文
先嘗試撰寫一些簡單的靜態頁面之後,嘗試使用 visual studio code的 Live Server起專案。
然後後端資料的部分可以先找像是JsonPlaceHolder 來串資料並且呈現在前端。
之後嘗試學習後端框架(Python 的Flask或是 .net core Web API…etc),撰寫簡單的API,再把前後端串起來(處理Cores,了解Json格式…等)。
入門最重要的是循序漸進,先想辦法做出一個能work的網站,之後再根據工作需求,把缺少的技能一個一個補起來。
在「實作出成品」與「學習新知識」之間來回進行,反覆累積成就感與能力。
突然全部一起學,只會非常茫然、倍感挫折而已。況且根本沒有必要。
如果一開始就學Angular 就更慘了,一開始就得學一些工程師必需的設計模式。
總結起來,我給框架初學者的建議就是:
用Angular非常辛苦,用Vue.js非常舒服。