iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

Angular 8 從推坑到放棄系列 第 3

[Day 02]給前端框架新手建議:用Angular非常辛苦,用Vue.js非常舒服

寫在前面

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

身為目前使用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?

上一篇
[Day 01]框架的比較(AngularJs vs Angular vs React)
下一篇
[Day 03] 終於要開始寫 Angular了
系列文
Angular 8 從推坑到放棄30

尚未有邦友留言

立即登入留言