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

## 深閱讀 The Deep Roots of Javascript Fatigue** [https://segment.com/blog/the-deep-roots-of-js-fatigue/](https://segment.com/blog/the-deep-roots-of-js-fatigue/) [https://news.ycombinator.com/item?id=11294218](https://news.ycombinator.com/item?id=11294218) Like it or not, Javascript is evolving at a faster rate than any widespread language in the history of computing. Most of the tools we use today didn’t even really exist a year ago: React, JSX, Flux, Redux, ES6, Babel, etc. Even setting up a ‘modern’ project requires installing a swath of dependencies and build tools that are all new. No other language does anything remotely resembling that kind of thing. It’s enough to even warrant a “State of the Art” post so everyone knows what to use. So, why does Javascript change so much? **2016 Stack Overflow Developer Survey Results** [http://stackoverflow.com/research/developer-survey-2016](http://stackoverflow.com/research/developer-survey-2016) This year, over fifty thousand developers shared where they work, what they build, and who they are. You are about to read the results of the most comprehensive developer survey ever conducted. **JSX - Is No Longer My Friend** [https://medium.com/@jador/jsx-4b978fbeb290#.5mk3ko9ey](https://medium.com/@jador/jsx-4b978fbeb290#.5mk3ko9ey) 對 JSX 的吐槽，然后安利了一下 Hyperscript 語法 **How we built Facebook Lite for every Android phone and network** [https://code.facebook.com/posts/1365439333482197/how-we-built-facebook-lite-for-every-android-phone-and-network/](https://code.facebook.com/posts/1365439333482197/how-we-built-facebook-lite-for-every-android-phone-and-network/) Facebook 針對低端機及慢速網絡的優化版是如何實現的 **JSPatch近期新特性解析** [https://segmentfault.com/a/1190000004612317](https://segmentfault.com/a/1190000004612317) JSPatch 是目前 iOS 上流行的動態補丁方案 **基于 Node.js 的自動化持續集成** [https://cnodejs.org/topic/56e8d829cf7763a6045c4af8](https://cnodejs.org/topic/56e8d829cf7763a6045c4af8) [https://github.com/alibaba/macaca](https://github.com/alibaba/macaca) Macaca是一套自動化解決方案，由支付寶的同學研發。適用于前端、移動端自動化測試，跨平臺、支持多種應用類型、同時提供持續集成服務。 **你可以一邊開車，一邊換輪胎嗎？Dropbox 做到了** [http://www.ifanr.com/634038](http://www.ifanr.com/634038) 最開始用 Go，后來發現內存占用太高，又改成 Rust 了 **利用 canvas 實現數據壓縮** [http://www.cnblogs.com/index-html/p/canvas_data_compress.html](http://www.cnblogs.com/index-html/p/canvas_data_compress.html) HTTP 支持 GZip 壓縮，可節省不少傳輸資源。但遺憾的是，只有下載才有，上傳并不支持。如果上傳也能壓縮，那就完美了。特別適合大量文本提交的場合，比如博客園，就是很好的例子。雖然標準不支持「上傳壓縮」，但仍可以自己來實現。 **Flex布局關于內容均分的那些坑** [http://mp.weixin.qq.com/s?__biz=MzI3NTE2NjYxNw==&mid=401783473&idx=1&sn=e48f65a8f9a8ba4464dd6be9c559dc55](http://mp.weixin.qq.com/s?__biz=MzI3NTE2NjYxNw==&mid=401783473&idx=1&sn=e48f65a8f9a8ba4464dd6be9c559dc55) 本文主要想介紹Flex布局的一種常見應用-內容均分布局，已經如何解決使用中遇到的一些問題。 **再談 API 的撰寫** [http://mp.weixin.qq.com/s?__biz=MzA3NDM0ODQwMw==&mid=401902529&idx=1&sn=575ae8fdf163afa30604d712a73079fd](http://mp.weixin.qq.com/s?__biz=MzA3NDM0ODQwMw==&mid=401902529&idx=1&sn=575ae8fdf163afa30604d712a73079fd) 理想情況下，一個 API 撰寫完成，應該能夠自動生成文檔和測試用例，而 API 系統也應該提供一整套統計的 API 用于生成 metrics。缺省情況下，API 系統本身就應該收集很多 metrics，比如每個 API 的 response time，status code 等等，使用 collectd / statd 收集信息，并可以進一步發送到 datadog / new relic 這樣的 APM 系統。 **All JS libraries should be authored in TypeScript** [http://staltz.com/all-js-libraries-should-be-authored-in-typescript.html](http://staltz.com/all-js-libraries-should-be-authored-in-typescript.html) Typed vs dynamic is a rather controversial topic, so I’m not trying to spark that discussion all over again. But I believe all JavaScript libraries which are intended to be used by thousands of developers should be written in TypeScript. It’s not about applications or websites written in TypeScript. It’s about libraries. They should be written in TypeScript and here’s a couple reasons why. **Securing React Redux Apps With JWT Tokens** [https://medium.com/@rajaraodv/securing-react-redux-apps-with-jwt-tokens-fcfe81356ea0#.p6snxgwyw](https://medium.com/@rajaraodv/securing-react-redux-apps-with-jwt-tokens-fcfe81356ea0#.p6snxgwyw) JSON Web Token (JWT) is a way to generate auth tokens. It’s is an open standard (RFC 7519) that defines a simple way for securely transmitting information between client and server as a JSON object. **前端動畫原理與實現** [http://matrix.h5jun.com/slide/show?id=117#/](http://matrix.h5jun.com/slide/show?id=117#/) 大神月影整理的前端動畫“啟蒙”教程，親自寫了28段例子代碼。不講大道理，重在鼓勵思考，不羅列API，重在介紹數學原理，不使用現成框架，重在數學和物理公式推導。 **前端優化不完全指南** [http://aotu.io/notes/2016/03/16/optimization/](http://aotu.io/notes/2016/03/16/optimization/) 暖妹子の前端優化不完全指南來襲,救贖眾生啦～～快來瞧瞧～ **專訪鏈家鳥哥：技術人員如何保持進步** [http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=403082749&idx=1&sn=59d24d71982099f7d71b233ab69a8786](http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=403082749&idx=1&sn=59d24d71982099f7d71b233ab69a8786) 技術社群應該負責起讓大家回歸理智的職責。技術本無優劣，應該引領技術人員專注于基礎，關注基本功的修養。技術社群也是要弘揚一些正能量，拒絕以炒作語言之爭或框架之爭來搏眼球的做法。更多的倡導大家博學眾長、綜合應用，學會根據情況不同，選擇最優工具。 **The Go Programming Language** [http://www.gopl.io/](http://www.gopl.io/) [http://www.infoq.com/articles/the-go-programming-language-book-review](http://www.infoq.com/articles/the-go-programming-language-book-review) The Go Programming Language, written by Alan A. A. Donovan and Brian W. Kernighan, provides an excellent introduction to the Go language. It covers the most recent stable version of the Go programming language (1.5), which was released in August 2015. 對 Go 語言有興趣的同學可以關注這本書。 **天貓App的動態化配置中心實踐** [http://www.infoq.com/cn/articles/app-dynamic-configuration](http://www.infoq.com/cn/articles/app-dynamic-configuration) **專訪滴滴出行李賢輝：滴滴iOS客戶端的架構演變之路** [http://www.infoq.com/cn/news/2016/03/lixianhui-interview](http://www.infoq.com/cn/news/2016/03/lixianhui-interview) 滴滴的 iOS 客戶端架構介紹 **【在線技術分享實錄】mui-最接近原生體驗的框架** [http://mp.weixin.qq.com/s?__biz=MzIzMzEzODYwOA==&mid=415176096&idx=1&sn=35b6f0772021700325407cf3cdee6253](http://mp.weixin.qq.com/s?__biz=MzIzMzEzODYwOA==&mid=415176096&idx=1&sn=35b6f0772021700325407cf3cdee6253) 介紹了其中性能優化的方法 **Java 征途：行者的地圖**? [http://www.cnblogs.com/mindwind/p/5251430.html](http://www.cnblogs.com/mindwind/p/5251430.html) 前段時間應因緣梳理了下自己的 Java 知識體系，成文一篇望能幫到即將走進或正在 Java 世界跋涉的程序員們。 ## 新鮮貨 **GRPC - Google 出品** [http://www.grpc.io/](http://www.grpc.io/) A high performance, open source, general RPC framework that puts mobile and HTTP/2 first. **Chrome 50 Beta: Push notification improvements and declarative preload** [http://blog.chromium.org/2016/03/chrome-50-beta-push-notification.html](http://blog.chromium.org/2016/03/chrome-50-beta-push-notification.html) 推送提醒增強，支持 CSS 資源預加載屬性 **Node.js - Planning for v6** [https://github.com/nodejs/node/issues/5766](https://github.com/nodejs/node/issues/5766) **V8 Release 5.0** [http://v8project.blogspot.com/2016/03/v8-release-50.html](http://v8project.blogspot.com/2016/03/v8-release-50.html) 雖然版本號看起來是個大更新，但其實更新不多，主要是對 ES6 正則的更好支持，及幾個 API 的性能提升。另附： **Ant Design 全新設計語言文檔上線** [http://ant.design/docs/spec/introduce](http://ant.design/docs/spec/introduce) Ant Design 旨在統一中臺項目的前端 UI 設計，屏蔽不必要的設計差異和實現成本，解放設計和前端的研發資源。 Ant Design 是一個致力于提升『用戶』和『設計者』使用體驗的中臺設計語言。它模糊了產品經理、交互設計師、視覺設計師、前端工程師、開發工程師等角色邊界，將進行 UE 設計和 UI 設計人員統稱為『設計者』，利用統一的規范進行設計賦能，全面提高中臺產品體驗和研發效率。 **Atom 1.6 and 1.7 beta** [http://blog.atom.io/2016/03/17/atom-1-6-and-1-7-beta.html](http://blog.atom.io/2016/03/17/atom-1-6-and-1-7-beta.html) 終于有類似 Sublime Text 的預覽內容方式了 **NativeScript 1.7 Announcement** [https://www.nativescript.org/blog/nativescript-1.7-announcement](https://www.nativescript.org/blog/nativescript-1.7-announcement) 開始集成對 Angular 2.0 的支持 **A WebAssembly Milestone: Experimental Support in Multiple Browsers** [https://hacks.mozilla.org/2016/03/a-webassembly-milestone/](https://hacks.mozilla.org/2016/03/a-webassembly-milestone/) WebAssembly 已經開始在 IE、Chromium 及 Firefox 中試點了，發展還是挺快的，目前的測試表明，比起 asm.js，它的體積減少 12%（gzip 后）另附：[Experimental support for WebAssembly in V8](http://v8project.blogspot.com/2016/03/experimental-support-for-webassembly.html) **Programming on Parallel Machines** [http://heather.cs.ucdavis.edu/parprocbook](http://heather.cs.ucdavis.edu/parprocbook) 一本介紹 OpenMP、CUDA 及 MPI 并行程序設計的的免費書 **The Atomic Game Engine goes Open Source!** [http://atomicgameengine.com/blog/announcement-2/](http://atomicgameengine.com/blog/announcement-2/) 又一款游戲引擎開源了，可以基于 JavaScript API 寫跨平臺游戲 **Introducing Feathers 2.0** [https://blog.feathersjs.com/introducing-feathers-2-0-aae8ae8e7920#.6v2hi1jwd](https://blog.feathersjs.com/introducing-feathers-2-0-aae8ae8e7920#.6v2hi1jwd) 一個基于 Express 和 Socket.io 的實時框架 **Substance** [http://substance.io/](http://substance.io/) 一個 Web 富文本編輯器 **Announcing Marko v3: From HTML to HTML-JS** [http://markojs.com/blog/announcing-marko-v3/](http://markojs.com/blog/announcing-marko-v3/) 有一個模板引擎，號稱比 React 快得多 **API Blueprint** [https://github.com/apiaryio/api-blueprint](https://github.com/apiaryio/api-blueprint) A powerful high-level API design language for web APIs. API Blueprint is simple and accessible to everybody involved in the API design lifecycle. Its syntax is concise yet expressive. With API Blueprint you can quickly prototype and model APIs to be created or describe already deployed mission-critical APIs. From a car to the largest Content Distribution Network (CDN) in the world. **Relay Fullstack** [https://github.com/lvarayut/relay-fullstack](https://github.com/lvarayut/relay-fullstack) Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It comes with many modern technologies; Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS. Relay Fullstack is also using Hot-reload to real time update the screen whenever any code changes. **More code review tools** [https://github.com/blog/2123-more-code-review-tools](https://github.com/blog/2123-more-code-review-tools) Effective code review catches bugs before they’re deployed, improves code consistency, and helps educate new developers. We’re adding new features to make code review on GitHub faster and more flexible. **Adobe又放大招，全面打通界面、交互、原型制作** [http://mp.weixin.qq.com/s?__biz=MjM5MjUwMzE2MA==&mid=430912047&idx=1&sn=e7bbbf60ba8c21de1134b13785937ade](http://mp.weixin.qq.com/s?__biz=MjM5MjUwMzE2MA==&mid=430912047&idx=1&sn=e7bbbf60ba8c21de1134b13785937ade) Adober XD.將全面打通界面、交互、原型的制作。 ## 產品及其它 **如何打造頂尖的技術研發團隊？Esty有這么些點滴實踐** [http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=410326234&idx=1&sn=f7f07933f7caf5b73c1a089a9790367c&scene=0#wechat_redirect](http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=410326234&idx=1&sn=f7f07933f7caf5b73c1a089a9790367c&scene=0#wechat_redirect) **Google的眼光** [http://www.yinwang.org/blog-cn/2016/03/17/google-vision](http://www.yinwang.org/blog-cn/2016/03/17/google-vision) 王垠又開始吐槽了 **TOMsInsight - 爭奪或泛濫：互聯網信息流背后** [http://mp.weixin.qq.com/s?__biz=MzA3NTcwOTIwNg==&mid=407924814&idx=1&sn=64e57550eff000847d918f626dbf3dec](http://mp.weixin.qq.com/s?__biz=MzA3NTcwOTIwNg==&mid=407924814&idx=1&sn=64e57550eff000847d918f626dbf3dec) TOMsInsight團隊從互聯網特定細分產業形態及從業者心態的視角切入，通過案例故事，和大家一起分析洞察互聯網生態。報告的主題是「爭奪或泛濫：互聯網信息流背后」。 **2016年度十大互聯網產品預言** [http://mp.weixin.qq.com/s?__biz=MjM5NDUyOTAwOA==&mid=403439293&idx=1&sn=f03958597ef3acc2bc2df74dbbf04b84](http://mp.weixin.qq.com/s?__biz=MjM5NDUyOTAwOA==&mid=403439293&idx=1&sn=f03958597ef3acc2bc2df74dbbf04b84) 我們預計2016年將會發生的互聯網產品大事件包括：知乎即將迎來一次大改版，在線教育平臺類產品將死，美柚和大姨嗎將要合并… **[譯]揭秘：Slack是如何一步步地變成史上增長最逆天的企業級應用的** [http://news.cnblogs.com/n/540917/](http://news.cnblogs.com/n/540917/) Slack 的增長有多逆天，下文會有一個動態數據圖來說明一切。本文徹底地剖析了 Slack 這款企業級應用是如何一步步完成在別人看來根本不可能的任務的，這其中覆蓋了從開發、測試、到市場投放的各個環節，該創業團隊在每個環節上的思考以及做法。另附：[企業軟件一定要做成獨立 App 嗎](http://www.geekpark.net/topics/214897) **我為什么堅持寫博客** [https://segmentfault.com/a/1190000004613367](https://segmentfault.com/a/1190000004613367) 著名 Android 公眾號: AndroidDeveloper「googdev」的作者分享自己寫 blog 的歷程，贊心得：如果你還沒有寫博客，那從現在開始開通個博客，走出第一步，如果你已經開始寫博客了，不要去奢望靠寫博客去賺錢，安心的寫博客提升自己能力，總結經驗，把它看成一種投資自己的手段，別把目標搞錯了，也許有一天你會突然發現，原來你已經走了這么遠，而且還有意外收獲！