2014 杭JS大會 會議盛況與技術熱點現場報道（直播）

中國JS開發者的年度盛會「JS中國開發者大會」，於2014年6月21日在杭州舉辦了本年度的「杭JS」會議！

咱們SegmentFault的 @integ 和 @shamiao 將爲在現場爲您帶來現場的報道，一覽大牛風采，直擊技術熱點。

直播已經結束，感謝你們的關注和支持！

---

更多照片繼續更新

6月22日（DAY 2）

1745 logout

1710 Web Components W3C新標準

雲適配CEO 陳本峯

• The future of Web development. WebComponets.org
• 對抗當前的Web前端框架中HTML內容不分層次、無差異徹底平鋪，沒法維護的問題
• 不少須要後端支持（包括Nodejs）的功能在Web Components中能夠直接在前端徹底實現
• Template：<template>建立模板，建立時DOM結構已經就緒但沒有開始渲染、下載和JS執行。經過cloneNode把模板真正置入文檔的DOM樹
• Custom Element：自定義一個HTML標籤，而後使用JS回調生成真正的HTML結構
• Shadow DOM：相似於chroot－－掛載在某個元素下面，但不在DOM樹中顯示，獨立於當前文檔父節點，不受文檔樣式上級指揮下級的影響。
• HTML Imports：僅前端實現的文件導入功能。<link rel="import" href="myslider.html"
• 附－雲適配開源項目：Amaze UI

1645 Storm框架簡介

Luying Li，Twitter員工

• Storm分佈式、高容錯實時計算系統，Backtype開發（Twitter收購）
• 開源大數據：Storm S4 Hadoop Spark Disco HPCC
• 確保數據徹底處理（無丟失）、低延遲、高容錯
• Storm集羣：Nimbus控制節點，Zookeeper協調節點，Supervisor工做節點
• 基本數據類型＝Tuple；無邊界的Tuple序列＝Stream；Stream的源頭＝Spout
• 消息處理者Bolt：輸入1或多個Stream，輸出0或多個Stream
• Topology拓撲架構：Spouts和Bolts組成網絡；Task與流分組策略
• Word Count Example
• 多語言性：Topology和Nimubs均基於Thrift，spouts和bolts都做爲子進程來運行，使用JSON通信
• Storm在 GitHub上已經有了部分Nodejs實現

1610 Hybrid API 的傳感器

@鬼道-徐凱 <<跨終端Web>>做者

• 傳感器的類型：動做、環境、音頻、視頻
• 陀螺儀原理 加速計原理
• 陀螺儀與重力感應的誤解
• GPS 磁力 光線溫度氣壓等
• 實際設備的項目實例

1545 Edge.js

Iris Classon

• 在Node中運行.net程序
• 調用預編譯的dll模塊
• 反向的在.net中調用Node程序
• 跨平臺－－在Linux下使用Mono兼容層來應用Edge.js

1510 five-lines 深刻淺出node命令行工具

Jacob Groundwater，NodeOS項目做者介紹如何使用Node寫操做系統的基礎套件

• 5行能夠作一個Web Server（Node的Hello World）
• 那作一個命令行工具如何？（5行的CURL，把http請求內容pipe到stdout）
• 更復雜的－－可不能夠寫一個Shell？（Shell的基本：解析輸入，調用進程，顯示輸出結果。13行的Shell）
• 擴展爲遠程Shell－－ groundwater/node-wssh（服務器30行，客戶端40行）
• 那麼能夠作一個操做系統嗎？
• 操做系統的要件：內核、包管理器、Shell
• 內核＝linux，shell＝node shell，包管理器＝npm－－這是一個正在進行的項目，請參閱node-os.com

1450 Nodejs與多種服務協做實踐

1400 玉伯：如何持續成長

• 咱們不須要時間管理－－情緒管理和適量自律纔是須要的
• 不要依賴工具
• input->person->output－－知識管理的IPO模型
• 寫博客和寫博客
• 作有追求的程序員

1100 TroopJS - scalable web application

garryyao from EF Labs Shanghai

• 咱們須要的可能不是一些小打小鬧的功能庫，而是一個完整的基礎框架。
• 功能庫（library）：以作好一件事爲賣點，然後不斷的吸引你去使用他
• 框架（framework）：作好一些最重要的事情，剩下的放用戶本身選擇
• 可擴展性不僅是功能擴展，而也包含需求、函數庫甚至是多設備的擴展
• 多設備的悲劇：ExtJS桌面強力，但移動端幾乎無能，因此最後另出了一套Sencha Touch結果在API的兼容上又引入一堆問題
• 因此一個框架絕對不能給開發者設定太多的條條框框、必定不能越界作太多事情，必須抵制功能膨脹的誘惑
• Unlearn & Relearn：拋掉既成成熟技術的條條框框，從而造成和創造新的概念
• M、V、C、O、T......這些行爲和作事方式定死的功能模塊，其實均可以規約爲統一的"組件"（components）。
• TroopJS組件的例子－－組件經過從消息總線獲得消息，從而被動的進行：開啓結束生命週期、處理DOM行爲、處理路由行爲等各類操做
• TroopJS不提供很是多的功能，許多可選的實用特性要在TroopJS上掛載模塊（modules）才能實現

1020 massive js development

EF Learning Lab 的外國演講者（英孚教育不僅是英語教學）

• 大型項目（jquery），龐大項目（Github），巨型項目=massive（gmail）
• 這時開發者分散在多個部門甚至多個公司，交流很痛苦卻仍然必須
• 你全部的模塊 都是屬於個人－－規範化是鐵的原則
• 寫小的模塊，但不要過於碎片。寫小的部件，但時刻保留擴展和鏈接成大系統的接口
• 小的、分佈式的老是好於大的、單一模塊化的。－－Linux內核是個很大的特例
• 使用消息總線message bus整合多個組件之間的依賴和通信
• 異步，除非TM有明確的目的必須同步－－由於咱們永遠不知道網絡、資源阻塞等全部的意外情況
• 事件驅動－－Node、DOM其實咱們已經在作了，但還須要放眼更多：Web sockets, Swing, Akka, Erlang
• 讓代碼自說明－－減輕人類的識讀負擔（congnitive load）
• 聲明式－－描述"作什麼"而不是"如何作"
• DRY原則：不要重複copy來他人代碼的錯誤
• 準備一個root application－－就像Linux的root或init，管理一切、容納一切、負責一切、表明一切

（噗 知道這個梗的就笑吧！）

0940 開源項目管理維護經驗分享

郭宇（@turingou）分享他在github上重新手到有人fork、pr的熟練開源玩家的歷程。

• 若是在Github上沒有方向 那就去尋找喜歡的領域
• 尋找解決問題的辦法，尋找新的技術領域，不要投機
• 有了第二我的就再也不是本身的代碼而是開源項目
• 跨出寫代碼自己，注重換位思惟和表達力，注意管理項目走向
• 四要素：用戶（中心），代碼（手段），推廣，文檔
• 種子用戶（注：也叫核心用戶 core user）很重要

0900 sofish的AngularJS演講

@sofish 爲你們分享了使用Angular開發web app的不少實用經驗。例如如何讓搜索引擎能夠爬到web app的內容，數據雙向綁定可能遇到的問題，如何解決頁面閃爍等很是實用的經驗技巧

---

6月21日（DAY 1）

晚上：After Party

After Party是杭JS主辦方在下午會後特別爲參會者提供的一場歡樂的自由聯歡活動。

1620 BlendUI

BlendUI 一個web app開發框架。全部的元素都是webview！

1550 rabbit.js mvc框架

芋頭君的小製做，輕量級mvc框架xinyu198736/Rabbit.js

• 輕量、約定嚴格、清晰分層、數據庫統一封裝
• 除mvc外，多加Filters, Service兩層

rabbit.js logo特別萌。猜猜是誰畫的。

1515 Patrisika

來自USTC的化學與材料科學家分享了js解釋器Patrisika.語速超快的，用很文藝的ppt。還學會了各類高大上的名詞：泛化，特化，因子，不平凡表達式，去正交化。

1420 p2p對等協做開發

James Halliday 美國著名nodejs極客與npm模塊做者。

• cool的美式手繪風幻燈片
• 網絡的協做能夠作成一個大的項目
• 大的項目終究是大批小模塊的互相依賴
• 分治法
• 現場演示使用trumpet庫在nodejs下建立標準過濾器形式的html處理器
• 現場演示splicer管道流控制程序
• 現場演示如何使用的各類nodejs模塊拼裝一個web聊天程序

1400 Google Bigquery API

來自臺灣nodejs社區的xxx，分享了google的big query。惋惜google近期不能訪問。

1330 抽獎

中午餐後的抽獎環節，一個帥到吐血的程序員把本身的獎品送給了給他發獎的妹子。

1110 淘寶先後端分離實踐

• 先後端開發必須合做，但經常責任不清，必須分離
• 後端mvc時代
• 當前的前端新技術發展迅速
• 前端愈來愈複雜，確定不是單純的「套頁面」，不是後端的附庸
• 前端內部，和先後端之間耦合的緊密性
• 困惑：view層誰作？
• 業務和渲染散落在應用中，因此只能用響應式硬來去作跨終端
• 先後端耦合早晚會形成代碼的腐爛
• 第一次分離嘗試：後端只出數據API，前端本身全包
• 問題：各層職責重疊，並自成系統
• 客戶端渲染性能低下而且seo難作
• 先後端雖然看起來分離但仍然耦合，重用性差
• 到底什麼是前端？什麼是後端？
• 按照工做邏輯仍是b/s的實體環境來區分？
• nodejs打通先後端代碼的複用，穿透b/s鴻溝
• 後端=java 後臺+服務器端js，前端=瀏覽器端js
• nodejs+bigpiper，前端仍然是分批加載的lazyload，但對於後臺仍然是一個請求，減小請求數的翻倍
• 案例：淘寶首頁、詳情頁、單頁面應用
• 接口的模塊化和標準化
• 組件化：功能邏輯的整合和多態，一處寫好各平臺通用
• 框架化：總體規範化和職責分離的將來

1050 atom shell嵌入nodejs實戰

Github staff的演講

• atom shell：用nodejs編程的chromium，同時嵌入到瀏覽器和渲染端
• 與node webkit類似，用nodejs請求本地系統的功能
• 但atom shell不假設用戶總會使用瀏覽器功能，只是封裝chromium的功能給node用戶使用
• multi context patch 解決多context的問題
• atom shell的載入方式：先初始化chromium，再初始化多個context並載入nodejs
• nodejs和原生gui循環的區別
• 一個主線程，兩個事件循環。自己不可能，但只照顧一個循環又不可行
• atom shell選擇融合兩種循環方法
• 新開子線程等待io事件，等待到了通知主線程
• 對chromium和nodejs的修改最小化

1000 then.js宣傳演講

對項目 teambition/then.js 的宣傳。

0920 簽到中

第1日的會議即將開幕！如下是 @integ 與參會者和與博文視點的做者們合影