iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
2

先來講講自己今天看的一些文章。

第一篇是【Day 2】React.js介紹 && 第一個 React 程式,內容不多,但重點是這一張圖:

這張圖其實是用來講:atomic design,跟 React 有些差異。atomic design 算是一個方法論,提倡說應該要把 App 切成很多個 level,概念跟 React 提倡的 component 有點像,但重點在於「怎麼切割 component」這件事情。

以 React 來說,它本身並沒有規範 component 應該要怎麼切。舉例來說,你一整個頁面就是一個 component,底下完全不切也可以。但比較常見的做法不會這樣做就是了,會把底下的東西也都切成 component。

而 atomic design 專注的是「component 應該這樣切」,提倡說你的 App 其實就跟大自然(?)一樣,是由最小的原子(atom)構成,然後原子構成分子,分子構成有機物等等之類的。看起來其實滿美好的。

但理論跟實作上總是會有差距的,因為中間還是有一些模糊地帶。我之前維護過一個使用 Atomic React 的專案,那個專案的開發者並沒有把東西切得很好,導致一大堆東西都變成 atom,超級多個 component,一個 project 裡面有六七十個 component,而且滿多其實功能都有點重複。不過我也沒有說這是 atomic 的錯,比較大的原因可能是開發者沒有抓到 atomic design 的精髓,才會導致這種狀況。

特別提出來講只是想跟大家經驗分享一下,有時候看跟做是兩回事,看起來好像都很美好,真的頭洗下去才會發現眉角超級無敵多。

第二篇看的是 Day5 [JavaScript 基礎] Event Loop 機制,剛好之前有幫學生上到這個,也算是小有研究,這邊幫大家多做一些補充。

如果你想理解 event loop,我這邊推薦一個影片:What the heck is the event loop anyway? | Philip Roberts | JSConf EU,講得真的是超級好,我逢人就推薦這個影片。

再來我覺得文中拿 iOS 跟 Android 開發來做比喻挺好的,對有寫過的人來說真的是個很棒的類比。Event loop 跟執行環境有關,Node.js 跟瀏覽器的 Event loop 是不同的,Node.js 的有官方文件跟這篇經典好文:非同步程式碼之霧:Node.js 的事件迴圈與 EventEmitter可以參考,Node.js 底層是用 libuv 來實作的。瀏覽器的話參考原文最後附的參考資料即可。

基本的 event loop 滿好懂的,但有些新手會誤以為只要是 callback 就會被放到 event loop 裡面,例如說:

function run(fn) {
  fn()
}
run(function() {
  console.log(1)
})
console.log(2)

請問最後印出來的會是什麼?12 還是 21?

如果你學到 event loop 之後就得意忘形,可能會以為是 21,但正確結果是 12。因為上面這題跟 event loop 一點關係都沒有,event loop 是拿來處理「非同步」的問題,上面是同步的,不會有這個問題。在瀏覽器上最常見的非同步行為就是 setTimeout 以及 ajax。

我自己覺得對 event loop 有兩層理解,第一層就是上面講過的那些基本,知道有 event loop 這個東西,知道 setTimeout 為什麼是這樣;而第二層理解就是 mirco task 跟 marco task。這邊才真的能測出你對 event loop 的理解是否有深度。

我先投降,投降輸一半,這邊我還沒有澈底理解過,我覺得想要理解的話需要花一段時間,做一堆實驗來佐證。等有朝一日我自認懂了再來跟大家分享。

最後補充一個小地方,那就是 Node.js 裡面才有的 nextTick,其實 Vue 有自己實作了一個:vue/src/core/util/next-tick.js,底層依序是使用了 Promise、 MutationObserver、setImmediate、setTimeout 這些東西,根據平台的支援度來決定要用哪一個。程式碼滿短的,註解居多,都是在解決一些 edge case,推薦大家可以看看。

接著來介紹今天發現的兩個新系列的文章。

[駭客工具 Day5] 負載平衡偵測 - lbd 這裡面有介紹到一些工具,我覺得就算不是駭客,有些工具也挺好用的。例如說裡面介紹到的 wireshark,雖然我沒什麼用過,但小時候用過類似的 wpe pro 來改遊戲封包,還滿有趣的。

上面貼的這篇介紹到的 lbd 是第一次聽到,覺得好奇偵測方式就直接跑去找原始碼:https://github.com/craig/ge.mine.nu/blob/master/lbd/lbd.sh

都是 CLI 指令的集合,看得沒有很懂,但應該是透過以下幾個方式:

  1. 看有沒有 DNS 的 LB
  2. 利用 Server 這個 response header 看有沒有不同的值
  3. 利用 response 的 date header 看有沒有時間差(?

不太確定實際偵測方式是怎樣,對指令不熟跟 bash script QQ

另一個關注的系列是 前端工程的另一個選擇 Svelte,以前就有聽過了。最新一篇的 DAY05-變數的用法,滿好奇背後是怎麼做的。

技術講完了,再來講遊記的部分啦!

前幾天在阿布達比的時候,就看到百貨商場有一間家樂福,後來又在另一個 mall 也看到,今天去了杜拜的購物商場,也看到了家樂福!合理推測家樂福是杜拜跟阿布達比最大的量販店(?)

https://ithelp.ithome.com.tw/upload/images/20190906/20091346B3QgSf1u3Y.jpg

裡面賣的東西其實不貴,我覺得跟台灣沒差多少,拍兩張可樂跟零食的給大家看,台灣也有賣一樣的商品,可以自行比價。 1 AED 大概等於 8 塊台幣,直接乘 8 就好:

https://ithelp.ithome.com.tw/upload/images/20190906/20091346mzwY1WlB0D.jpg

https://ithelp.ithome.com.tw/upload/images/20190906/20091346iOLNxJbi8w.jpg

規模跟台灣那種比較大的差不多,然後還會賣一些熟食,最後買了沙拉跟飯團回飯店當晚餐吃。味道都不是很好吃,以後還是乖乖吃外面好了...

突然發現我明天的文章好像要在機場寫,寫完應該差不多登機了,然後就要去法國囉!


上一篇
後設鐵人 Day1:關於這系列
下一篇
後設鐵人 Day3:中華台北與沒有香的廟
系列文
後設鐵人:我從其他鐵人們身上學到的事30

尚未有邦友留言

立即登入留言