React 碎碎念: 艱困的新手之路

January 16, 2016

其實關注 React 的東西已經很久,直到最近剛好有機會就在新的專案跳坑下來,寫了兩個星期之後有很多事情覺得應該要寫下來做個紀錄。

至於為什麼叫碎碎念而不叫做筆記呢? 因為文章中個人抒發感想的部分可能也不在少數,又或著可能我沒有真心喜歡它(React)吧。

碎碎念大部分是個人意見,客觀部分敘述有錯誤歡迎指證。

正文

我真心覺得現在的 React 超難上手。

在 JS 的生態系統推進,以及各種工程師大大們的持續努力之下,想要上手現在的 React (可謂是 modern React)大概需要了解、會操作下面這些東西:

再補上一些可選的項目

當然如果上述這些都有統一而且很直覺的學習路徑也就罷了(用現在的英文說是 opinionated),但我想現在的 JS 精神就是要把所有東西都 modulize,所以往往我們光是 configure 環境就要花掉大把的精神與時間。

可以看一下 AngularClass 在去年年底對 React developers 做的調查,就知道是一個多麼充滿選擇的環境(菸)。

Read on 

三個不要再用 jQuery Promise 的理由

December 20, 2015

Update 2016/04/05 20:27 話說 beta 中的 jQuery 3.0 確定 Promise 的部分會是相容於 Promises/A+,到時候出了正式版本可以開心升級!


其實不要用 jQuery promise 這回事兒,時有所聞,最主要的原因是其實它實作的內容跟外面大部分的 Promise library (Promises/A+)都不一樣。

所以很多人覺得 jQuery 的 Promise 只是名為 Promise 的「某種東西」,並不是真正的 Promise。

想了解詳情可以看一下 2012 年的這篇文章 You’re Missing the Point of Promises

然而我一直不以為意。

到這個星期我才切身的實際體會不要用的原因,這邊列出三點,應該是比較容易碰到的情況。

1. 面對靜態結果,$.when() 不會以非同步的方式產出 resolved promise

這個我想應該很多人已經有經驗 XD

舉例如下:

// 期待中,結果會是以 async 的方式取得
function xhrGet(something) {
    if (cache) {
        return $.when(cache);
    }
    return $.get(something);
}

/**
 * 在送出 XHR request 之後清空頁面,取得 response 之後重繪頁面
 * 
 * 沒有 cache - 正常運作
 *   有 cache - 在 `renderPage()` 之後才 `clearPage()`,頁面就沒了
 */
xhrGet(...).then(function (res) {
	renderPage(res);
});
clearPage();

那麼我們實際來確認一下大家的情況,下面用了三家的 library 來做測試: (其中 Promise 的部分是用 polyfill 的方式,如果你的瀏覽器有原生支援就會用瀏覽器內建的)

Read on 

週末長知識: scrollable <div> 的捲動重繪問題

December 05, 2015

前端也是做了很久,直到最近才發現這個事實,感覺有點羞愧 ww 為了讓同樣的事情不要再重演,決定專文說明之!

以下文章的內容基本以 Chrome 瀏覽器作為展示用的平台,所以一些 render performance 的問題不見得會出你家的瀏覽器上,畢竟各家瀏覽器為了讓使用者能夠順暢瀏覽網頁,可能還是有做一些各自的調整。

現在已知的是 Opera 在本文主題的範圍內所受的影響與 Chrome 是一樣的(同為 Blink引擎)。

scrollable <div>

其實直接看一下 CSS 就明白我的意思啦

.scrollable {
    height: 100%;
    overflow: auto;
}

其實就是帶有捲軸的 <div> 而已,它的特性是在內容超出設定的 寬度/高度 之後會出現捲軸(用 overflow: scroll 的話,會一直有捲軸)

捲動重繪問題,初次見面!

其實就是在新版的 手打 首頁。

其實一開始還感覺不大出來,但多捲幾下之後發現這個捲動的吃力程度連我的(三年前的)超級遊戲桌機都有點受不了,馬上來用 Chrome DevTools 看兩把!

before.png

從圖中可以清楚的看到每個 frame 中有很長的時間用在 painting,並且很多 frame 的運作時間超過 16~17ms,造成整體的 fps 沒辦法達到 60。

簡單的重現

Preview 的時候先按「Launch the preview in a separate window」在新視窗開啟,再來打開 DevTools 觀察比較準(原本擺在 iframe 裡可能會影響結果)

確認的方法就是開啟 DevTools 裡的「Enable paint flashing」,就可以在捲動的時候看到重繪的區域。

Read on 

angular-highlightjs v0.5.0 released!

November 07, 2015

https://github.com/pc035860/angular-highlightjs/releases/tag/v0.5.0

本來以為之前解掉神秘的 Webpack 問題,這次竟然因為有人嘗試使用 RequireJS 而破功 (X)

之前的 Webpack 問題 https://github.com/pc035860/angular-highlightjs/issues/26#issuecomment-125014758

本來以為順利改成 UMD 了(dependencies 之類的),結果 Webpack 在 UMD 的 syntax 之下竟然會嘗試 resolve 兩種 pattern 的 dependency… (在 browserfiy 正常,在 Webpack 會掛掉)

最後還是透過奇技淫巧,把 UMD 改寫成了一下才順利騙過 Webpack (O)

結果這次回過頭碰到 RequireJS 人,發現 highlightjs 在 npm package 跟 CommonJS 下的名字是不一樣 www https://github.com/pc035860/angular-highlightjs/issues/47#issuecomment-129695318

總之,這次更新修了好幾個 bug,還終於把年初有人建議把所有 directive name 加上 prefix 的部分做掉了(老實說這不會花太多時間,但就是懶…) 有一種隨著 module 越擺越久,出現的問題漸漸比較難解決的 fu (X)

果然難解的問題都是要經過時間歷練的。

另外為何好像都沒有看過中文的 github open source 教學之類的,雖然已經搞了幾個 project 又過了這麼久,我總覺得目前我 維護 open source 專案的 github 操作方式好像不是很正確啊…

這個 repo 終於也突破 200 stars !

angular-easyfb v1.4.0 released!

September 20, 2015

https://goo.gl/9tPWeC

  • 支援 Ad Preview Plugin
  • 有鑑於支援 Ad Preview Plugin,將預設的 platform version 改為最新的 2.4

這次再版號上面其實是有點糾結的,主要是因為經歷了 Facebook Platform 從不需要帶 version 到需要帶 version 的這個轉換。

FB 1.0 -> FB 2.0

原本 init parameters 裡面不帶版號就使用的人再升到 FB 2.0 可能會遇到的問題是

  • 沒有帶版號所以預設使用 FB 2.0,造成自己有再使用的某些 API 崩壞

FB 官方的 API 文件其實是有明確表示需要帶版號的

然而從今年三月過後 FB 1.0 完全 deprecated,我為了盡量不造成人家的 app 掛掉,選擇預設帶入最舊的版號 2.0

FB 2.0 -> FB 2.4

結果前幾天一個新的 PR 表示想要支援一個新的 Facebook plugin 叫做 Ad Preview,這個 plugin 需要的是 FB 2.4。而這真的是尷尬到了極點啊

經過長考(!?)之後,還是決定以後都就直接帶入最新的 platform version 好了,反正依據官方文件這樣才是正確的行為。

於是乎,為了盡量造成最小的損害,我還是讓 version 的中間版號加了個 1 ,表示這還算是個有點大的改動。

Release 之後還是小小的擔心啊…