JavaScript 是「王者再臨」的最佳代言人，由於 jQuery 被大量應用在網頁設計上的原因，讓 JavaScript 再度被重視了起來；再加上 HTML5 的推波助瀾，JavaScript 儼然成為今年最受矚目的程式語言。 現在，JavaScript 的主要用途，已經由過去的動態網頁（Dynamic Webpages），轉為開發 HTML5 App 角色；也就是 HTML5 的應用。我們不僅僅使用 JavaScript 製作有動態效果的網頁，還藉助它來開發大量的 UI interactive、使用者體驗的設計，以及，最重要的雲端服務的整合。 還有一個很重要的應用，就是「JavaScript in Browser」，也就是利用 JavaScript 來增強瀏覽器的功能，最為大家所熟悉的例子，就是 Google Chrome。Google Chrome 為了增強對 JavaScript 的支援與效能，開發了新的 JavaScript 引擎；在日記「HTML5在手持裝置將開始爆發式成長」就提到了，「JavaScript引擎的成熟度是關鍵」。 所以，測試 JavaScript 的使用案例（Use Cases）在各大瀏覽器的效能，更為一項重要的工程工作。目前被軟體工程師廣為使用的 jsPerf 就是為此而生。更進一步地，由於...

HTML5 來了。什麼最重要，Browser 最重要。因為所有 HTML5 App 都在 Browser 環境裡執行，所以，HTML5 App 的 Runtime 就是瀏覽器。 正因為這個原因，各家軟體大廠無不加碼研發人才，努力打造一個能完全相容 HTML5 的瀏覽器，連今年10月份要登場的 Windows 8 Mobile Phone 也在 HTML5 做了很大的改進。 可以這樣想，第一代的 App 使用 OS 做為 Runtime。第二代的 App 使用 Java Virtual Machine 做為 Runtime，例如：Android。第三代的 App 將使用 Browser 做為 Runtime。所以，Runtime...

「什麼最重要、Browser 最重要」提到說，瀏覽器方面，Maxthon 與 Opera 目前在桌面與行動裝置，呈現暫時領先的狀態。還有其它爆點嗎？ Tizen 的前身 MeeGo，身世相當坎苛，它是 Moblin 與 Maemo 的合體。Moblin 原本是 Intel 主導的一項開源計畫，Maemo 則是 Nokia 主導的一項開源計畫，這二項計畫的身世又更為坎苛，已經不忍心再提了。 Tizen 即將打敗 Opera 眼尖一點的網友，可以發現，在行動瀏覽器方面，Tizen 居然已經突破 400 分大關。待 Tizen 正式上市後，將擁有最強的行動瀏覽器。Tizen 在行動瀏覽器方面，即將稱王，並且還大幅領先了老字號的 Opera，真是令人佩服。 不得不承認，在行動裝置市場，歷經風風雨雨的 Intel，這回找三星一起做 Tizen，還真是找對人了。正巧，就在一個多星期前，Tizen 1.0 也正式釋出 SDK 以及原始程式碼了。從 Tizen 官方的消息看出，Tizen 1.0 主打的亮點，正是...

上週在北京舉辦「課程名稱HTML5 & 雲端整合: 深入MOBILE & CLOUD 設計模式」課程。這門課是從 HTML5 觀念到實作的第一門課（The 1st lesson from concepts to practice），這門課的重點在於「設計模式」(Design pattern)。 當天介紹了「jQuery pattern」。jQuery pattern就是開發jQuery插件(Plugin)的方式，所以技術上倒也沒有什麼學問。不過，jQuery pattern有很高深的哲學道理，意思是說，在軟體工程領域裡，它創造了一個獨特的觀念。這個觀念就是jQuery知名的”$”(Dollar sign)，也就是「Selector」。 以下的例子，就是jQuery pattern： $(“div#news”).html(“<h2>News Today</h2>”); 從jQuery設計模式的角度思考，如果今天我們想要透過WebSocket與伺服器溝通，並且在一個”div”裡來顯示結果，應該怎麼設計呢？想法如下： 1. 將WebSocket的功能寫成一個function 2. 將JavaScript function封裝成module 3. 在jQuery裡擴充新的函數，簡單說，就是製作一個jQuery插件(Plugin) 以下是一段程式碼樣板： (function($) { $.fn.createWebSocket = function ()...

在教育訓練課程「HTML5 軟件開發: Mobile, Web & Cloud 設計模式」裡提到「使用 JavaScript 選擇器」可提升程式碼效能的原則。這個觀念，可延續前一篇日記的內容繼續探討。 在實作Web Socket連線生成時，筆者選擇使用了jQuery pattern的觀念來實作。jQuery pattern 本質上是一種選擇器模式。 為什麼要使用選擇器模式，除了程式碼的組織較好外，另一個原因就是效能：使用選擇器方式可以讓JavaScript程式碼效能更好。 根據不同瀏覽器的實作，選擇器模式可以達到超過十倍以上的效能。典型的選擇器模式，是直接呼叫DOM的API： document.querySelector(“#header”); 使用jQuery的選擇器「$」是目前的主流做法。再回顧上一篇日記的寫去： <div id="message"></div> <script type="text/javascript"> $("#message").createWebSocket(); </script> 總計利用了三個模式： 以Closure模式將類別封閉，這與Static class有關係，在這裡先不做討論 使用選擇器模式，範例採用目前最流行的jQuery selector ”$” Read/Write Div Pattern 選擇器模式的效率取決於瀏覽器本身的實作，不過，以選擇器模式來代替直接存取DOM，一般相信是最好的做法。...

Android 內建瀏覽器不支援 WebSocket Client 端，導致使用 HTML5 開發的 Apps 無法使用 WebSocket 與 Server 建立連線。主要的問題在於 WebView 元件沒有實作 WebSocket 協定。Android SDK + PhoneGap 所製作 HTML5 Apps 是將 WebView 封裝至 APK 裡，所以 WebSocket 無法正常工作是正常的。 不過這個問題也沒有那麼難解決，在等待 WebView 加入 WebSocket 以及更多 HTML5 功能前，我們只能暫時自行實作。還好，現在有很多 Open source 的...

文／Jollen Chen（原文刊載於 CTimes 雜誌 2013 年 2 月份） 八屏一雲是鴻海科技集團擎畫的技術藍圖。鴻海科技集團協助 Moko365 舉辦 HTML5 相關課程，筆者有幸擔任系列課程的主要講師，在整理相關技術的過程中，得到了一些心得。使用 HTML5 做為八屏裝置的核心技術時，有什麼關鍵的地方要特別注意？筆者整理了幾個議題，在此與大家分享。 第一、跨裝置。這是第一個「八屏一雲」的重要技術工作。從技術的角度來說，「八屏一雲」，要能跨裝置（cross-device），而好的技術莫過於 HTML5。HTML5 是一個標準，透過此標準來開發 Web App；Web App 必須透過瀏覽器來執行。我們說，Web App 的執行環境（runtime）是瀏覽器。 第二、跨瀏覽器。 第二次瀏覽器大戰開始於2010年左右，大概是 HTML5 標準即將發佈，以及智慧型手機發展進入最高峰，二個時間的交匯點。現今，在 HTML5 世界裡，較具代表性的瀏覽器是 Firefox、Safari 以及 Chrome。 由於每一個瀏覽器實作 HTML5 標準的程度不一，並且實作上還會有一些小差異，因此，讓 Web App 能做到跨瀏覽器（cross-browser）成為另一個重要任務。還好，這個工作是階段性的，不過倒是能讓開發者忙碌很長一段時間。 第三、善用...

Moko365 與 OESF 於 4/16 日舉辦一場有關 IPTV 的研討會，目的是探討 ITU-T 所制定的 H.762 標準。 H.762 技術採用部份 HTML5 標準，成為一個 IPTV 的互動多媒體環境。根據筆者近期的開發心得，H.762 對於 TV Apps 的開發仍有所不足，因此在這個演講裡，筆者分享了一些想法，並提出 H.762 的修正建議。這個修正建議，主要是希望能把 HTML5 技術帶入 IPTV Framework 裡。 對 IPTV 標準有興趣的朋友或廠商，歡迎多加交流。簡報網址如下： HTML5 in IPTV Framework...

文／Jollen Chen（原文刊載於 CTimes 雜誌） Google 在 2013 年的 4 月份發佈了一則消息：將開發新的瀏覽器引擎。這是瀏覽器界的大事，這代表著瀏覽器競賽已經進入了一個新的里程碑。這個新的瀏覽器引擎稱為 Blink，不過它並不是全新的開發專案，Blink 是 WebKit 的一個分支。目前，最新版本的 Chrome 瀏覽器已經改採 Blink 引擎。 Blink 直接採用 WebKit 的原始程式碼，並不是從新做起。這叫人好奇 Google 為何不繼續在 WebKit 引擎上開發，卻硬是將 WebKit 給「fork」了出來？這是瀏覽器引擎的競爭下，一個積怨已久的問題，簡單來說，這是一個商業策略，並不是單純的技術考量。今年二月份，Opera 宣佈每個月有超過 3 億使用者，在使用它們的瀏覽器，同時，Opera 也將開始貢獻 WebKit 專案。這個事件應該是 Google 決定開啟 Blink 計畫的主因之一。 Apple 在...

Markdown 的解析可以從 Server-side 來做，也可以由 Client-side 進行。如果是從 Server-side 來解析，我在目前專案裡採用的是 [marked]。這是很不錯的 Markdown parser，並且支援 [GitHub flavored markdown]。 Marked 也有一份 Client-side 的 port，稱為 [Strapdown.js]，Strapdown.js 也支援 GitHub flavored markdown。有於以下 3 個原因，後來我將 Server-side parsing 的做法，修改為 Client-side parsing： 1. UX - 原先採用 Server-side (RESTful) + Backbone way...

想開始學網站製作嗎？先看看這篇文章，認識「網站製作」：不只是寫寫 HTML 文件。 關於 Single Page Application（SPA）的討論，較早的學術文章，可以追溯到由 Delft University of Technology 的 Software Engineering Research Group，所發表的一份技術報告：Migrating Multi-page Web Applications to Single-page Ajax Interfaces[1]。Ali Mesbah 與 Arie van Deursen 在這份 2006 年的技術報告裡，提出一個很重要的問題： "web applications have suffered from poor interactivity and responsiveness...