2015年5月24日 星期日

黑客松式的學習活動:NodeSchool International Day 精彩紀錄

Standard
 『是不是要很厲害才能參加黑客松呢?』這是一個永遠都會有人問的問題。

事實上,黑客松從一開始的出發點,就是三五好友聚在一起進行研究及開發的活動,帶有很純粹的動機。參加這樣的活動,你不必真的很厲害到極點,而最重要的是動手和夥伴合作,過程中可以順便認識朋友與他人交流,讓投入的過程中更加豐富有趣。

從這樣的角度來看,『黑客松式的學習』是不是有可能的呢?如今看來是肯定的,5/23 於台北剛結束的 NodeSchool 聚會就是一場黑客松式學習活動,吸引了近兩百位參加者,共同參與了這場具有黑客精神的學習活動!

順帶一提,這此使用的場地,也是 黑客松台灣(Hackathon Taiwan) 每個月辦活動的主場地,無論如何,也記得來報名下次 6/13 - 6/14 (六、日)的黑客松活動!

什麼是 NodeSchool?

NodeSchool 是一個線上學校,目標是運用線上工作坊課程,讓所有人都可以在這學到各種技術。而恰逢 NodeSchool International Day 國際日活動,全球各地都紛紛各自舉行一場 NodeSchool 盛會,因此身在台灣的我們也理所當然響應了這樣的活動。 

這個活動的形式相當特別,沒有講師在台上講課,而是採用線上工作坊教材與題目的形式,讓參加者在自己的電腦上挑戰通關。NodeScool 擁有許多工作坊教材,從基礎課程到進階的選修課程都有,除了 JavaScript、Node.js 之外,也有 ES6、WebGL、Three.js、Functional Programing 和 React.js 等課程。詳細的課程資訊,可以參考 NodeSchool 官方網站


由於每一份教材都是經過設計,而且每一個主題和關卡都擁有提示和說明,參加者在一題題解答的過程中,可以靠自己慢慢學會一門技術。如果真的遭遇到了自己難以突破的困難,可以跟左右鄰居討論研究,若真的也沒有辦法了,可以找在現場自願的指導員(Mentor)幫忙排解問題。

黑客松式的學習活動

回想起過去從小到大,我們的學習模式,總是有個老師在台上教學,枯燥而乏味,而為了保證教學進度,不免伴隨著填鴨式的教學方法。這樣的模式我們早就習慣,雖不見得喜歡,但也無可奈何,逐漸的,我們的思考和學習,慢慢僵化了。

具有一定寫程式經驗的人都知道,如果想要把程式技術練好,動手研究是不可缺少的工作,而持續鑽研的熱情更是不可以缺少,學習並習慣自己動手解決一個個問題更是必要的訓練。此外,比起學習到一門技術,我們如何在學習和訓練的過程,培養自己自我學習和與其他人間的溝通交流,更為重要。與他人交換想法,或是藉由分享知識將自己所學內化,更是一種提昇自己的方式。

因此,NodeSchool 活動與過去的學習方法最大不同,就是提供一個讓大家共同參與的形式,目標是要大家能在此透過自己動手學習到技術,也參與交流討論,當大家在活動結束後走出會場時,能帶著貨真價值的學習成果回家。

沒有大神,只有迫切突破自我的歡樂參加者

別以為這樣標榜學習的活動只有初學者前來,其實會眾裡臥虎藏龍,不乏有大神級別的高手參與。只不過,在這樣的活動中,即便是高手,也正煩惱自己手上的問題和課程,也需要更多高手一同討論和解決問題。

由於 NodeScool 工作坊的主題相當廣泛,無論是初學者還是專家,都可以前來,然後挑戰一些自己感興趣的技術,然後號招在現場的高手們,一起討論並學習。我們可以說,NodeSchool 的活動,是一個兼具動手、討論交流和突破自我的學習活動。

後記

如果有人完成了課程,日後可以在參加 NodeSchool 時,自願擔任該課程的指導員(Mentor),如果還沒完成的人,可以回家繼續完成,若碰到問題,可以至 Github Issues 直接發問,或到每週四的 Node.js Party 及讀書會討論。日後,社群應該也會不定期的舉辦中小型的 NodeSchool 活動,讓大家共同參與。

另外有趣的是,這次活動也有碰到一些企業派人來參與或獵才,像我就碰到 Foxconn 等公司的主管級人物前來參加活動,也一起下去研究程式。誰說主管只會動一張嘴呢?至少會來黑客松的主管也會動手!:-D

2015年5月21日 星期四

簡報釋出!超酷炫科幻 UI:QML 入門

Standard

這次五月的 Hackathon Taiwan, 因為原本的講師沒空,所以我就來救援了一場 QML 工作坊,這堂課以活動的倒數計時器為開頭,討論怎麼使用 QML 進行超酷炫科幻 UI 的設計,是一堂初學入門課程。

有鑑於過去聽到不少人反應,要使用 QML 必須與 C/C++ 打交道,門檻相當高,於是,這個工作坊的目標,就是讓學員可以在純 QML 的環境下,以 QML 來開發自己的 UI 界面。即便是不熟悉程式語言的人,都可以輕易使用 QML 做出絢麗的 UI。

活動簡報


後記

這次 QML 工作坊事後反應還算不錯,甚至有人以 QML 來開發黑客松活動的作品,未來如果有機會可以再次開課。:-)

2015年5月7日 星期四

JavaScript 的各種迷霧

Standard
 在 Facebook 看到很多人都在整理自己的程式筆記,我也整理關於 JavaScript 語言常被誤解部份的筆記,然後分享出來供各位同好參考。

講實話,從 1995 年開始的 JavaScript,直到前幾年,都讓我恨的牙癢癢,甚至覺得他是個垃圾,因為當時的他太沒有規範,效能極差。直到近年來才逐步改善,我也才慢慢擺脫對他的排斥及恨意。

但就算已經有標準規範,JavaScript 語言對很多人來說依然很頭痛,除了其 Asynchronous 非同步的機制外,更要面對其極為動態(Dynamic)的特性,而從 OOP 的角度來看,其 classless 的設計更讓人不知所措(ES6 之後開始支援 Class),與傳統的 OOP 相去甚遠。所以,JavaScript 處處與其他語言完全不一樣的概念及思維,讓很多人在裡面處處誤解。

所以若是想學習 JavaScript 深入的概念,最好的方式就是放下其他語言的既有概念,直接了解 JavaScript 的核心機制,雖然會讓人手足無措,但卻是最好的手段。否則,很容易練就或死背很多怪招,寫出難以除錯或過於複雜的程式碼,當然,更嚴重的是誤導他人。

要深入或精通 JavaScript,務必了解並思考其執行程式時發生什麼事,每一行程式碼當下被執行時的狀態,遠遠比程式碼排列來得重要。只要掌握每一行程式碼的『執 行當下』,所有 JavaScript 的疑難雜症,都能迎刃而解。關於這一點,有興趣閱讀硬梆梆定義文件的,可以參考 ECMA-626 的『10.3 Execution Contexts』一節。(參考網址:http://www.ecma-international.org/ecma-262/5.1/#sec-10.3

關於 this 關鍵字的機制

很多人會搞糊塗 this 關鍵字,就因為他是一個會被 Execution Contexts 大量影響的東西。JavaScript 在 Function 或 Context 被執行時,才會依當下情況去決定 this 為何。這代表,使用 this 時在哪一個 function 或地方不重要,而是當進入這個使用 this 的 context 時(如:Function 被執行時)才會決定 this 是什麼,this 是什麼只跟你如何去呼叫 this 所在 Function,及 Context 內狀態的改變有關。關於 Function Call 怎麼決定 this 值,可參考:http://www.ecma-international.org/ecma-262/5.1/#sec-11.2.3

當然,純講理論很難懂,可以大概歸納出 this 的使用方式與情景,有開發者已經整理了很清楚的文件,以及常誤觸的陷阱,可參考:https://software.intel.com/…/blo…/2013/10/09/javascript-this

若實在懶得看懂硬梆梆的文件,從實作面來看,就是記住簡單兩種規則而已。

一般來說,決定 Function 內的 this 為何,說明如下:
  1. 只要直接呼叫 Function ,就會代 global 進去當 this,這也是為什麼 Browser 裡面會是 window,因為在 Browser 裡的 global 就是 window。
  2. 如果一個 Function 處於一個 Object 上,像是 a.b() 這樣執行後,b 函數的內部會視 a 為 this。因為當 JavaScript 在透過 a 物件存取底下的 Function 並呼叫他時,會自動把依附的 a 物件(Caller)帶入當 this。

總歸來說,所有的 this 都是在執行期、呼叫當下所決定的,除非你使用 bind() 這類的做法事先去強制寫死他的 caller。這就能解釋,為什麼 this 總是不能往內部一層層自動傳進去,因為所有的 Function Call 都遵循著同樣的規則。

註:在嚴格模式下 Function 裡的 this 會是 undefined,不是他預設是 undefined,而是嚴格模式下呼叫一個 Normal function 時,他不會自動代入 global,所以才是 undefined。在嚴格模式下不能取得 base value(即 global),這點可參閱:http://www.ecma-international.org/ecma-262/5.1/#sec-8.7

Function 的存在

因為所有的型別都是 Object 的衍生物,甚至是 Function 也不例外,所以 JavaScript 裡的 Function 物件可以隨機被動態生成和定義,與其他大多數語言完全不一樣。其他語言多半將 Function 看做是一個寫死程式碼的區塊,放在一個固定的記憶體位置上,然後跳過去執行。而這樣可以動態定義 Function 的特性,導致 JavaScript 天生就支援 Lambda 、匿名函數等特色,因為可以依照任何情況,重新排列組合,甚至生成 Function 的執行流程。

關於記憶體及物件管理機制

JavaScript 的設計是以可動態擴充性為考量,所以也衍生出一套記憶體管理機制,以 Object 為基本記憶體管理單位。所有存取 Object,都透過一套 『Identifier -> Value』 的機制,而在執行上 Value 其實就是 Object。

與其他語言不太一樣的是,JavaScript 在利用 var 宣告 variable 時,實際上是建立一個 Identifier,並不是實體配置一塊物件記憶體。所以在 Identifier 建立的剛開始,並未對應到實際有意義的參考物件。直到我們額外去建立物件後,才讓 Identifier 去對應。可以說,這就是 key-value 的形式,而 Identifier 就是個 key。這部份可以參閱:http://www.ecma-international.org/ecma-262/5.1/#sec-12.2

由此可知, Identifier 本身不是 Object 的實體,因為他只是個 key 而已,就像 C/C++ 語言中的指標。

有趣的是,這樣 Reference 的機制,與 JavaScript object 中的 key-value 機制是一樣的,這也是為什麼 Object 可以隨意掛勾到任何地方。因為 JavaScript 程式中,我們一定是透過 Identifier/key 去取得並使用 Object,而且可能有很多不同的 Identifier/key 都指向同一個 Object。

記憶體回收

簡單來說,JavaScript 記憶體回收,就是當 Object 沒有被任何 Identifier 指向時,就被視為垃圾而回收釋放記憶體。

new 運算子如何建立一個物件

在定義上,用 new 建立物件要經歷過一些程序,甚至要檢查 Type 等工作,這部份的細節可參考原始定義:http://www.ecma-international.org/ecma-262/5.1/#sec-11.2.2

不過,對於大多數開發者來說,不需了解太多細節,較簡化的流程可參考 Mozilla 提供的文件:https://developer.mozilla.org/…/Jav…/Reference/Operators/new
簡而言之,new operator 會去做到幾件事:

  1. 用 Object.create() 等方法去參考 Function.prototype,建立一個物件
  2. 跑 Constructor(也就是開發者定義的 Function)
  3. 如果 Constructor 內沒有回傳一個物件,就以步驟 1 建立的物件回傳出來。
這一切工作是在『內部(internal)』完成,完成後回傳物件出來。

如果你很清楚這些行為,可以把這些工作往外移,自己實作,並完全不用到『new 關鍵字』,但是通常開發者不會這麼做惡整自己。用 new 以後,等他回傳配置完成的物件,才是一般性的做法。