FEX 技術周刊 - 2016/05/30 · FEX 技術周刊

## 深閱讀 **Awaiting the future of JavaScript in V8** [https://blogs.igalia.com/compilers/2016/05/23/awaiting-the-future-of-javascript-in-v8/](https://blogs.igalia.com/compilers/2016/05/23/awaiting-the-future-of-javascript-in-v8/) On the evening of Monday, May 16th, 2016, we have made history. We’ve landed the initial implementation of “Async Functions” in V8, the JavaScript runtime in use by the Google Chrome and Node.js. We do these things not because they are easy, but because they are hard. Because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one we are willing to accept. It is very exciting to see this, roughly 2 months of implementation, codereview and standards finangling/discussion to land. It is truly an honour. **Introducing Hot Reloading** [http://facebook.github.io/react-native/blog/](http://facebook.github.io/react-native/blog/) [http://www.jianshu.com/p/1fa6e9c0799f#rd](http://www.jianshu.com/p/1fa6e9c0799f#rd) The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don’t lose any of your state which is especially useful if you are tweaking the UI. **[譯]如何成為一名黑客** [http://www.kerneltravel.net/jiqiao/hacker.html](http://www.kerneltravel.net/jiqiao/hacker.html) [http://www.catb.org/esr/faqs/hacker-howto.html](http://www.catb.org/esr/faqs/hacker-howto.html) 有人翻譯了 Eric Steven Raymond 的這篇經典之作。The world is full of fascinating problems waiting to be solved. No problem should ever have to be solved twice. 每次看到這些都會熱血澎湃。BTW : 最近國內翻譯優質英文資源的速度、質量、數量都在快速進步，讓我想到中國佛教經歷過的譯經時代，期待前端開發中的“禪宗”降臨。感覺眾成翻譯有扮演類似鳩摩羅什、玄奘組織的譯經團這個角色的潛質。 **RailsConf 2016 - 我們如何為三萬人的公司橫向伸縮 GitLab** [https://ruby-china.org/topics/30146](https://ruby-china.org/topics/30146) 介紹支付寶如何改造 Gitlab，作為整個阿里巴巴集團的代碼管理后臺。 **Going deeper with Project Infinite** [https://blogs.dropbox.com/tech/2016/05/going-deeper-with-project-infinite/](https://blogs.dropbox.com/tech/2016/05/going-deeper-with-project-infinite/) Dropbox 客戶端基于底層文件協議，可以避免完整同步文件，從而實現「無限空間」功能，本文介紹了它的實現細節 **Going native with React Native** [http://blog.cloudoki.com/going-native/](http://blog.cloudoki.com/going-native/) 使用 React Native 的體會 **Things that Excite Me about Angular 2** [http://teropa.info/blog/2016/05/19/things-that-excite-me-about-angular-2.html](http://teropa.info/blog/2016/05/19/things-that-excite-me-about-angular-2.html) In the past six months or so I’ve spent a good amount of time playing with Angular 2\. I’ve built some fun projects and given talks about them. I’ve written some documentation and had lots of discussions with other people who are doing that. And I’ve written a couple of articles too. I thought this might be a good time to sum up what I find exciting about this platform right now. **The Complete-Ish Guide to Upgrading to Gulp 4** [https://www.joezimjs.com/javascript/complete-guide-upgrading-gulp-4/](https://www.joezimjs.com/javascript/complete-guide-upgrading-gulp-4/) Gulp 4 has been in the works for far too long, but it’s practically inevitable that it’ll be released… some day. I’m here to help you out for when that fateful day arrives by showing you the differences between Gulp 3.x and Gulp 4 and how you can make the migration to the new version relatively painless. **Implementing a Stepping Debugger in JavaScript** [http://jlongster.com/Implementing-Stepping-Debugger-JavaScript](http://jlongster.com/Implementing-Stepping-Debugger-JavaScript) 譯[https://www.h5jun.com/post/implementing-a-stepping-debugger-in-javascript.html](https://www.h5jun.com/post/implementing-a-stepping-debugger-in-javascript.html) 用 JS 實現對 JS 的單步運行 **Stylelint: The Style Sheet Linter We’ve Always Wanted** [https://www.smashingmagazine.com/2016/05/stylelint-the-style-sheet-linter-weve-always-wanted/](https://www.smashingmagazine.com/2016/05/stylelint-the-style-sheet-linter-weve-always-wanted/) Everyone wants a clean, consistent code base, no matter the language. Developers are accustomed to setting up linters in programming languages such as JavaScript and Python, but they rarely use a linter for style sheets. In this article, we’ll look at stylelint, a linter for style sheets. **HEAD - A collection of HTML head elements** [https://github.com/joshbuchea/HEAD](https://github.com/joshbuchea/HEAD) 詳細的介紹了 HEAD 中的元素。 **Living SC5 Styleguide, the next level** [http://varya.me/en/posts/sc5-style-guide-next-level/](http://varya.me/en/posts/sc5-style-guide-next-level/) 介紹了 SC5 Style Guide Generator[http://styleguide.sc5.io/](http://styleguide.sc5.io/)?在項目中的使用 **通過源碼解析 Node.js 中一個文件被 require 后所發生的故事** [https://fe.ele.me/tong-guo-yuan-ma-jie-xi-node-js-zhong-yi-ge-wen-jian-bei-require-hou-suo-fa-sheng-de-gu-shi/](https://fe.ele.me/tong-guo-yuan-ma-jie-xi-node-js-zhong-yi-ge-wen-jian-bei-require-hou-suo-fa-sheng-de-gu-shi/) 如題 **從微信WeUI設計規范解讀移動界面設計** [http://www.jianshu.com/p/1c3e1fae519c](http://www.jianshu.com/p/1c3e1fae519c) 挺不錯的總結 **最全前端資源匯集** [http://www.jianshu.com/p/c3dae0951f74](http://www.jianshu.com/p/c3dae0951f74) 整理了很多資源 **一條數據狗的上海房價研究** [https://yq.aliyun.com/articles/38618](https://yq.aliyun.com/articles/38618) 數據分析及可視化的例子 **Android官方MVP架構解讀** [http://mp.weixin.qq.com/s?__biz=MzAwNjQwNzU2NQ==&mid=2650342666&idx=1&sn=812cf8dccd1e25feb9f3e0af476f0dcf](http://mp.weixin.qq.com/s?__biz=MzAwNjQwNzU2NQ==&mid=2650342666&idx=1&sn=812cf8dccd1e25feb9f3e0af476f0dcf) MVP (Model View Presenter)架構是從MVC(Model View Controller)架構演變而來的，它將UI界面和數據進行隔離，所以我們的應用也就分為三個層次： - View: 在View層中只負責對數據的展示，提供友好的界面與用戶進行交互 - Model: 區別于MVC架構中的Model，在這里不僅僅只是數據模型。在MVP架構中Model它負責對數據的存取操作，例如對數據庫的讀寫，網絡的數據的請求等。 - Presenter: 對于Presenter層他是連接View層與Model層的橋梁并對業務邏輯進行處理 **淺析EventBus 3.0實現思想** [https://github.com/greenrobot/EventBus](https://github.com/greenrobot/EventBus) [http://alighters.com/blog/2016/05/22/eventbus3-dot-0-analyze/](http://alighters.com/blog/2016/05/22/eventbus3-dot-0-analyze/) EventBus is a publish/subscribe event bus optimized for Android. Google 的 guava 中也有一個?[eventbus](https://github.com/google/guava/wiki/EventBusExplained)，可以一起學習下 Java 開發中如何解決組件通信問題。 **你所不知道的 EMC 開源的那些事** [http://emccode.com/](http://emccode.com/) [https://linux.cn/article-7384-1.html](https://linux.cn/article-7384-1.html) EMC 是一家全球頂尖的存儲產品供應商，它開源的這些東西值得對存儲和云計算技術有興趣的同學研究。 **技改之路：從單塊應用到微服務，我的血淚總結** [http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659597250&idx=1&sn=a5c36d68f96271b10589cf049a8d7f3b](http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659597250&idx=1&sn=a5c36d68f96271b10589cf049a8d7f3b) 詳盡的介紹了一個國內領先的B2B機票分銷平臺的技改之路，值得學習。 **為何大量網站不能抓取?爬蟲突破封禁的6種常見方法** [http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653547274&idx=1&sn=52e5037b163146c1656eedce2da1ecd8](http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653547274&idx=1&sn=52e5037b163146c1656eedce2da1ecd8) 在采集網站的時會遇到一些比數據顯示在瀏覽器上卻抓取不出來更令人沮喪的事情。也許是向服務器提交自認為已經處理得很好的表單卻被拒絕，也許是自己的 IP 地址不知道什么原因直接被網站封殺，無法繼續訪問。這篇文章將會介紹一些網絡采集的黑魔法（HTTP headers、CSS 和 HTML 表單等），以克服網站阻止自動采集。在有類似場景時可以參考。 **那些年搞不懂的高深術語——依賴倒置?控制反轉?依賴注入?面向接口編程** [http://www.cnblogs.com/aoyeyuyan/archive/2016/05/22/5495219.html](http://www.cnblogs.com/aoyeyuyan/archive/2016/05/22/5495219.html) 文藝范的一篇科普文，這幾個耳熟能詳的術語還是得搞明白的。 **無他，但手熟爾** [http://icodeit.org/2016/05/practise-in-programming/](http://icodeit.org/2016/05/practise-in-programming/) 對高效的思考，從搜索、肌肉記憶兩個維度展開討論。文章末尾提到的 Kata 挺值得學習的，每個Kata都包含一個簡單的編程問題，可以當做編程練習 ## 新鮮貨 **ECMAScript 6 Proper Tail Calls in WebKit** [https://webkit.org/blog/6240/ecmascript-6-proper-tail-calls-in-webkit/](https://webkit.org/blog/6240/ecmascript-6-proper-tail-calls-in-webkit/) Proper Tail Calls (PTC) is a new feature in the ECMAScript 6 language. This feature was added to facilitate recursive programming patterns, both for direct and indirect recursion. **Fetch (or the undeniable limitations of XHR)** [https://blogs.windows.com/msedgedev/2016/05/24/fetch-and-xhr-limitations/](https://blogs.windows.com/msedgedev/2016/05/24/fetch-and-xhr-limitations/) Edge 也開始支持 Fetch APIs 了，另附一個 IE 支持?[Real-Time Communications with Microsoft Edge](https://www.sitepoint.com/real-time-communications-with-microsoft-edge/)?的文章。 **[譯]CSS2.1規范中文版** [http://www.ayqy.net/blog/css2-1%E8%A7%84%E8%8C%83%E4%B8%AD%E6%96%87%E7%89%88/](http://www.ayqy.net/blog/css2-1%E8%A7%84%E8%8C%83%E4%B8%AD%E6%96%87%E7%89%88/) 贊這個浩大的工程。 **Six nifty ES6 tricks** [http://www.2ality.com/2016/05/six-nifty-es6-tricks.html](http://www.2ality.com/2016/05/six-nifty-es6-tricks.html) 譯文[https://www.h5jun.com/post/six-nifty-es6-tricks.html](https://www.h5jun.com/post/six-nifty-es6-tricks.html) In this blog post, I show six tricks enabled by new ES6 features. At the end of each section, I point to related material in my book “Exploring ES6” (which is free to read online). **v8_inspector Support Being Added to Node** [https://github.com/nodejs/node/pull/6792](https://github.com/nodejs/node/pull/6792) This PR brings in v8_inspector support to Node.js (currently behind a compile time flag.) This means Node.js can now be debugged and profiled via the Chrome Debugging Protocol, which enables inspection via Chrome DevTools and other tools & IDEs. **Introducing QuorraJS** [https://quorrajs.org/](https://quorrajs.org/) [https://medium.com/@quorrajs/we-are-just-getting-started-f6593e4ae06b#.tk161tx4n](https://medium.com/@quorrajs/we-are-just-getting-started-f6593e4ae06b#.tk161tx4n) Quorra is a full fledged Node.js MVC framework inspired by Laravel. 在 ThinkPHP 被 ThinkJS 借鑒后，PHP 最火的框架 Laravel 也迎來了追隨者。 **Deco IDE** [https://github.com/decosoftware/deco-ide](https://github.com/decosoftware/deco-ide) 開源 React Native IDE，一個很大的優勢就是內嵌了 node 及框架，不用翻墻下載了。。。 **Heron** [https://github.com/twitter/heron](https://github.com/twitter/heron) Twitter 的實時分析引擎開源了，號稱吞吐量是 Storm 的 10 倍以上。同時開源的還有 DistributedLog (DL)[https://github.com/twitter/distributedlog](https://github.com/twitter/distributedlog)?a high-performance, replicated log service, offering durability, replication and strong consistency as essentials for building reliable distributed systems. **提高編程技能的有趣方法—游戲** [http://mp.weixin.qq.com/s?__biz=MzA3NDM1NjUwMQ==&mid=2650486681&idx=2&sn=2798dc99c2baa82e95a0af39be78eb75](http://mp.weixin.qq.com/s?__biz=MzA3NDM1NjUwMQ==&mid=2650486681&idx=2&sn=2798dc99c2baa82e95a0af39be78eb75) 如果你曾經從書上學習編寫代碼，你就知道那有多乏味。為什么不試試一些激動人心的方法來使學習更有樂趣呢？下面介紹的這些網站每個都有自己獨特的風格，但是它們都加入了游戲元素。這些稀奇古怪而有趣的游戲能夠使你找回學習的樂趣。 **BlueKit** [http://bluekit.blueberry.io/](http://bluekit.blueberry.io/) 實時預覽 React 組件效果 **vConsole** [https://github.com/WechatFE/vConsole](https://github.com/WechatFE/vConsole) 微信團隊出的移動頁面 console 工具，類似 firebug lite **Futurice React Native Starter Kit** [https://github.com/futurice/pepperoni-app-kit](https://github.com/futurice/pepperoni-app-kit) 方便使用 React Native 的應用模板 **Eruda** [https://github.com/liriliri/eruda](https://github.com/liriliri/eruda) Console for Mobile Browsers. Logging things out on mobile browser is never an easy stuff. I used to include window onerror alert script inside pages to find out JavaScript errors, kind of stupid and inefficient. Desktop browser DevTools is great, and I wish there is a similar one on mobile side, which leads to the creation of Eruda. **WebVR 規范** [https://mozvr.com/webvr-spec/](https://mozvr.com/webvr-spec/) Mozilla 主導的，在 Firefox 中率先支持 **Android群英傳** [http://www.duokan.com/book/109325](http://www.duokan.com/book/109325) 一本名字和簡介很吊的書：讓你笑傲Android江湖的實戰派武功秘籍！真正一線安卓開發者實作，無私分享獨到的思維與技巧！ **Real-Time Communications with Microsoft Edge** [https://www.sitepoint.com/real-time-communications-with-microsoft-edge/](https://www.sitepoint.com/real-time-communications-with-microsoft-edge/) Modern browsers are rapidly converging on a set of standardized APIs for plugin-free, interoperable real-time communications. This session will cover development of real-time communications applications for the web and mobile devices using Microsoft Edge as well as open source libraries to enable interoperability across platforms and mobile devices. **找回文本的力量，恰到好處的寫作體驗——MarkEditor** [http://markeditor.com/app/markeditor](http://markeditor.com/app/markeditor) [http://www.zouyuhui.com/post/chan-pin-yu-she-ji/zhao-hui-wen-ben-de-li-liang-qia-dao-hao-chu-de-xie-zuo-ti-yan-markeditor](http://www.zouyuhui.com/post/chan-pin-yu-she-ji/zhao-hui-wen-ben-de-li-liang-qia-dao-hao-chu-de-xie-zuo-ti-yan-markeditor) 與其說 MarkEditor 是一款編輯器，倒不如說它是一個文本處理、寫作等諸多工具的集合。潛伏著野獸般的強大功能，用該產品開發者「海波」的話來說就是：簡潔與強大，從不是矛盾的事物。 **lightgallery** [http://sachinchoolur.github.io/lightgallery-desktop/](http://sachinchoolur.github.io/lightgallery-desktop/) 一個基于 electron 和 node 的桌面圖片瀏覽工具 **Black Screen** [https://github.com/shockone/black-screen](https://github.com/shockone/black-screen) 基于 electron 寫的終端，自動完成功能很強大 **LoadingDrawable** [https://github.com/dinuscxj/LoadingDrawable](https://github.com/dinuscxj/LoadingDrawable) Some android loading drawable, can be combined with any View as the loading View and Progressbar, and is especially suitable for the loading animation of the RecyclerRefreshLayout. **CryEngine out on GitHub** [https://github.com/CRYTEK-CRYENGINE/CRYENGINE](https://github.com/CRYTEK-CRYENGINE/CRYENGINE) 著名游戲引擎 CryEngine 開源，對 Game 開發有興趣的可以學習。 **Moving Away from Python 2** [https://asmeurer.github.io/blog/posts/moving-away-from-python-2/](https://asmeurer.github.io/blog/posts/moving-away-from-python-2/) **Algorithm Visualizer** [https://github.com/parkjs814/AlgorithmVisualizer](https://github.com/parkjs814/AlgorithmVisualizer) 一些經典算法的可視化展示。 **Mock Node** [https://github.com/ianunay/mock-node](https://github.com/ianunay/mock-node) A configurable mock server with an intuitive configuration management interface and a http api. **Nix as OS X Package Manager** [http://ariya.ofilabs.com/2016/05/nix-as-os-x-package-manager.html](http://ariya.ofilabs.com/2016/05/nix-as-os-x-package-manager.html) [https://nixos.org/nix/](https://nixos.org/nix/) Nix is a powerful package manager for Linux and other Unix systems that makes package management reliable and reproducible. It provides atomic upgrades and rollbacks, side-by-side installation of multiple versions of a package, multi-user package management and easy setup of build environments. **Headless GL** [https://github.com/stackgl/headless-gl](https://github.com/stackgl/headless-gl) gl lets you create a WebGL context in node.js without making a window or loading a full browser environment. ## 產品及其它 **克制的力量-騰訊創始人Tony談產品人的信仰** [http://mp.weixin.qq.com/s?__biz=MzA3MzA4NjgxMg==&mid=2651831122&idx=1&sn=82b5f21cd8c8b8f668bf477ca5deedc0](http://mp.weixin.qq.com/s?__biz=MzA3MzA4NjgxMg==&mid=2651831122&idx=1&sn=82b5f21cd8c8b8f668bf477ca5deedc0) 克制背后是敬畏心，對自然的敬畏，對顧客感受的敬畏。自然就是用戶跟產品的接觸點是順其自然的，不是強行來的。致力于在自然接觸點上感動用戶，而不是勤快的各種搭售、各種拉，這是兩個不同的用力的方向。每個產品，均有自己的邊界，一個產品應對一個核心訴求，解決一個核心問題。團隊智慧的凝聚，不是來自于VP、總裁、CEO的贊美，甚至不是來自于獎金激勵，而是產品本身讓生活變得美好所帶來的愉快和興奮。能拿得起，放得下，憑著自己的克制、智慧、功力，用好產品去讓這個世界變得優雅。 **當悲劇或失望來襲，要知道你們能扛過任何事** [https://www.h5jun.com/post/when-tragedy-or-disappointment-strike-know-that-you-have-the-ability-to-get-through-absolutely-anything.html](https://www.h5jun.com/post/when-tragedy-or-disappointment-strike-know-that-you-have-the-ability-to-get-through-absolutely-anything.html) Facebook COO 謝麗爾·桑德伯格在加州伯克利大學 2016 年畢業典禮上的演講。建立起你們自己的韌性，當悲劇或失望來襲，要知道你們能扛過任何事。我保證你們有這個能力。常言道，我們比我們想象的更脆弱，但我們比我們想象的更堅強。 **來自老外的《道德經》之項目管理實踐** [https://opensource.com/open-organization/16/2/tao-project-management](https://opensource.com/open-organization/16/2/tao-project-management) 譯：[https://linux.cn/article-7385-1.html](https://linux.cn/article-7385-1.html) 《道德經》，被認為是由圣人老子于公元前六世紀時所編寫，是現存最為廣泛翻譯的經文之一。從宗教到關于約會的有趣電影等方方面面，它都深深地影響著它們，作者們借用它來做隱喻，以解釋各種各樣的事情（甚至是編程）。在思考有關開放性組織的項目管理時，我的腦海中便立馬浮現出上面的這段文字。文中還提到《開放性組織：點燃激情提升執行力》這本書，看起來蠻不錯的樣子。 **云舒，一個技術至上者的理想主義** [http://weibo.com/ttarticle/p/show?id=2309403978201981434927](http://weibo.com/ttarticle/p/show?id=2309403978201981434927) [http://weibo.com/ttarticle/p/show?id=2309403978592936662526](http://weibo.com/ttarticle/p/show?id=2309403978592936662526) 喜歡這句感言：“如果你站在岸上，對在田里插秧的人指手畫腳，說他們姿勢不對，沒有人會理你。但是當你親自挽起褲腿跳下水，腳上有泥、頭上有汗的時候，你說的話才有說服力、才有價值”。第二篇關于云舒的訪談也不錯，很坦誠直接，有很多亮點。 ** Electron 及 node-webkit 的維護者談維護開源項目的體驗** [https://www.zhihu.com/question/36292298/answer/102418523](https://www.zhihu.com/question/36292298/answer/102418523) 看看 node-webkit 是如何被 Intel 玩壞的 **挑戰-看完這段三分鐘的視頻** [http://www.miaopai.com/show/cWWu6pPYDqviuOQ2sMgZrw__.htm](http://www.miaopai.com/show/cWWu6pPYDqviuOQ2sMgZrw__.htm) 不要快進，不要暫停，不要打開別的頁面，不要東張西望。對很多人來說，這是很難的。分享給敢于挑戰的你！！！視頻中的關于時間和注意力的討論挺不錯的，希望人人都能珍惜“時間”這個不可再生資源，找回小時候那種專注，重新控制自己的人生。