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

## 業界會議 **[報名]D2前端技術論壇-2015** [http://d2forum.alibaba-inc.com/](http://d2forum.alibaba-inc.com/) D2前端技術論壇(Designer & Developer Frontend Technology Forum)，簡稱D2。為國內前端開發者和網站設計師提供一個交流的機會，一起分享技術的樂趣，探討行業的發展，以技術會友。它是中國所有前端開發者的節日，包括前端設計師，前端開發工程師，和所有對前端技術感興趣的人。經歷了近10年的發展，前端崗位從刀耕火種走到了今天的百花齊放，各領域全面發展，進入盛況時期。2015年第10屆D2的主題即為“融合”！ **2015 騰訊WE大會 - 11.08** [http://we.tencent.com/](http://we.tencent.com/) [http://tech.qq.com/zt2015/we2015/index.htm](http://tech.qq.com/zt2015/we2015/index.htm) WE大會關注協作創新,分享互聯網和科技界最前沿的思想和技術，展示未來的革新力量。WE大會邀請全球多位互聯網思想家、前沿創新項目團隊進行現場互動和分享。我們希望啟發人們去創造、創新、探索改變未來的一切可能性。可以圍觀一下高科技。 **[報名]2015重慶前端交流會** [http://2015.yufe.org/](http://2015.yufe.org/) 由重慶地區的土豪公司 @豬八戒網舉辦 **[報名]360與Facebook工程師暢聊大前端 - 交流會** [http://www.huodongxing.com/event/3307503611100](http://www.huodongxing.com/event/3307503611100) Facebook 的工程師及大前端的話題比較吸引人。 **UPYUN?架構與運維大會 - 11.28** [http://www.huodongxing.com/event/3303212982600](http://www.huodongxing.com/event/3303212982600) UPYUN 架構與運維大會 (Arch&Ops Conf) 是面向運維和架構從業人員者所舉辦的大型技術會議，致力于推動各項運維技術、產品架構等在互聯網和移動互聯網的研發和應用。 ## 深閱讀 **揭密 Google 秒開技術：如何讓網站瞬間加載完畢?** [http://www.leiphone.com/news/201511/0EQQdrIAhtw2MYGv.html](http://www.leiphone.com/news/201511/0EQQdrIAhtw2MYGv.html) 詳細介紹了 AMP **前端MVC變形記** [http://efe.baidu.com/blog/mvc-deformation/](http://efe.baidu.com/blog/mvc-deformation/) 介紹了 MVC 發展的歷史及 MV* 框架 **caoz談能力成長 - 取舍之道** [http://mp.weixin.qq.com/s?__biz=MzI0MjA1Mjg2Ng==&mid=400320941&idx=1&sn=b3883278d2d58b760e3dadbfef225a95](http://mp.weixin.qq.com/s?__biz=MzI0MjA1Mjg2Ng==&mid=400320941&idx=1&sn=b3883278d2d58b760e3dadbfef225a95) 取舍是永恒的話題，懂得取舍和選擇是成熟、自信的重要標志。這問文章對做技術和做產品都非常有參考意義，大家認真看看。 **Immutable 詳解及 React 中實踐** [https://github.com/camsong/blog/issues/3](https://github.com/camsong/blog/issues/3) Shared mutable state is the root of all evil（共享的可變狀態是萬惡之源）-- Pete Hunt. 有人說 Immutable 可以給 React 應用帶來數十倍的提升，也有人說 Immutable 的引入是近期 JavaScript 中偉大的發明，因為同期 React 太火，它的光芒被掩蓋了。這些至少說明 Immutable 是很有價值的，下面我們來一探究竟。 **移動端圖片格式調研** [http://blog.ibireme.com/2015/11/02/mobile_image_benchmark/](http://blog.ibireme.com/2015/11/02/mobile_image_benchmark/) 圖片通常是移動端流量耗費最多的部分，并且占據著重要的視覺空間。合理的圖片格式選用和優化可以為你節省帶寬、提升視覺效果。在這篇文章里我會分析一下目前主流和新興的幾種圖片格式的特點、性能分析、參數調優，以及相關開源庫的選擇。 **當我們談論 cluster 時我們在談論什么** [http://taobaofed.org/blog/2015/11/03/nodejs-cluster/](http://taobaofed.org/blog/2015/11/03/nodejs-cluster/) Node Cluster 科普文 **被誤解的 MVC 和被神化的 MVVM** [http://blog.devtang.com/blog/2015/11/02/mvc-and-mvvm/](http://blog.devtang.com/blog/2015/11/02/mvc-and-mvvm/) MVC，全稱是 Model View Controller，是模型 (model)－視圖 (view)－控制器 (controller) 的縮寫。表示的是一種常見的客戶端軟件開發框架。MVVM 最早于 2005 年被微軟的WPF和Silverlight的架構師John Gossman提出，并且應用在微軟的軟件開發中。 **Facebook’s code quality problem** [http://www.darkcoding.net/software/facebooks-code-quality-problem/](http://www.darkcoding.net/software/facebooks-code-quality-problem/) Facebook is very successful, manifestly has some great engineers, unlimited money, and yet seems to have big issues with software quality. I take two lessons from this: - Culture matters. The “Hack” and “Move fast and break things” culture must make it very hard for developers to focus on quality. - Quality matters. We all know that if you don’t focus on quality it will come back to bite you. **Why Static Website Generators Are The Next Big Thing** [http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/](http://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/) At StaticGen, our open-source directory of static website generators, we’ve kept track of more than a hundred generators for more than a year now, and we’ve seen both the volume and popularity of these projects take off incredibly on GitHub during that time, going from just 50 to more than 100 generators and a total of more than 100,000 stars for static website generator repositories. **jQuery’s Relevancy – There and Back Again** [http://developer.telerik.com/featured/jquerys-relevancy-there-and-back-again/](http://developer.telerik.com/featured/jquerys-relevancy-there-and-back-again/) In this article, I’m going to remind everyone what exactly jQuery is, because I believe that jQuery is as relevant today as it was when it was first written. The question relevancy should be tied to the original intent of the solution (i.e. the jQuery API itself) and not browser bugs or missing features. **TypeScript 和 JSX 搞基的事** [https://github.com/techird/blog/issues/3](https://github.com/techird/blog/issues/3) 對 JSX 的支持已經在 TypeScript 官方落地了！非常感謝 Ryan Cavanaugh 和 Fran?ois de Campredon 的大力推動。在這篇文章中，筆者打算跟大家探索一下如何把 JSX 和 TypeScript 的第一特性——靜態類型檢查完美結合使用。 **[譯]Service Worker 入門** [http://www.w3ctech.com/topic/866](http://www.w3ctech.com/topic/866) 一個 service worker 是一段運行在瀏覽器后臺進程里的腳本，它獨立于當前頁面，提供了那些不需要與web頁面交互的功能在網頁背后悄悄執行的能力。在將來，基于它可以實現消息推送，靜默更新以及地理圍欄等服務，但是目前它首先要具備的功能是攔截和處理網絡請求，包括可編程的響應緩存管理。 **Redux 中文文檔** [http://camsong.github.io/redux-in-chinese/](http://camsong.github.io/redux-in-chinese/) Redux 的文檔寫的蠻清晰的。 **東京大學：交互式計算機圖形學** [https://www.coursera.org/learn/interactive-computer-graphics](https://www.coursera.org/learn/interactive-computer-graphics) 計算機圖形是支撐可視化問題求解的強大工具。這門課將介紹計算機圖形研究領域的多種交互工具，以及它們的原理和算法。例子涵蓋圖形化用戶界面(GUI)的增強，2D繪畫及3D動畫的創作工具，和交互式計算機輔助設計(CAD)系統。 **七牛CEO許式偉：服務端開發那些事兒** [http://www.csdn.net/article/2015-11-06/2826139](http://www.csdn.net/article/2015-11-06/2826139) 服務器開發的基礎知識，主要談的是用 Go 實現。 **朱冠胤：百度大規模數據處理架構之“不平凡之路”** [http://www.csdn.net/article/2015-11-06/2826137](http://www.csdn.net/article/2015-11-06/2826137) 介紹了百度內部 Hadoop 平臺的發展及實現。 **Docker 工程師必讀論文：Google Borg** [http://mp.weixin.qq.com/s?__biz=MzA4MzQ1NjQ5Nw==&mid=400243103&idx=1&sn=c76e7acfbf73649190277a7cbe3b0191](http://mp.weixin.qq.com/s?__biz=MzA4MzQ1NjQ5Nw==&mid=400243103&idx=1&sn=c76e7acfbf73649190277a7cbe3b0191) Borg 是在傳說中流傳已久的 Google 內部集群管理系統，現在火熱的 Mesos 和 Kubnetes 都是源自于 Borg。 **谷歌第二代深度學習系統TensorFlow首次解密** [http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400301663&idx=1&sn=c83c92328c9c936b1fb39cece6e852f6](http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=400301663&idx=1&sn=c83c92328c9c936b1fb39cece6e852f6) Google資深系統專家Jeff Dean在最近的灣區機器學習大會做了 Large-Scale Deep Learning for Inelligent Computer Systems 的演講。在大會上，Jeff Dean 解密了谷歌未曾在論文上發表過的第二代深度學習系統TensorFlow。 **[譯]使用HTTP/2提升性能的7個建議** [http://www.w3ctech.com/topic/1563](http://www.w3ctech.com/topic/1563) 大約有三分之二的瀏覽器已經支持HTTP/2，而且這個比例每月都在增加。你需要決定是否遷移到HTTP/2，而其中關鍵是知道如何最大限度地利用它。這篇文章會帶你了解從性能角度考慮為什么要做這個決定，以及如何實現。接下來我們要逐一討論關于HTTP/2性能的7個小建議。 **阿里云破紀錄的背后：377秒是如何煉成的** [http://www.csdn.net/article/2015-11-05/2826124](http://www.csdn.net/article/2015-11-05/2826124) 10月28日，Sort Benchmark官方宣布，阿里云用377秒完成了100TB的數據排序，打破了此前Apache Spark創造的1406秒紀錄。在含金量最高的GraySort和MinuteSort兩個評測系統中，阿里云分別在通用和專用目的排序類別中創造了4項世界紀錄。 ## 新鮮貨 **百度前端代碼風格檢查套件 FECS** [http://efe.baidu.com/blog/fecs/](http://efe.baidu.com/blog/fecs/) fecs 是百度前端代碼規范的檢查工具。 **百度 iCafe** [http://cafe.baidu.com/](http://cafe.baidu.com/) 「iCafe」是百度推出的一款輕量級團隊協作工具，面向的人群較為廣泛，適用于開發者、設計師、創業團隊、測試團隊、開源團隊等。其功能特點包括：工作量估時、需求可進行無限拆分、數據實時展現、按人跟蹤進度等。目前已超過 5000 個團隊正在使用。 icafe 在百度已經經歷 N 次升級了，總算邁出了開放這一步，不過似乎和內部給工程師用的有差別。 **Flutter – Cross-platform mobile framework from Google** [http://flutter.io/](http://flutter.io/) [https://github.com/flutter/flutter](https://github.com/flutter/flutter) Flutter is a new way to build high-performance, cross-platform mobile apps. Flutter is optimized for today's, and tomorrow's, mobile devices. We are focused on low-latency input and high frame rates on Android and iOS. **Ant Design of Vue** [http://okoala.github.io/vue-antd/#!/components](http://okoala.github.io/vue-antd/#!/components) 這里是 Ant Design 的 Vue 實現，開發和服務于企業級后臺產品。不知道 AntD 的同學請移步：?[http://ant.design/](http://ant.design/) **A high-level browser automation library** [https://github.com/segmentio/nightmare](https://github.com/segmentio/nightmare) The goal is to expose just a few simple methods, and have an API that feels synchronous for each block of scripting, rather than deeply nested callbacks. It's designed for automating tasks across sites that don't have APIs. Under the covers it uses Electron, which is similar to PhantomJS but faster and more modern. **An update on Object.observe - Being Withdrawn As A TC39 Proposal** [https://mail.mozilla.org/pipermail/es-discuss/2015-November/044684.html](https://mail.mozilla.org/pipermail/es-discuss/2015-November/044684.html) After much discussion with the parties involved, I plan to withdraw the Object.observe proposal from TC39 (where it currently sits at stage 2 in the ES spec process), and hope to remove support from V8 by the end of the year (the feature is used on 0.0169% of Chrome pageviews, according to chromestatus.com). **React Cheat Sheet v0.14.1** [http://reactcheatsheet.com/](http://reactcheatsheet.com/) **IntelliJ IDEA 15** [https://www.jetbrains.com/idea/whatsnew/](https://www.jetbrains.com/idea/whatsnew/) IntelliJ IDEA 15 brings better user interface, more built-in tools and integrations, further improved coding assistance, and out-of-the-box support for Kotlin. **Nova.js - 一個小巧的Web Component框架** [http://novajs.com/](http://novajs.com/) 旨在幫助開發者方便快速地開發組件。作者起初希望在一個移動端項目中使用Polymer進行開發，但發現Polymer的代碼對于移動端小型項目過于龐大、且只支持到Android4.4。因此借鑒了Polymer的部分組件開發的思想，實現了Nova.js。 **GitLab 的安裝配置** [http://www.360doc.com/content/15/1104/14/22505981_510681759.shtml](http://www.360doc.com/content/15/1104/14/22505981_510681759.shtml) 想自己搭 GitLab 的可以參考。 **Git Town 支持高級別工作流開源 Git 插件** [https://github.com/Originate/git-town](https://github.com/Originate/git-town) [http://www.oschina.net/p/git-town](http://www.oschina.net/p/git-town) Git Town makes software development teams who use Git even more productive and happy. It adds additional Git commands that support GitHub Flow, Git Flow, the Nvie model, GitLab Flow, and other workflows more directly, and it allows you to perform many common Git operations faster and easier. **Stash is now called Bitbucket Server** [https://www.atlassian.com/software/bitbucket/server](https://www.atlassian.com/software/bitbucket/server) Bitbucket makes it easy for teams to build great software. Deliver at speed without sacrificing quality. **Scooter** [http://dropbox.github.io/scooter/](http://dropbox.github.io/scooter/) Dropbox 開源的 SCSS 樣式組件。 **Announcing Docker 1.9: Production-ready Swarm and Multi-host Networking** [http://blog.docker.com/2015/11/docker-1-9-production-ready-swarm-multi-host-networking/](http://blog.docker.com/2015/11/docker-1-9-production-ready-swarm-multi-host-networking/) 多主機網絡和 Swarm 集群系統已經達到生產水平了。 **React Toolbox** [http://react-toolbox.com/#/](http://react-toolbox.com/#/) Material Design 風格的 React 組件。 **微軟與Red Hat宣布合作** [http://blogs.microsoft.com/blog/2015/11/04/microsoft-and-red-hat-partner-to-deliver-more-flexibility-and-choice/](http://blogs.microsoft.com/blog/2015/11/04/microsoft-and-red-hat-partner-to-deliver-more-flexibility-and-choice/) 今年流行聯合。在遙遠的過去，微軟視Linux為敵人，曾詛咒它是“癌癥”。但過去一年，微軟在新CEO的帶領下改變了對待Linux和開源的態度，它甚至公開宣稱“愛Linux”。 **React For Beginners** [https://reactforbeginners.com/](https://reactforbeginners.com/) A premium step-by-step training course to get you building real world React.js + Firebase apps and website components. **Javascript quiz. ES6 edition.** [http://perfectionkills.com/javascript-quiz-es6/](http://perfectionkills.com/javascript-quiz-es6/) Remember that crazy Javascript quiz from 6 years ago? Craving to solve another set of mind-bending snippets no sensible developer would ever use in their code? Looking for a new installment of the most ridiculous Javascript interview questions? Look no further! The "ECMAScript Two Thousand Fifteen" installment of good old Javascript Quiz is finally here. **Five Open-Source Slack Alternatives** [https://blog.okturtles.com/2015/11/five-open-source-slack-alternatives/](https://blog.okturtles.com/2015/11/five-open-source-slack-alternatives/) **A 27 Minute Tour of Next Gen Front End Dev with Scala.js** [https://www.youtube.com/watch?v=n1GgVWOThhY](https://www.youtube.com/watch?v=n1GgVWOThhY) A great introductory talk on Scala.js which compiles Scala code to JavaScript. It’s not commercially supported by Typesafe but is production ready. ## 產品及其它 **Hello, World of Programming Languages** [http://mp.weixin.qq.com/s?__biz=MzAxMzMxNDIyOA==&mid=401571407&idx=1&sn=384ee1acf8d2165a46ac90d51719affa](http://mp.weixin.qq.com/s?__biz=MzAxMzMxNDIyOA==&mid=401571407&idx=1&sn=384ee1acf8d2165a46ac90d51719affa) 竟然還可以這么來看編程語言，長見識了，期待后續。 **如何才能成為一個好的技術領導者？** [http://mp.weixin.qq.com/s?__biz=MzA4NTU2MTg3MQ==&mid=400644089&idx=1&sn=1cf732f5529c64ee8d3fa9e55dbd84db](http://mp.weixin.qq.com/s?__biz=MzA4NTU2MTg3MQ==&mid=400644089&idx=1&sn=1cf732f5529c64ee8d3fa9e55dbd84db) 這個話題是碼農職業生涯必須面對的，可以看看大家總結出來的經驗。另附：唱吧CEO-創業四年，我積累的7點管理經驗 [http://mp.weixin.qq.com/s?__biz=MTA3NDM1MzUwMQ==&mid=400390613&idx=1&sn=2f67c1fb74d18cf1d939790a9b3cf992](http://mp.weixin.qq.com/s?__biz=MTA3NDM1MzUwMQ==&mid=400390613&idx=1&sn=2f67c1fb74d18cf1d939790a9b3cf992) **在實際工作中評估你的工程師伙伴** [http://gulu-dev.com/post/2015-11-05-tips-for-non-programmers](http://gulu-dev.com/post/2015-11-05-tips-for-non-programmers) 在日常工作中，對于一些非技術向的小伙伴們，由于對工程師文化了解并不多，要么難以尋找到合適的技術伙伴，要么在工作中與工程師難以保持穩定的溝通節奏，對于這些小伙伴，俺愿意把俺知道的分享出來，膚淺也好，片面也罷，總之是多了一點參考，希望能有所幫助。 **[譯]辭去工作，以開發首個 app** [http://www.labazhou.net/2015/11/how-i-quit-my-job-and-built-my-first-app/](http://www.labazhou.net/2015/11/how-i-quit-my-job-and-built-my-first-app/) 本故事可追溯到 2009 年夏天。我剛剛入手了第一臺 iPhone 3GS，當時非常可心。可想而知，當時《憤怒的小鳥》還沒有成為 App Store 上的黑馬。Apple 在 2008 年上線了 App Store，就在同一年，我賣掉了之前的創業公司。我在一家大型軟件公司做全職工作，但不是憑直覺進入的。我對移動領域感到極度狂熱，開始著手開發 app。 **別人都讀《重新定義公司》而你沒時間？那先來看這最重要的13句話** [http://mp.weixin.qq.com/s?__biz=MjM5NjMyOTMzNA==&mid=400303668&idx=1&sn=3888d25d43f0fc9833ccae841a7a914e](http://mp.weixin.qq.com/s?__biz=MjM5NjMyOTMzNA==&mid=400303668&idx=1&sn=3888d25d43f0fc9833ccae841a7a914e) 谷歌何以成為這樣重要的存在？它的成長、運轉能給中國公司哪些啟示？谷歌掌門人施密特的這本《重新定義公司》確實是一份很良心的答卷。 **如何寫一本技術類的書** [http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=400254392&idx=1&sn=17198b3ecb12a0a6def632ba03ea1b9e](http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=400254392&idx=1&sn=17198b3ecb12a0a6def632ba03ea1b9e) 另附一篇同類文章 :?[http://icodeit.org/2015/08/how-to-write-a-book/](http://icodeit.org/2015/08/how-to-write-a-book/)