---

        今年是我第二次參加亞洲 JS 研討會，

        去年十一月我在 JSCamp.Asia ，第一次參與國際研討會，
        能跟那些許多著名的 framework 作者或很厲害的傳教士同堂，
        技能上跟文化上都學了不少事情。


        去年的紀錄寫在這
        http://blog.javascript.tw/2012/12/201212.html



        去年想寫完整的紀錄一路難產到現在，
        既然一時寫不出完整的紀錄，那就來寫點簡單紀錄好了。


        我照議程順序列

        11/28

        ＠ 開場

        非常炫的海底開場，充分的表達研討會的活力跟開發者的幽默。 XD

        We are creative , we are powerful.

        不必要是死氣沉沉的，我們是一群享受在各種有趣樂趣的工程師。

-------------------------------------------------------------

        ＠ Making the mobile web site faster


        這一個問題主要在探討如何讓手機在網路流量有限的狀況下，
        盡可能變快，提到了非常多實用的技巧。


        諸如快慢的感受問題，為什麼需要處理速度。

        * 減低載入速度的實際手段：

          圖片大小整理（同一張圖片有再縮小可能）、
          用 inline image 降低連線數，
          多檔打包降低連線數。
          偵測並移除沒用到的 CSS


        * 避免使用一些會增加瀏覽時間的手段：

          redirect page ，避免不必要的 redirect 。
          （會增加 hand-shake 時間，另外也相依於伺服器處理能力。）

          通常這類浪費時間的跳頁會用在底下這三種情境：

             1.切換語系
             2.偵測到手機版時跳到手機版
             3.用來追蹤（像是fb 上的 link 會先連到 fb 再跳到其他網站）


        * 預先存取 dns 避免 dns lookup 時間

          <link rel="dns-prefech" href="<dns>" />


        * 在 head 讀取最必要的 css 就好，其他一些不重要的 css 可以之後再讀。

        * 不要在 body 裡面混雜 html 跟 script tag ，導致 rendering 中斷。


        * 使用工具 page insight  來觀測網頁情況

        * 使用伺服器模組來幫忙你調整

          mod_pagespeed
          ngx_pagespeed

        現場隨手速記
     https://www.facebook.com/groups/javascript.tw/permalink/424236361011041/

        投影片
        http://goo.gl/ySHjDW


       ＠ The rise of things

        * 有些崛起的事情

        * 這一個 talk 主要在討論現在有許多硬體正在興起，事實上透過軟體控制
          硬體是非常有可能在未來發生的，像是 raspberry pi

        * 以前我們的電腦運算非常緩慢，但現在的電腦非常快，可處理非常多問題，
          在可見的未來，可能每件事情都會有電腦的進駐。

          講者認為未來可以用 js 來控制所有硬體。



        * 作者舉出他用來控制相機模組，自動定期拍下每天的夕陽，

          並傳送給系統的一個例子，來說明這一塊還有許多的可能性。


        現場隨手速記
  https://www.facebook.com/groups/javascript.tw/permalink/424244024343608/

        投影片
        http://www.slideshare.net/TimPark4/the-rise-of-things


     -------------------------------

       * Css in the 4th Dimension : Not your Daddy's css animation

        這一個 talk 我個人強烈建議，所有有志於前端的人都應該好好看看。


        * 講者強調其實雖然過去我們已經非常習慣用 jQuery 做到許多效果，
          但在這個時代我們其實應該更習慣使用 css 去解決該讓 css 解決的問題。

          現代 css 很多狀況下表現的其實已經比 JS 強悍很多，

          更簡單，更單純，更快。

        * 講者不斷 demo transition,animation,transform
          如何做出各種效果，能應用到現代的情境跟可能性

        * 講者提到這類 css 設定中的一些無法支援的極端情況跟對應處理方針

        * 講者也提到瀏覽器的支援現況與向下相容的問題。



          非常令人印象深刻的一個，再說一次，個人非常強烈建議看投影片。XD


        現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424255551009122/

        投影片
        http://goo.gl/opFlN3


     ＠ A JavaScript Web app Deconstructed

        這一場的主軸是透過解構 http://monocle.io/ 這個網站的結構，
        來帶大家認識 JavaScript 網站的結構。

        但具體結構其實跟 rails 還有他自己用的一些模組綁的很死，
        所以不是那麼容易看出個所以然來，講者介紹的也偏表層。

        我覺得對我整體參考價值算低，特別是我現在不是個 rails developer，
        因此裡面一堆 rails only solution 根本都不關我的事情。XD


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424262054341805/

投影片
http://goo.gl/bSLreA


     ＠ Server-side NodeJS programming with ... Photoshop ?

        其實這次 JSConf.Asia 有不少跨業結合，
        也就是不只是 server side ，也不只是 client side。

        更整合其他不同平台的應用，像是前面 Tim Park 提到的整合相機。


        這場是用來用 nodejs 操作應用軟體 photoshop 的功能，
        像是透過 nodejs 加上聲控模組來設定指令控制 photoshop 。XD

        （聲控模組 julius http://julius.sourceforge.jp/en_index.php ）

        還有就是透過 NodeJS 來接 photoshop 的事件，做一些 PS 的輔助應用。


        然後討論一些跨系統整合的困難點跟解決方案，也是非常活潑的應用。


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424275524340458/

投影片
http://goo.gl/F8xuSn


      ＠ Ops for Everyone

        讓每個人使用的 NPC (?)


        這一個講題主要講的是 deploy 環境建制跟團隊基礎建設的問題，

        應該有許多團隊都經歷過，開發環境只有少數人知道，
        而且每次開發都要經過重重手續跟人工，會造成許多潛在的問題。

        像是某一條 script 忘了跑之類的，而且一個人做事，
        其實其他人不會知道他做了什麼，其他人根本不知道該怎麼 deploy 。


        萬一這個人離職，啊，某個神秘的設定檔在哪之類的事情，
        某個指令要跑在某個指令之前之類的神秘規矩，這一切都沒人記得了。XDDD



        這裡介紹 github 自己使用並提供的開源工具 boxen 跟 hubot。

        boxen 主要用來建立環境、處理 compile & deploy 細節，
        確保每一台機器都能透過 boxen 在同樣的環境、同樣的設定底下，

        讓機器設定不再是黑暗的角落。


        而 hubot 則提供你一個方法，讓每個行為都能定義成一個指令，
        然後在 hubot 上執行的指令會被紀錄、會被記得，會被其他人看見。

        你甚至可以為此產生圖表，以瞭解 hubox 跟你的伺服器上發生的每件事。

現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424282441006433/

投影片
https://speakerdeck.com/johndbritton/ops-for-everyone



      ＠ automated css testing

        自動化 css 測試，其實他主要是要談為什麼要做 css 自動化測試，
        目前能採取的方案有哪些，有哪些現成的工具。

        為什麼我們需要對 css 做自動化設計，
        跟就算是 css 設計，也應該要遵循 TDD 原則。



        他提到的四個測試方案，在 ZK 時幾乎都有實作。
        我個人非常相信這一段我可以說出比他更多執行上的細節跟障礙。XD

        會後我有稍微跟講者聊一下，
        他個人說我是他碰過第一個可以跟他聊這個議題跟知道細節的人。（笑）

現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424286021006075/

投影片
http://2013.jsconf.asia/blog/2013/10/20/jsconfasia-2013-

------------------

      ＠ Bridging the gap between mobile platforms


        探討手機 app 的問題，並提出解決方案的一個 solution。
        這個 solution 的答案是 hybird app .


        前面開宗名義的討論 native app 的問題，mobile web app 的問題，

        然後最後提出解法：核心邏輯用 JS 寫同一份，UI 各自刻或選用 mobile web。
        http://calatrava.github.io


        跟 phonegap/titanium 的差別，這兩者都要求 based 在他們的 SDK ，
        但 calatrava 則是 base 在原生平台，只在需要的部份選用 js 來共用邏輯，
        或只在需要的部份選用 mobile web 來刻畫面。


        優勢:

        開發者觀點
          * 容易建置的結構，可以測試，需要熟 js 而不是 android ,ios.

        企業觀點
          * 可以掛進已經存在的 app
          * 讓 mobile web project 還是能有更多運用原生度可能。
          * 更容易增加新功能(from html5)


        其他 hybird 的選項
         * kirinjs
         * Cordova

現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424304861004191/

投影片
http://goo.gl/1MiAk7


      ＠ Straw - Dataflow processing for NodeJS

        介紹 Straw 這專案
        https://github.com/simonswain/straw

        基本上就是講 data flow processing 在 JS 上的實現，
        所謂 data flow processing 其實就是把工作的 input/output 定義清楚，

        然後讓不同工作之間可以 pipe 且各自獨立。

        這樣如果要改變工作的結果，只要改變中間工作的 flow 就能達成。

        （大概就像是 linux 的指令 pipe 那種感覺，
          你可以 cat file | grep matched  | echo .... etc )


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424309631003714/



      ＠ ReactJS - Rethinking Best Practice

        這一個討論火藥味蠻重的，在討論現行的以 template 為基礎的 MVC 結構，
        到底是解決問題還是製造新的問題跟說明 React 的核心精神。


        React 基本上意味著畫面由許多狀態構成，
        並由狀態繪製畫面，他有幾個很重要的特徵：


        * 不管畫面長怎樣，只要狀態一樣，他就應該能重演那個畫面。

          也就是說，沒有要劃一個畫面要先經過 A、B、C 三個步驟這回事，
          你可以透過紀錄當下的所有狀態就產出你要得那個畫面。

          也意味著你可以隨時 repaint 當前畫面或任何你知道狀態的指定畫面。




          因為有效能問題，所以他們建立虛擬 dom ，只更新有差異的 dom。



        這個能夠友善的支援各種平台（包括 mobile ）。
        http://facebook.github.io/react/


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424314947669849/

投影片
http://www.slideshare.net/floydophone/react-preso-v2


------------------------------------------------------


        11/29

      ＠ serious.js  web 影片效果器 XD

        介紹怎麼用 WebGL 幫現存影片疊加效果器， seriousJS api 設計等，
        效果還蠻好的，請參考 http://seriouslyjs.org/


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424536617647682/


      ＠ Web War in China (現場改題為 Web movement in china )

        這講者做了 js patterns 收集專案 project。

        http://shichuan.github.io/javascript-patterns/

        啟動 mobile boilerplate 專案，並且寫了兩本相關的書。


        因為這是亞洲研討會，我們想來討論亞洲發生的事情。
        中國還是以 ie78 為大宗，但平台積極推自己的瀏覽器。


        介紹一些中國大網站，像是騰訊，討論中國的 startup 怎麼應用 html5，
        介紹 app-can 這個 hybird mobile solution 。


        「開發者討厭 IE78 ，這 ok 。但在中國這市場可能比很多國家總人口都多。」
        （這句話後來在 twitter 上有引來一些迴響）

        然後說中國有許多手機遊戲都正在用 html5 開發。


        基本上這議程對我而言沒甚麼資訊含量，
        講者介紹的工具現場有人提問只有中文文件，講者說那只有中文沒錯。XD


        jsconf 聊天室裡倒是有人講了一句。 lol

        [sb-skerch] world of their own... @china


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424546324313378/

投影片
http://goo.gl/5zovYZ


      ＠ "Once upon a time, somewhere between your console and browser"


        基本上這是在聊可以用哪些東西當作你瀏覽器的 input，
        包括重力加速器、包括 mic 、包括 webcam 、包括各種 api。


        不過這個議題有不少部份跟去年的 open cv 議題有重疊。:Q


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424555324312478/



      ＠ Declarative Web Scraping

         這個其實是要講怎麼分析 web 上的語意跟文字，
         用來做一些索引或之類的工作。


         大概是本次大會裡面個人最失望的一個議程。


        講者本身有參與這個專案的服務
        https://krake.io/

現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424559854312025/



      ＠ Meteor: Under the hood of a full-stack framework for building
        pure javascript apps.

        基本上就是介紹 meteor.js ，一個希望一套程式碼，
        可以同時跑在 client 跟 server 的 framework。

        現場採用 live demo 的方式介紹，確實讓人體驗到他的有趣之處。



現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424576547643689/


      ＠  Fun with sockets

        Web Socket 的深入探討與應用，作者介紹他運用 web socket，
        從一對一的裝置資訊傳輸一路進展到多對多的裝置通訊。

        並且介紹一些其中的觀念。


        其中運用 redis 做 pop-sub 事件發送。


        值得一提得事情是這個講者的簡報本身就是一個 web socket 的超棒 demo。


        他提供一個網址讓台下聽眾可以連接，連過去的網頁會顯示台上的簡報資訊，
        而且會隨著講者切換頁面的狀態，跟著顯示講者目前投影片的更多內容。

        非常令人印象深刻。

現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424582484309762/


      ＠ Pointing forward

         由 Tim 介紹目前由微軟跟 Mozilla 正在送件中的新版 Pointer 事件。

         也介紹一些觸碰需要注意的事情，如目標物太小會難以點擊、
         一些舊的滑鼠事件如 hover 在觸碰下幾乎不能運作等


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424586670976010/

投影片
http://goo.gl/HNBhWP


      ＠ Building Fast Scalable Game-Server in NodeJS

        從杭州來的中國講者介紹他們怎麼實作 html5 MMO-RPG 的經驗。

        主要都是在介紹 pomelo 這套 framework
        https://github.com/NetEase/pomelo


        這個講題蠻值得一看得，其中提到許多遊戲無法 scale 的問題瓶頸，
        有興趣搞類似遊戲的，這份投影片相當值得參考


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424598104308200/

投影片
http://www.slideshare.net/xieccy/pomelo-jsconfasia


      ＠ Emuilating with JavaScript

        相信大家都看過 jslinux  XD
        http://bellard.org/jslinux/

        這個議題跟這個有點像，怎麼用 JS 去模擬一個簡單而完整的硬體。


        由 Atlassian 的工程師為我們介紹怎麼模擬 CPU、記憶卡、顯示卡。XD

        其中主要是模擬早期的 cpu 跟遊戲主機，
        現場還播放一小段早期任天堂的廣告。


        講題中絕大多數都在講如何實作 cpu 時脈、memory 怎麼運作，
        遊戲控制器如何跟 cpu、記憶體協作，並且怎麼用 javascript 去模擬。


        非常的「硬派」，只能說這就是工程師的浪漫啊。


        https://github.com/alexanderdickson/Chip-8-Emulator
        http://blog.alexanderdickson.com/javascript-chip-8-emulator


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424603644307646/


      ＠  Frame.js

        這個是 web 線上影片編輯器，
        作者一邊 demo 他的影片作品一邊介紹這個編輯器。


        這一場實際上比較像是微電影發表會。但真的很酷。XD

        sample
        http://mrdoob.github.io/frame.js/editor/


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424608367640507/


      ＠ Lighting talks ，這次活動跟上次不同之處是有歡迎六位講者上來分享專案

        #1 台灣的 clkao 分享用 JavaScript 控制 database
           https://github.com/clkao/plv8x

        #2 講者介紹利用 livescript 寫 functional javascript

        #3 scrollback 開發者介紹 scrollback 服務

        #4 counder.sg
           提供新創公司需要的資源。像是各種協議文件的樣板並附上完整說明，並且
           允許自由編輯。

        #5 three.js 的有趣應用
           Chasing Bezier,Birds,kinetic rain,fish.js

        http://jabtunes.com/labs/3d/bezierlights/windows.html
        http://threejs.org/examples/canvas_geometry_birds.html

        #6 Fries

        一套長得像 android 原生元件的 web compoennt 包
        https://github.com/jaunesarmiento/fries

現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424590540975623/


      ＠ 結尾致詞


        現場總共 195 個人，來與會的來賓超過二十個國家，

        介紹跟回味這幾天的議題跟場地的環境，
        最後以大合照與給全場工作人員的掌聲做結。


現場隨手速記
https://www.facebook.com/groups/javascript.tw/permalink/424619320972745/



＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝



        btw 台灣這趟去 12 個人，
        算是僅次於主辦單位菲律賓、新加坡以外的第三大地區了。

        我記得去年我們好像去八個吧。XD


        活動相簿在這裡，純手機拍照而且大多拍得很隨意，有點糊請見諒。
        http://goo.gl/pOJ8j5


        台灣人拍照區～～（因為走得很趕，有錯過的就拍血啦～～（汗））

        我跟 Ryan 跟 kkbox 開發者們
        http://goo.gl/WrZ64I


＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

        今年是第二年去亞洲 JS 開發者年會了，有一些感想，

        其實我覺得在現在的台灣，我們把視野放在讓很糟糕專案執行的好一點，
        說穿了我們大多是在做過去的生意，這很好、不是不好。


        但我們在望向過去的同時，也應該去瞭解一下世界上的趨勢，
        去發現那些我們可以運用創造力跟想像力能達成的事務。


        為什麼不能用 js 控制硬體，為什麼不能用 js 寫影片編輯器，
        這世界這麼大，總是會有些人去發揮他們的創意，因為他們是工程師。


        工程師除了一隻眼睛照單一一接單操課以外，我們也得留隻眼睛，
        去留意那些可能順手就被我們錯過的可能的點子、可能的工作方式，

        慢慢的去瞭解這些各種有趣的新潮流。


        然後不管你能不能應用在工作上、要不要應用在工作上，
        這都很有助於保有你心裡的那份想像力跟創造力。

--
        虛實之間的世界，反抗軍與啟蒙軍的交集
                 帶著 Android 去旅行、去發現

                            在身邊渾然不覺的  另一個世界。
                          全世界，都是我們的  足跡與遊樂場。
        ~  The world around you is not what it seems. ~ http://ingress.tw

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.137.245.211
※ TonyQ:轉錄至看板 Soft_Job                                       12/02 17:06
※ TonyQ:轉錄至看板 Web_Design                                     12/02 17:07

--