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

## 深閱讀 **Programming Language Theory** [https://github.com/steshaw/plt](https://github.com/steshaw/plt) 程序語言理論的相關書籍和資料匯總，方便想深入的同學學習 **架構的本質是管理復雜性** [http://www.open-open.com/lib/view/open1460209702222.html](http://www.open-open.com/lib/view/open1460209702222.html) 文中提到的 BFF - Backend for frontends 非常值得關注，相關資料： -?[Backends For Frontends - Single-purpose Edge Services for UIs and external parties](http://samnewman.io/patterns/architectural/bff/) -?[BFF - Backend for frontends](https://www.thoughtworks.com/radar/techniques/bff-backend-for-frontends) **[譯]如果有人問你數據庫的原理，叫他看這篇文章** [http://blog.jobbole.com/100349/](http://blog.jobbole.com/100349/) 關系型數據庫非常有趣，因為它們是基于實用而且可復用的概念。如果你對了解一個數據庫感興趣，但是從未有時間或意愿來刻苦鉆研這個內容廣泛的課題，你應該喜歡這篇文章。 **10 things you probably didn’t know about JavaScript (React and Node.js) and GraphQL development at Facebook** [https://hashnode.com/post/10-things-you-probably-didnt-know-about-javascript-react-and-nodejs-and-graphql-development-at-facebook-cink0r0e500h5io53fpl7ediu](https://hashnode.com/post/10-things-you-probably-didnt-know-about-javascript-react-and-nodejs-and-graphql-development-at-facebook-cink0r0e500h5io53fpl7ediu) 許多關于 Facebook 內部使用 JS 的八卦，比如 Facebook app 已經使用 React Native 了，以及少數地方開始嘗試 React 后端渲染（畢竟絕大部分代碼是 PHP，所以沒用 Node，而是直接用 V8） **After a year of using NodeJS in production** [http://geekforbrains.com/post/after-a-year-of-nodejs-in-production](http://geekforbrains.com/post/after-a-year-of-nodejs-in-production) This is a follow-up to my original “Why I’m switching from Python to Node.js” post. I wrote it just over a year ago in response to my frustrations with Python and why I was going to try Node instead. Fast-forward a year of in-house CLI tools, client projects and updates to our company’s products and this is what I’ve learned. Not only about Node, but Javascript in general as well. **Stack Overflow: How We Do Deployment - 2016 Edition** [http://nickcraver.com/blog/2016/05/03/stack-overflow-how-we-do-deployment-2016-edition/](http://nickcraver.com/blog/2016/05/03/stack-overflow-how-we-do-deployment-2016-edition/) We’ve talked about Stack Overflow’s architecture and the hardware behind it. The next most requested topic was Deployment. How do we get code a developer (or some random stranger) writes into production? Let’s break it down. Keep in mind that we’re talking about deploying Stack Overflow for the example, but most of our projects follow almost an identical pattern to deploy a website or a service. **[譯]CSS vs JS動畫：誰更快？** [http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html](http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html) Javascript 動畫怎么可能總是和 CSS transition 一樣快，甚至更快呢？到底是什么秘密呢？Adobe 和 Google 是怎么做到讓他們的富媒體移動網站的速度和 native app 媲美的？這篇文章會一步步告訴你為什么基于 Javascript 的 DOM 動畫庫（比如 Velocity.js 和 GSAP）能夠比 jQuery 和基于 CSS 的動畫庫更高效。 **A Taste of JavaScript’s New Parallel Primitives** [https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/](https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/) TL;DR – We’re extending JavaScript with a primitive API that lets programmers use multiple workers and shared memory to implement true parallel algorithms in JavaScript. **Meaningful CSS: Style Like You Mean It** [http://alistapart.com/article/meaningful-css-style-like-you-mean-it](http://alistapart.com/article/meaningful-css-style-like-you-mean-it) does our CSS abuse classes so mercilessly, and why do we litter our markup with author-defined classes? Why can’t our CSS be as semantic and meaningful as our markup? Why can’t both be more semantic and meaningful, moving forward in tandem? **Authorization with JSON Web Tokens** [http://datamelon.io/blog/2016/managing-app-security-with-jwts.html](http://datamelon.io/blog/2016/managing-app-security-with-jwts.html) APIs need to verify who you are and what you’re allowed to do. JSON Web Tokens or “jots” provide a standardized means for accomplishing this. This article explains the underlying mechanics of how JWTs simplify authorization and authentication. **Node.js process load balance performance: comparing cluster module, iptables and Nginx** [https://medium.com/@fermads/node-js-process-load-balancing-comparing-cluster-iptables-and-nginx-6746aaf38272#.u6p6skycd](https://medium.com/@fermads/node-js-process-load-balancing-comparing-cluster-iptables-and-nginx-6746aaf38272#.u6p6skycd) Node is single threaded and to use more CPU cores we must create new processes and distribute the load. This is a performance comparison between three ways of doing process load balancing for Node.js web applications. **Animated Heat Distortion Effects with WebGL** [http://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/](http://tympanus.net/codrops/2016/05/03/animated-heat-distortion-effects-webgl/) A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text. **史上最全的“大數據”學習資源** [https://yq.aliyun.com/articles/37308](https://yq.aliyun.com/articles/37308) [https://yq.aliyun.com/articles/37396](https://yq.aliyun.com/articles/37396) 當今“大數據”一詞的重點其實已經不僅在于數據規模的定義，它更代表著信息技術發展進入了一個新的時代，代表著爆炸性的數據信息給傳統的計算技術和信息技術帶來的技術挑戰和困難，代表著大數據處理所需的新的技術和方法，也代表著大數據分析和應用所帶來的新發明、新服務和新的發展機遇。云棲社區組織翻譯了GitHub Awesome Big Data資源，供大家參考。本資源類型主要包括：大數據框架、論文等實用資源集合。 **數組的完全隨機排列** [https://www.h5jun.com/post/array-shuffle.html](https://www.h5jun.com/post/array-shuffle.html) Array.prototype.sort 方法被許多 JavaScript 程序員誤用來隨機排列數組。但是，卻有非常嚴重的問題，甚至是完全錯誤。因此，當我們需要實現類似洗牌的功能的時候，還是應該采用巧妙的經典洗牌算法，它不僅僅具有完全隨機性還有很高的效率。月影大神很高產，還有一篇[Promise 與定時器](https://www.h5jun.com/post/wait-promise.html)?。 **微服務實踐-系列** [http://dockone.io/article/1266](http://dockone.io/article/1266) 第一篇中介紹了微服務架構模式，并且討論了微服架構的優缺點；接續文章討論了微服務架構不同方面：使用API網關，進程間通信，服務發現，事件驅動數據管理以及部署微服務。本篇，我們將探討將應用從單體式架構遷移到微服務架構需要考慮的策略。另附：[每天都在談SOA和微服務，但你真的理解什么是服務嗎？](http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659597085&idx=1&sn=41d64433887bc2023f0c9b8c503560a9) **動態追蹤技術 - Dtrace、SystemTap、火焰圖** [http://mp.weixin.qq.com/s?__biz=MjM5ODQ2MDIyMA==&mid=2650712266&idx=1&sn=54d909d240eb701ae48467dc798ddc7f](http://mp.weixin.qq.com/s?__biz=MjM5ODQ2MDIyMA==&mid=2650712266&idx=1&sn=54d909d240eb701ae48467dc798ddc7f) [http://mp.weixin.qq.com/s?__biz=MjM5ODQ2MDIyMA==&mid=2650712256&idx=1&sn=3d0cc438efa0f518d49e736918fbb861](http://mp.weixin.qq.com/s?__biz=MjM5ODQ2MDIyMA==&mid=2650712256&idx=1&sn=3d0cc438efa0f518d49e736918fbb861) 動態追蹤技術其實是一種后現代的高級調試技術。它可以幫助軟件工程師以非常低的成本，在非常短的時間內，回答一些很難的關于軟件系統方面的問題，從而更快速地排查和解決問題。 **前Googler：Docker從上手到差點放棄** [http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=2651659581&idx=1&sn=c5ca9f41d7d8e415b5ef961fee9fafac](http://mp.weixin.qq.com/s?__biz=MzA4Nzg5Nzc5OA==&mid=2651659581&idx=1&sn=c5ca9f41d7d8e415b5ef961fee9fafac) 可以了解下 Docker 使用過程中的一些實踐經驗。 ## 新鮮貨 **NativeScript 2.0** [https://www.nativescript.org/blog/](https://www.nativescript.org/blog/)?nativescript-2.0—the-best-way-to-build-cross-platform-native-mobile-apps 基于 snapshot 改善了 Android 下的啟動性能，然而由于設計本身的原因，它需要加載大量的類，所以我估計不會太好 **New APIs to help developers improve scroll performance** [http://blog.chromium.org/2016/05/new-apis-to-help-developers-improve.html](http://blog.chromium.org/2016/05/new-apis-to-help-developers-improve.html) Chrome 51 開始支持這個可以讓 Web 擺脫滾動卡頓的 API，早就該有了。。。 **NativeBase** [http://nativebase.io/](http://nativebase.io/) 為 React Native 提供實用的 UI 組件，方便快速開發界面 **Vue.js 2.0 preview** [https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.42wjp8ist](https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.42wjp8ist) 也開始用 Virtual DOM 了，優勢是體積小點？ **Aframe - Building blocks for the virtual reality web** [https://aframe.io/](https://aframe.io/) [https://github.com/aframevr/aframe/](https://github.com/aframevr/aframe/) A-Frame is a framework for creating virtual reality web experiences. **Pants: A fast, scalable build system** [http://www.pantsbuild.org/](http://www.pantsbuild.org/) Twitter 也推出了自己的編譯系統，類似 Google 的 Bazel，適合大公司的源碼編譯及依賴管理 **FlexboxLayout** [https://github.com/google/flexbox-layout](https://github.com/google/flexbox-layout) 竟然是 Google 出的 Flexbox 在 Android 下的實現 **OverAPI.com - Collecting all the cheat sheets** [http://overapi.com/](http://overapi.com/) 非常全的 API Cheat Sheets。 **json-server** [https://github.com/typicode/json-server](https://github.com/typicode/json-server) Get a full fake REST API with zero coding in less than 30 seconds (seriously) **vConsole：針對手機網頁的前端 console 調試面板** [https://github.com/WechatFE/vConsole](https://github.com/WechatFE/vConsole) vConsole 是一個網頁前端調試面板，專為手機 web 頁面量身設計，幫助開發者更為便捷地進行開發調試工作。 **谷歌Chrome超過微軟IE正式成為第一大桌面瀏覽器** [http://www.techweb.com.cn/internet/2016-05-03/2326252.shtml](http://www.techweb.com.cn/internet/2016-05-03/2326252.shtml) 4月份谷歌Chrome的市場份額為41.6%，高于3月份的39%。而微軟IE的市場份額則從43.4%下降至41.3%。 **小心，這詭異的圖片很可能要了你服務器的命** [http://weibo.com/ttarticle/p/show?id=2309403971770167221459](http://weibo.com/ttarticle/p/show?id=2309403971770167221459) 最近各種互聯網網站的圖片上傳等功能成了黑客重點關注對象，因為在一個特殊的場景下，這些功能可以輕易秒殺對方網站的服務器控制權！比如傳一張圖就給服務器關機，或執行 “rm -fr /”，或竊取用戶敏感數據等，而造成這些后果的只是一張特殊的圖片… **CSST - CSS Text Transformation** [https://github.com/zswang/csst](https://github.com/zswang/csst) 一種用 CSS 跨域傳輸文本的方案。相比 JSONP 更為安全，不需要執行跨站腳本。原理是通過讀取 CSS3 content 屬性獲取傳送內容。CSST 是一種新增的跨域通信方式，實戰還是推薦 CORS。 ## 產品及其它 **務實至上：“PHP之父” Rasmus Lerdorf 訪談錄** [http://geek.csdn.net/news/detail/71830](http://geek.csdn.net/news/detail/71830) “PHP之父” Rasmus Lerdorf 性格直接坦蕩，措辭簡練精辟，字里行間透著一股“務實至上”的精神氣。贊：技術只是解決問題的工具，是抽象的錘頭、鋸子，并沒什么了不起，而真正振奮人心的是用技術提升了百萬人的生活品質；語言只是解決問題的工具，不是受人膜拜的宗教。 **Facebook的項目開發流程和工程師的績效管理機制** [http://mp.weixin.qq.com/s?__biz=MzA3ODQwOTU3Nw==&mid=2650356144&idx=1&sn=cfd57a991721336c488cb18f9f2a8fd7](http://mp.weixin.qq.com/s?__biz=MzA3ODQwOTU3Nw==&mid=2650356144&idx=1&sn=cfd57a991721336c488cb18f9f2a8fd7) 可以了解下 fb 在開發流程、kpi 方面的一些機制。 **碼農自己當老家新厝的設計師** [http://ucren.com/blog/archives/675](http://ucren.com/blog/archives/675) 工程師中的設計師，佩服。另附：一位設計師的碼農之路?[上](http://mp.weixin.qq.com/s?__biz=MzI2NjI2NDM5Nw==&mid=2247483673&idx=1&sn=1bc21055b6bb37341f4bca24845c894d)?[下](http://mp.weixin.qq.com/s?__biz=MzI2NjI2NDM5Nw==&mid=2247483675&idx=1&sn=8c11ebf5d20ead1e0a7ba935ad7a937c)。向這些跨界人才致敬。 **IT業也是制造業，日本IT產業奇葩在哪兒？** [http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650992364&idx=1&sn=e193a5316f430904753937395c2de9ec](http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650992364&idx=1&sn=e193a5316f430904753937395c2de9ec) 在歐洲，Software as a science（軟件即科學）；在美國，Software as a business（軟件即商業）；在印度，Software as a service（軟件即服務）；在日本，Software as a production（軟件即制造）。 **地球仍有許多未解之謎為何浪費錢在太空？看馬斯克怎么回答** [http://view.inews.qq.com/a/20160503A07H0200](http://view.inews.qq.com/a/20160503A07H0200) 特斯拉項目是想用電動汽車來取代世界上的現有車輛；SpaceX公司為了將火星建成殖民地。汽車制造和航空航天都是成熟的產業領域，但無論如何，Musk想同時變革這兩個行業，而且他要在一代人的時間里做到這些。