寫在前面

寫了這一篇好像是在戰框架，還是我跑錯棚?

身為目前使用Angular 前端開發者，我認為Angular是新手入門最難上手的框架沒有之一。

回想起以前看到了一篇文章有關給初學者學 Rails的文章．
他指出初學者在學Rails框架的各種痛處，最近在學Angular後，又複習了這一篇文章，忽然有種既視感。

這不就是我(初學者)在學Angular遇到的問題嗎?

新手用Angular入門的問題在哪？

Angular 最大的問題就在於:它太過於嚴謹。
相較於其他的框架，他一開始的設計是偏向開發大型專案用
而Angular 為了規範每個開發者在專案開發的一致性，所以替工程師預設了許多立場（convention）以及大量地使用services、module等實作 設計模式。
但新手連基本的 web application 知識、設計模式 都不知道，
直接去學的 framework和 convention，絕對不是好事，也非常辛苦。

我們從 Angular 的官方入門教學來舉例吧：

它會帶新手去學很沒必要的5件事情：

1. 新手沒必要學框架的 command line指令
2. 新手沒必要學框架的檔案結構
3. 新手沒必要學 Module、Routing
4. 新手沒必要學依賴注入
5. 新手沒必要學Typescript

新手沒必要學框架的 command line指令

官方教學介紹了產生 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 替工程師的軟體專案長遠著想，而詳細分工的結果。

新手並沒有要開發大型專案，做出幾個能跑能動的頁面就夠了。
結構或是程式碼醜一點無所謂，好上手就好，實在沒必要一開始就碰這麼複雜的。

新手沒必要學 Module、Routing

官方提到了使用 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請求資料的方式

新手沒必要學Typescript

假如你原本就有寫過程式，而且有用過像是Java、C# 等強行別語言，那恭喜你，基本上學Typescript對你來說沒什麼障礙。

但假如你是完全的程式初學者，你還要學型別(Type)、類別(Class)、介面(Interface)…etc，還有物件導向的特性。

他應該先把Javascipt一些基本的特性跟es6的特性先弄懂就好

初學者最舒服的學習路徑：Vue.js or jQuery

初學者對於開發網站的想像，不外乎就是「寫幾行程式碼，做出幾個小頁面」。
他一開始對於專案架構與設計模式沒有興趣，也負荷不來。
這個時候，使用Vue.js 或是 jQuery會是最舒服的路徑。
學框架至少要碰幾個東西：

• HTML
• CSS
• Client-Side programming (JavaScript)
• 框架基本的binding方式

對前端新手的建議是這樣的：

1. HTML和CSS幾乎沒有入門門檻，線上隨便找教材都有。
2. JavaScript主要是用來做瀏覽器上的一些動態效果
3. 框架處理前端binding的方式

基本上只要先專供這三點就好，可以參考Vue.js或是jquery的基本教學文

1. Vue.js
2. jQuery

先嘗試撰寫一些簡單的靜態頁面之後，嘗試使用 visual studio code的 Live Server起專案。

然後後端資料的部分可以先找像是JsonPlaceHolder 來串資料並且呈現在前端。

之後嘗試學習後端框架(Python 的Flask或是 .net core Web API…etc)，撰寫簡單的API，再把前後端串起來(處理Cores，了解Json格式…等)。

入門最重要的是循序漸進，先想辦法做出一個能work的網站，之後再根據工作需求，把缺少的技能一個一個補起來。

在「實作出成品」與「學習新知識」之間來回進行，反覆累積成就感與能力。

突然全部一起學，只會非常茫然、倍感挫折而已。況且根本沒有必要。

如果一開始就學Angular 就更慘了，一開始就得學一些工程師必需的設計模式。

總結起來，我給框架初學者的建議就是：
用Angular非常辛苦，用Vue.js非常舒服。

參考

1. Tour of Heroes App and Tutorial
2. 給網站初學者的建議：用 RUBY ON RAILS 非常辛苦，用 PHP 非常舒服
3. 前端開發者們，你是不是還在糾結要不要學 TypeScript？