FEX 技術周刊 - 2015/11/30 · FEX 技術周刊

## 深閱讀 **視頻編碼原理簡介** [http://www.skywind.me/blog/archives/1566](http://www.skywind.me/blog/archives/1566) 通過親手實現一個編碼器的方式來學習，這種方式挺好的。 **GIT SOURCE CODE REVIEW: DIFF ALGORITHMS** [http://fabiensanglard.net/git_code_review/diff.php](http://fabiensanglard.net/git_code_review/diff.php) 介紹 Git 中的 Diff 算法是如何實現的。 **對抗拖庫 —— Web 前端慢加密** [http://www.cnblogs.com/index-html/archive/2015/11/27/4999897.html](http://www.cnblogs.com/index-html/archive/2015/11/27/4999897.html) 通過前后端結合的方式來降低拖庫后密碼被盜的風險。 **Netflix 的開源文化與技術** [http://www.infoq.com/cn/news/2015/11/Netflix-io-projects-intro](http://www.infoq.com/cn/news/2015/11/Netflix-io-projects-intro) 本文整理了 Netflix 使用到和貢獻的開源技術。 **Khan Academy React Components** [http://khan.github.io/react-components/](http://khan.github.io/react-components/) 可汗學院的 React 組件，貢獻者中有 jeresig 哦。 **COMBINING STATIC AND RUNTIME TYPE CHECKING FOR BETTER DEV PRODUCTIVITY** [http://victorsavkin.com/post/133604031766/combining-static-and-runtime-type-checking-for](http://victorsavkin.com/post/133604031766/combining-static-and-runtime-type-checking-for) 使用 TypeScript 的靜態和運行時類型檢查來提升研發效率。 **How a Small Team of 13 Engineers Successfully Builds a Product on 8 Different Platforms** [http://www.theeffectiveengineer.com/blog/how-to-successfully-build-great-products-with-small-teams](http://www.theeffectiveengineer.com/blog/how-to-successfully-build-great-products-with-small-teams) Quip 內部是如何高效開發的。 **GraphQL is the King. Long Live the King! (R.I.P. REST)** [https://medium.com/@scbarrus/graphql-is-the-king-long-live-the-king-r-i-p-rest-cf04ce38f6c](https://medium.com/@scbarrus/graphql-is-the-king-long-live-the-king-r-i-p-rest-cf04ce38f6c) GraphQL 安利。 Basically, GraphQL is the future of the internet. For the next few years anyway. REST was great, served a lot of good purposes, and will likely remain how we structure our services even with a GraphQL layer for our own sanities sake. But, IMHO GraphQL is the future. **Instant Run 淺析** [http://jiajixin.cn/2015/11/25/instant-run/](http://jiajixin.cn/2015/11/25/instant-run/) Android Studio 2 中 Instant Run 的實現原理分析。 **Concurrently JavaScript** [http://blog.getify.com/concurrently-javascript-1/](http://blog.getify.com/concurrently-javascript-1/) What is concurrency? How is it different from parallelism? JavaScript is single-threaded on the event loop, so how does its asynchrony fit into the mix? **[譯]化解使用 Promise 時的競態條件** [http://efe.baidu.com/blog/defusing-race-conditions-when-using-promises/](http://efe.baidu.com/blog/defusing-race-conditions-when-using-promises/) 網絡時代，創建現代軟件時其中一個很大的限制是所需要的數據往往在遠程服務器上。應用程序在等待網絡請求時簡單地鎖死是不現實（甚至不可能）的。相反，我們必須讓應用程序在等待時保持響應。為此，我們需要寫出并發的代碼。當應用的某一部分正在等待網絡請求的響應時，其他部分必須繼續運行。 Promise 對于編寫非阻塞型的代碼是很不錯的工具。然而，使用 promise 并不能保證代碼是正確的。 **RePractise 前端篇: 前端演進史** [https://github.com/phodal/repractise/blob/gh-pages/chapters/frontend.md](https://github.com/phodal/repractise/blob/gh-pages/chapters/frontend.md) 細細整理了過去接觸過的那些前端技術，發現前端演進是段特別有意思的歷史。人們總是在過去就做出未來需要的框架，而現在流行的是過去的過去發明過的。如果六、七年前的移動網絡速度和今天一樣快，那么直接上的技術就是響應式設計，APP、SPA就不會流行得這么快。盡管我們可以預見未來這些領域會變得更好，但是更需要的是改變現狀。改變現狀的同時也需要預見未來的需求。 **前端的變革** [https://github.com/amfe/article/issues/28](https://github.com/amfe/article/issues/28) winter 結合雙 11 技術對前端幾個重要話題：發布、分離與同構、全端 & 全棧、性能、工具的思考。另附：手淘營銷支持之路[https://github.com/amfe/article/blob/master/%E8%90%A5%E9%94%80%E6%94%AF%E6%92%91%E4%B9%8B%E8%B7%AF.md](https://github.com/amfe/article/blob/master/%E8%90%A5%E9%94%80%E6%94%AF%E6%92%91%E4%B9%8B%E8%B7%AF.md)?可以學習下運營活動如何更好地支持。歡迎關注雙 11 相關的系列文章?[https://github.com/amfe/article/issues](https://github.com/amfe/article/issues) **The Architecture of Open Source Applications: Nginx** [http://www.aosabook.org/en/nginx.html](http://www.aosabook.org/en/nginx.html) 其實重點是向大家推薦這個網站 The Architecture of Open Source Applications 有很多開源軟件的解讀，非常好的學習資料。 **How do Promises Work?** [http://robotlolita.me/2015/11/15/how-do-promises-work.html](http://robotlolita.me/2015/11/15/how-do-promises-work.html) In this blog post we’ll look at what promises are, how they work, and why you should or shouldn’t use them. **Docker 之架構原理詳細** [http://mp.weixin.qq.com/s?__biz=MjM5NTg2NTU0Ng==&mid=402660530&idx=3&sn=4ad2c1dd5631618efd6a625765fb0f3f](http://mp.weixin.qq.com/s?__biz=MjM5NTg2NTU0Ng==&mid=402660530&idx=3&sn=4ad2c1dd5631618efd6a625765fb0f3f) 本文從Docker 1.2 的源碼入手，分析抽象出 Docker 的架構圖，并對該架構圖中的各個模塊進行功能與實現的分析，最后通過兩個docker命令展示了Docker內部的運行。 **Top JavaScript Frameworks, Libraries and Tools and When to Use Them** [http://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/](http://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/) This article is part of a web development series from Microsoft. It seems like almost every other week there is a new JavaScript library taking the web community by storm! The web community is increasingly vibrant, diverse and is moving rapidly on multiple fronts. It would be an impossible feat to survey every major JavaScript framework and library. Instead,I will share some of the most famous and influential ones for front-end development. **Anatomy of a large Angular application** [https://medium.com/@bojzi/anatomy-of-a-large-angular-application-f098e5e36994](https://medium.com/@bojzi/anatomy-of-a-large-angular-application-f098e5e36994) How to design the architecture of an Angular application and not go insane in the process **Webpack傻瓜式指南** [http://zhuanlan.zhihu.com/FrontendMagazine/20367175](http://zhuanlan.zhihu.com/FrontendMagazine/20367175) Webpack最近很熱，我一開始是想翻譯一篇國外關于webpack的佳作，但是找來找去也沒有一篇讓我感覺到很滿意的，好多都是一步到位，滿屏幕都是React＋Webpack，官方文檔寫的不太好，好多點都沒有解釋的詳細，所以我參考了幾篇文章，寫一篇傻瓜式指南。另附一本免費書： SurviveJS - Webpack and React From apprentice to master?[http://survivejs.com/](http://survivejs.com/) **[譯]別再丟用戶與應用程序的狀態了，趕緊用 Page Visibility 吧** [http://www.w3ctech.com/topic/1588](http://www.w3ctech.com/topic/1588) [https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/](https://www.igvita.com/2015/11/20/dont-lose-user-and-app-state-use-page-visibility/) 為了提供可靠流暢的用戶體驗，無論是在 PC 端還是移動端，應用程序必須使用 Page Visibility API，根據 visibilityChange 狀態的變化保存或恢復當前會話。這是應用程序唯一可以依賴的事件。 ## 新鮮貨 **新 WordPress.com** [https://developer.wordpress.com/2015/11/23/the-story-behind-the-new-wordpress-com/](https://developer.wordpress.com/2015/11/23/the-story-behind-the-new-wordpress-com/) [https://quickleft.com/blog/six-things-know-wordpress-moving-javascript/](https://quickleft.com/blog/six-things-know-wordpress-moving-javascript/) 新的 WordPress.com 采用了 Node 進行開發，放棄了之前的 PHP，通過無刷新的方式明顯提升了性能，還基于 Electron 開發了桌面版本。請注意是 .com 不是 Wordpress 本身，見：WordPress is still PHP and MySQL?[https://janit.wordpress.com/2015/11/24/wordpress-is-still-php-and-mysql/](https://janit.wordpress.com/2015/11/24/wordpress-is-still-php-and-mysql/) **Betwixt** [https://github.com/kdzwinel/betwixt](https://github.com/kdzwinel/betwixt) 一個基于 DevTools 開發的 HTTP 請求分析工具，類似 Fiddler。 **mojs** [http://mojs.io/](http://mojs.io/) 一個動畫庫，demo 做得挺有意思的。 **Enterprise-grade GitHub: How Azure scaled to 2,000+ employees on GitHub** [https://azure.microsoft.com/en-us/blog/enterprise-scale-github-at-azure/](https://azure.microsoft.com/en-us/blog/enterprise-scale-github-at-azure/) Azure 開源的用于管理企業 GitHub 帳號的平臺，基于 Node 開發。 **在Google看來，所有的 App 以后都會變成瀏覽器** [http://www.geekpark.net/topics/214010](http://www.geekpark.net/topics/214010) [http://insidesearch.blogspot.de/2015/11/new-ways-to-find-and-stream-app-content.html](http://insidesearch.blogspot.de/2015/11/new-ways-to-find-and-stream-app-content.html) [http://recode.net/2015/11/24/google-and-the-future-of-apps/](http://recode.net/2015/11/24/google-and-the-future-of-apps/) Google 在上周推出了新功能 Google App Streaming，對于這個功能，Google 覺得自己可以憑此開啟一個「網頁版 App」的時代。有了 App Streaming，Google 可以在一個 App 中有效地呈現你在尋找的內容，而且不會讓你去下載它們。你不必擔心是否需要去在上面消耗時間和流量去下載那些只會使用一次的 App。如果 Google 的說的話靠譜，那你會在 App 中得到像在瀏覽器的網頁上一樣的上網體驗。 **What are the best JavaScript IDEs?** [http://www.slant.co/topics/1686/~javascript-ides](http://www.slant.co/topics/1686/~javascript-ides) 竟然有這么多 IDE 長見識了，想說的是：Webstorm 你值得擁有。 **React is killing Angular** [http://en.arguman.org/react-is-killing-angular](http://en.arguman.org/react-is-killing-angular) 很直觀地論證，arguman 的這種展示方式挺新穎的。 **Nova.js - Web Component is Production Ready** [http://novajs.com/](http://novajs.com/) [http://www.w3ctech.com/topic/1587](http://www.w3ctech.com/topic/1587) Web Component 是 Web 開發的未來。Polymer、X-Tag 等 Web Component 框架也越來越火，但由于其瀏覽器支持度不高，我們仍缺少將 Web Component 應用到項目中的機會。 Nova.js 可以幫助我們在項目中使用 Web 組件化的方式進行開發，同時，支持移動端所有主流瀏覽器及 PC 端 IE9+ 及其它主流瀏覽器。 **Go 將統治下一個十年** [http://toutiao.com/i6215838209532756482/](http://toutiao.com/i6215838209532756482/) 文章相當高調：Ruby 顯然已經完了。Javascript 是誤導的、python 踩上了數據科學家的高蹺。JVM 西斯君主握住你的脖子，.NET 最近開源企圖想留在開源相關面。Go 在未來，Go 是你的未來，你還有得選擇。 **Google Launches Android Studio 2.0** [http://techcrunch.com/2015/11/23/android-studio-2-0-with-improved-android-emulator-and-instant-run/](http://techcrunch.com/2015/11/23/android-studio-2-0-with-improved-android-emulator-and-instant-run/) With this update, Google massively accelerated deployment speeds, for example. Cuthbertson tells me that a full build is now 2x to 2.5x faster than in previous releases. Google is introducing new emulators that, given modern hardware, should run faster than any physical device. **hacker-scripts** [https://github.com/NARKOZ/hacker-scripts](https://github.com/NARKOZ/hacker-scripts) [http://36kr.com/p/5040040.html](http://36kr.com/p/5040040.html) 俄羅斯程序員實現自動化，寫了一堆腳本，會給老婆發加班短信、會在宿醉不醒時給自己請假、會自動根據郵件恢復客戶的數據庫、還可以一鍵遠程煮咖啡。還原這一故事的GitHub項目已經成了這幾天最為火熱的項目之一，真是程序員們的楷模啊……兩天不到 7000+ star 的項目，相當吊。 **Node - A pithy and powerful web framework** [http://toajs.com/](http://toajs.com/) Toa 與 Koa 學習成本和編程體驗是一致的，兩者之間幾乎是無縫切換；基于 Thunks，由 Thunks 組合業務邏輯，用同步邏輯編寫非阻塞的異步程序和異常處理模塊化；弱化中間件，強化模塊化組件，使得編寫大型應用的結構邏輯更清晰，也更安全。 **Raspberry Pi Zero: the $5 computer** [https://www.raspberrypi.org/blog/raspberry-pi-zero/](https://www.raspberrypi.org/blog/raspberry-pi-zero/) [http://vdisk.weibo.com/s/Fa3bdHsxQD-z8](http://vdisk.weibo.com/s/Fa3bdHsxQD-z8) 新版樹莓派 Raspberry Pi 發布了，1G CPU、512MB內存、micro-SD、mini-HDMI、Micro-USB接口，只要5美元！ **A remake of the Windows pipes screensaver using Three.js** [http://isaiahodhner.ml/pipes/](http://isaiahodhner.ml/pipes/) 表示看花眼了... **H5PSD** [http://jhtmls.com/h5psd/](http://jhtmls.com/h5psd/) 將 PSD 拖拽到頁面上，即可生成 H5 頁面，打包下載，省去了切圖的過程。 **新瀏覽器插件在長城上打洞** [http://www.solidot.org/story?sid=46256](http://www.solidot.org/story?sid=46256) 今年 10 月，麻省大學安默斯特分校的研究人員提出了一種不需要代理服務器的翻墻方法和新的翻墻系統 CacheBrowser，繞過 DNS 干擾直接從 CDN 供應商的內容托管服務器之一上獲取被屏蔽的內容。 **HTML input type=file文件選擇表單元素二三事** [http://www.zhangxinxu.com/wordpress/2015/11/html-input-type-file/](http://www.zhangxinxu.com/wordpress/2015/11/html-input-type-file/) **騰訊游戲DBA利刃 - SQL審核工具介紹** [http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=400575740&idx=1&sn=6d0f0d8ee57479ddbd33cf5836f81304](http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=400575740&idx=1&sn=6d0f0d8ee57479ddbd33cf5836f81304) SQL審核工具（TMySQLParse）用于對 MySQL的SQL 語句進行語法解析，判定語法正確性，并根據自定義的高危特性檢測SQL是否存在高危情況。通過將 TMySQLParse 集成到 GCS 平臺中，可以降低人工審單的難度及減少其工作量，從而實現審單的自動化。 ## 產品及其它 **On building product at Medium** [https://medium.com/@polastre/on-building-product-at-medium-be54fc0be4b9#.1jic44r37](https://medium.com/@polastre/on-building-product-at-medium-be54fc0be4b9#.1jic44r37) Medium 的產品是如何設計出來的。 **How Does In-Flight Wi-Fi Really Work?** [http://thepointsguy.com/2015/11/how-in-flight-wi-fi-works/](http://thepointsguy.com/2015/11/how-in-flight-wi-fi-works/) 想知道飛機上如何支持 WiFi 么？ **Facebook 的 CTO，他們的辦公室，和一流的創業文化** [http://36kr.com/p/5040023.html](http://36kr.com/p/5040023.html) 介紹 Facebook 內部是如何開發的。 **Preflight - A case study in mobile app design** [https://medium.com/@calreaves/preflight-dfbff53a1cdc#.v56hx4tfd](https://medium.com/@calreaves/preflight-dfbff53a1cdc#.v56hx4tfd) 一個移動應用設計的案例。 **微信支付怎么打敗支付寶?** [http://mp.weixin.qq.com/s?__biz=MjM5ODIyMTE0MA==&mid=401091537&idx=1&sn=ba070cd254c962e543e34b0cafc95cac](http://mp.weixin.qq.com/s?__biz=MjM5ODIyMTE0MA==&mid=401091537&idx=1&sn=ba070cd254c962e543e34b0cafc95cac) Fenng 關于兩大支付巨頭的分析。 **揭開 Facebook Growth Hacking 的神秘面紗，微信、人人為何都在效仿？** [http://www.huxiu.com/article/132639/1.html](http://www.huxiu.com/article/132639/1.html) 介紹 Facebook 種的 A/B 測試方法。