FEX 技术周刊 - 2016/11/28

微信搜索『FEX』关注我们的公众号，及时获得最新资讯。

业界会议

D2前端技术论坛报名
http://d2forum.alibaba-inc.com/#/index?_k=p0uwcc
今年是D2的11届，十届是一次轮回，十一届的主题定为“初心”，近10年来，前端领域风云涌动，移动终端领域突飞猛进，web全栈势不可挡，作为距离用户最近的工程师，我们回望“初心”，不惧未来。

Node 地下铁沙龙 - 12.03 广州
http://nodejs.club/
在广州的同学可以考虑参加。

深阅读

Keyframes: Delivering scalable, high-quality animations to mobile clients
https://code.facebook.com/posts/354469174916519/keyframes-delivering-scalable-high-quality-animations-to-mobile-clients/
https://github.com/facebookincubator/Keyframes
Keyframes, a library that is able to export and play back After Effects animations while addressing the specific set of constraints we faced. Since the first iteration, we’ve learned more about developing animations, worked to improve the library, and applied it to other products at Facebook. Today, we’re excited to open-source and share this library more broadly, so that others can work together to build more delightful products.

Open Source Week at SitePoint
https://www.sitepoint.com/open-source-week-begins/
https://www.sitepoint.com/tag/osw/
It’s Open Source Week at SitePoint! All week we’re publishing articles focused on everything Open Source, Free Software and Community, so keep checking the OSW tag for the latest updates.

Why I’m Thankful for JS Fatigue. I know you’re sick of those words, but this is different
https://medium.com/javascript-scene/why-im-thankful-for-js-fatigue-i-know-you-re-sick-of-those-words-but-this-is-different-296fae0c888f#.ebtur6mfw
这位大侠近期还有另一篇关于 Native App 的未来的文章 Why Native Apps Really are Doomed: Native Apps are Doomed pt 2

How we switched our template rendering engine to React
https://engineering.pinterest.com/blog/how-we-switched-our-template-rendering-engine-react
In 2015, we made the decision to migrate our legacy web experience to React to keep up with our fast growth and perform better with increased developer velocity. Ultimately, we found React rendered faster than our previous template engine, had fewer obstacles to iterating on features and had a large developer community. Expanding on a previous post which covered migrating Pinner profiles to React, here we’ll dive deeper into migrating the web infrastructure to serve React pages, which required moving a huge amount of code without breaking the site.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends
https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/
From CSS methodologies such as BEM and Atomic CSS through to programmatically encapsulated CSS modules, many are doing their best to sidestep or otherwise suppress these features. This gives developers more control over their CSS, but only an autocratic sort of control based on frequent intervention. I’m going to revisit inheritance, the cascade and scope here with respect to modular interface design. I aim to show you how to leverage these features so that your CSS code becomes more concise and self-regulating, and your interface more easily extensible.

Insisting on Core Development Principles
http://alistapart.com/article/insisting-on-core-development-principles
The web community talks a lot about best practices in design and development: methodologies that are key to reaching and retaining users, considerate design habits, and areas that we as a community should focus on. But let’s be honest—there are a lot of areas to focus on. We need to put users first, content first, and mobile first. We need to design for accessibility, performance, and empathy. We need to tune and test our work across many devices and browsers.

Weblit - Introducing Custom Elements
https://webkit.org/blog/7027/introducing-custom-elements/
We’re happy to announce the addition of the Custom Elements API to WebKit. With this API, authors can create usable components by defining their own HTML elements without relying on a JS framework. 看来各大浏览器内核均开始支持自定义元素了。

GitLab 8.14 Released with Time Tracking Beta and Chat Commands
https://about.gitlab.com/2016/11/22/gitlab-8-14-released/
You’re doing code review of a new feature and wonder how it’ll actually feel, look and work when it’s live. Yesterday, you had to sacrifice your local development environment’s state, checkout the remote branch, run migrations, and then spin up the entire development environment. Today, you can just go to GitLab and click the link in the merge request to play with a fully functional, live environment.

Vuex 2.0 源码分析
https://github.com/DDFE/DDFE-blog/issues/8
当我们用 Vue.js 开发一个中到大型的单页应用时，经常会遇到如下问题：如何让多个 Vue 组件共享状态；Vue 组件间如何通讯，通常，在项目不是很复杂的时候，我们会利用全局事件总线 （global event bus）解决，但是随着复杂度的提升，这些代码将变的难以维护。因此，我们需要一种更加好用的解决方案，于是，Vuex 诞生了。本文并不打算讲官网已有的内容，而会通过源码分析的方式，让同学们从另外一个角度认识和理解 Vuex 2.0。Vuex 的设计思想受到了 Flux，Redux 和 The Elm Architecture 的启发，它的实现又十分巧妙，和 Vue.js 配合相得益彰，下面就让我们一起来看它的实现吧。

基于dva-cli&antd的react项目实战
http://www.que01.top/2016/11/20/dva-react/
最近因为业务需要需要尽快做一个系统并部署上线。作为前端负责人虽然时间很赶，但是也只好硬着头皮上了。考虑到项目健壮性、紧急性以及后期维护，最后的选择是用dva-cli做手脚架，antd作为UI库来做这个系统。 并且，由于考虑到按照当前情况，前期后端接口不太可能跟得上前端进度，所以此时数据mock就显得非常重要了。并且作为一个前后端彻底分离的项目，rap在这里可以充分发挥其作用——数据mock、接口协定、文档生成。

SAM模式构建函数响应式前端架构的五条结论
http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484606&idx=1&sn=b7e0ef641a38826411b29e18887ceec5
SAM建议将图形用户界面底层的业务逻辑分为三个概念：操作（Action）、模型（Model）和状态（State）。操作向模型供值，仅模型可以接受这样的值。一旦接受，将通过状态验证所有订阅方，尤其是视图（视图可看作“状态的具体呈现”）已经获得通知。每个事件可作为“步骤”进行处理，步骤可由提议/接受/学习流所组成。这种概念为事件排序和效果（如后端API调用）的处理提供了一个坚实的基础。SAM的使用不依赖具体框架，共同打造这一模式的很多社区成员也陆续开发了一系列开发者工具，并通过不同框架编写了大量范例代码，所用框架涵盖了从Vanilla JavaScript到AWS Lambda等诸多类型。本文将介绍我们在实现SAM模式的过程中学到的经验，专注于在前端架构中，能对最终交付成果与现代化最终用户应用程序的可维护性产生直接影响的。

前后端分离，是为了彼此更好
http://mp.weixin.qq.com/s?__biz=MzI5MDEzMzg5Nw==&mid=2660394431&idx=1&sn=5b00d73f871173f5f02b97ae72f9e61d
前后端分离并不只是开发模式，而是Web应用的一种架构模式。在开发期，前后端工程师可以通过约定好交互接口，实现并行开发；在运行期，前后端分离模式需要对Web应用进行分离部署，前后端之间使用HTTP请求进行交互。然而作为应用的架构模式，前后端分离并不是通过这样一句话就能一概而谈的，我们可以从交互形式、代码组织方式、开发模式三个方面对前后端分离进行认识。

契约式编程与防御式编程
http://blog.jobbole.com/107939/
碰到约定好的内容出现异常，是我们在程序中内部作兼容处理，还是抛出去。打个比方，我们要解析一段json，约定这个json的格式，只能是正常格式，或者是空，那么一旦返回json的方法返回了一个『既不是正常格式，又不是空的异常值』，程序该如何处理呢？

Debugging The Web - Chrome Dev Summit 2016
https://www.youtube.com/watch?v=HF1luRD4Qmk
Learn the state of the art in debugging using Chrome dev tools with Paul Irish - all you need to know to expand your toolbox.

How Passwordless Authentication Works
https://auth0.com/blog/how-passwordless-authentication-works/
Security is a key aspect of software development. Securing your authentication and authorization process can’t be overemphasized. Over the years, developers have come up with different strategies for handling authentication in a way that provides maximum security for the user. One of the latest strategies is authenticating without passwords. Popular applications like Medium, Slack, and WhatsApp widely support and encourage passwordless authentication. In this article, you’ll get to understand the nitty-gritty of passwordless authentication. 另附：Build and Authenticate a Node Js App with JSON Web Tokens

Writing efficient JavaScript
https://medium.com/@xilefmai/efficient-javascript-14a11651d563#.cc4fox6ni
This entry describes simple techniques to fulfill the JavaScript compiler optimization process which results in faster running code. Especially in games you immediately notice frame drops and when the garbage collector has to hit in with a big stack of work to do.

Polyfill JavaScript Only When You Need To
https://css-tricks.com/polyfill-javascript-need/
Write future-proof and efficient JavaScript for modern browsers. Let Polyfill.io handle older browsers. Don’t do the extra HTTP Request if you don’t have to.

From Raw Data to Data Science: Adding Structure to Unstructured Data to Support Product Development
https://www.infoq.com/articles/raw-data-to-data-science
Data science is fast becoming a critical skill for developers and managers across industries, and it looks like a lot of fun as well. But it’s pretty complicated - there are a lot of engineering and analytical options to navigate, and it’s hard to know if you’re doing it right or where the bear traps lie. In this series we explore ways of making sense of data science - understanding where it’s needed and where it’s not, and how to make it an asset for you, from people who’ve been there and done it.

Nginx 配置简述
http://www.barretlee.com/blog/2016/11/19/nginx-configuration-start/
来自小胡子哥的 Nginx 配置科普

[译]Redis作者又一大作：Disque分布式内存队列
http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653547960&idx=1&sn=8820673a489edfd252bdb055a3d4aaee
https://github.com/antirez/disque
Disque 是 Redis 之父 Salvatore Sanfilippo 新开源的一个分布式内存消息队列。本文是作者编写的该软件设计和使用的说明。Disque 是一个正在进行的实验性的，分布式内存消息代理。 它的目标是捕获“ Redis 作为消息队列”的用例，通常使用阻塞列表操作来实现。将其移植到 adhoc，自包含的，可扩展的，容错的设计，但在简单性，性能和实现方面仍然类似于 Redis, 并使用 C 语言实现非阻塞服务器。

创业一年，一些技术上的总结
https://piaoniu.io/chuang-ye-yi-nian-yi-xie-ji-zhu-shang-de-zong-jie/
票牛(演出票务网站)网的一位初创成员的总结，还比较务实，偏向于后端开发。

Java EE即将死去，毫无疑问
http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659598547&idx=1&sn=3abb1ca8aeba826309442d32a1dbcc06
应用开发的风格这几年一直在变化，而微服务变得越来越流行。大公司把大型应用拆分成可以单独部署的小型应用，这些小型应用被部署在云端的容器里。开源微服务框架Light Java为这些运行在容器里的微服务提供了很多特性，它支持设计驱动，开发者只需要把注意力专注在业务逻辑上，剩下的事情可以由框架和DevOps流程来处理。

新鲜货

Riot.js — Simple and elegant component-based UI library
http://riotjs.com/
Riot is supported by all modern browsers and it does not require any additional polyfill. Riot brings custom tags to all modern browsers. Think React + Polymer but with enjoyable syntax and a small learning curve.

The XSS Game by Google
https://xss-game.appspot.com/
In this training program, you will learn to find and exploit XSS bugs. You’ll use this knowledge to confuse and infuriate your adversaries by preventing such bugs from happening in your applications.

Vue 2.1.0
https://gist.github.com/yyx990803/faebe22e8763f5b17572b35ed96f52fe
还有一个 Vue 相关的框架 https://github.com/nuxt/nuxt.js A minimalistic framework for server-rendered Vue.js applications

pixelmatch
https://github.com/mapbox/pixelmatch
The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests.

新书-深入 React 技术栈
https://segmentfault.com/a/1190000007550254
本书除了详细阐述基本概念外，还会帮助你从了解 React 到熟悉其原理，从探索 Flux 应用架构的思想到精通 Redux 应用架构，帮助你思考 React 给前端界带来的价值，React 今天是一种思想，希望通过解读它，能够让读者有自学的能力。

AlloyCrop
http://www.alloyteam.com/2016/11/tencent-alloyteam-alloycrop-official-mobile-web-clipping-components-open-source/
裁剪图片的应用场景有头像编辑、图像编辑，在移动端要配合手势以及进行触摸反馈来进行变形以确认用户的选区进行裁剪。AlloyCrop就是专注于裁剪图像的组件，目前服务于QQ相关的Web业务，今日正式对外开源。

了解CSS/CSS3原生变量var
http://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/
随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。相关文章：Using CSS Variables in Site Development

Andromeda OS 来了，Android 再见？
http://stormzhang.com/2016/11/22/what-is-andromeda/
Google 要推出一种全新的操作系统，取名 Andromeda，这款新型的操作系统融合了 Android 和 Chrome OS，据称已经有两家硬件厂商在研发基于 Andromeda 系统的设备，计划将于明年面世，并且 Android 8.0 也将会整合到 Andromeda 中

产品及其它

A totally rebuilt Sites, customer-tested and open for business
https://blog.google/products/g-suite/totally-rebuilt-sites-customer-tested/
Since its launch in 2008, Sites has made it possible for employees to build working team and project sites without writing a single line of code (no HTML, CSS or any other all-caps acronym.) But, web technologies have progressed a lot in the past decade, and the new Sites is an even more approachable way to build a site. The new Google Sites is open for business. If you’re a G Suite customer with Google Sites enabled, you can get started building on the new Sites now or learn how to enable Sites in the Admin Console. Customers can continue to use classic Sites as we continue to add capabilities and improve the new Sites.

Microsoft is working on a new design language for Windows 10 codenamed Project NEON
http://www.windowscentral.com/new-design-language-windows-10-project-neon
Microsoft has made several adjustments to its design language over the last few years, starting with Windows 8 and evolving into what we now know as “Microsoft Design Language 2” or MDL2 in Windows 10. With MDL2 being the current design language used throughout Windows 10, Microsoft has plans to begin using a much more streamlined design language with Redstone 3, codenamed Project NEON.

2016年的互联网，给我们留下了哪些希望？
http://www.geekpark.net/topics/217327
发掘过去一年互联网中涌现出的最棒的产品和最优秀的团队，这是极客公园在过去 6 年里一直在做的事。经过两个月的报名和评审，2016 中国互联网创新产品评选（InnoAwards）的 50 强最终出炉，特殊的时代也赋予了这样一批产品最特殊的荣誉。毕竟浪潮裹挟着泥沙俱下，只有当水退去，藏在其中的金粒才有机会闪耀。多年后回看这份 50 强名单，或许它们正是 2016 留给互联网最重要的改变。

湖畔大学教务长曾鸣：注意，创新最难的第一步不是从0到1
http://mp.weixin.qq.com/s/9kr9KCONMdrY4B7ad_kuaQ
2年前湖畔大学创办，有机会接触到更多创业者，看到他们面临各种各样的挑战，突然发现在阿里的这十年，无论是我们的实践、积累的经验、犯的错误、各种研究和思考，其实对大家会有很多帮助，所以静下心来做很多的思考，和做教授期间积累的很多学术做了新的融合，这次公开课是一种尝试，用一种方法，把一些模块化的思考和穿透力的概念逐步介绍给大家，希望大家在创业路上少走一些弯路，多一些成绩。

产品如人——微信产品经理眼中的微信价值观
http://www.ifanr.com/753898
一个产品所体现的，正是其创造者的灵魂。做人，每个人都有自己的原则，做一个产品，也要有产品的原则。很多时候价值观和原则并没有绝对的对错，但当它深入到一个产品的骨髓里，深入到每一个细节里，便成为我们设计产品的指导方向。微信的四条价值观：善良、克制、极致、美。

– THE END –