FEX 技術周刊 - 2016/04/11 · FEX 技術周刊

## 深閱讀 **如何用 fis3 來開發 React?** [http://fex.baidu.com/blog/2016/04/develop-react-with-fis3/](http://fex.baidu.com/blog/2016/04/develop-react-with-fis3/) 當下 react + redux + es6 + node_modules 的技術選型非常流行，相信有不少同學都想去嘗試，然后 webpack 并不是唯一的選擇，用 fis 一樣也能支持得很好，你依然可以繼續使用 fis 的資源定位、cnd 部署、資源加 md5 戳和 css 雪碧圖等其他實用的功能 **React v15.0** [https://facebook.github.io/react/blog/2016/04/07/react-v15.html](https://facebook.github.io/react/blog/2016/04/07/react-v15.html) We would like to thank the React community for reporting issues and regressions in the release candidates on our issue tracker. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15. **ES6 module loading: More complicated than you think** [https://www.nczonline.net/blog/2016/04/es6-module-loading-more-complicated-than-you-think/](https://www.nczonline.net/blog/2016/04/es6-module-loading-more-complicated-than-you-think/) 本文介紹了 scripts 和 modules 的區別，以及從 parsing 和 loading 這2個方向來解釋為什么無法判斷出一個js文件是 script 或 module **豆瓣混合開發實踐** [http://lincode.github.io/Hybrid-Rexxar](http://lincode.github.io/Hybrid-Rexxar) Hybrid 又要開始 **The Definitive Guide to Linux System Calls** [http://blog.packagecloud.io/eng/2016/04/05/the-definitive-guide-to-linux-system-calls/](http://blog.packagecloud.io/eng/2016/04/05/the-definitive-guide-to-linux-system-calls/) This blog post explains how Linux programs call functions in the Linux kernel. It will outline several different methods of making systems calls, how to handcraft your own assembly to make system calls (examples included), kernel entry points into system calls, kernel exit points from system calls, glibc wrappers, bugs, and much, much more. **我的編程之路** [https://github.com/icepy/_posts/issues/32](https://github.com/icepy/_posts/issues/32) 一位前端工程師的成長之路，坎坷中展現出作者的不平凡之處，這份對技術的熱忱和探索精神值得學習。 **淘寶首頁性能優化實踐** [http://www.barretlee.com/blog/2016/04/01/optimization-in-taobao-homepage/](http://www.barretlee.com/blog/2016/04/01/optimization-in-taobao-homepage/) 代碼的性能優化是一個精細活，如果你要在一個龐大的未經優化的頁面上做性能優化，可能會面臨一次重構代碼。本文從淘寶首頁個性化引出的問題出發，從微觀到宏觀講述了頁面的優化實踐，提出了幾條可以借鑒的「黃金法則」，希望對你有所啟發。 **什么是函數式編程思維？** [http://www.zhihu.com/question/28292740/answer/40336090](http://www.zhihu.com/question/28292740/answer/40336090) 函數式編程是一種編程范式，我們常見的編程范式有命令式編程（Imperative programming），函數式編程，邏輯式編程，常見的面向對象編程是也是一種命令式編程。命令式編程是面向計算機硬件的抽象，有變量（對應著存儲單元），賦值語句（獲取，存儲指令），表達式（內存引用和算術運算）和控制語句（跳轉指令），一句話，命令式程序就是一個馮諾依曼機的指令序列。而函數式編程是面向數學的抽象，將計算描述為一種表達式求值，一句話，函數式程序就是一個表達式。 **前端通信進階** [https://segmentfault.com/a/1190000004682473#rd](https://segmentfault.com/a/1190000004682473#rd) 可以了解下前端與服務端交互相關的各種方式 **What are CSS Modules and why do we need them?** [https://css-tricks.com/css-modules-part-1-need](https://css-tricks.com/css-modules-part-1-need) [https://speakerdeck.com/vjeux/react-css-in-js](https://speakerdeck.com/vjeux/react-css-in-js) 最近很火熱的CSS 模塊化的概念，文中闡述了什么是CSS模塊化以及這樣做會帶來什么好處 **使用Gulp構建網站小白教程** [http://blog.h5jun.com/post/gulp-build.html](http://blog.h5jun.com/post/gulp-build.html) 月影科普 Gulp。 **Moving from HTML Grid Systems to CSS Grid Systems** [http://zellwk.com/blog/from-html-grids-to-css-grids/](http://zellwk.com/blog/from-html-grids-to-css-grids/) In this article, we learned how to move from a HTML-based grid system (that most frameworks Bootstrap provide) to a CSS-based grid system that we coded up. **理解Android進程創建流程** [http://gityuan.com/2016/03/26/app-process-create/](http://gityuan.com/2016/03/26/app-process-create/) 基于Android 6.0的源碼剖析，分析Android進程是如何一步步創建的。 **Angular 2 核心模塊剖析** [http://mp.weixin.qq.com/s?__biz=MzIzMzEzODYwOA==&mid=417397225&idx=1&sn=99fc7f7401606c3a47b31b88827c9239](http://mp.weixin.qq.com/s?__biz=MzIzMzEzODYwOA==&mid=417397225&idx=1&sn=99fc7f7401606c3a47b31b88827c9239) 來著 AlloyTeam 的同學的分享。 **利用圖片傳輸數據的另類思路** [https://imququ.com/post/use-image-to-transfer-data.html](https://imququ.com/post/use-image-to-transfer-data.html) 講了一個利用圖片傳輸數據來繞過 Mixed Content 規范限制，從而實現在 HTTPS 網站中獲取 HTTP 接口數據的方案。 **怎么消除JavaScript中的代碼壞味道** [https://github.com/gaohailang/blog/issues/5](https://github.com/gaohailang/blog/issues/5) 通過具體例子說明如何優化代碼 **微信Android客戶端后臺保活經驗分享** [http://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=403254393&idx=1&sn=8dc0e3a03031177777b5a5876cb210cc](http://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=403254393&idx=1&sn=8dc0e3a03031177777b5a5876cb210cc) 微信在網絡方面做了許多細致的工作，很值得參考 **用typescript寫react和node是怎樣的一種體驗** [https://segmentfault.com/a/1190000004880645](https://segmentfault.com/a/1190000004880645) TypeScript 看起來越來越值得嘗試了 **4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them** [https://auth0.com/blog/2016/01/26/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/](https://auth0.com/blog/2016/01/26/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/) 作者介紹了幾種常見的客戶端js代碼導致的內存泄露的場景，以及如何用 Chrome 的開發者工具來找到這些問題 **Swift Runtime分析：還像OC Runtime一樣嗎？** [http://mp.weixin.qq.com/s?__biz=MzA4MjA0MTc4NQ==&mid=403068491&idx=1&sn=c95f07e3d38c92ba56933502cc3e1800#rd](http://mp.weixin.qq.com/s?__biz=MzA4MjA0MTc4NQ==&mid=403068491&idx=1&sn=c95f07e3d38c92ba56933502cc3e1800#rd) 深度解析 Swift 的運行時特性 ## 新鮮貨 **Google is said to be considering Swift as a ‘first class’ language for Android** [http://thenextweb.com/dd/2016/04/07/google-facebook-uber-swift/](http://thenextweb.com/dd/2016/04/07/google-facebook-uber-swift/) Google’s Android operating system currently supports Java as its first-class language, and sources say Swift is not meant to replace Java, at least initially. While the ongoing litigation with Oracle is likely cause for concern, sources say Google considers Swift to have a broader “upside” than Java. **Node.js最新Web技術棧（2016年4月）** [https://cnodejs.org/topic/56fdf66ec5f5b4a959e91771](https://cnodejs.org/topic/56fdf66ec5f5b4a959e91771) 有些新東西，喜歡折騰的可以看看 **ES6 Succinctly** [http://kamranahmed.info/blog/2016/04/04/es6-in-depth/](http://kamranahmed.info/blog/2016/04/04/es6-in-depth/) 對ES6的主要新特性和語法做了一個簡要的介紹，沒接觸過的同學可以快速過一遍 **Grunt 1.0.0 released** [http://gruntjs.com/blog/2016-04-04-grunt-1.0.0-released](http://gruntjs.com/blog/2016-04-04-grunt-1.0.0-released) Grunt 堅強的走到了 1.0 版本 **now: realtime node.js deployments** [https://zeit.co/now](https://zeit.co/now) now allows you to take your JavaScript (Node.js) powered websites, applications and services to the cloud with ease, speed and reliability. In practical terms, any directory that contains a package.json file can be transported to the cloud with one command: now. Every time you deploy a project, now gives you a unique URL to it (even before build processes are complete!). These URLs look like this: my-app-sknncqwaoc.now.sh. When it’s time to take your deployment to production, you simply pick an appropriate alias. **Bash on Ubuntu on Windows – Download Now!** [https://blogs.msdn.microsoft.com/commandline/2016/04/06/bash-on-ubuntu-on-windows-download-now-3/](https://blogs.msdn.microsoft.com/commandline/2016/04/06/bash-on-ubuntu-on-windows-download-now-3/) 微軟終于在 win10 上支持 bash 了。另附：[逆天的Ubuntu on Windows 10](http://mp.weixin.qq.com/s?__biz=MzA3NTM1MzE4Nw==&mid=402133519&idx=1&sn=3c850fb55842935827fcf755f03d1ac3) **Android Studio 2.0** [http://android-developers.blogspot.com/2016/04/android-studio-2-0.html](http://android-developers.blogspot.com/2016/04/android-studio-2-0.html) Android Studio 2.0 is the fastest way to build high quality, performant apps for the Android platform, including phones and tablets, Android Auto, Android Wear, and Android TV. As the official IDE from Google, Android Studio includes everything you need to build an app, including a code editor, code analysis tools, emulators and more. This new and stable version of Android Studio has fast build speeds and a fast emulator with support for the latest Android version and Google Play Services. **GitLab Pages** [http://pages.gitlab.io/](http://pages.gitlab.io/) 和github pages一樣，gitlab pages也問世了 **What’s new in webpack 2** [https://gist.github.com/sokra/27b24881210b56bbaff7](https://gist.github.com/sokra/27b24881210b56bbaff7) 簡單的介紹了 webpack 2 的一些新特性 **React Storybook** [https://github.com/kadirahq/react-storybook](https://github.com/kadirahq/react-storybook) [https://voice.kadira.io/introducing-react-storybook-ec27f28de1e2](https://voice.kadira.io/introducing-react-storybook-ec27f28de1e2) React Storybook allows you to develop UI components rapidly without worrying about the app. It will improve your team’s collaboration and feedback loop.You just load your UI components into the React Storybook and start developing them. **react-dropzone** [https://github.com/okonet/react-dropzone](https://github.com/okonet/react-dropzone) Simple HTML5 drag-drop zone for files with React.js. **react-native-desktop** [https://github.com/ptmt/react-native-desktop](https://github.com/ptmt/react-native-desktop) Build OS X desktop apps using React Native and Cocoa. **2016年最火的 15 款 HTML5 游戲引擎** [http://diycode.cc/topics/16](http://diycode.cc/topics/16) 作者整理了各個游戲引擎目前的 Star 及貢獻者數等指標 **Houdini：也許是你從未聽過的在CSS領域最令人興奮的發展** [http://www.w3cplus.com/css/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of.html](http://www.w3cplus.com/css/houdini-maybe-the-most-exciting-development-in-css-youve-never-heard-of.html) [https://wiki.css-houdini.org/](https://wiki.css-houdini.org/) Houdini是一個新的W3C工作組，他們致力于讓這些問題永遠消失。他們計劃通過引入一整套API來讓開發者首次擁有擴展CSS的權利，并且會提供出一套工具來與瀏覽器的渲染引擎的樣式與布局進行掛鉤。另附 w3cplus 的一個關于無障礙設計的文章：[WAI-ARIA 無障礙Web規范](http://www.w3cplus.com/wai-aria/wai-aria.html) **Visual Studio Code 使用文檔** [http://i5ting.github.io/vsc/](http://i5ting.github.io/vsc/) 適合入門，另附：[VS Code Improves JavaScript Editing Abilities](http://www.infoq.com/news/2016/03/vscode-march) **在Microsoft Word中，Node是如何替代宏的** [http://www.infoq.com/cn/news/2016/04/Node-for-Office](http://www.infoq.com/cn/news/2016/04/Node-for-Office) VBA 終于要掛了 **Sketchpad–A simple sketchpad library.** [http://yiom.github.io/sketchpad/](http://yiom.github.io/sketchpad/) 一款簡單的素描庫，同時支持在畫板中的繪制路徑的動畫回放 **sed-command-error-on-macos-x** [http://stackoverflow.com/questions/14846304/sed-command-error-on-macos-x](http://stackoverflow.com/questions/14846304/sed-command-error-on-macos-x) 當sed命令在 MAC OS X上運行時，會和linux上不一樣，例如?`i`、`c`。所以有可能看著console反復的的報錯卻不知道自己錯在了哪。頁面中的第二個答案形象且完美的解決了問題，推薦一下。 **popper.js** [https://github.com/FezVrasta/popper.js/](https://github.com/FezVrasta/popper.js/) Popper.js is a library used to create poppers in web applications. **iphone-inline-video** [https://github.com/bfred-it/iphone-inline-video](https://github.com/bfred-it/iphone-inline-video) Make videos playable inline on Safari on iPhone and iPod touch. **cli-spinners** [https://github.com/sindresorhus/cli-spinners](https://github.com/sindresorhus/cli-spinners) 50多個spinners任你挑選 ## 產品及其它 **做臥底，如何不動聲色的毀掉對手的產品** [http://zhuanlan.zhihu.com/p/20726620](http://zhuanlan.zhihu.com/p/20726620) 《人人都是產品經理》作者總過一個話題“如果你到了對手公司做臥底，如何毀掉一個產品”總結了一些產品研發中的反模式，挺值得引以為戒的。 **Vivaldi：可高度定制的先進瀏覽器** [https://vivaldi.com/](https://vivaldi.com/) Opera 的前 CEO 和創始人 Jon von Tetzchner 正式回來了——帶著他新公司 Vivaldi 的新產品——還是個瀏覽器。Vivaldi 瀏覽器是為適應用戶而生，而非與此相反。你想把標簽欄放在屏幕底部或者側邊？或者想把地址欄換個位置？在 Vivaldi 里你可以對此任意設置；此外還有更多可能性：鍵盤快捷鍵、鼠標手勢…… **iOS App上架流程——記我的第一個項目上架的苦淚史** [http://blog.treney.com/index.php/archives/ToAppStore.html](http://blog.treney.com/index.php/archives/ToAppStore.html) 不得不說 ios app 上架流程的體驗真的很一般。 **七年阿里老人談新人成長** [http://geek.csdn.net/news/detail/65891](http://geek.csdn.net/news/detail/65891) 大神君山的經驗之談，值得學習。不管你是剛走出校園，還是大咖加入新的環境，前期精力都應該放到具體的小事上。先以事服人，再以德服人。 **架構師是什么？** [http://weibo.com/p/1001603961220511224428](http://weibo.com/p/1001603961220511224428) 蔡學鏞老師的觀點是：簡單來說，架構師就是設計架構的專家。軟件架構就是「關鍵」代碼的組織與交互方式。 **懷疑精神 – 寫給前端小伙伴們的善意提醒** [http://weibo.com/ttarticle/p/show?id=2309403962040120138364](http://weibo.com/ttarticle/p/show?id=2309403962040120138364) 阿當老師又引發了軒然大波，真不容易。感覺這個觀點才是文章的關鍵：對知識的敬畏是必要的基本態度。兼聽則明吧，比懷疑精神更重要的是好奇心、探索精神以及獨立思考的能力。