為什麼選擇Angular與Nestjs?

在前端的世界有很多的框架可以幫助開發者快速實現或完成某些功能，讓開發者可以不用自己造輪子，而是站在巨人的肩膀上面，跟著巨人一起前進。前端目前有三大主流框架Angular、React、Vue，每一個框架都有各自的擁護者，可以常常在網路上看到大家在激辯哪個框架比較好用、哪個框架比較厲害等話題。

不論選擇哪一個框架，最吼都是編譯成瀏覽器看得懂的Javascript，最終都是Javasciprt規範的語法。因此只要學好Javascript，瞭解基本的觀念和原理，再稍微了解框架的風格與設計理念之後，幾乎可以很快速地上手任一個框架(但是如果要到精通，還是得下功夫去學習)。所以說與其只加入某個框架，不如底盤打穩，觀念紮實學習，就可以加入所有的框架是更好的上策。

回歸主題，既然框架這麼多，那麼為什麼這一次主題會選擇Angular，Angular 我認為有幾個優點值得我去選擇:

1. 成熟且完整的框架
2. 使用Typescript
3. 整合RXJS
4. 高度模組化
5. 強大的表單
6. 完整且豐富的文件
7. 跟得上最新技術的腳步

成熟且完整的框架

所謂成熟且完整的框架是指前端工程師常需要用到的功能皆已具備，例如:需要處理頁面切換的路由、處理非同步資料的機制、資料的雙向綁定功能等等。所謂的成熟是指這些常用到的功能，Angular都已經處理好了。只需要匯入之後就可以馬上使用；而所謂的完整就是指即使有修改的需求，這些功能也都非常彈性提供很多參數可以修改細節。

Angular 從2開始已經經過多次的改版，到目前最新的版本8，透過社群的力量與眾多開發者實際使用的回饋，每次都加強很多不足與細節，整體趨於穩定。幾乎已經囊括日常開發所有會遇到的需求，不必自己造輪子，只需匯入最多再加入參數調整一下就馬上可以實作出想要的功能。

使用Typescript

JavaScript 是弱型別語言。什麼是弱型別語言？簡單來說，只要不要寫錯語法讓程式執行不下去，基本上都不會有問題。因此會看到字串1等於數字1 是true ('1' === 1 //true）。這樣的優點是，因為結構鬆散，怎麼寫都可以執行，非常容易入門；優點同時也是致命的缺點，因為結構太鬆散，在編寫的時候不容易發現錯誤，不容易發現這樣寫法的問題，等到真的執行在產品端才發現出錯，而且也不容易找到錯誤在哪裡。

Typescript 可以視為強型別的Javascript ，對於每個變數都需要有資料型別定義，在Typescript 編繹成Javascript 的時候，還會先做即時的靜態檢查，先檢查有沒有錯誤的地方，以免部署上產品才發現錯誤。

Typescript不是萬靈丹，不可能讓你的程式就此沒有問題，不過他可以讓你的程式碼井然有序，可以很輕易看出哪裡有問題。

當然，這麼嚴謹的程式碼可能是高手寫的，不過就算我們不是高手，至少我們可也以寫出像這樣子整齊有秩序的程式碼。

RXJS

RXJS 是一個專門處理非同步事件的函式庫（當然可以處理非同步就可以處理同步）。處理非同步事件一直是前端工程師心中的痛，非同步事件最困難的問題在於受到外部環境影響有三大無法掌握的因素

1. 無法掌握非同步事件的開始時間
2. 無法掌握非同步事件的結束時間
3. 無法掌握非同步事件結束之後的行為

一般來說處理非同步事件會使用Promise 和then 來處理，有幾個主要的缺點：

1. Promise 一建立就會馬上執行，無法定義在需要的時候才執行
2. Promise 一次只能處理一個非同步事件，如果有兩個非同步事件需要處理，並且結果有絕對的時間關係，例如Ｂ事件的開始被須先等待Ａ事件的結果，那麼就還得處理非同步事件之間的“非同步事件”
3. 非同步事件的結果只能用then 來銜接，但有時候非同步事件的結果並非我們所需要的，還得加工處理成我們所需要的結果。其中處理的過程並沒有明確的語義讓人快速看出處理的過程。

針對以上這幾個主要的缺點，RXJS提供了辦法解決這幾個問題：

1. 使用觀察者模式（Observable Patter）處理非同步事件，可以隨時建立所需要被觀察的非同步對象，但是只有被觀察對象被訂閱（subscribe）的時候才會被執行，也就是說可以自由決定執行的時機
2. 被觀察的對象不侷限在一個，可以同時觀察好幾個對象，並且在可以決定同時觀察的方式，例如：Ａ事件執行完才能執行Ｂ事件；ＡＢ事件可以同時直行，但是需兩個都執行完成才算完成；ＡＢ事件可以同時執行，只要有任一事件完成即可算完成。觀察的方式非常彈性靈活
3. 非同步事件在訂閱（subscribe）取得結果之前，可以使用運算子（operators）預先處理資料處理成所要的樣子，並且語義非常明確，例如：take（只取前幾筆資料）、 skip（略過前幾筆資料）、 map（轉換資料）、 filter（只取滿足特定條件的資料）等等，讓人可以很快速明確地看出處理資料的過程。

高度模組化

DRY - Don’t repeat yourself 是工程師的最高原則與理想境界，也就是不要重複造輪子，重複寫兩次的程式碼都應該抽出來讓它被重複使用。一來是讓程式變得好維護；二來是不要浪費時間做重複的事情。因此如何寫出一個可以重複使用的模組就是一個很重要的功能。

舉一個生活中高度模組化的最佳例子：樂高，樂高的每一個磚都可以和其他任一的磚組合拼出你想樣到的場景，例如圖中的海盜船。因為每一個磚的接口都是規範好的，彼此共同遵守相接的規範，因此可以彼此連接拼砌，自由地組合出無限種可能。

回到Angular，Angular同樣也可以跟樂高一樣，輕易製做出與任何東西組合的元件，讓程式可以像樂高一樣用拼砌的方式組合出成品。而不是程式的每一個部分都綁死不可以分離，只要缺少任何一部份，就會讓所有的功能都掛點。

強大的表單

表單是許多網站常見的基本功能，常常透過表單輸入登入資料、個人檔案、購物車商品或是一些敏感的資訊，如果表單沒有處理好，可能會影響到這些重要的資料。因此建立一個強大、可以信賴的表單是一件很重要的工作。Angular內建強大的表單處理模組，稱為響應式表單（Reactive Form），可以將表單關注點分離，也就是說將表單的頁面與表單的邏輯拆開，html僅處理表單的呈現，不會去處理邏輯的部分，例如選擇Ａ選項之後，Ｂ選項要出現、Ｃ選項要隱藏、Ｄ選項的選擇內容要更動等複雜的表單內容，都可以在處理邏輯的模組自動監聽並且對於監聽的結果做出相對應的判斷。將表單的邏輯全部集中寫在一起，而不是分散在html各處，就是響應式表單的強大之處。

完整且豐富的文件

想要入門Angular只需看官網的教學文件就夠了。官網有詳盡的教學文件，只要跟著教學文件一步一步進行，可以很快速入門掌握基本的核心概念與完成一個小小的應用。此外還有很詳細的各個功能與模組的說明文件，且這些文件都是有官方固定在更新與校對，所以不用擔心會看到過時或是不能用的文件，只要有疑惑只要查查官網幾乎都可以得到解答

跟得上最新技術的腳步

前端的世界變化非常快，每一年都在推出新的技術，顛覆原有的觀念。讓人覺得追逐新的技術追得很辛苦。像是最近很熱門的PWA (Progressive Web App) 漸進式應用，如果要自己開法PWA的應用，就有很多麻煩的設定。但是Angular只需要將PWA的相關設定加入後，就可以快速開始使用，不需要多做太多的設定，非常方便。

為什麼選擇Nestjs?

在問為什麼為什麼選擇Nestjs之前，先從前端的角度來看，問自己兩個問題，

1. 前端會什麼?
2. 前端拿什麼切入後端?

自己回答第一個問題，前端所會的技術就是大家常說的三大金剛-HTML, CSS, JAVASCRIPT，如果更進一步的話，就會學習Javascript框架，站在框架的肩膀上完成更多事情。最重要的是前端就是熟悉這三大金剛，這是前端的技術優勢。

來到第二個問題，前端拿什麼進入後端，後端常見的語言像是C#, JAVA等語言，都是前端不熟悉的。前端要搶後端的工作，當然要拿出自己最鋒利的刀刃出來，不可能拿自己不會的東西與別人硬碰硬。那麼就會問到有沒有使用Javascript寫後端呢?答案是有的:Nodejs。Nodejs是一個提供Javascript脫離瀏覽器在後端環境執行的程式碼。

有了Nodejs就可以使用Javascript去執行後端的各種操作。當然，前端有框架讓你可以站在巨人的肩膀上，後端同樣也有框架讓你站在巨人的肩膀上。比較著名的Nodejs框架有:

• Expressjs
• Sails.js
• Meteor
• Nestjs
• ...

Nodejs上有許多厲害的框架可以幫你完成後端的開發。那麼回到一開始的問題，為什麼選擇Nestjs?
答案很簡單，你也許會覺得簡單到有一點膚淺，但是我選擇Nestjs的原因是:

因為Nestjs很像Angular阿!

我只要學會Angular就可以直接使用Nestjs，幾乎不用再另外多學什麼。工程師就是懶、想要早點下班，所以當然選這種一石二鳥，學一套框架可以直接套用到另外一套的框架何樂不為呢?

Nestjs我會說他跟Angular極像的原因是因為:

• 架構和Angular 幾乎相同
• CLI 指令幾乎和Angular 相同
• 使用方法幾乎和Angular 相同

就連Nestjs的優點也和Angular幾乎相同:

• 使用Typescript
• RXJS
• 高度模組化

其中尤其整合RXJS 這一點是我最喜歡的，因為對於後端來說，所有進來的資料都是非同步資料，使用RXJS處理非同步資料可以很快且很好地處理資料，省下很多時間。

因此選擇Nestjs 作為入門後端的框架對於熟悉Angular的人來說，是一個很棒的選擇。

明天開始進入Angular 的世界