iT邦幫忙

2019 iT 邦幫忙鐵人賽

5
Modern Web

Angular 深入淺出三十天系列 第 32

[Angular 深入淺出三十天] Day 31 - 三十天之後

「耶~~~ 我套完了!!」Wayne 套版完之後開心地大聲嚷嚷著。

「喂,冷靜一點,這裡是公眾場合耶。」我笑著推了他一下。

「抱歉抱歉,我太興奮了!!Angular 真的太好玩了!!」Wayne 發現周圍的人都在用奇怪的眼神看他之後,露出一臉尷尬地笑容後小聲的說道。

「是不是,我早就跟你說過的阿!怎麼樣?有沒有興趣學更多阿?」我露出一抹不懷好意的微笑。

「有阿有阿!我接下來該學什麼?」Wayne 沒有注意到我怪異的笑容,雙眼散發出光芒地說道。

「接下來...」


其實在研讀、練習完這三十天的文章之後,應該已經可以開始試著自己開發一些系統了。只是說如果還想要知道更多、想要寫得更好的話,我想或許還需要研讀與學習以下事項:

Component Lifecycle Hooks

不曉得大家有沒有發現,除了 AppComponent 之外,每個我們用 Angular CLI 產生出來的元件,裡面都會有個名為 ngOnInit 的函式?

這個函式就是 Component Lifecycle Hooks 裡其中之一。

相關學習資源如下


Template-Driven Forms

Template-Driven Forms,中文稱之為範本驅動表單開發模式

在這三十天裡,我唯一有用到這個方式的只有在 Day09 - Angular 小學堂(二) 的時候。

雖然當時沒有特別說明,但在 Day09 - Angular 小學堂(二) 裡,我們就是用 Template-Driven Forms 的方式開發,而其中所用到的 [(ngModel)] 就是 Template-Driven Forms 裡不可或缺的一個重要角色。

相關學習資源:

--

Model-Driven Forms

Model-Driven Forms ,又稱 Reactive Form 。中文稱之為模型驅動表單開發模式

一開始可能會覺得這個方式比較難上手,不過熟悉之後其實是會比較好用的!

在實務上我會比較建議使用這個方式來開發我們的表單,不過細節我就不多說了,直接參考相關資源吧!

相關學習資源:


RxJS

RxJSReactiveX 在 Javascript 上的實作。

在 Angular 裡,也會到處都看到 RxJS 身影。舉凡非同步的事件處理如 HttpClient 、 Reactive Form 等等,都是使用 RxJS。

而 RxJS 也是真的滿好用的,值得花時間好好學習與專研。

相關學習資源:


JavaScript 特性

雖然我們在 Coding 的時候是寫 TypeScript ,但根本其實還是 JavaScript 。

所以我們如果能將 JavaScript 本身特性再有更進一步地理解的話,對我們在開發 Angular 是會有幫助的。

關於這部份, Will 保哥已經有整理了一篇給 JavaScript 新手的建議與學習資源整理,可以好好的研讀一番。

另外不是我刻意要幫保哥工商,但我真心推薦保哥開的這門 JavaScript 開發實戰:核心概念篇 實體課程。

上完這門課程之後,應該會解開很多我們平常對於 JavaScript 的誤解與改變我們對 JavaScript 的認知。

連結為已過期之課程,預知詳情請密切關注保哥粉絲團。


Angular 變更偵測策略

在 Angular 裡,每個 Component 都有其自己的變更偵測策略,如何透過變更偵測策略的調整來做效能上的調校,是未來必修的課題。

相關學習資源:


NgZone

相信大家都知道,在 JavaScript 裡有很多非同步事件需要處理,而 Angular 則是統一透過 NgZone 來負責管理大部分瀏覽器內建的非同步函式執行,非常的厲害!!

在效能調校上,也少不了要學習關於 NgZone 的知識。

相關學習資源:


PWA

PWA,全名為 Progressive Web Apps。

隨著前端技術的進步,我們所開發出來的東西也越來越像 Native App 。不過不知道大家有沒有思考過一件事,為什麼要越來越像 Native App ?

因為 UX ,也就是 User Experience 好阿!

所以除了 SPA 之外,我們甚至會改用 Ionic 來開發,或者是使用 Cordova 來包裝我們寫出來的應用程式,另其再更像 Native App 一點。

不過 Native App 也是有被大家詬病的地方,那如果把大家的優點結合,並剔除缺點呢?

我覺得這就是 PWA 想做到的事情,而我也覺得 PWA 是很有未來性的,甚至是現在進行式的。

現在在市面上的瀏覽器,最支援 PWA 的就是 Google Chrome 了、而 Angular 作為一個 Google 所研發的開發框架,用來開發 PWA 更是一大利器。

細節我就不囉嗦了,或許明年我的主題就是分享如何用 Angular 來開發 PWA 呢!! (就這麼決定了!)

相關學習資源:

不過說真的,臺灣目前還處於連 IE 9 甚至是 IE 8 都要支援的情況下,對於新技術真的很不友善阿...


設計模式

至於我覺得其他會有幫助的地方是,一般前端很少會碰到的 設計模式 ,因為現在是寫 Angular 的關係,其實可以參考一下各種設計模式,會讓我們對於如何減少重複的程式碼這件事情更有感覺與想法。

相關學習資源:


測試

測試一直都是軟體開發中很重要的一環。但在前端的世界,知道測試的人少、實際寫過的人更少。

為什麼?因為傳統前端的測試很難寫!!

不過當我們使用 Angular 來開發之後,在測試上就好寫非常多了。因為 Angular 是使用資料來驅動畫面的渲染的,講白話一點就是,資料長怎樣,畫面就會長怎樣。

所以在 Angualr 上寫測試,是輕鬆、愉快的。而過往前端不易維護的特性,也會因為有了測試的保護,進而變得更容易被維護、不怕改 A 壞 B ,甚至是可以用測試來驅動開發。

所以想要讓自已的程式碼品質變得更高的話,撰寫測試是必然的!!而我個人也相當推崇測試驅動的開發方式。

相關學習資源:


Angular Schematics

Angular CLI 為什麼可以透過 ng newng generateng updateng add 來產生程式碼、更新程式碼、甚至是加入 package 到你的專案內?

這一切都是因為 Angular Schematics 的關係。

筆者針對這個主題也寫了一部系列文:高效 Coding 術:Angular Schematics 實戰三十天,快跟著筆者一起前進高效 Coding 的人生吧!!


其他

隔壁棚的 Angular 大師之路 ,其實也有整理了許多在實務上相當實用的進階技巧,相信對大家在實務上的應用與開發會很有幫助。

此外,臺灣的 Angular 社群也非常地強大!昨天才剛舉辦完 Angular TW 的第一次大型會議 ng-tw 2018 ,有幸與會的我真的是獲益良多阿!!

以下是臺灣 Angular 社群的相關連結,非常歡迎大家加入 Angular 的行列:


總結

不曉得大家有沒有注意到,在大部分相關學習資源裡都有官方文件

因為 Angular 的官方文件寫得太好太齊全了!!

真的其實是可以只要看官方文件就好,只是大多數人難免對於閱讀英文文件這件事充滿著深深的恐懼與排斥,26個英文字母分開來都認識,組合在一起頭就百般疼痛。

總而言之,希望這三十天的系列文或多或少對正在閱讀文章的你有幫助。

Angular 深入淺出三十天 至此圓滿達成任務。

感謝大家的訂閱、收藏以及觀看。

我們明年見,拜拜。


上一篇
[Angular 深入淺出三十天] Day 30 - Angular 小學堂(四之四)
下一篇
[Angular 深入淺出三十天] Day 32 - 完賽心得
系列文
Angular 深入淺出三十天33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言