分類
Books JavaScript Programming Web Design

ppk on JavaScript

這是一本 JavaScript 傳奇,作者本身就非常有意思,聽 lukhnos 說才知道他以前主修歷史 :p 他的 quirksmode 有非常豐富的 Web Design 資源,就像歷史年代般一樣詳細的列出各家瀏覽器支援的程度,是公認的 JavaScript 專家。我們知道 JavaScript 算是個蠻 dirty 的語言,背負著歷史包袱及各家瀏覽器不同的實作歧異,加上近年來的 Web Standards、Usability 跟 Accessibility 等議題又增加了很多細節。這本書透過八個完整的真實 project貫穿本書來做範例講解,很適合唸完乖乖的 DOM Scripting 之後,繼續深入了解 JavaScript 以瀏覽器議題。

相關書評

前兩章 Purpose 跟 Context 非常非常精采,作者就像說故事一樣娓娓道來,全貌性把 JavaScript 的來龍去脈講了一遍,Realazy有做了書摘( JavaScript的目的背景一背景二背景三 ),我就不多詳述了。

分類
Books JavaScript Programming Web Design

Pragmatic Ajax: A Web 2.0 Primer

值得推薦的AJAX入門好書(2006/3月出版),循序漸進交代出Javascript、DOM跟Ajax。範例程式碼清楚好讀,網頁設計觀念正確。講完用 XMLHttpRequest 的最原始用法之後,就開始教如何運用 Prototype 跟 Dojo,畢竟實在不需要用 raw Javascript 啊。之後的例子主要也是用 Prototype。講 Ajax 如何正確使用的觀念講的不錯(第七章),其他有用的議題(如JSON)也都包含在內,是本既入門內容又豐富的書。

話說這本書放要讀清單放好久了,真的拿起來認真看,沒幾天也就看完了,還蠻好唸的… :p

分類
Books JavaScript Programming REST Web Design

Ajax in Action

 

軟體設計層次的Ajax書,很認真的思考 Single Page Application。前三章引入Design Patterns、重構的概念到Javascript,將 Web Page提升到應用程式的層次。四五章很精采地分析架構,包括不同層次的MVC觀點,以及各種框架的大局觀跟分類,其中關於Ajax如何交換資料提供了很好的思考,以下是我的筆記(Rails是我加的,書上沒有):

內容中心的互動 (content)

  • Server 傳回 HTML 片段,Client 在特定位置更新顯示。
  • 簡單直覺,撰寫容易。
  • 功能有限,畫面上的變化只限於固定矩形區域,無法進行複雜的DOM操作。
  • Rails使用Prototype加上配套的 Ajax helper 即可達成。

腳本中心的互動 (scripting)

  • Server 傳回 Javascript 片段,Client 直接執行。
  • 功能彈性大,可自由操作DOM,多處更新。
  • Rails 支援在 Remote Javascript Template (RJS),使用Ruby語法撰寫Javascript,傳給Client執行,減少撰寫raw Javascript。

資料中心的互動 (data)

  • Server 傳回 XML 或 JSON 資料,Client 的 Javascript 解析處理(或使用XSLT)。
  • XML的解析較麻煩,現在流行用JSON(JavaScript Object Notation)。
  • 上述兩種架構與Client相依,但資料中心即Web Service(REST)架構,具可重複使用性(可供別的前端使用)。
  • Rails支援 XML Template跟JSON。
  • 因為剖析資料的負擔完全放在 Client 端,所以 Client 端的Javascript程式或XSLT工程較大。

第六章 使用者體驗 實作了一個通知框架,第七章講安全性,第八章講效能及記憶體洩漏(memory leak)問題。剩下後半本則是一章一案例。

另一篇書評 : Relevance Review #5: Ajax in Action

註: 之前寫的 ajax 傳送格式比較 : XML, HTML, or JSON?

分類
JavaScript Programming Rails

在Rails中用Yahoo UI! Dialog + RJS

nap的這篇 YUI Dialog on Rails: First Pass 給了一個範例介紹在 Rails 中使用  Yahoo! UI Library 的 Dialog 並搭配 RJS 使用:

首先把yui下載回來,把要用的 .js 檔集中放到 /public/javascripts/yui/ 下,css (/yui/build/container/assets/container.css) 放到 /public/stylesheets/yui/ 下。

程式碼我就不轉貼了,我依樣畫葫蘆的範例在這裡 yui1,重點是按下Save時它用 Prototype 的 Ajax.Request() 呼叫 RJS Response,而不是用 YUI 的 Connection Manager,作者還加寫了一篇 Prototype vs YUI Connection Manager: Dialog continued…,給了 YUI Connection Manager的處理版本(好多行哩),作者是認為 Rails 的開發者比較熟Prototype,所以這裡就用Prototype版本來做囉。

我個人是不太喜歡混雜用(怕有衝突?),所以如果要完全拔掉 Prototype,RJS應該可以改用 RJS minus R! 直接寫 YUI Javascript code。

分類
JavaScript Programming Rails

RJS Minus R (MinusMOR)

UPDATE (11/24): 順應大夥要求,Dan Webb重新發一個 MinusMOR 版本,使用 .ejs 來表示 JavaScript with embedded Ruby templates。這樣就可以跟本來的 .rjs 共存了。希望這個 pure Javascript template 以後可以加入 Rails core 囉~

RJS是很棒的玩意,這殺手級的功能讓你寫AJAX response超簡單,只用Ruby即可。但是很明顯的它是個會漏的抽象層(leaky abstraction,事實上根據抽象滲漏法則,所有重大的抽象機制在某種程式上都是有漏洞的),一但開始漏而要寫raw Javascript時,在RJS中就要用page.call 之類的,但這就看起來比較醜陋,尤其是有Javascript條件式或raw Javascript很多的時候。另外就是RJS完全依賴Prototype跟Scriptaculous,如果你要改用別的Javascript framework時,Ruby版的RJS就不太有用了。

from RubyInside

因此如果你已經很熟 Javascript 跟 Prototype,或是你想改用別的 Javascript framework,可能就比較想直接用 Javascript 來寫 AJAX response,因此Dan Webb提出一個新選擇(新實驗?)  RJS Minus R (沒有Ruby的RJS!),MinusR 把 .rjs 改成寫 Javascript (用Erb內嵌Ruby code),主要就是給你一個 js helper 自動呼叫 to_json 來轉換 Ruby 資料。

討論串在爭論說應該要用另外 extension 副檔名表示這種 pure Javascript,因為這個 plugin 目前更改了 .rjs 的定義,造成本來用ruby寫的 .rjs template 不能用了。這部份該怎麼實作解決似乎還沒有定論。

DHH的回應說的很好,這是一個很好的實驗讓我們好好省思RJS,RJS不是萬靈丹,就像Rails的Active Record本身也是個會洩漏SQL抽象層,重點是如何讓80%的工作可以超簡單達成,and 另外的20%有彈性手動來變花樣。

另一篇介紹文: RJS templates without the R!

註: 目前的stable Rails版本不行跑這個 plugin,必須裝EdgeRails(開發中的Rails版本),請執行 rake rails:freeze:edge 安裝 (要有subversion)。另外 EdgeRails 只用於該 rails application,而不是整個升級系統 library 的Rails版本。

分類
JavaScript Programming

Adobe 開放 ActionScript VM engine

事情是 Adobe 開放 Flash Player Scripting Engine (即 ActionScript VM engine) 原始碼加入 Mozilla 的 Tamtrin Project,預計將可大幅提升 Firefox 的 Javascript 效能。

不過這不代表 Firefox 以後不用加裝Flash,雖然 ActionScript 與 Javascript 都是依循 ECMAscript 標準規格所實作出來的語言(core language完全相同),但是因為執行環境不同,加上的extentions也不相同(Flash的DOM和網頁的DOM不一樣),因此 Flash 的程式(swf)還是要在 Flash Player 裡執行。

所以廖長輩的公式應該改成 Flash Player = Tamarin + Flash-specific DOM

Mozilla 的好處是得到一個效率高的 scripting engine,Adobe 則藉由 open source 吸引開放原始碼社群做 scripting engine 最佳化(把手放開,專心去做其他更重要的事情),以及讓大家了解 Javascript 與 Actionscript 在語法上的共通性,藉此吸引人們使用 Flash或Flex。

想了解更多的話,請看 d.CAT 的這兩篇文章 What Tamarin really means ? 和 adobe team up with firefox – tamarin project