聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

十二月 7, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Javscript 18 歲生日歷史演進

resin.io 看到這篇 Happy 18th Birthday JavaScript! A look at an unlikely past and bright future. 裡面有些 Javascript 發展史,蠻有趣的,分享給大家看看。18 年前由 Netscape 和 Sun 共同 Release Javscript,在當年18天後,Ruby 也同時發佈了,底下來看看 Javscript 歷史演進。

JavaScript 發展史

1995: 由 Netscape 和 Sun 共同發佈 Javscript,並且命名為 MochaLiveScript,當時參與開發 Javascript 的其中一位負責人 Brendan Eich,現在為 Mozilla CEO。

1996: Microsoft Javscript 版本出現,並且命名為 JScript,同時發佈 Internet Explorer 3.0。這年也是 CSS 釋出第1版

1997ECMA 第1版釋出。

1998: Netscape 將 Netscape browser open source release 出來,並且成立 Mozilla Project。過了幾個月, AOL 買下 Netscape

1999: IE5 提出介紹 XMLHttpRequest

2001: IE6 正式 Release,截至目前為止,IE6 最大用戶還是在中國大陸 XD。

2002: 大家常用的 JSON 在這時候 Release,同時間 Mozilla 發佈 Firefox

2003: Apple 也不甘示弱發佈 Safari Beta Release。

2004: Google 發佈 Gmail released 產品,Gmail 用了大量 AJAX 技術,也造就現今的 Web Application。Google 挑4/1發佈,讓大家以為是惡作劇一場 XD。

2005: Apple open source Webkit,此專案是從 KHTML fork 出來的。同時間 Jesse James Garrett 發佈一篇 AJAX

2006: John Resig 發佈第1版 JQuery,現今的網站超過 90% 都會使用 jQuery,它被視為 “better cross-browser DOM API”。此年 Microsoft 同時發佈 IE 7。

2007: Douglas Crockford 講了一場 keynote 議題名稱為 JavaScript: The good parts 將來成為 O’Reilly 2008 年一本書。同年 Leonard Richardson and Sam Ruby 出了 RESTful Web Services 書。

2008: Google 推出自家瀏覽器 Chrome 和 V8 Engine,帶給瀏覽器不同的衝擊。

2009: 誰說 JavaScript 只能寫在 Client 端,Ryan Dahl 釋出 node.js,帶來用 js 寫 sever side 風潮,同年 PhoneGap 帶來 HTML5 和 JavaScript 整合到 Android 及 iOS。

2010: 一堆 JavaScript Library 同時釋出 NPM, BackboneJS, RequireJS

2012: Single-page app frameworks 出現: AngularJS 1.0, Ember 1.0.pre。

2013: Firefox OS 用 JavaScript 撰寫 UI Layer,並且正式 Release,Mozilla 同時發佈 asm.js

JavaScript 效能

Jan T. Sott 用 Kraken benchmark 發佈一篇 performance 報告,測試環境從 Firefox 3.5 to Chrome 23 同環境下測試

overall_kraken_2012

可以參考原始連結

JavaScript 生態

我們來看看眾多語言的變化

npm

可以發現 Node.js 正在往上衝阿,相信到 2015 年可以追上 Rubygems 及 Maven Central. 除了 55000+ 的 NPM package 及 6000+ package in broser 帶給使用者更好的體驗

另外 Github 也統計用其他語言寫的工具給 JavaScript 用

最後看看 Github repositories 的生態

jsgh 資料來源 Twitter,JavaScript 往上衝阿,難怪全世界都在缺 Frond End Engineer。

總結

現在用 JavaScript 寫 Client-Side 已經不稀奇了,現在有很多 Project 開始設計如何透過 JavaScript 去控制硬體,可以看到 File API and Device API 或者是 Chrome Apps, Mozilla WebAPI, and Tizen Web APIs 等專案,這些專案共通點就是希望開發者可以透過 JavaScript 來控制硬體裝置。另外也可以透過 node-webkit 來溝通。

想了解 EmbeddedJS 可以關注現有的專案或研討會 Nodebots, Nodecopter, Tessel.io, Espruino, Device.js,或者是 application 像是 heimcontrol.js and Google Coder for Raspberry Pi,很難想像 18 年後的 JavaScript 會變成什麼樣子 XD。

五月 21, 2012

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 台灣第一屆 JavaScript Conference Developer 會議

JSDC 2012

自從去年辦了台灣第一屆 2011 PHP Conference,2012年開始又來新的第一屆 Javascript Conference,在去年的 PHP 會議由於第一次開始舉辦 PHP Conference,所以比較少人投稿,導致議程裡面出現很多 Javascript 議題,這也是很多朋友的疑問 XD。底下來回顧 JSDC 5/19 (六) 個人參加的議程。由於早上差不多10點半才到,所以前兩場議程(Key Note – Ericsk, Node.JS on Windows Azure)就沒有聽到了,比較可惜。如果沒去聽現場的,可以到官方網站下載投影片參考。

Key Note – Andreas Gal

這場最主要是介紹 Mozilla B2G Project,這是去年 Mozilla 的計畫,也在今年二月發表一些 demo 範例,以前程式設計師開發 Mobile device 需要用到大量的 Native API,現在可以利用 HTML5 + Javascript 開發任何驚人的 Application,大家可以在 Github 找到此專案 Gaia,另外可以參考 Boot to Gecko Wiki,現場有 Demo 手機可以玩看看。

JavaScript在Big Data方面的應用

這場其實就是推廣 Windows Azure 一些功能還有用 Javascript 處理大量資料,Map Reduce 的 work flow,投影片可以參考這裡,個人對於 Windows 系列的產品沒有很大的興趣,結論就是只有網站夠大才需要考慮到這些應用,不然一般的架構就可以做完了。

JavaScript MVC compare

這場是由 TonyQ 主講,相信大家對於他已經很熟悉,在台北每個禮拜都有舉辦 Javascript 小聚會,可以參考 Facebook javascript.tw Group,這場介紹如何選擇一套 Javascript Framework,現場也提到如果想玩新的 Framework,請由全新專案開始,不要拿舊有的網站來開刀,那會是拿石頭丟自己的腳,以老闆角度來想,為啥要導入新的架構,除非你有很大的說服力,不然請打消這個念頭,此主題有提到 AngularJSBackbone.jsSpineJavaScript MVC,講者提到下面幾個重點,對於找一套好的 Framework 非常有幫助:

  • Project Dependency
  • Dependency Management
  • Model-View-Controll structure
  • Entry point
  • Testing

Project Dependency:
首先在用任何一套 JS Framework 之前,必需要先瞭解此套件的相依性,例如 Spine.js 需要 include jQueryzepto,另外還需要 CoffeeScript。那 Backbone.js 呢?就需要 include underscore.js 跟 jQuery,所以每一套 Framework 都要瞭解相依性,以及自己撰寫開發的 script 是否可以相依並存,這點是非常重要。

Dependency Management:
如何解決相依性管理,這點是就是要瞭解這些 Framework 如何整合而外的 Library,像是 Backbone.js 用了 AMD (Asynchronous Module Definitions) 架構,要瞭解管理這些額外套件,以及整合各大 opensource 架構,例如 Require.js

Entry Point:
各大 JS Framework 的主要特性,當您選一套喜歡的 Framework,一定會有您自己心目中想要的架構,才會繼續使用它吧,這點大家都必須要先清楚知道,而不是大家用,您就用。像 Sencha Touch,它就是 script base,你只要會寫 javascript 就可以了,不用理會 html dom 元件如何產生出來,因為在 Sencha 底層就幫忙把 Html Layout 處理完畢。Backbone.js 呢,它提供了 URL Routing 功能,這點非常方便,讓後專程式設計師可以專心寫 API,輸出 JSON 格式就可以了。AngularJS 就是以 html 當作 Base,利用 ng-* 插入到 html tag 來產生前端效果。

Model-View-Controler:
我想大家一定聽過很多 MVC Framework,像是 CodeIgniter, Django, Yii, Zend Framework …等太多了,那前端的 MVC 呢?這是大家很少注意,也很少使用的地方,個人認為要選擇一套前端 MVC Framework 必須包含 Controller,利用 URL Routing 功能來達到 JS File 的分離,Model 用來連接後端 API,View 則是 Template Engines,以及可以自訂各種不同的 Event。

Testing:
前端的 Testing 就看專案需求了,這部份就不多寫了,可以參考 QUnit

Introducing Mojito

這場由 Yahoo 前端工程師 David Shariff 來介紹 Mojito MVC application framework,現在前端工程師非常辛苦,因為有太多的 Device 要支援: Android, iPhone, iPad, Windows Phone, other Device…等,每個 Application 用到不同的 Language,每出一個產品,前端做到死,所以 Yahoo 提出了解決方案: Cocktails Mojito。Mojito 實現一種 Language base,支援各式不同的 Devices,包涵各種不同的 Screen Size。Mojito 語言就是 JavaScript,Client, Server 全部都是。大家可以到 Yahoo Github 找到完整 Source Code。Mojito 整合了 YUI3Node.js 當作伺服器端。個人覺得這套好用的原因在於架構清楚,並且幫忙分離檔案目錄結構,這樣對於共同開發團隊非常有幫助。

Noder eyes for frontend guys

這場由 Fillano 主講,主要是給大家一堆寫 Node.js 之前所需要的 Javascript 知識,像是單一執行緒,或者是會碰到 async mode,以上都是寫 JS 的工程師會遇到的,投影片值得一看再看,請參考此下載連結

Non-MVC Web Framework

永遠的大四生 Fred 所講的一套 MVC Web Framework,base on node.js,講者提到台北一堆神人都自己寫一套 Framework,所以講者也自己創了一套 XD,原本是 RedTea (淡定紅茶 Framework),後來作者把 Express Framewrok 導入,讓開發者更趨向於使用 Express Framework,並且結合 RedTea 所有功能,衍生出另外一套 Kamalan Web Framework 詳細可以參考作者 blog: 【JSDC.tw 2012 簡報檔釋出】Non-MVC Web Framework

Refactoring with Backbone.js

Jace Ju 主講,如何幫網站擦屁股,這是我這次去會議看到最多程式碼的一個 Section,主要是把網站本身的 jQuery 程式碼重構成 Backbone.js,對於新人來說是非常好的學習,大家可以看看簡報檔,裡面有講者一步一步詳細分析該如何重構整個 Javascript,完整的把 Backbone.js 導入到開發專案,相信看完此 Slide,會有更多人投入 Backbone.js。

心得

個人蠻喜歡參加這種大型會議,可以學習到不同的架構,聽到不同的心得,以及瞭解目前大家開發主流的工具及語言,希望下次能有機會可以分享自己的心得 XD。

Related View

support:

biggo.com.tw

biggo.sg

A Django site.