FEX 技術周刊-2015/07/20

業界會議

百度移動云直達號團隊技術交流UC專場

http://div.io/topic/1153

• 前端進入跨端時代
• A FUTRUE CALLED WEB-COMPONENTS http://pan.baidu.com/s/1mg7rfTm
• 可編程的NATIVE UI設計與實現 http://pan.baidu.com/s/1dDhgVPf
• 深入HYBIRD開發

[資料]美團技術沙龍啟動 O2O架構專場回顧

• http://weibo.com/p/1001603864952376002030
• http://www.slideshare.net/meituan/presentations

美團技術團隊在中關村創業大街首次啟動了“美團技術沙龍”活動，首場O2O技術架構與實踐專題，分別由美團、58到家、滴滴打車的專家來講述其各自行業領域的架構經驗

2015iWeb峰會－上海 7.19

• http://2015.html5dw.com/shanghai

FEX 的此方MM也在大會上分享了HTML5移動頁面構建平臺技術架構相關內容，精彩不容錯過 http://pan.baidu.com/s/1ntost4H

ArchSummit全球架構師峰會 - 深圳 7.17-7.18

• http://sz2015.archsummit.com/
• http://www.stuq.org/ppt/qcon2015/2a5d9377caceed899f1c2d14097285fc

百度 Web 技術專欄

ES Decorators簡介

http://efe.baidu.com/blog/introduction-to-es-decorator/

Decorators是ECMAScript現在處于Stage 1的一個提案。當然ECMAScript會有很多新的特性，特地介紹這一個是因為它能夠在實際的編程中提供很大的幫助，甚至于改變不少功能的設計。

HTML代碼風格檢查工具對比

http://efe.baidu.com/blog/comparison-of-html-linting-tool/

本文選擇了 Bootlint、AriaLinter、htmllint、HTMLHint 及 htmlcs 這五個目前最活躍的相關項目進行對比。除此之外還存在如 tidy、W3C/Mozilla HTML validator 等工具，但它們專注于 HTML 規范，幾乎不涉及代碼風格上的檢查，這里就不做比較。

深閱讀

QuestMobile2015上半年App狀況盤點

http://mp.weixin.qq.com/s?__biz=MjM5MDk2NzM0Ng==&mid=208448540&idx=1&sn=6fcc772ea3c481e2b65f7e76a939a7b4#rd

其中包含了最新的 APP 用戶使用及留存數據，很值得參考

函數式編程指南

https://github.com/DrBoolean/mostly-adequate-guide

我們一直都說 JavaScript 借鑒了很多函數式編程的思想，然而提到函數式編程，大家的第一印象往往是生澀難懂的，最近在 Github 出現了一本倍受好評的使用 JavaScript 進行函數式編程的書籍，告訴大家如何在日常工作中更好的利用函數式編程的特性。

淺談移動前端的最佳實踐

http://www.cnblogs.com/yexiaochai/p/4219523.html

梳理了移動 Web 的各個庫及框架、性能優化方法及 Hybrid 開發實踐

Building With Node.js 系列

• At The New York Times https://www.talentbuddy.co/blog/building-with-node-js-at-the-new-york-times/
• At Netflix https://www.talentbuddy.co/blog/building-with-node-js-at-netflix/
• At eBay https://www.talentbuddy.co/blog/building-with-node-js-at-ebay/

Pure-UI

http://rauchg.com/2015/pure-ui/

作者結合項目實踐介紹了對 ui 組建實現的思考。

The boring front-end developer

http://thebfed.com/

優秀的前端工程師除了關注最新的酷炫技術，還更關心這些「無趣」的事情。

另外還有人寫了一篇 The Cool Front-End Developer 作為回應。

微信公眾平臺的設計與開發之道

http://www.infoq.com/cn/articles/wechat-design-dev

揭秘微信公眾平臺中的一些設計細節

曾探：愛JavaScript再多，它也只是生活的一部分（圖靈訪談）

http://www.ituring.com.cn/article/199456

AlloyTeam 前端團隊的高級工程師曾探訪談

Digging into the TurboFan JIT

http://v8project.blogspot.jp/2015/07/digging-into-turbofan-jit.html

V8 最新 JIT 編譯器 TurboFan 的實現細節介紹

ReactEurope Conf 參會感想

https://github.com/dfguo/blog/issues/1

React 帶來的革命性創新是前端世界過去幾年最激動人心的變化。自從接觸 React 以來，我深信 React 會改變客戶端開發者（包括前端、iOS 和 Android）的開發體驗。這次在巴黎舉辦的 ReactEurope Conf 大會是繼第一次在 非死book 總部舉辦后最大的 React 活動。超過10位來自React、GraphQL、Relay 團隊的核心技術成員也出席大會進行分享。這次代表 Strikingly（似乎也是國內唯一家公司）去參加，想寫下一些參會感想。

Android UXSS階段性小結及自動化測試

http://drops.wooyun.org/tools/3186

WebView(網絡視圖)android中加載顯示網頁的重要組件，可以將其視為一個瀏覽器。在kitkat（android 4.4）以前使用WebKit渲染引擎加載顯示網頁，在kitkat之后使用谷歌自家內核chromium。Uxss(Universal Cross-Site Scripting通用型XSS)UXSS是一種利用瀏覽器或者瀏覽器擴展漏洞來制造產生XSS的條件并執行代碼的一種攻擊類型。可以到達瀏覽器全局遠程 執行命令、繞過同源策略、竊取用戶資料以及劫持用戶的嚴重危害。

Bringing componentization to the web: An overview of Web Components

http://blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/

Edge 瀏覽開始開發對 Web Components 的支持了

Under the hood: Box's HHVM migration

https://code.非死book.com/posts/1607907626123431/under-the-hood-box-s-hhvm-migration/

Box 遷移到 HHVM 上的實踐

The Web’s Cruft Problem

http://developer.telerik.com/featured/the-webs-cruft-problem/

當開發者卻越來越喜歡 Web 了的時候，用戶越來越討厭 Web 了……

The disadvantages of Single Page Applications

• http://adamsilver.io/articles/the-disadvantages-of-single-page-applications/
• https://news.ycombinator.com/item?id=9879685

可重點看看 hn 的討論，贊同這個：As with everything, if you're going to do SPA, you should do it well.

H5動畫60fps之路

http://weibo.com/p/1001603865643593165786

科普了如何利用新特性來提升動畫性能，包括如何性能分析。

手機百度云端架構設計與實踐

http://www.infoq.com/cn/presentations/design-and-practice-of-mobile-baidu-cloud-architecture-part1

手機百度云端在PHP架構對超級APP的支持方面具有領先技術。 本題目引導傳統PHP工程師開拓眼界、提升能力。從傳統Web系統工程師的思想開始引導，逐步切入到超級APP的服務端設計模式，循序漸進向讀者展示手機百度宏大的云端架構，及其穩定高效迭代和運維的秘密。

解讀CSS布局之-水平垂直居中

http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/

這是一個經典話題，似乎有多了一些玩法。

Functor, Applicative, 以及 Monad 的闡釋

• http://jiyinyiyong.github.io/monads-in-pictures/
• https://www.油Tube.com/watch?v=ZhuHCtR3xq8
• http://www.ruanyifeng.com/blog/2015/07/monad.html

函數式編程的幾個重要概念。

How to receive a million packets per second

• https://blog.cloudflare.com/how-to-receive-a-million-packets/
• http://people.netfilter.org/hawk/presentations/LCA2015/net_stack_challenges_100G_LCA2015.pdf

On Linux, how hard is it to write a program that receives 1 million UDP packets per second? Hopefully, answering this question will be a good lesson about the design of a modern networking stack.

PHP vs Node.js 深入討論

http://mp.weixin.qq.com/s?__biz=MjM5OTMxMzA4NQ==&mid=216864949&idx=2&sn=3d14f14862326266ffff876b1b8bfd2f

其實語言的選擇和公司技術棧、應用場景、團隊成員狀況息息相關。最關鍵的時，別隨便更換語言。還是鳥哥在微博中說的好：“我們要脫離語言之爭的低級趣味，把有限的口水噴到更需要灌溉的地方”。

學習筆記：The Log

http://blog.jobbole.com/88301/

這是一篇學習筆記。學習的材料來自Jay Kreps的一篇講Log的博文。原文很長，但是我堅持看完了，收獲頗多，也深深為Jay哥的技術能力、架構能力和對于分布式系統的理解之深刻所折服。同時也因為某些理解和Jay哥觀點吻合而略沾沾自喜。

新鮮貨

Push notifications

https://curiosity-driven.org/push-notifications

本文簡短的介紹了在瀏覽器端 Push API 與 Notifications API 的使用方法

V8 JavaScript Engine: V8 4.5 release

http://v8project.blogspot.jp/2015/07/v8-45-release.html

4.5 版本的 V8 引擎支持跟多 ES6 特性，并優化了之前性能不好的 with 等特性

Markdown UI

http://jjuliano.github.io/markdown-ui/

像寫 Markdown 那樣制作響應式 UI

Styleguide

http://hugeinc.github.io/styleguide/index.html

方便維護自己內部樣式指南的工具

HHVM 3.8.0

http://hhvm.com/blog/9803/hhvm-3-8-0

WordPress 性能提升了 9.7%

WebVR

http://mozvr.github.io/webvr-spec/webvr.html

Web 虛擬現實規范

Incremental DOM

https://medium.com/google-developers/introducing-incremental-dom-e98f79ce2c5f

通過增量修改 DOM 內容來提升性能，功能類似 Virtual DOM，主要用于前端模板

PostCSS

https://github.com/postcss/postcss

功能強大的 CSS 預處理工具，有很多插件

XHP-JS

https://github.com/hhvm/xhp-js

Hack 中方便調用 JavaScript 的庫，不過不是很看好

VexFlow - Music Engraving in JavaScript and HTML5

http://www.vexflow.com/

一個基于JavaScript的樂譜渲染引擎：寫代碼就可以渲染出漂亮的樂譜，就像用LaTeX渲染公式一樣一樣的，非常優雅.

WICG: 從頭開始設計新一代Web

http://siusin.github.io/translation/WICG/blog/index.html

WICG的目標有： - 盡可能簡單地讓開發者提出Web平臺新特性，實現《可擴展Web宣言》的精神； - 提供開發者和實現者的Web平臺新特性交流空間； - 培育新的想法，給沒有參與過標準貢獻（當然，也包括那些貢獻過的!:D）的開發者提供技術指導、必要支持和周到的環境；并且最終把這些想法轉化到W3C工 作組里進入正式到標準化流程（也就是說，成就一份“W3C正式推薦規范”）； - 把規范化Web平臺新特性的過程變得更現代化（耶！擺脫郵件列表了...除非你真的想用郵件交流）； - 提供一套法律保障架構，讓所有的貢獻變得免費和開放。 簡而言之，我們希望成為一個立志規范化Web的支持性組織。我們希望能提供你所須的一切幫助，來把你的想法或提案引領到下一階段。

2015年度開源項目新秀和榮譽榜公布

http://www.freebuf.com/news/72466.html

有很多值得一看的優秀項目

前端MVVM框架Knot.js

http://www.knotjs.com/

又一個輪子，精神可嘉。knotjs和AngularJS等解決的是一樣的問題，不過Knot.js有一些非常有用的創新，使之在AngularJS這樣的對手面前依舊有不錯的吸引力。

faker.js

https://github.com/Marak/faker.js

generate massive amounts of fake data in the browser and node.js

H5交互頁編輯器AEditor發布

http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/

AEditor是一個方便廣大web開發者進行H5動畫交互頁開發的工具，開發者可以在AEditor上對交互動畫以進行編輯，最終導出頁面項目。與面向 大眾的H5交互頁編輯平臺（如玉兔，易企秀等）不同的是，AEditor面向開發者，在提供預設動畫模式的同時，支持對動畫進行幀的編輯，事件通知模型， 以及可二次開發的特性，從而讓開發者能更靈活地實現各種自定義的動畫交互需求。更多類似工具： http://next.36kr.com/posts/collections/61

Writing iOS & Android Apps in Go

https://sourcedna.com/blog/20150712/golang-on-ios.html

竟然還有這么玩的。

數據庫內核月報 － 2015 / 07

http://mysql.taobao.org/monthly/2015/07/

Two.js

https://jonobr1.github.io/two.js/

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

產品及其它

你在公司項目里面看到過哪些操蛋的代碼

http://www.zhihu.com/question/30776912

一起看看神代碼吧。

程序員禪的10條法則

http://mp.weixin.qq.com/s?__biz=MzA3NTIzMzIxNQ==&mid=207997621&idx=1&sn=d70709daabe747be876d8354ce86d042

專注、初學者心態、無我…這本書挺值得期待的。

愛動手的極客，你可能需要這么一個「隨身攜帶」機床

組建初創團隊最常見、最致命的10個大坑

http://mp.weixin.qq.com/s?__biz=MjM5OTAzMjc4MA==&mid=209786824&idx=1&sn=5acfc3fe9b6ff3a001921f1d6d32c2e4

對打造非技術團隊也很有借鑒意義。