(圖/shutterstock)

 

圖片來源：Shutterstock

作者：BRUCE WENG

 

在上一封信中，

我們學習了第一種程式語言 Java

與練習運算思維的方式，

在這封信中

我們將要正式學習新的語言 JavaScript

與全端網站開發工程師

所需後端與前端的知識，

學習現代網頁開發框架與工具

 NodeJS、Express、ReactJS 與 Redux，

內容很多，也許第一時間你會無法完全理解，

但不用擔心，我希望提供你的是一張學習地圖，

這封信的目的是

指引你每個階段學習的重點，

讓你專心理解最重要的概念。

 

同時我也想分享給你，

身為一個軟體工程師如何持續成長，

運用各種資源不斷學習新的知識

並讓自己成為更好的工程師。

同樣的在這封信中我只會告訴你

需要學習什麼和學習的方式，

你需要自己去理解它運作的方式。

準備好了嗎？那我們開始吧！

 

 

學習第二種語言-建立正確的心態

身為軟體工程師

無論你這專精在哪一種領域，

都有機會學習第二種語言，

在開始學習你的第二種語言之前，

我想分享給你一些心態上的建議，

他會幫助你減少學習的時間，

並很快掌握新的語言的使用。

 

1.專心學習新的語言，

忘了你之前學過的語言，

不要用自己已經會的概念去類比或記憶，

我們直覺上會想用自己的經驗去加速學習，

但每個語言都有自己獨特的概念，

專心搞懂它最重要。

 

2.學習新的語言最先要理解的兩個核心：

Primitive type 和 Reference type 有哪些？

與如何實現物件導向？

當你理解這兩件事情的時候，

你對新的語言已經有基礎的理解了。

 

3.重新回到學習的三個階段：

知道、學會和熟悉，

試著用新的語言去 leetcode 解題，

去實作我們已經學過的演算法和資料結構，

讓自己熟練各種語法和內建方法的使用。

 

有了學習新的語言的正確觀念，

讓我們正式學習每個網站工程師

都要會的語言-JavaScript 吧！

 

學習第二種語言-JavaScript

現在是 2016年，

JavaScript 經過多年規範的修改

已經和最剛開始被發明時的語法很不相同，

很多讓人難以理解的概念

也在 ES2015發佈之後被包裝得更友善了，

JavaScript 正式同時擁有

Object Oriented Programming

和 Functional Programming 特性，

成為一個非常有彈性的語言。

 

做為入門 JavaScript 的教科書

我推薦 Object-Oriented JavaScript

 (Stoyan Stefanov, Kumar Chetan Sharma)，

這一本書裡面把 JavaScript 重要的觀念

講得非常簡單清楚，

其中有四個觀念最為重要，

之後面對工程問題也常常使用：

 

1.Function：

Function 是 JavaScript 的核心，

不理解 function 等於不理解這個語言，

 

其中有三個很重要的功能：

●做為 constructor 實現 class：

由於 JavaScript 和大部份物件導向語言不同，

沒有 class 的概念，

實作上我們用 function

去定義 constructor 中

需要的 instance variable 和 method。

●Closure：

這是其他語言沒有的概念，

這個概念在 Head First JavaScript 這本書

解釋得特別清楚，

理解它才能理解各種 JavaScript 的設計模式。

●Anonymous function：

JavaScript 中宣告 function 可以不定義名字，

讓它做為一次性的變數

在其他 function中當做 argument 傳遞，

之後在 NodeJS 中我們也會學習到

這樣的用法稱之為 callback function。

 

2.Array：

JavaScript array 有很多內建方法，

可以用來實現資料結構 Stack、Quere

和 Array List，非常的好用，一定要熟悉它。

 

3.Object：

JavaScript object 是一個

單純的 key value pair，

和其他語言中物件的概念不完全一樣，

為了避免混淆，

請把它當作資料結構 Hash Table 來看待與使用。

 

4.Prototype：

這是 JavaScript 自己最獨特的觀念，

因為沒有 class，

prototype 成為實現繼承的方式，

讓所有物件都能繼承同一個 prototype chain。

 

有了基本 JavaScript 知識之後，

你還需要建立基本的前端開發概念，

相關的知識可以在 code school 前端系列課程

學習 HTML、CSS 與 jQuery，

有了這些知識之後，

我們可以正式學習全端

JavaScript framework 和 library。

 

 

學習 framework

與 library-建立正確的心態

軟體工程這個產業更迭的很快，

不斷會有新的技術被發明，

你常常會有機會去學習新技術，

然而所有技術都只是工具，

需要的時候學就好，

選一個你最喜歡的深入去了解它，

比每一種都懂基本來得重要，

在學習之前，我想分享給你我的經驗，

讓你可以快速掌握你從來沒有見過的技術。

 

1.學習任何新技術

第一件做的事情是

理解背後設計的概念，

一個技術被發明之所以有很多開發者用

是因為他實現了之前沒有的概念，

而這個概念是最有價值的，

也是你和其他開發者溝通的基礎。

 

2.理解概念之後，

找一個 tutorial 照著例子實作，

這個階段很重要的是

熟悉這個 framework 怎麼使用，

請務必要克制你想用自己的方式寫的衝動，

你要做得事情很簡單，

一模一樣照著別人的 code 寫，

能夠讓網站順利運行就可以了，

為了熟悉你可能需要寫三遍一模一樣的 code，

這和你練習運動或樂器是一樣的道理，

你要做到用下意識能夠寫出這個 framework 的模板。

 

3.第三個階段就是融會貫通的階段，

這時候你可以釋放你的好奇心，

看看其他語言或是 framework

是怎麼實現一樣的概念，

或是為什麼不能實現這樣的概念。

 

網站開發後端知識

●NodeJS 是一個 runtime environment，

讓我們可以在瀏覽器以外的地方運行 JavaScript，

最重要的兩個概念是

Non-blocking programming

和 Callback function，

理解這兩個概念

就可以看得懂大部份 JavaScript 後端的程式

與各種非同步的 library，

我推薦可以由 code school 的課程入門，

這個課程把複雜的概念講得非常淺顯易懂，

當我們熟悉基本用法之後，

可以在 Udemy 找更多課程

學習底層的設計和運作方式。

 

●Express 是負責處理 Routing 的

輕量級後端 framework，

包裝了很多 NodeJS 處理 I/O 的運作，

基礎需要掌握的兩個概念為

Design Restful API 和 Middleware，

同樣在 code school

有 tutorial 講解簡單的入門，

和 NodeJS 是一系列的課程。

 

●Database 設計是後端一定要具備的技能，

入門一定需要瞭解 Relational Database 的運作

與 Schema Design，

基礎要掌握的是 SQL 中的 Primary Key,

Foreign Key, Normalisation, Denormalisation 和 Join，

之後有興趣可以再多學

為了 Read Heavy System 發明的 NoSQL Database。

 

 

網站開發前端知識

ReactJS 是目前最多人使用的前端框架，

基本核心是將前端抽象化為

Component Based Architecture，

不像傳統 jQuery 直接操作 DOM tree，

ReactJS 操作 Virtual DOM 並做 DOM diffing，

只更新修改過的 Component，

需要理解三個設計核心：

Prop，State 與 Life Cycle。

 

當 React App 到一定規模之後，

資料流的追蹤與 State 的管理

會變得非常複雜，

這兩年來多個 library 被發明

來實現 Flux 單向資料流的 State 管理，

最後被最多開發者喜愛的是

經過變形之後的設計模式 Redux，

會稱它為設計模式是因為

它混合了其他語言的概念進來，

因此搞懂核心概念使用起來

就會非常簡單，

Redux 有重要的五個概念：

 

●Store：

唯一 JavaScript Object 儲存所有 State。

●Container：

負責和 Store 要資料的 Component，

透過 Prop 傳遞資料給子 Component。

●Action：

包含 Action Type 和 Payload Data 的

 JavaScript Object。

●Reducer：

負責接受 Action 和舊 State

並產生新的 State 給 Store 的 Pure Function。

●Action Creator：

所有使用者和網站的互動

都會觸發 Action Creator

產生 Action 給 Reducer。

 

 

小結

恭喜你！看完了這一份學習地圖，

我了解你一下子接收了太多抽象的概念，

可能無法馬上理解，沒關係，

所有的人都會經歷這樣的學習過程，

事實上，軟體工程

就是不斷實作新的抽象概念去解決工程問題，

當你習慣了這份學習的焦慮感

並在不斷的實作過程中得到成就感的同時，

你就成為了一個更好的軟體工程師了。

這封信的最後我想用

Redux 發明者 Dan Abramov 的引言做為結尾：

 

“Be liberal with what you learn, and be conservative with what you use.”

「帶著開放的態度看待你所學習的事物，但謹慎運用。」

 

所有的技術都只是工具，

我們永遠可以爭論哪一個比較好，

我們可以有個人的喜好，

但真相是，身為一個工程師，

我們只是在不同狀況

選擇適合的工具去解決問題，

我們只是在比較以及權衡利弊之後

溝通並做出決定，

軟體工程的世界這麼大，

永遠有下一個概念被發明，

給自己能夠不斷成長的能力，

我們永遠可以變成一個更好的工程師，

甚至是更好的人。

 

 

 

延伸閱讀》

致想轉職軟體工程師的新手們—第一封信

 

本文由 alphacamp  BRUCE WENG 授權轉載， 原文 於此

原文刊登於 ALPHA Camp Blog

未經授權，請勿轉載侵權！

(責任編輯：CMoney編輯 / Alodia)

打破一成不變，就差這一步！

六個月學程式 脫離魯蛇人生！

想學程式、成為工程師卻怕沒基礎嗎？

來這裡全程免費，給你專業訓練

6 個月，你也能成為 專業軟體工程師！

名額有限>>點我報名！

詳細活動介紹>>點我查看！

有問題歡迎私訊粉專：從０開始學程式！