› 看板 Ajax 關於我們 聯絡資訊
作者TonyQ (自立而後立人)
看板Ajax
標題[心得] JSConf.Asia 簡易心得
時間Mon Dec 2 17:06:02 2013
今年是我第二次參加亞洲 JS 研討會， (http://jsconf.asia ) 去年十一月我在 JSCamp.Asia ，第一次參與國際研討會， 去年的紀錄寫在這 http://blog.javascript.tw/2012/12/201212.html 參與國際研討會能跟那些許多著名的 framework 作者或很厲害的傳教士同堂， 技能上跟文化上都學不少事情。 去年想寫完整的紀錄一路難產到現在，有鑑於此 既然一時寫不出完整的紀錄，那今年就先來寫點簡單紀錄好了。 我照議程順序列 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 設定中的一些無法支援的極端情況跟對應處理方針 * 講者也提到瀏覽器的支援現況與向下相容的問題。 * btw 講者會後被稱為 css god ，代表大家對她的崇敬啊。 lol 本次大會議程品質如果要我排名的話，這個議程應該會進前三， 非常令人印象深刻的一個，再說一次，個人非常強烈建議看投影片。XD 現場隨手速記 https://www.facebook.com/groups/javascript.tw/permalink/424255551009122/ 投影片 http://goo.gl/opFlN3 http://lea.verou.me/more-css-secrets/ ＠ 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 當前畫面或任何你知道狀態的指定畫面。 所有的操作都在 JS 裡面完成，包含繪製、事件。 * 只要畫面一有異動就(意義上的) 重新繪製整個畫面 因為有效能問題，所以他們建立虛擬 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 上的語意跟文字， 用來做一些索引或之類的工作。 但因為講者現場的投影片效果不好跟講題太過艱澀跟跳躍， 導致實際上很多人都表達他們無法瞭解講者在講什麼。Orz 大概是本次大會裡面個人最失望的一個議程。 講者本身有參與這個專案的服務 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 g0v 團 http://goo.gl/fkUWXo ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 今年是第二年去亞洲 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 ※ 編輯: TonyQ 來自: 220.137.245.211 (12/02 17:12) ※ 編輯: TonyQ 來自: 220.137.245.211 (12/02 17:17) ※ 編輯: TonyQ 來自: 220.137.245.211 (12/02 17:18)
推 s25g5d4:首推 12/02 18:01
※ 編輯: TonyQ 來自: 220.137.245.211 (12/02 18:59)
推 summerleaves:換各版再推 XD 12/02 20:17
推 Rplus:) 12/02 21:23
推 tomin:感謝分享 12/02 21:59
※ 編輯: TonyQ 來自: 118.168.129.16 (12/03 10:15)
推 benqm300:原PO超強~~! 12/27 00:06