FEX 技術周刊 - 2016/01/25 · FEX 技術周刊

## 深閱讀 **從有到優：百度前端接入技術的升級之路** [http://www.infoq.com/cn/news/2016/01/baidu-frontend-optimization](http://www.infoq.com/cn/news/2016/01/baidu-frontend-optimization) 介紹了百度在 golang、https、速度優化等方面的工作 **React.js Best Practices for 2016** [https://blog.risingstack.com/react-js-best-practices-for-2016/](https://blog.risingstack.com/react-js-best-practices-for-2016/) 2015 was the year of React with tons of new releases and developer conferences dedicated to the topic all over the world. The most interesting question for 2016: How should we write an application and what are the recommended libraries? **Reactive Data Flow in Angular 2** [http://blog.lambda-it.ch/reactive-data-flow-in-angular-2/](http://blog.lambda-it.ch/reactive-data-flow-in-angular-2/) Angular 2 prescribes no architecture for data flow. In comparision, a data flow architecture is a core concept of Cycle.js, and Cycle.js has opened my eyes to the possibility of implementing an Observable-based reactive data flow architecture in Angular 2\. I would encourage people to spend time looking at multiple frameworks and to promote the cross-pollination of ideas. **The [real] problem with JavaScript** [https://medium.com/unhandled-exception/the-real-problem-with-javascript-6b78cad97b6e](https://medium.com/unhandled-exception/the-real-problem-with-javascript-6b78cad97b6e)?[https://medium.com/@wob/the-sad-state-of-web-development-1603a861d29f](https://medium.com/@wob/the-sad-state-of-web-development-1603a861d29f) 討論 JS 、Web 開發、前端生態，起因是第2篇文章，觀點挺偏激的，引發了激烈的討論，不過的確指出了 Web 生態圈面臨的一些問題。第1篇文章比較中肯，指出了關鍵點在于：選擇和集成成本太高，作者也在試圖建立一個知識庫來解決技術選型問題，這是他采集信息的一個調研：?[Should I Use](https://alterx.typeform.com/to/ASrKf9)。這兩個文章還引申出兩個有意思的東西：[Magpie Developer](http://blog.codinghorror.com/the-magpie-developer/)、[The programming language cycle](http://quoderat.megginson.com/2006/03/06/programming-languages-of-distinction/)。相比之下，最近由?[真阿當-當我說前端基礎時，我在說什么](http://weibo.com/p/1001603933000810243086)?引發的國內前端界大討論就平和多了： -?[知乎-如何評價-當我說前端基礎時...](https://www.zhihu.com/question/39659757)?-?[Vue.js 作者-談談前端新技術](http://weibo.com/p/1001603934708609234550)?-?[為這幾天前端方向所撕的逼做個大總結](http://weibo.com/ttarticle/p/show?id=2309403934449430569795)?-[http://weibo.com/1693534972/DeAL1tRvy](http://weibo.com/1693534972/DeAL1tRvy)?前端是一個年輕的生態，我們的路還很長，懷著敬畏和謙遜之心、腳踏實地去解決路上的各種問題才是正道。 **Why React/Redux is an inferior paradigm** [http://staltz.com/why-react-redux-is-an-inferior-paradigm.html](http://staltz.com/why-react-redux-is-an-inferior-paradigm.html) Today after two years, I needed to write a large application using React and Redux, because I was targetting React Native, and Cycle Native is still experimental and doesn’t support things such as navigation/routing. I had hopes Redux would make React not so unwieldy, but now I can confirm React/Redux is an inferior paradigm compared to Cycle or Elm. **從無到有：微信后臺系統的演進之路** [http://www.infoq.com/cn/articles/the-road-of-the-growth-weixin-background](http://www.infoq.com/cn/articles/the-road-of-the-growth-weixin-background) 寫得非常詳細，都是干貨，有很多值得借鑒的地方 **微信Android客戶端架構演進之路** [http://www.infoq.com/cn/articles/wechat-android-app-architecture](http://www.infoq.com/cn/articles/wechat-android-app-architecture) 微信客戶端如何一步步成長起來的 **從技術細節看美團的架構** [http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=408215395&idx=1&sn=cc49792ef0948a140c37d99306363774](http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=408215395&idx=1&sn=cc49792ef0948a140c37d99306363774) 第一部分給大家介紹美團的技術架構，架構是如何演變的。第二部分講一講美團的業務架構，在業務方面如何做一些業務流程的優化。最后第三部分介紹O2O技術，如何實現線上和線下都用技術來做優化貫通的。另附： -?[看看 Medium 的開發團隊用了哪些技術](http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=408155245&idx=1&sn=fd1025c984dc209b8109a49b8514ddff)?-?[各大互聯網公司架構演進之路匯總](http://www.hollischuang.com/archives/1036) **Introduction to Computer Graphics** [http://math.hws.edu/graphicsbook/](http://math.hws.edu/graphicsbook/) 一本免費的圖形學書 **Using V8 code caching to minimize app load time on Android** [https://www.nativescript.org/blog/using-v8-code-caching-to-minimize-app-load-time-on-android](https://www.nativescript.org/blog/using-v8-code-caching-to-minimize-app-load-time-on-android) NativeScript 使用 V8 的代碼緩存功能來明顯提升第二次加載的性能 **Enable Node.js to run with Microsoft's ChakraCore engine** [https://github.com/nodejs/node/pull/4765](https://github.com/nodejs/node/pull/4765) Characore 剛開源就有微軟的大神給 Node.js 提 MR 讓 node.js 支持 ChakraCore 了 **我們用多一點點的辛苦，來交換多一點點的幸福——我的2015年終總結** [https://mp.weixin.qq.com/s?__biz=MzIwMTQwNTA3Nw==&mid=401373614&idx=1&sn=acff0881673f465d6e20757e4e4c6f3f](https://mp.weixin.qq.com/s?__biz=MzIwMTQwNTA3Nw==&mid=401373614&idx=1&sn=acff0881673f465d6e20757e4e4c6f3f) 一個 iOS 工程師的年度總結，做出了非常多的成績 **The Issue With Global Node Packages** [https://www.smashingmagazine.com/2016/01/issue-with-global-node-npm-packages/](https://www.smashingmagazine.com/2016/01/issue-with-global-node-npm-packages/) npm, which is bundled with Node.js, made this even easier by giving us quick and easy access to tools that others have created, which we install on our machines to access from wherever we are in our system. JavaScript was finally a “real” programming language. But with these new capabilities came a lot of best practices that needed to be discovered, because there were many new scenarios that wouldn’t be found in the browser. In particular, I’d like to discuss a practice that has been on my mind a lot lately that I think much of the community needs to evaluate. **JavaScript web apps considered valuable** [http://molily.de/javascript-web-apps/](http://molily.de/javascript-web-apps/) Recalling best practices for web applications that make heavy use of client-side JavaScript. The solution for bad JavaScript web apps is not to abandon them altogether, but to make better ones. We need to stop excluding JavaScript apps from “the web as it was intended”. JavaScript apps are “on the web” just like other sites. The potential of the web is enormous and we have just started. **Why I Left Gulp and Grunt for npm Scripts** [https://medium.com/@housecor/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8](https://medium.com/@housecor/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8) Did I really need Gulp? It turns out I didn’t. I decided to try using just npm scripts on my new open source project. The surprising thing is, I now prefer working with npm scripts over Gulp. Here’s why. **Enumify: better enums for JavaScript** [http://www.2ality.com/2016/01/enumify.html](http://www.2ality.com/2016/01/enumify.html) In this blog post, I present enumify, a library for implementing enums in JavaScript. The approach it takes is inspired by Java’s enums. **為Java說句公道話** [http://www.yinwang.org/blog-cn/2016/01/18/java/](http://www.yinwang.org/blog-cn/2016/01/18/java/) 王垠在點評各種語言，看看就就好，別當真。作為適應場景最廣、普及度最高的語言，在很多場景下 Java 不失為一個相對比較穩妥的選擇。就像這兩個文章所言：[Java for Everything](http://www.teamten.com/lawrence/writings/java-for-everything.html)?[Java at 20: How it changed programming forever](http://www.infoworld.com/article/2923773/java/java-at-20-how-java-changed-programming-forever.html) **一位Google程序員的算法學習之路** [https://mp.weixin.qq.com/s?__biz=MjM5NzMyMjAwMA==&mid=402578780&idx=1&sn=76686a4e824acc2e009141f734645c62](https://mp.weixin.qq.com/s?__biz=MjM5NzMyMjAwMA==&mid=402578780&idx=1&sn=76686a4e824acc2e009141f734645c62) 對算法有興趣的同學可以參考。 **JS 一定要放在 Body 的最底部么？聊聊瀏覽器的渲染機制** [http://segmentfault.com/a/1190000004292479](http://segmentfault.com/a/1190000004292479) 科普 JS 在頁面中的引入機制相關知識。 **Everything I know about responsive web typography with CSS** [http://www.zell-weekeat.com/responsive-typography](http://www.zell-weekeat.com/responsive-typography) I had to write complex code and I found myself struggling to create responsive websites under tremendous time pressure.Now, after months of hacking, I’ve finally created a solution that I’m happy to share with you. It’s called Typi.Typi is great because it allows me to use the practices I’ve learned, and at the same time solves most of the problems I’ve encountered in 3 simple steps. Let me explain these three steps by walking you through the practices I use when working with responsive typography. **Why you should consider Koa instead of Express with Node.js** [https://medium.com/@nil1ambda/why-you-should-use-koa-with-node-js-7c231a8174fa#.jf91mpuno](https://medium.com/@nil1ambda/why-you-should-use-koa-with-node-js-7c231a8174fa#.jf91mpuno) KOA 你值得擁有。 **The State Of Meteor** [https://www.discovermeteor.com/blog/the-state-of-meteor-part-1-what-went-wrong/](https://www.discovermeteor.com/blog/the-state-of-meteor-part-1-what-went-wrong/) [https://www.discovermeteor.com/blog/the-state-of-meteor-part-2-what-happens-next/](https://www.discovermeteor.com/blog/the-state-of-meteor-part-2-what-happens-next/) It’s no secret that Meteor is in a state of flux right now. Blaze is being threatened by React. Meteor’s homegrown package system might be replaced by NPM. And there’s even rumors that Tracker and Minimongo might eventually disappears as well. So it’s fair to ask: what does Meteor’s future look like? **HTML5實現APP和原生方式有多大差距，多少坑** [http://www.zhihu.com/question/36158085](http://www.zhihu.com/question/36158085) 這個話題過段時間就會被拉出來討論。 ## 新鮮貨 **GT** [https://github.com/TencentOpen/GT](https://github.com/TencentOpen/GT) 騰訊開源的 APP 上性能測試及調試工具，可以方便隨時監控 APP 的各種參數 **WebGL Off the Main Thread** [https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/](https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/) Firefox 44 開始可以使用 Web Workers 渲染 WebGL **Web Pages Will Soon Load Even Faster in Google Chrome** [http://www.omgchrome.com/brotli-http-compression-coming-to-chrome/](http://www.omgchrome.com/brotli-http-compression-coming-to-chrome/) [https://www.chromestatus.com/feature/5420797577396224](https://www.chromestatus.com/feature/5420797577396224) [http://google-opensource.blogspot.fr/2015/09/introducing-brotli-new-compression.html](http://google-opensource.blogspot.fr/2015/09/introducing-brotli-new-compression.html) 采用一種叫 Brotli?[https://github.com/google/brotli](https://github.com/google/brotli)?的壓縮技術來提升資源傳輸效率，Brotli (shortname "br") is used in WOFF 2.0 web fonts with great success. This is about making it available as an HTTP content-encoding method (e.g. Accept-Encoding: br). Advantages of Brotli over gzip: - significantly better compression density - comparable decompression speed。 **Coworkers** [https://github.com/tjmehta/coworkers](https://github.com/tjmehta/coworkers) 基于 RabbitMQ 的 Node 微服務框架 **J2ObjC 1.0** 1.0 正式發布了，不再是 beta 版 **OpenFace** [http://cmusatyalab.github.io/openface/](http://cmusatyalab.github.io/openface/) 一個基于深度學習的開源圖像識別庫 **Farbfeld** [http://tools.suckless.org/farbfeld/](http://tools.suckless.org/farbfeld/) 一個簡單的圖片文件格式，可以方便用程序進行處理，然后再轉成其它圖片 **React Web** [https://github.com/taobaofed/react-web](https://github.com/taobaofed/react-web) 兼容 React Native 的 Web 版本，方便代碼復用，但不清楚目前有多成熟 **Desktop Neo** [https://www.desktopneo.com/](https://www.desktopneo.com/) 一個桌面界面及交互的原型，突破了傳統窗口及文件夾的限制，看起來挺不錯的 **碼農 22 期·碼農論劍** [http://www.ituring.com.cn/book/1798](http://www.ituring.com.cn/book/1798) 世界上最好的編程語言是什么？相信每個程序員都有自己的答案。這期圍繞編程語言展開。 **Cocos Creator** [http://cocos.com/creator/](http://cocos.com/creator/) [https://mp.weixin.qq.com/s?__biz=MjM5ODAxNTM2NA==&mid=409587224&idx=1&sn=86b2285860f950157ce0a3390c70b052](https://mp.weixin.qq.com/s?__biz=MjM5ODAxNTM2NA==&mid=409587224&idx=1&sn=86b2285860f950157ce0a3390c70b052) Cocos Creator 是以內容創作為核心的游戲開發工具，在 Cocos2d-x 基礎上實現了徹底腳本化、組件化和數據驅動等特點，它是基于 Electron 開發的。 **Teach Yourself Deep Learning with TensorFlow and Udacity** [http://googleresearch.blogspot.com/2016/01/teach-yourself-deep-learning-with.html](http://googleresearch.blogspot.com/2016/01/teach-yourself-deep-learning-with.html) [http://blog.udacity.com/2016/01/putting-deep-learning-to-work.html](http://blog.udacity.com/2016/01/putting-deep-learning-to-work.html) 為了幫助工程師和數據科學家們更好地使用深度學習，谷歌在網站Udacity上推出了深度學習課程，由谷歌首席科學家Vincent Vanhoucke親自教授，而且完全免費。該課程包括4次講座，旨在解決從圖像識別到文本分析等問題。 **神秘的 W3C TAG Specification Reviews** [https://github.com/w3ctag/spec-reviews](https://github.com/w3ctag/spec-reviews) TAG，全名W3C技術架構組，是獨立于所有技術領域、由Tim Berners-Lee親自帶領的神秘小組，不過現在都公開在GitHub上了O網頁鏈接。TAG只有9人，成員每年公開海選，職責是從不同角度（安全數據性能等）審閱W3C的技術規范。 **10 Years of Web Inspector** [https://webkit.org/blog/5718/10-years-of-web-inspector/](https://webkit.org/blog/5718/10-years-of-web-inspector/) To commemorate the past 10 years of Web Inspector, we put together this timeline of major events and past blog posts for posterity. **Feature.js, a feature detection library in 1kb** [http://featurejs.com/](http://featurejs.com/) [https://github.com/viljamis/feature.js/](https://github.com/viljamis/feature.js/) A Fast, simple and lightweight browser feature detection library written in plain JavaScript. **CMS.js - The Javascript Site Generator** [http://cdmedia.github.io/cms.js/](http://cdmedia.github.io/cms.js/) CMS.js is fully client-side, Javascript site generator in the spirit of Jekyll that uses plain ol' HTML, CSS and Javascript to generate your website. It takes your content, renders Markdown and delivers a complete website in Single-Page App fashion...without the aid of server-side scripting (no Node.js, PHP, Ruby, etc.). **es6-cheatsheet** [https://github.com/DrkSephy/es6-cheatsheet](https://github.com/DrkSephy/es6-cheatsheet) A cheatsheet containing ES2015 [ES6] tips, tricks, best practices and code snippet examples for your day to day workflow. **2^74207281-1 is Prime** [http://www.mersenne.org/primes/?press=M74207281](http://www.mersenne.org/primes/?press=M74207281) 目前發現的最大的素數 **這十二行代碼是如何讓瀏覽器爆炸的** [http://www.freebuf.com/articles/terminal/93807.html](http://www.freebuf.com/articles/terminal/93807.html) **Making ReactJS Realtime With Websockets** [https://blog.pusher.com/making-reactjs-realtime-with-websockets/](https://blog.pusher.com/making-reactjs-realtime-with-websockets/) This quick tutorial will lead you through building a basic, group chat app ## 產品及其它 **7年創業路，美麗說的無奈與宿命** [http://36kr.com/p/5042595.html](http://36kr.com/p/5042595.html) **Why I Quit my Dream Job at Ubisoft** [http://gingearstudio.com/why-i-quit-my-dream-job-at-ubisoft](http://gingearstudio.com/why-i-quit-my-dream-job-at-ubisoft) 作者是 Ubisoft 的軟件架構師，離開穩定工作去做獨立游戲的故事 **阿朱：從50到5000，從技術到人** [http://segmentfault.com/a/1190000004343120](http://segmentfault.com/a/1190000004343120) **WeKan-The open-source Trello-like kanban** [https://wekan.io/](https://wekan.io/) **管理的本質是激發每一個人的善意** [http://mp.weixin.qq.com/s?__biz=MzA3Mjc3NTQxMQ==&mid=401563903&idx=2&sn=9ced9bbe3ded34a02ca65c95224f6466](http://mp.weixin.qq.com/s?__biz=MzA3Mjc3NTQxMQ==&mid=401563903&idx=2&sn=9ced9bbe3ded34a02ca65c95224f6466) 管理的本質，其實就是激發和釋放每一個人的善意。對別人的同情，愿意為別人服務，這是一種善意；愿意幫人家改善生存環境、工作環境，也是一種善意。領導力本身的定義是有人跟隨，有人跟隨你，你就是領導。最重要的，就是你把人領導到什么方向上。 **賺錢的事與值錢的事** [http://mp.weixin.qq.com/s?__biz=MjM5OTM5OTAyMQ==&mid=403244373&idx=1&sn=5045446fc7605b655b9523c195a118a8](http://mp.weixin.qq.com/s?__biz=MjM5OTM5OTAyMQ==&mid=403244373&idx=1&sn=5045446fc7605b655b9523c195a118a8) 賺錢的事，難在收手。好似股票要拋出，才能論輸贏。而做值錢的事，難在，看清存在于未來時空運作的新產業結構，然后全力以赴，以最快的速度把它搭建出來。定戰略、配資源，說服、說服、堅持、堅持、整合、整合，死扛到結構開始運作并全量覆蓋的那一天。