FEX 技术周刊 – 2016/02/22
最后更新于：2022-04-01 00:04:24
## 深阅读
**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年后的手机与今天完全不同，“使每个人通过计算更有力量”仍是苹果的核心战略。谷歌认为世界正在为“时刻”提供服务，人们要知道这个时刻、到这个时刻、行动在这个时刻、购买这个时刻。互联网领域的传奇人物安德森认为认为新一代软件的特征是云架构与智能化，企业计算会引导未来十年的创新。