去年 D2 的主題是綻放（主要講了：Angular+Node）， 今年主題是融合（React+Node），雖然不知道明年會是什么，但把握當(dāng)下還是最重要的堂氯。一大早和小伙伴打車趕往會場，一路堵得慌牌废，九點半左右才到會場咽白，這次大會的人數(shù)據(jù)說是歷屆之最。
會議時間：2015.12.19 全天
會議地點：浙江杭州阿里巴巴西溪園區(qū)4號樓報告廳
同行人員：stone鸟缕、david
大會介紹：分為一個報告廳晶框、兩個分會場，可以選擇自己感興趣的聽
報告廳：
上午：不四（天貓）?用Node.js構(gòu)建海量頁面渲染服務(wù)懂从；隱風(fēng)授段、曉田 ?手機淘寶Hybrid App框架的架構(gòu)演進
下午：承玉（淘寶） React及其生態(tài)圈在螞蟻金服的實踐；黃友昆（騰訊） Node.js加速Q(mào)zone番甩；寧朗 ?DataV數(shù)據(jù)可視化引擎
白馬山莊：
上午：張袁煒（百度） 從Web頁面到Native UI侵贵；楊文堅（騰訊） Component化設(shè)計與實踐
下午：樸靈（淘寶） ?alinode與Node應(yīng)用性能管理；阿里：知了 聽鴻? TV平臺前端alitv缘薛；黃高嵐（Strikingly） ?React Techniques and Patterns
擁翠山莊：
上午：淘寶：元彥 水瀾? 通過React Native技術(shù)變革無線開發(fā)窍育；李成銀（Thinkjs作者） ?使用ES6/7特性開發(fā)Node.js項目
下午：霍雍（阿里媽媽） Web接口管理工具RAP卡睦；郭虹宇（GeekZooStudio創(chuàng)始人） 融合Web技術(shù)的NativeUI架構(gòu)；黎敏（阿里B2B） ?美杜莎漱抓，國際化方案解決辦法表锻；崎軒（阿里智能） ?阿里小智App開放構(gòu)建平臺之旅
一天聽了四場，分別是《通過React Native技術(shù)變革無線開發(fā)》乞娄、《使用ES6/7特性開發(fā)Node.js項目》瞬逊、《React及其生態(tài)圈在螞蟻金服的實踐》、《Node.js加速Q(mào)zone》
話不多說仪或，進入會場：
第一場 ?元彥&水瀾《通過React Native技術(shù)變革無線開發(fā)》
分析了Native前端的一些痛點
無法跨平臺确镊、不同平臺不同API，動畫溶其，布局骚腥，網(wǎng)絡(luò)，存儲瓶逃，事件
開發(fā)效率不高：Coding-?編譯- 打包-Coding- 編譯-打包- ......-發(fā)布
效率低、成本高
瀏覽器復(fù)雜度高廓块，追求流暢體驗成本過高
現(xiàn)實的Hybrid技術(shù)只能部分增強厢绝，總是無法完全的實現(xiàn)完全偽裝為Native
js驅(qū)動的Native動態(tài)化技術(shù)，對比分析了F带猴、R昔汉、N
詳細(xì)講解了下React Natice原理
聲明式編程簡化復(fù)雜度
虛擬的DOM讓擴展富有想象
可以把React Native看做標(biāo)準(zhǔn)？
其實React Native 存在一些工程問題
1.React Native 整體實現(xiàn)不夠完整
2.打包文件過大
3.沒有OTA更新機制
React Web方案
1.統(tǒng)一的組件引入方式
2.統(tǒng)一的組件描述方式
3.統(tǒng)一的樣式描述方式
4.統(tǒng)一的數(shù)據(jù)獲取方式
5.平臺差異
6.調(diào)試
7.性能測試
整個過程最重要的傳送門拴清，將于月底開源：
React Web：http://github.com/taobaofed/react-web
16年開源相關(guān)流程工具：Generator靶病， RNpack，App
小結(jié):
1. React不管針對移動端還是Web 可使用通框架同api口予，不同實現(xiàn)即可
2. React 相較于其他 JS 驅(qū)動的 Native 動態(tài)化技術(shù)娄周，依賴體積有數(shù)量級的優(yōu)勢。
3. React Native Workflow -- Portal (傳送門) 沪停， 即將開源
第二場 ?李成銀《使用ES6/7特性開發(fā)Node.js項目》
李成銀老師首先詳細(xì)介紹了ES6/7九個大的特性
1.arrows
2.classes&modules
3.templata Strings
4.Enhanced Object Literals
5.Default+Rest+Spread
6.Destructuring
7.Promises
8.Generators
9.async functions
......
之后開始介紹Thinkjs
Thinkjs官網(wǎng)：https://thinkjs.org
Thinkjs Git：https://github.com/75team/thinkjs
文檔：https://thinkjs.org/doc.html
小結(jié)：（ppt模糊煤辨，具體聽得不是很清楚）
1.如使用Generator Function特性徹底解決Node.js異步嵌套的問題，讓開發(fā)Node.js項目更簡單木张、高效
2.項目中可大膽使用ES6/7里的特性众辨，借助Babel編譯，可以穩(wěn)定運行在>=0.12.0的Node.js環(huán)境中舷礼。
第三場 ?承玉《React及其生態(tài)圈在螞蟻金服的實踐》
下午第一場鹃彻，聽承玉講react組件方案
spm 和 npm 的比較
spm 不適合非專業(yè)前端。發(fā)布麻煩妻献，版本機制無語義化蛛株，瀏覽器加載性能損耗团赁，以及公司的后端不會搭 spm 源。
npm 的不足是國內(nèi)慢泳挥，不支持私有源然痊，然而這在阿里不是問題，阿里有 tnmp 這個開源npm私有化工具屉符。
評價了Browsify和Webpack
Webpack 不足是配置復(fù)雜
所以選擇基于 Webpack 進一步整合封裝剧浸。
原則：
分層：避免單點依賴、每層可替代（就是前端更新太快矗钟，不能依賴某個具體的工具
盡量用現(xiàn)有的工具而不是從頭開始
適合非專業(yè)的前端
盡量為開源社區(qū)做奉獻
通用組件的實現(xiàn)
接下里還定義了一套源碼規(guī)范
LESS會預(yù)編譯成CSS再發(fā)布以免依賴
ES2015 也會被編譯成 ES5
外加一套命令行測試和覆蓋支持唆香，還有持續(xù)集成
最后通過 npm pub 命令發(fā)布和打 git tag 等
組件 Demo 展示
整合圖形庫組件：輸入?yún)?shù)改變圖形
antd展示：簡化 API 和 繼承CSS還封裝一些后端們不會寫的樣式曙痘，有一套色彩等樣式和動畫系統(tǒng)媳禁，還有詳盡的給非前端看的文檔（markdown 編寫的）
框架設(shè)計
路由：react route
roof（自制未開源）：比 flux 更少重復(fù)代碼，比redux更適合非專業(yè)前端
roof介紹：怎么做數(shù)據(jù)聯(lián)動和組件之間的關(guān)聯(lián)
根組件的數(shù)據(jù)允許被其它組件訂閱滓技，后端們只需要搞清楚這些組件的相互關(guān)系就可以開發(fā)了
另外东涡，React操作form很麻煩冯吓，做了高級封裝來解決
redux 很好用，擴展進來拿來用
服務(wù)器端交互
給非前端提供一個整合各個Ajax接口請求的服務(wù)疮跑，免得他們無腦堆組件太多组贺，造成全都是不想干的Ajax請求
這里選用falcour這個工具
在數(shù)據(jù)通信層，對比了relay和falcor祖娘，用一個oceanbase的監(jiān)控界面舉例失尖，說明優(yōu)化之后的性能提升，主要是通訊數(shù)據(jù)的合并渐苏。
這一套東西由于和設(shè)計規(guī)范相配合掀潮，做出的頁面比較好看。
再加上前面的那些優(yōu)化琼富，速度也變得很快 600ms
整體的架構(gòu)圖：
最后是展望仪吧，總的來說就是更適合 java 工程師，前后端統(tǒng)一公黑，結(jié)合 React Native 做跨移動端能力等等邑商，其實只是探索中……
未來的探索，typescript凡蚜，ant-mobile人断，relay。
提問有人問后端們上手快不快：經(jīng)過培訓(xùn)開課后一個星期朝蜘，基本可以實現(xiàn)一個前端帶幾個后端來做后臺系統(tǒng)的開發(fā)工作了恶迈。個人覺得這套系統(tǒng)比較適合老板想得通，對后臺系統(tǒng)界面沒有稀奇古怪的要求，而前端人手又不太夠的情況暇仲。
提問：會考慮vue嗎步做？這個。奈附。全度。只能說偏好了。
另外個提問：為什么是基于react而不是基于web components斥滤？承玉覺得標(biāo)準(zhǔn)不一定好用将鸵。這個我贊同。
第四場黃友昆(騰訊)《Nodejs加速Q(mào)zone》
【基本為演講原話】
QQZone這個產(chǎn)品已經(jīng)超過十年了佑颇，我用了也近10年了顶掉，他們做Nodejs已經(jīng)四年多了。昆哥希望講一些拿回去可以直接實踐的挑胸，和QZone沒有耦合的東西痒筒。
NodeJs在QZone服務(wù)器的裝機量比例是 267/700(大約)，所有移動相關(guān)的全都部署了Nodejs茬贵，接下來還會繼續(xù)增長簿透。那么Nodejs 對前端帶來什么大的價值呢？
產(chǎn)品體驗
首屏離線一觸即開(似Native的WebView效果)：
1. 把WebView的內(nèi)容離線保存解藻，出來后再刷新萎战，就可以實現(xiàn)左右滑動的時候WebView不會白屏，尤其是離線和弱網(wǎng)絡(luò)的情況下效果最明顯
2. 交互效果實時改變并實時更新舆逃，不閃屏不白屏。
怎么實現(xiàn)：(還是會后晚上在QQ上問了他好久才明白些~~~)
1. App打開時戳粒，如無離線頁面路狮，就會預(yù)離線首屏（注意是首屏，同時預(yù)離線二級頁）蔚约，保證不白屏奄妨；
2. 對頁面瘦身，內(nèi)聯(lián)資源苹祟，加大離線效率砸抛，而且用Nodejs支持差量回包
3. 走聊天的長連接通道來離線(就是他說的頂級待遇)，能聊天就能離線(不需要TCP請求不需要握手提前享受HTTP/2)
總之就是更小树枫、更快直焙、長連接用Nodejs支持差量回包。
那么砂轻，這套系統(tǒng)怎么做問題定位呢奔誓？
答案是Nodejs服務(wù)器即?Fiddler：記錄瞬間為saz文件，隨時還原那個瞬間的狀態(tài)
那么搔涝，這個簡單粗暴有效的解決方案的最難點是什么厨喂？最難點并不是log量太大：因為只存14天的錯誤日志和白名單內(nèi)的所有日志和措。
最難點是怎么保證所有接入層都被NodeJs覆蓋，沒被覆蓋的抓不到（后來問了一下蜕煌，了解了派阱。這個問題的本質(zhì)是：怎么做到高流量下Nodejs的服務(wù)能夠高可用或者快速切換到老的服務(wù)上，需要把運維卷進來斜纪。在大公司的重要服務(wù)上贫母，解決這個問題要承擔(dān)巨大的壓力，不解決又拿不到抓包數(shù)據(jù)傀广，不方便定位問題）颁独，所以需要下線Nginx全換成NodeJs，或者將所有連接cname 到NodeJs 再轉(zhuǎn)發(fā)伪冰。
NodeJs接入層為什么能到前端手里呢誓酒？因為通過 NodeJs 轉(zhuǎn)發(fā)后，不再非要為移動端專門編寫私有協(xié)議的接口了贮聂，讓H5能夠調(diào)用所有 App能調(diào)用的接口靠柑，形成良性循環(huán)。
NodeJs的Window變量的故事
給每個請求分配一個Window變量吓懈，讓瀏覽器的工具能快速搬到NodeJs上來歼冰，比如很容易復(fù)用取Cookie的函數(shù)等等。
(坤哥開始演示自定義Window變量的使用耻警，就是個Context)
這是Window變量的實現(xiàn)（社區(qū)也有不依賴domain特性的版本）：
那么Window變量給QZone 帶來了什么好處呢隔嫡？用來助力實現(xiàn)前面說的服務(wù)器端端Fiddler一樣的log工具。還可以作為開發(fā)者工具甘穿，方便用Window上掛變量的方式分析每個請求腮恩，等等。
演講到這里就接近尾聲了温兼。不得不感嘆騰訊對用戶體驗的極致追求秸滴，才得到了今天這樣美好的NodeJs的故事。
收獲：
1.更加深入了解了React框架的知識（就是為此而來募判，看見sin用的那么活荡含，一定要多了解下）;
2.對NodeJs又有了新的認(rèn)識;
3.針對一些以前有困惑的前端問題有了新的解決方案；
4.見了老友昆哥届垫，雖然以前就認(rèn)識~~~
5.見到了樸靈真人释液，還拿到了親筆簽名書《深入淺出Node.js》;
6.認(rèn)識了幾只大牛。（完了）
注：D2前端技術(shù)論壇(Designer & Developer Frontend Technology Forum)敦腔，簡稱D2均澳。
