FEX 技術周刊 - 2016/03/14 · FEX 技術周刊

## 深閱讀 **State of the Art JavaScript in 2016** [https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b#.5m5vu7xmh](https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b#.5m5vu7xmh) 如果你最近沒怎么關注前端新技術，可以看看這篇文章了解 **Angular is a Design Pattern** [http://blog.ionic.io/angular-is-a-design-pattern/](http://blog.ionic.io/angular-is-a-design-pattern/) One of the major realizations we’ve had from working on Ionic 2 is how similar Angular 2 and Angular 1 are at a high level, and how understanding this will help developers move from Angular 1 to Angular 2 far more easily. In many ways, Angular 2 isn’t really a new framework at all, just a new implementation of the same one we’ve come to know and love. **A Year Without jQuery** [http://blog.wearecolony.com/a-year-without-jquery/](http://blog.wearecolony.com/a-year-without-jquery/) And I think that’s one lesson we can all take away from jQuery, whether it continues to be used or not. In many ways, moving to vanilla JavaScript highlights the ugliness of working with the DOM directly, and the shortcomings of native Element object — shortcomings which Resig solved so incredibly elequently with the jQuery API. **JavaScript founder Brendan Eich: WebAssembly is a game-changer** [http://www.infoworld.com/article/3042705/web-development/javascript-founder-brendan-eich-webassembly-is-a-game-changer.html](http://www.infoworld.com/article/3042705/web-development/javascript-founder-brendan-eich-webassembly-is-a-game-changer.html) Brendan 看好 WebAssembly 和 Service Worker **Facebook’s new front-end server design delivers on performance without sucking up power** [https://code.facebook.com/posts/1711485769063510/facebook-s-new-front-end-server-design-delivers-on-performance-without-sucking-up-power/](https://code.facebook.com/posts/1711485769063510/facebook-s-new-front-end-server-design-delivers-on-performance-without-sucking-up-power/) Facebook 的硬件服務器技術選型 **Full-Stack Redux Tutorial** [http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html](http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html)?基于 React、Redux 和 Immutable 開發全站應用的例子，寫得很詳細，覆蓋了許多方面的技術 **DeepMind founder Demis Hassabis on how AI will shape the future** [http://www.theverge.com/2016/3/10/11192774/demis-hassabis-interview-alphago-google-deepmind-ai](http://www.theverge.com/2016/3/10/11192774/demis-hassabis-interview-alphago-google-deepmind-ai) The Verge 對 DeepMind 創始人的采訪 **How We Build Code at Netflix** [http://techblog.netflix.com/2016/03/how-we-build-code-at-netflix.html](http://techblog.netflix.com/2016/03/how-we-build-code-at-netflix.html) How does Netflix build code before it’s deployed to the cloud? While pieces of this story have been told in the past, we decided it was time we shared more details. In this post, we describe the tools and techniques used to go from source code to a deployed service serving movies and TV shows to more than 75 million global Netflix members. **How to pass a programming interview** [http://blog.triplebyte.com/how-to-pass-a-programming-interview](http://blog.triplebyte.com/how-to-pass-a-programming-interview) 可以了解下國外碼農面試的關注點。 **Android推送技術研究** [http://www.jianshu.com/p/584707554ed7](http://www.jianshu.com/p/584707554ed7) 可以澄清很多人對網絡部分的一知半解 **Building a Kotlin project 1/2** [http://cirorizzo.net/2016/03/04/building-a-kotlin-project/](http://cirorizzo.net/2016/03/04/building-a-kotlin-project/) 介紹如何使用 Kotlin 構建 Android 應用 **蘑菇街 App 的組件化之路** [http://limboy.me/ios/2016/03/10/mgj-components.html](http://limboy.me/ios/2016/03/10/mgj-components.html) iOS 組件化的實踐 **讓圖片加載這件事兒變得更美好**[http://aotu.io/notes/2016/03/09/img-loading-optimization-in-mobile/](http://aotu.io/notes/2016/03/09/img-loading-optimization-in-mobile/)?文章從各種方面總結了如何讓圖片加載更快，用戶體驗更好。同時也提供了一些例子分析。 **瀏覽器與服務器的消息通信** [http://blog.brucefeng.info/post/brower-server-msg](http://blog.brucefeng.info/post/brower-server-msg) 主要上介紹長連接的實現方案，感覺內容有點老了 **ReactNative For Android 項目實戰總結** [http://mp.weixin.qq.com/s?__biz=MzI1MTA1MzM2Nw==&mid=401483604&idx=1&sn=399cdf7e13fe6125108de1bfd045f2cf&scene=0#wechat_redirect](http://mp.weixin.qq.com/s?__biz=MzI1MTA1MzM2Nw==&mid=401483604&idx=1&sn=399cdf7e13fe6125108de1bfd045f2cf&scene=0#wechat_redirect) Qzone 在 React Native 方面的嘗試，性能比 H5 版本略好 **深入源碼探索 ReactNative 通信機制** [http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=663](http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=663) 介紹最新 React Native For Android 版本的通信機制 **How OpenGL works: software renderer in 500 lines of code** [https://github.com/ssloy/tinyrenderer/wiki](https://github.com/ssloy/tinyrenderer/wiki) 500 行代碼實現軟件渲染，想了解 3D 渲染原理的同學推薦看看 **[譯]使用 SVG 輸出 Octicon** [http://efe.baidu.com/blog/delivering-octicons-with-svg/](http://efe.baidu.com/blog/delivering-octicons-with-svg/) GitHub.com 現在不再使用字體來輸出圖標了。我們把代碼庫中所有的 Octicon 替換成了 SVG 版本。雖然這些改動并不那么明顯，但你馬上就能體會到 SVG 圖標的優點。 **使用 Docker 容器應該避免的 10 個事情** [http://mp.weixin.qq.com/s?__biz=MjM5NzM0MjcyMQ==&mid=402033815&idx=1&sn=1f6198787b5f299cc3c1c44f89f42258](http://mp.weixin.qq.com/s?__biz=MjM5NzM0MjcyMQ==&mid=402033815&idx=1&sn=1f6198787b5f299cc3c1c44f89f42258) 許多用戶依然像對待典型的虛擬機那樣對待容器。但是他們都忘記了除了與虛擬機相似的部分，容器還有一個很大的優點：它是一次性的。這個特性“本身”促使用戶改變他們關于使用和管理容器的習慣；我將會向您解釋在容器中不應該做這些事，以確保最大地發揮容器的作用。另附：[OpenStack和Docker不能，Kubernetes和Mesos也不能，ServerLess能決定云計算勝負嗎](http://mp.weixin.qq.com/s?__biz=MjM5MzM3NjM4MA==&mid=406021651&idx=2&sn=b349ef1d517282d5d3d970f10c3e41a4&scene=2&srcid=0313n6WVG97c85Uy8xtNRAIx)?[10個精選的容器應用案例](http://yd.baidu.com/ebook/4dc229cb6bd97f192379e999?type=cat) **淘寶大秒系統設計詳解** [http://geek.csdn.net/news/detail/59847](http://geek.csdn.net/news/detail/59847) 最初的秒殺系統的原型是淘寶詳情上的定時上架功能，由于有些賣家為了吸引眼球，把價格壓得很低。但這給的詳情系統帶來了很大壓力，為了將這種突發流量隔離，才設計了秒殺系統，文章主要介紹大秒系統以及這種典型讀數據的熱點問題的解決思路和實踐經驗。另附幾個 Server 端技術相關文章： -?[nice服務端架構重構與演進](http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=404472153&idx=1&sn=c588d4b4758775304cf19871c3f8bffe)?- [偷師餓了么-怎樣用HTTP/2優化iOS APP網絡層次架構][http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=402988368&idx=1&sn=87c22dd18a20526ea6274709059fe443](http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=402988368&idx=1&sn=87c22dd18a20526ea6274709059fe443)?-?[美團線上真實流量壓測工具構建](http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=404402191&idx=1&sn=2d0a082e1da027a3b7988857d097d4e9) ## 新鮮貨 **cnpm@beta 測試：征集 npm install 非常慢的應用** [https://cnodejs.org/topic/56dcd2cc502596633dc2c3e9](https://cnodejs.org/topic/56dcd2cc502596633dc2c3e9) cnpm 高速版本目前正在 beta，為了更加大范圍地支持 npm install 很慢的項目，需要大家來幫忙測試。 - 如果你當前日常的項目每次重新 npm install 你都需要走開去喝咖啡喝茶的，那么你就是我們這次發布的重點關注對象了。 - 如果你是公司里面負責前端工程的同學，你是不是每天都在吐槽“尼瑪 build 一個 react app 比 build Java 還慢”？回答 yes？那么你就是我們這次發布的重點關注對象了。 - 在 Twitter 上每天都有很多人抱怨 npm install 超級慢，你是不是也在抱怨呢？回答 yes？那么你就是我們這次發布的重點關注對象了。關于 npm 慢的問題，竟然還有人整出了這個：[watch GIFs while running npm install](https://github.com/vdemedes/gifi) **React v15.0 Release Candidate** [https://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html](https://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html) This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013\. It’s also worth noting that we no longer actively support Internet Explorer 8\. 另附：[Hot Reloading in React](https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf#.wnneia7ir) **Introducing InversifyJS** [http://blog.wolksoftware.com/introducing-inversifyjs](http://blog.wolksoftware.com/introducing-inversifyjs) [http://inversify.io/](http://inversify.io/) A lightweight inversion of control container for TypeScript & JavaScript apps. A pico IoC container uses a class constructor to identify and inject its dependencies. InversifyJS has a friendly API and encourage the usage of the best OOP and IoC practices. **Announcing SQL Server on Linux** [https://blogs.microsoft.com/blog/2016/03/07/announcing-sql-server-on-linux/](https://blogs.microsoft.com/blog/2016/03/07/announcing-sql-server-on-linux/) Today I’m excited to announce our plans to bring SQL Server to Linux as well. This will enable SQL Server to deliver a consistent data platform across Windows Server and Linux, as well as on-premises and cloud. We are bringing the core relational database capabilities to preview today, and are targeting availability in mid-2017. **HTML 5.1** [https://www.w3.org/TR/html51/](https://www.w3.org/TR/html51/) The styling has been updated and the spec is now easier to read than ever (although it certainly isn’t bedtime reading). **git-sketch-plugin** [https://github.com/mathieudutour/git-sketch-plugin](https://github.com/mathieudutour/git-sketch-plugin)?A Git client built right into Sketch. Generate pretty diffs so that everybody knows what are the changes! **Autocomplete from Stack Overflow** [https://emilschutte.com/stackoverflow-autocomplete/](https://emilschutte.com/stackoverflow-autocomplete/) 根據 Stack Overflow 答案中的代碼來實現自動完成 **ReactCompose** [http://reactcompose.com/](http://reactcompose.com/) Compose React components with a functional api **前端工程師分享：十大好用易上手 HTML 5 前端框架** [http://buzzorange.com/techorange/2016/03/11/html5-frames/](http://buzzorange.com/techorange/2016/03/11/html5-frames/) 主要是 CSS 框架 **MyHTML** [http://lexborisov.github.io/myhtml/](http://lexborisov.github.io/myhtml/) 一個純 C 寫的 HTML 解析庫 **tcpkali** [https://github.com/machinezone/tcpkali](https://github.com/machinezone/tcpkali) Fast multi-core TCP and WebSockets load generator **AlphaGo 開源實現版本** [https://github.com/Rochester-NRT/AlphaGo](https://github.com/Rochester-NRT/AlphaGo) 有人閱讀了 DeepMind 的那篇論文，然后開始根據它來實現開源版本的 AlphaGo，不過目前還剛開始。AlphaGo 最佳非常搶眼，相關文章： -?[AlphaGo的分析](http://zhuanlan.zhihu.com/yuandong/20607684)?Facebook 人工智能組研究員在閱讀了 AlphaGo 論文后的分析 -?[擊敗李世石后，AlphaGo 的下一步是什么](http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=402930825&idx=1&sn=3182ba46f461de324dd13ea7f2b183fe) **Introducing native ad-blocking feature for faster browsing** [https://www.opera.com/blogs/desktop/2016/03/native-ad-blocking-feature-opera-for-computers/](https://www.opera.com/blogs/desktop/2016/03/native-ad-blocking-feature-opera-for-computers/) Opera 將原生支持廣告過濾 **Eclipse Che** [https://github.com/eclipse/che](https://github.com/eclipse/che) Next-generation Eclipse IDE. Open source workspace server and cloud IDE. **APNS/2** [https://github.com/sideshow/apns2](https://github.com/sideshow/apns2) HTTP/2 Apple Push Notification Service (APNs) push provider for Go **CocoaPods downloads max out five GitHub server CPUs** [https://github.com/CocoaPods/CocoaPods/issues/4989](https://github.com/CocoaPods/CocoaPods/issues/4989) 一個 Swift & Objective C 的依賴管理工具對 GitHub 的影響竟然這么大。寫這類東西得注意呀。 **一篇文看懂Hadoop：風雨十年，未來何去何從** [http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=403025428&idx=1&sn=bb2c0380ce29dc3cecf5f6a2afe36960](http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=403025428&idx=1&sn=bb2c0380ce29dc3cecf5f6a2afe36960)Hadoop 科普。 ## 產品及其它 **百度 H5 內測** [http://h5.baidu.com/docs/beginning/use.html](http://h5.baidu.com/docs/beginning/use.html) 百度 H5 是百度公司推出的移動端 H5 頁面快速制作工具平臺。特性包括：可視化地構建并發布專屬 H5 頁面，無需付費去廣告；支持文本、媒體（含音頻，圖片，圖標）、形狀、表單四大類組件，全方位滿足各種需求。有來自百度各大產品線運營實戰的四十余套創意模板，為構思提供源源不斷的靈感，其中包括曾創下百萬級 PV 記錄的多個案例。 **關于「企業微信」你值得了解的10件事** [http://mp.weixin.qq.com/s?__biz=MjM5ODQwMjA4MA==&mid=401614332&idx=1&sn=97abf02c28c9eb290619654a451e567d](http://mp.weixin.qq.com/s?__biz=MjM5ODQwMjA4MA==&mid=401614332&idx=1&sn=97abf02c28c9eb290619654a451e567d) 企業微信入局，移動端企業溝通工具風云再起。 **專訪：前端布道師@張克軍** [http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=402273083&idx=1&sn=590b94fe4976d3f428463d690e4385cb](http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=402273083&idx=1&sn=590b94fe4976d3f428463d690e4385cb) 這幾點分享不錯： - 出現瓶頸取決于視野，當看不到發展方向和趨勢時，便會苦于沒有突破 - 工程師的三個時期：菜鳥期（2-3年）、成熟期、創造期 - 前端工程師如何發展的可能性：專家、極客、自由開發者、轉型 **怎么評價真阿當的前端收費收徒計劃** [https://www.zhihu.com/question/41112707](https://www.zhihu.com/question/41112707) 這莫非是碼農的另一個生財之道？