FEX 技術周刊 - 2016/02/22 · FEX 技術周刊

## 深閱讀 **Why I No Longer Use MVC Frameworks** [http://www.infoq.com/articles/no-more-mvc-frameworks](http://www.infoq.com/articles/no-more-mvc-frameworks) The worst part of my job these days is designing APIs for front-end developers. The conversation goes inevitably as:Dev – So, this screen has data element x,y,z… could you please create an API with the response format {x: , y:, z: } Me – Ok. I don’t even argue anymore. Projects end up with a gazillion APIs tied to screens that change often, which, by “design” require changes in the API and before you know it, you end up with lots of APIs and for each API many form factors and platform variants. A couple of months ago, I started a journey to understand why we ended up here and what could be done about it, a journey that lead me to question the strongest dogma in application architecture, MVC, and where I touched the sheer power of reactive and functional programming, a journey focused on simplicity and scraping the bloat that our industry is so good at producing. 文章的信息量很大，索引了很多優質資源，對 React、Angular、MVC、GraphQL 等的分析還是挺不錯的，對比了各種 Web應用開發方式后，提出了一種和 MVC 同等 Level 的新模式：SAM pattern (State-Action-Model), a reactive, functional, pattern with its roots in React.js and TLA+，值得認真閱讀。 **The Error Model** [http://joeduffyblog.com/2016/02/07/the-error-model/](http://joeduffyblog.com/2016/02/07/the-error-model/) The basic question an Error Model seeks to answer is: how do “errors” get communicated to programmers and users of the system? Pretty simple, no? So it seems. This journey was long and winding. To tell the tale, I’ve broken this post into six major areas: - Ambitions and Learnings - Bugs Aren’t Recoverable Errors! - Reliability, Fault-Tolerance, and Isolation - Bugs: Abandonment, Assertions, and Contracts - Recoverable Errors: Type-Directed Exceptions - Retrospective and Conclusions **Is It Time for Swift?** [https://realm.io/news/ben-sandofsky-time-for-swift/](https://realm.io/news/ben-sandofsky-time-for-swift/) 對于現在是否使用 Swift 的分析，還比較客觀 **Beginner Webpack Tutorial** [https://github.com/AriaFallah/WebpackTutorial](https://github.com/AriaFallah/WebpackTutorial) 相對于官方文檔而言比較易懂的學習webpack的教程 **Finessing?`feColorMatrix`** [http://alistapart.com/article/finessing-fecolormatrix](http://alistapart.com/article/finessing-fecolormatrix) 比較詳細的講解了如何通過feColorMatrix來對圖片顏色進行操作從而到達濾鏡的效果 **What Sucks About React Native** [https://medium.com/infinite-red/what-sucks-about-react-native-c38a307a210f#.r8ql10q3](https://medium.com/infinite-red/what-sucks-about-react-native-c38a307a210f#.r8ql10q3) 對 React Native 現有問題的吐槽 **Introducing the B3 JIT Compiler** [https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/](https://webkit.org/blog/5852/introducing-the-b3-jit-compiler/) WebKit 自己弄了個 JIT 編譯器來取代之前的 LLVM，減少了 4 倍多的編譯時間，這篇文章詳細介紹了新的編譯器是如何優化的 **Issue and Pull Request templates** [https://github.com/blog/2111-issue-and-pull-request-templates](https://github.com/blog/2111-issue-and-pull-request-templates) It’s hard to solve a problem when important details are missing. Now project maintainers can add templates for Issues and Pull Requests to projects, helping contributors add the right details at the start of a thread. This is the first of many improvements to Issues and Pull Requests that we’re working on based on feedback from the community. **Raw WebGL** [http://nickdesaulniers.github.io/RawWebGL/#/](http://nickdesaulniers.github.io/RawWebGL/#/) 介紹了 WebGL 相關的知識，贊開篇：There’s more to JS than jQuery. There’s more to WebGL than Three.js. Graphics programming is a rabbit hole that is infinitely deep **Implementing Content Security Policy** [https://hacks.mozilla.org/2016/02/implementing-content-security-policy/](https://hacks.mozilla.org/2016/02/implementing-content-security-policy/) The add-ons team recently completed work to enable Content Security Policy (CSP) on addons.mozilla.org (AMO). This article is intended to cover the basics of implementing CSP, as well as highlighting some of the issues that we ran into implementing CSP on AMO. **NW.js and Electron compared** [https://www.xplatform.rocks/2016/02/09/nw-js-vs-electron/](https://www.xplatform.rocks/2016/02/09/nw-js-vs-electron/) There are some differences when it comes to architecture and usage from a developers perspective. Make yourself comfortable with Electron and NW.js. Decide which one fits better to your needs. Currently both are under active development, so chances are pretty good that both exists for long time from now. **ES6 const is not about immutability** [https://mathiasbynens.be/notes/es6-const](https://mathiasbynens.be/notes/es6-const) As a result, it makes sense to use let and const as follows in your ES6 code: use const by default; only use let if rebinding is needed; var shouldn’t be used in ES6; **當前端也擁有 Server 的能力** [http://www.barretlee.com/blog/2016/02/16/when-fe-has-the-power-of-server/](http://www.barretlee.com/blog/2016/02/16/when-fe-has-the-power-of-server/) Cache API 是瀏覽器 Request/Response 的緩存管理工具，其使用風格和運用場景讓我瞬間聯想到了 ServiceWorker 和 Fetch API，相信很多同學也多次看到過這兩個東西，本文會對它們做一個簡潔的介紹，并談一談我對這些新玩具的看法。 **數據處理平臺架構中的SMACK組合：Spark、Mesos、Akka、Cassandra以及Kafka** [https://yq.aliyun.com/articles/5590?spm=5176.100238.yqhn2.2.djhcWz](https://yq.aliyun.com/articles/5590?spm=5176.100238.yqhn2.2.djhcWz) 文章著重探討如何利用SMACK（即Spark、Mesos、Akka、Cassandra以及Kafka）堆棧構建可擴展數據處理平臺。雖然這套堆棧僅由數個簡單部分組成，但其能夠實現大量不同系統設計。除了純粹的批量或者流處理機制之外，我們亦可借此實現復雜的Lambda以及Kappa架構。 **Large Scale CSS Refactoring at trivago** [http://tech.trivago.com/2016/02/02/large-scale-css-refactoring-at-trivago/](http://tech.trivago.com/2016/02/02/large-scale-css-refactoring-at-trivago/) 重構 5w 行 SCSS 代碼的經驗，最終減少了 20% 的代碼 **So you want to write a package manager** [https://medium.com/@sdboyer/so-you-want-to-write-a-package-manager-4ae9c17d9527#.4vd7z4on](https://medium.com/@sdboyer/so-you-want-to-write-a-package-manager-4ae9c17d9527#.4vd7z4on) Now, I also have an ulterior motive: right now, the Go community actually DOES need proper package management, and I’m contributing to an approach. As such, I’ll be returning often to Go as the main reference case, and there’s a dedicated Go section at the end. But the real focus here is general package management design principles and domain constraints, and how they may apply in different languages. **30 Days of Swift** [https://github.com/allenwong/30DaysofSwift](https://github.com/allenwong/30DaysofSwift) 作者親身實踐30天每天做一個demo來學習Swift，對IOS開發有興趣的同學可以參考 **Getting Ready For HTTP/2: A Guide For Web Designers And Developers** [https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/](https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/) 作者闡述了http2.0 與之前版本的一些區別，傳統意義上的一些性能優化方案例如打包等，在http2.0時代或許會帶來更差的性能。同時講了如果要遷移到http2.0需要注意些什么問題。 **Implementing Content Security Policy** [https://hacks.mozilla.org/2016/02/implementing-content-security-policy/](https://hacks.mozilla.org/2016/02/implementing-content-security-policy/) 作者講述了CSP的有關概念以及如何進行CSP防御。 **動態口令令牌是什么原理** [http://blog.jobbole.com/97877/#comment-155654](http://blog.jobbole.com/97877/#comment-155654) 文章介紹了我們平時使用的token的具體工作原理 **Dapper：谷歌的大規模分布式跟蹤系統** [http://blog.jobbole.com/69642/](http://blog.jobbole.com/69642/) 文章介紹了Dapper這個Google的生產環境下的分布式系統跟蹤平臺，包括其設計角度上需要關注的因素、部署情況、對負載的性能影響情況、使用經驗等。拋開分布式跟蹤這個點，其實任何性能監控平臺也都是需要注意上述這些因素。 **Jekyll 代碼高亮的幾種選擇** [http://blog.csdn.net/qiujuer/article/details/50419279](http://blog.csdn.net/qiujuer/article/details/50419279) 使用 GitHub Pages 搭建個人博客或者項目demo之類，如果不滿足官方文檔給出的默認代碼高亮風格，可以參考本文給出的幾種代碼高亮風格來進行配置。 **Why npm Scripts** [https://css-tricks.com/why-npm-scripts/](https://css-tricks.com/why-npm-scripts/) 文章吐槽了Grunt, Gulp等工具，介紹了如何通過npm scripts 來更便捷的幫助我們進行編譯、打包等操作。 **Smooth Game Animations in React** [https://medium.com/tech-quizlet/smooth-game-animations-in-react-df43ece916c8](https://medium.com/tech-quizlet/smooth-game-animations-in-react-df43ece916c8) 文章通過react-tween-state、VelocityJS、CSS keyframes并結合demo，給出了3種不同的animation的解決方案。 **Stack Overflow: The Architecture - 2016 Edition** [http://nickcraver.com/blog/2016/02/17/stack-overflow-the-architecture-2016-edition/](http://nickcraver.com/blog/2016/02/17/stack-overflow-the-architecture-2016-edition/) 可以了解下這個我們頻繁使用的網站背后的技術。 ## 新鮮貨 **Angular 1.5.0 - ennoblement-facilitation has been released!** [http://angularjs.blogspot.jp/2016/02/angular-150-ennoblement-facilitation.html](http://angularjs.blogspot.jp/2016/02/angular-150-ennoblement-facilitation.html) 這一版主要是為了讓大家更平滑地升級到 Anguar 2 **medium-editor** [https://yabwe.github.io/medium-editor/](https://yabwe.github.io/medium-editor/) 一款輕量級的原生js編寫的文本編輯器toolbar **CSSgram** [http://una.im/CSSgram/](http://una.im/CSSgram/) 一款非常輕量級的CSS庫，用于為圖片添加濾鏡達到像 Instagram 那樣的濾鏡效果 **mapillary-js** [https://github.com/mapillary/mapillary-js](https://github.com/mapillary/mapillary-js) WebGL JavaScript library for displaying street level photos from Mapillary **SamsaraJS** [https://github.com/dmvaldman/samsara](https://github.com/dmvaldman/samsara) SamsaraJS is a functional reactive library for animating layout. It provides a language for positioning, orienting and sizing DOM elements and animating these properties over time. **30+ Free Pure HTML5 And CSS3 Loaders and Preloaders** [http://www.instantshift.com/2016/01/22/free-html5-css3-loaders-preloaders/](http://www.instantshift.com/2016/01/22/free-html5-css3-loaders-preloaders/) 30款純CSS3和html5制作的頁面loading效果 **Preact** [http://developit.github.io/preact/](http://developit.github.io/preact/) 精簡的 React 實現，支持大部分功能，體積只有 3k **W3C宣布正式設立Web認證工作組** [https://www.w3.org/Webauthn/](https://www.w3.org/Webauthn/) 致力于研發采用加密操作取代簡單口令認證方法的技術標準。這一努力將為Web應用開發者提供一個不同于以往簡單口令認證的、更加安全和靈活的Web認證方法，從而更好的保護網站及應用的內容O網頁鏈接 **CSS Indexes** [https://drafts.csswg.org/indexes/](https://drafts.csswg.org/indexes/) A listing of every term defined by CSS specs. **The only framework that makes responsive-email easy** [https://github.com/mjmlio](https://github.com/mjmlio) [https://mjml.io/](https://mjml.io/) MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices. **TypeScript 1.8 Beta版新增JavaScript集成、無狀態函數式組件等功能** [http://www.infoq.com/cn/news/2016/02/announcing-typescript-18](http://www.infoq.com/cn/news/2016/02/announcing-typescript-18) TypeScript 1.8 Beta版發布，該版本的編譯器可以將JavaScript同TypeScript文件一起編譯，這無疑會促進更多 JavaScript 向 TypeScript 的遷移。此外還包含許多其他新特性，比如簡化的React props類型管理、字符串常值類型、經過改進的union/intersection類型推斷等。 **Kotlin 1.0 Released: Pragmatic Language for JVM and Android** [http://blog.jetbrains.com/kotlin/2016/02/kotlin-1-0-released-pragmatic-language-for-jvm-and-android/](http://blog.jetbrains.com/kotlin/2016/02/kotlin-1-0-released-pragmatic-language-for-jvm-and-android/) Kotlin is a pragmatic programming language for JVM and Android that combines OO and functional features and is focused on interoperability, safety, clarity and tooling support. Being a general-purpose language, Kotlin works everywhere where Java works: server-side applications, mobile applications (Android), desktop applications. **iTerm2 Version 3** [https://iterm2.com/version3.html](https://iterm2.com/version3.html) 增加了非常多實用的細節功能 **React-designer** [http://fatiherikli.github.io/react-designer/](http://fatiherikli.github.io/react-designer/) React 的 SVG 編輯組件 **the Web Speech API** [https://hacks.mozilla.org/2016/01/firefox-and-the-web-speech-api/](https://hacks.mozilla.org/2016/01/firefox-and-the-web-speech-api/) 文章講述了 web speech API 目前的支持情況，之后通過一個web端的語音識別來改變頁面背景色的一個demo來闡述如何使用 web speech API, 最后又分析了這個API具體是如何實現的。 **PCjs: The Virtual IBM PC** [http://www.pcjs.org/](http://www.pcjs.org/) JavaScript 寫的 IBM PC 模擬器，可以運行 DOS 及 Windows 1.01 **Incrementally Migrating JavaScript to TypeScript** [https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88](https://medium.com/@clayallsopp/incrementally-migrating-javascript-to-typescript-565020e49c88) 文章簡要的介紹了 TypeScript 相對 JavaScript 有哪些好處，然后通過一個例子，介紹如何在TypeScript1.8 版本來進行 JavaScript 到 TypeScript 的遷移。 **jsPDF** [https://github.com/MrRio/jsPDF](https://github.com/MrRio/jsPDF) 一款在客戶端導出PDF的js庫 **MERN** [https://github.com/Hashnode/mern-starter](https://github.com/Hashnode/mern-starter) MERN is a scaffolding tool which makes it easy to build isomorphic apps using Mongo, Express, React and NodeJS. It minimizes the setup time and gets you up to speed using proven technologies. **Frontend development tools are damn complex. Let us fix it** [https://medium.com/@lavrton/frontend-development-tools-are-damn-complex-let-us-fix-it-56b3ff46ca8d#.ojkcfg3z](https://medium.com/@lavrton/frontend-development-tools-are-damn-complex-let-us-fix-it-56b3ff46ca8d#.ojkcfg3z) 介紹了一個叫 easyfront 的工具 ## 產品及其它 **各地地青回鄉見聞** [http://36kr.com/p/5043283.html](http://36kr.com/p/5043283.html) [http://www.huxiu.com/article/139166/1.html](http://www.huxiu.com/article/139166/1.html) 了解下真實的中國。 **We Need A Better PC** [https://blog.dcpos.ch/someone-please-make-a-decent-pc](https://blog.dcpos.ch/someone-please-make-a-decent-pc) What I want is a computer with: Decent build quality; Decent performance and battery life; A decent website. It doesn’t have to be an icon of web design, like apple.com. It can be simple and utilitarian, like an Amazon page. It just has to be honest and up to date. It should contain pictures, text, and a Buy button; A clean OS without crapware or malware factory installed **視界不同，世界不同** [http://mp.weixin.qq.com/s?__biz=MzI0MjA1Mjg2Ng==&mid=401611900&idx=1&sn=6b5ff41ab4d7bfeec019af063d1bd687&scene=0](http://mp.weixin.qq.com/s?__biz=MzI0MjA1Mjg2Ng==&mid=401611900&idx=1&sn=6b5ff41ab4d7bfeec019af063d1bd687&scene=0) 很多人都是在做同樣的事情，都是在完成同樣的工作，為什么有的人起來的特別快，有的人就差很多。主要在于我們看問題的角度，在平淡的信息中，找到價值點。 **Why I killed my standing desk** [https://medium.com/swlh/why-i-killed-my-standing-desk-891174f9d6e6#.d9biqiob2](https://medium.com/swlh/why-i-killed-my-standing-desk-891174f9d6e6#.d9biqiob2) 作者嘗試了站立辦公，結果發現太難受了，就放棄了，還建議了其它方法 **Uber’s Design Meltdown** [http://www.elischiff.com/blog/2016/2/16/ubers-atomic-meltdown](http://www.elischiff.com/blog/2016/2/16/ubers-atomic-meltdown) Most of us have come to accept the new Uber redesign as normal–after all, it has been a whole two weeks since its reveal. Nevertheless, it is well worth examining this prime example of both design and managerial dysfunction. **Nature：摩爾定律時代落幕** [http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=402416047&idx=2&sn=96456c905821513ca62f9e65d41aa91d](http://mp.weixin.qq.com/s?__biz=MzI3MTA0MTk1MA==&mid=402416047&idx=2&sn=96456c905821513ca62f9e65d41aa91d) 隨著產業在技術、經濟層面摸到的天花板越來越多，自 1960年代以來為信息革命提供動力的字面意義上的摩爾定律可能下個月就要正式終結了。不過，從摩爾定律所反映的價值來看，摩爾定律并沒有死，只是換了一個化身而已。 **田溯寧硅谷筆記”，究竟透露出哪些趨勢** [http://www.zhisland.com/bms-api-app/news/160218002/share](http://www.zhisland.com/bms-api-app/news/160218002/share) Facebook的核心觀點是，要以移動的人為核心。蘋果的觀點是5年后的手機與今天完全不同，“使每個人通過計算更有力量”仍是蘋果的核心戰略。谷歌認為世界正在為“時刻”提供服務，人們要知道這個時刻、到這個時刻、行動在這個時刻、購買這個時刻。互聯網領域的傳奇人物安德森認為認為新一代軟件的特征是云架構與智能化，企業計算會引導未來十年的創新。