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

## 深閱讀 **糯米移動組件架構演進之路** [https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112195&idx=1&sn=27fa638e90b09a107057e4a5e8d01ab1](https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112195&idx=1&sn=27fa638e90b09a107057e4a5e8d01ab1) 糯米移動 APP 中大量使用了 Hybrid 技術，本文介紹了其中上怎么優化的 **用戶數過億的QQ空間前端優化的思路是什么** [http://mp.weixin.qq.com/s?__biz=MzAwNjE3ODQ4NQ==&mid=2650896255&idx=1&sn=641779f9a603627620a75c1cde960916#rd](http://mp.weixin.qq.com/s?__biz=MzAwNjE3ODQ4NQ==&mid=2650896255&idx=1&sn=641779f9a603627620a75c1cde960916#rd) 介紹 QQ 空間前端團隊的發展，以及如何做性能優化 **MaintainableCSS** [http://maintainablecss.com/](http://maintainablecss.com/) 如何寫可維護 CSS 的經驗 **資深程序員都了解的代碼復用法則** [http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653547118&idx=1&sn=733737f71a751feea5c2d2ca5ea3adbe](http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653547118&idx=1&sn=733737f71a751feea5c2d2ca5ea3adbe) 編寫代碼最重要一條，是怎樣復用其他程序員的代碼和思路來解決問題。通過修改他人的代碼來解決復雜問題是種錯誤的做法，不僅成功的機率很低，就算成功也不會提供什么經驗。按照這種方式進行編程，無法成長為一名真正的程序員，在軟件開發領域，前景也是非常有限。 **Optimizing for Large-Scale Displays** [https://css-tricks.com/optimizing-large-scale-displays/](https://css-tricks.com/optimizing-large-scale-displays/) 大屏下如何優化展現 **The Redux ecosystem** [https://medium.com/@denisraslov/the-redux-ecosystem-539c630ec521#.k0o8pq76t](https://medium.com/@denisraslov/the-redux-ecosystem-539c630ec521#.k0o8pq76t) Packages you should know to create a Redux production application **寫給想成為前端工程師的同學們 - by 月影**? [https://www.h5jun.com/post/to-be-a-good-frontend-engineer.html](https://www.h5jun.com/post/to-be-a-good-frontend-engineer.html) 關于前端工程師的發展，以及興趣很重要 **Better Node with ES6, Pt. I** [https://scotch.io/tutorials/better-node-with-es6-pt-i](https://scotch.io/tutorials/better-node-with-es6-pt-i) This article will cover three of the more popular ES2015 features available in Node: Block scoping with let and const; Arrow functions; Shorthand properties & methods. **[譯] Facebook：我們是如何構建第一個跨平臺的 React Native APP** [https://segmentfault.com/a/1190000005091857](https://segmentfault.com/a/1190000005091857) 去年 Android 版本剛出來時候的文章有翻譯了 **Analyzing website performance with the Windows Performance Toolkit** [https://blogs.windows.com/msedgedev/2016/05/11/top-down-analysis-wpt/](https://blogs.windows.com/msedgedev/2016/05/11/top-down-analysis-wpt/) 使用 WPT 來分析頁面性能，可以深入了解性能瓶頸 **ng-conf 2016大會深入介紹了新的Angular編譯器** [http://www.infoq.com/cn/news/2016/05/new-angular-2-compiler-deep-dive](http://www.infoq.com/cn/news/2016/05/new-angular-2-compiler-deep-dive) 好久沒關注了，竟然提供了優化體積的工具 **LuaView高性能、動態化、跨平臺應用開發引擎—聚劃算動態化之路** [http://www.infoq.com/cn/articles/luaview-application-development-engine](http://www.infoq.com/cn/articles/luaview-application-development-engine) 看來今年會出現很多類 React Native 輪子 **babel到底將代碼轉換成什么鳥樣？** [https://github.com/lcxfs1991/blog/issues/9](https://github.com/lcxfs1991/blog/issues/9) 整理的不錯，方便大家了解 **Introducing FBLearner Flow: Facebook’s AI backbone** [https://code.facebook.com/posts/1072626246134461/introducing-fblearner-flow-facebook-s-ai-backbone/](https://code.facebook.com/posts/1072626246134461/introducing-fblearner-flow-facebook-s-ai-backbone/) 介紹了 Facebook 內部的機器學習平臺 **The Benefits of NativeScript’s Single Threading Model** [http://developer.telerik.com/featured/benefits-single-threading-model-nativescript/](http://developer.telerik.com/featured/benefits-single-threading-model-nativescript/) NativeScript 企圖解釋在主線程上執行的好處，似乎有點牽強呢 **那些年我們用過的顯示性能指標** [http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=936](http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=936) 如何采集和分析 Android 顯示性能 **持續交付：當前普遍存在的三個問題與解決方案** [http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659597173&idx=1&sn=70c52dad01d1075d01695e6468f32c8f](http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659597173&idx=1&sn=70c52dad01d1075d01695e6468f32c8f) 持續交付的三條主線總結的挺好的：從Code到Artifacts倉庫；從Artifacts到Running Service；從開發、測試環境到準生產、生產環境。 **Modular JavaScript: A Beginners Guide to SystemJS & jspm** [http://www.sitepoint.com/modular-javascript-systemjs-jspm/](http://www.sitepoint.com/modular-javascript-systemjs-jspm/) SystemJS is a module loader that can import modules at run time in any of the popular formats used today (CommonJS, UMD, AMD, ES6). jspm uses SystemJS to manage packages and their dependencies, so we need not worry about putting the packages in the right order to load them. **Node.js Project Structure Tutorial** [https://blog.risingstack.com/node-hero-node-js-project-structure-tutorial/](https://blog.risingstack.com/node-hero-node-js-project-structure-tutorial/) Most Node.js frameworks don’t come with a fixed directory structure and it might be challenging to get it right from the beginning. In this tutorial, you will learn how to properly structure a Node.js project to avoid confusion when your applications start to grow. **Buttons in Design Systems - 12 Tips for Setting Up a System That Endures** [https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.hupza9rmg](https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.hupza9rmg) Here’s 12 lessons I’ve learned when working the primary button, secondary buttons, and a whole host of other button types in an emerging system. ## 新鮮貨 **Visual Studio Code 1.1** [https://code.visualstudio.com/Updates](https://code.visualstudio.com/Updates) 每月更新一次啊，而且改進還真多 **Announcing SyntaxNet: The World’s Most Accurate Parser Goes Open Source** [http://googleresearch.blogspot.jp/2016/05/announcing-syntaxnet-worlds-most.html](http://googleresearch.blogspot.jp/2016/05/announcing-syntaxnet-worlds-most.html) Google 開源的自然語言標注庫，不過只支持英文。特斯拉的 OpenAI 、亞馬遜的 DSSTNE、Facebook 的FBLearner Flow，AI 領域今年很熱鬧。 **Electron 1.0** [http://electron.atom.io/blog/2016/05/11/electron-1-0](http://electron.atom.io/blog/2016/05/11/electron-1-0) 1.0 版意味著官方認為它已經成熟了，相關的周邊輔助工具也完善起來了 **JavaPoly.js** [https://www.javapoly.com/](https://www.javapoly.com/) JavaPoly.js is a library that polyfills native JVM support in the browser. It allows you to import your existing Java code, and invoke the code directly from Javascript. JavaPoly works even if the user does not have Java installed on their computer. It finally allows Java to become a first class citizen by running directly in the browser’s script tags (and interacting directly with the DOM), instead of being confined to an applet sandbox. **ECharts 3.1.9 發布** [http://echarts.baidu.com/changelog.html](http://echarts.baidu.com/changelog.html) 對 graph，地圖，visualMap組件等做了大幅度的增強 **Blisk** [https://blisk.io/](https://blisk.io/) 面向開發者的瀏覽器，有很多針對 Web 開發的特性，比如同時瀏覽 PC 和移動版效果，不過目前只有 Windows 版 **Announcing the Sourcegraph Chrome extension for GitHub: jump-to-definition and better code search** [https://sourcegraph.com/blog/announcing-the-sourcegraph-chrome-extension-for/](https://sourcegraph.com/blog/announcing-the-sourcegraph-chrome-extension-for/) 一個 Chrome 插件，可以支持 Github 上的代碼跳轉到定義，不過目前只支持 Go 的項目 **WebFont 智能壓縮工具——字蛛 1.0.0 正式版發布** [https://github.com/aui/font-spider/issues/79](https://github.com/aui/font-spider/issues/79) [http://font-spider.org/](http://font-spider.org/) 字蛛是一個 WebFont 智能壓縮工具，它能自動化分析頁面中所使用的 WebFont 并進行按需壓縮，通常好幾 MB 的中文字體可以被壓縮成幾 KB 大小。 **ANDROID SDK 源碼解析** [https://github.com/LittleFriendsGroup/AndroidSdkSourceAnalysis](https://github.com/LittleFriendsGroup/AndroidSdkSourceAnalysis) 這種多人共同解析源碼的模式挺贊的：Android sdk 源碼解析——旨在幫助Android開發者更好的學習Android！ **移動端數據庫新王者：realm** [http://www.jianshu.com/p/2b4388cf2a2d](http://www.jianshu.com/p/2b4388cf2a2d) [https://realm.io/](https://realm.io/) realm是一個跨平臺移動數據庫引擎，支持iOS、OS X（Objective?C和Swift）以及Android。 2014年7月發布。由YCombinator孵化的創業團隊歷時幾年打造，是第一個專門針對移動平臺設計的數據庫。目標是取代SQLite。為了徹底解決性能問題，核心數據引擎用C++打造，并不是建立在SQLite之上的ORM。 ## 產品及其它 **專訪餓了么張雪峰：未長夜痛哭者，不足以語人生** [http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650992464&idx=1&sn=120e185098e8dbf6828a12359a2298e9](http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650992464&idx=1&sn=120e185098e8dbf6828a12359a2298e9) 找到真正需求，而不是創造「偽需求」；先做出最小可用產品（MVP）；既然很多創業者只缺一個程序員，那就對你的程序員好一點，再好一點… **腦洞打開：圖解VR、AR、MR** [http://weibo.com/1687445053/DuTRx6zPU](http://weibo.com/1687445053/DuTRx6zPU) 感覺可以去研究基于這幾個東西的編程了，應該可以產生不少交互專利。