FEX 技术周刊 - 2016/12/26

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

深阅读

Building Jarvis
https://www.facebook.com/notes/mark-zuckerberg/building-jarvis/10154361492931634
http://www.leiphone.com/news/201612/09HecjzLRdGX3r81.html
My personal challenge for 2016 was to build a simple AI to run my home – like Jarvis in Iron Man. My goal was to learn about the state of artificial intelligence – where we’re further along than people realize and where we’re still a long ways off. These challenges always lead me to learn more than I expected, and this one also gave me a better sense of all the internal technology Facebook engineers get to use, as well as a thorough overview of home automation. 作为 Facebook 的 CEO，Zuckerberg 却依然保持写代码的习惯，而且同时用多种语言，这种对 coding 的热爱值得广大码农学习，这应该是 Facebook 工程师文化的最好体现。

Front-End Performance Checklist 2017
https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
Performance isn’t just a technical concern: It matters, and when baking it into the workflow, design decisions have to be informed by their performance implications. Below you’ll find a (hopefully unbiased and objective) front-end performance checklist for 2017 — an overview of the issues you might need to consider to ensure that your response times are fast and your website smooth.

10 things I learned making the fastest site in the world
https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7#.jcfny4tqc
Writing a fast website is like raising a puppy, it requires constancy and consistency (both over time and from everyone involved). You can do a great job keeping everything lean and mean, but if you get sloppy and use an 11 KB library to format a date and let the puppy shit in the bed just one time, you’ve undone a lot of hard work and have some cleaning up to do. 另附：Solving the Cache Invalidation Problem of HTTP/2 Server Push to Reduce Latency and Bandwidth

13 things you need to know about React
https://hackernoon.com/13-things-you-need-to-know-about-react-d2e6a6422552#.iuf1zr20x
I’ve been using React for over a year now. I’m also conducting training to help people learn it from scratch. I noticed that on every training session I’m explaining the same set of concepts over and over. I think those concepts are essential if you want to “speak React”. If you are in a middle of learning it right know, you might be interested in reading this post.

Weekly 2016 年终回顾
http://javascriptweekly.com/issues/315
http://react.statuscode.com/issues/17
http://frontendfocus.co/issues/270
http://nodeweekly.com/issues/168
精选了今年值得关注的一些技术文章，如果你平时没太多时间关注技术，这期汇总绝对不能错过。另附：10 Most Shared JavaScript Scene Posts of 2016、27 popular new github repositories for web developers in 2016、The 10 Most Important Node.js Articles of 2016、Front-end Tools: My Favorite Finds of 2016。

TypeScript: the missing introduction
https://medium.com/@lavrton/optimizing-react-redux-store-for-high-performance-updates-3ae6f7f1e4c1
The purpose of this article is to offer an introduction to how we can think about TypeScript, and its role in supercharging our JavaScript development. We will also try and come up with our own reasonable definitions for a lot of the buzzwords surrounding types and compilation.

Front-End Developers Are Information Architects Too
https://24ways.org/2016/front-end-developers-are-information-architects-too/
This is about a realisation I had a couple of years ago when I started to run an increasing amount of usability-testing sessions with people who have disabilities: that the structure, labelling, and connections that can be made in front-end code is information architecture. People’s ability to be successful online is unequivocally connected to the quality of the code that is written.

One Sure-Fire Way to Improve Your Coding
https://changelog.com/posts/one-sure-fire-way-to-improve-your-coding
The most obvious way to improve your coding is to write more code. Everybody knows that. However, another activity which I guarantee will improve your coding is the complete opposite of writing. I will state this as plainly as I possibly can: If you want to dramatically increase your programming skills you need to be reading other people’s code. In this article I will help you choose what to read and give you practical advice on how to go about reading it.

Modern garbage collection
https://medium.com/@octskyward/modern-garbage-collection-911ef4f8bd8e#.pxuzlud1h
The point of this article is not to convince you to use a different programming language or tool. But if you take one thing away, let it be this: garbage collection is a hard problem, really hard, one that has been studied by an army of computer scientists for decades. So be very suspicious of supposed breakthroughs that everyone else missed. They are more likely to just be strange or unusual tradeoffs in disguise, avoided by others for reasons that may only become apparent later.

架构随聊
http://www.cnblogs.com/Zachary-Fan/p/ArchitectureChat.html
“架构”是我们这行业种一个很常见的词，表明其必然也是经历了很长的岁月打磨所形成的一个词。架构的这个词出现的意义是什么？为了解决什么问题？只有把这2个问题想明白了，才能设计出一个良好的项目架构。程序设计和架构设计是互通的，每个人都可以从设计好一个程序往设计好一个系统架构前进。如果现在还无从下手的，我推荐大家可以从领域驱动设计这个概念入手，这是由业务为导向的设计方式，可以对培养设计出落地的架构有很大的帮助。

[译]您的公司能从渐进式网页应用中受益吗
http://www.infoq.com/cn/articles/progressive-web-app-benefits
文章从6个方面介绍了渐进式网页应用的优点，同时也列举了其面临的一些难题例如缺乏通用支持等。相关文章：Introduction to Progressive Web Apps、Offline First – A better HTML5 User Experience

webpack 构建性能优化策略小结
https://segmentfault.com/a/1190000007891318
本文通过CommonsChunk、externals、DllPlugin、Happypack、uglify-parallel这五个点分别介绍了webpack在构建中可以进行性能优化的一些手段

[译]构建稳固的、可升缩的CSS框架的八大原则
http://www.zcfy.cc/article/8-simple-rules-for-a-robust-scalable-css-architecture-2082.html
这些原则都是我从这些年工作中所含盖的各个大型、复杂的web项目中总结出来的。而这些事情也都是我这些年被多次问到的，所以觉得将其用文档的形式叙述出来会是个不错的想法。

redux applyMiddleware 原理剖析
http://www.jianshu.com/p/47887299cabb
从源码更透彻解读 redux 中间件原理

三十分钟学会SED和AWK
https://github.com/mylxsw/growing-up/blob/master/doc/%E4%B8%89%E5%8D%81%E5%88%86%E9%92%9F%E5%AD%A6%E4%BC%9ASED.md
https://github.com/mylxsw/growing-up/blob/master/doc/%E4%B8%89%E5%8D%81%E5%88%86%E9%92%9F%E5%AD%A6%E4%BC%9AAWK.md
随着 Node 的大范围使用，前端跟日志打交道的场景越来越多了，这时候 awk 和 sed 这两个命令就派上大用场了，这两篇教程值得认真学习下。

Comparing MobX with NX observe
http://www.nx-framework.com/blog/public/mobx-vs-nx/
主要介绍了NX observe 和MobX相比在特性、方法、性能等方面上的优点。

Animating 2048 SVG nodes in React, Preact, Inferno, Vue, Angular 2, and CycleJS – a side-by-side comparison
https://swizec.com/blog/animating-svg-nodes-react-preact-inferno-vue/swizec/7311
文中给出了一个由2048个svg节点组成的动画分别由React, Preact, Inferno, Vue, Angular2 以及 CycleJS 来实现的demo以及源码，看起来像是Inferno和Vue的性能更好，但Preact支持异步渲染，也受作者推崇

新鲜货

What’s New In Python 3.6
https://docs.python.org/3.6/whatsnew/3.6.html
喜欢 python 的同学可以关注下 3.6 版的新特性，另附：Top 10 Python libraries of 2016、[译]雾里看花之 Python Asyncio

Weex Conf - 2017.1.12 - 报名
https://atf.alibaba.com/weex
这次WeexConf我们将和业界分享以下亮点： Weex最新的技术特性、技术工具、技术能力、技术趋势发布； Weex两次历经双11大考的实战经验及阿里生态系的业务经验； Weex团队更将首次集体亮相，畅谈从开源到加入Apache的心路历程。

WePayUI
https://github.com/wepayui/wepayui
WePayUI 由微信支付为服务商和商户量身打造，用于快速制作符合微信支付规范的Web页面，提升开发效率。WePayUI 基于 WeUI 拓展，包含基础组件和行业场景。

腾讯大数据宣布开源第三代高性能计算平台Angel
http://www.leiphone.com/news/201612/H8mIdFZLUI6uWiG9.html
Angel是腾讯完全自主的大数据平台，按照腾讯的说法无论是在性能还是实用性，Angel比其它平台都有很大的优势，但让业界为之震惊的还是腾讯将其开源，而且开源的力度也是腾讯过去2代计算平台无法比拟的。

DynamicCocoa：滴滴 iOS 动态化方案
http://mp.weixin.qq.com/s/qRW_akbU3TSd0SxpF3iQmQ
DynamicCocoa 可以让现有的 Objective-C 代码转换生成中间代码（JS），下发后动态执行，相比其他动态化方案，优势在于：使用原生技术栈：使用者完全不用接触到 JS 或任何中间代码，保持原生的 Objective-C 开发、调试方式不变；无需重写已有代码：已有 native 模块能很方便的变成动态化插件；语法支持完备性高：支持绝大多数日常开发中用到的语法，不用担心这不支持那不支持；支持 HotPatch：改完 bug 后直接从源码打出 patch，一站式解决动态化和热修复需求。另附：iOS 动态化的故事

提升效率的利器
https://dbarobin.com/2016/12/21/liqi-of-robinwen/
提升效率的利器，应该在经济承受范围以内毫不犹豫地拥有。工作以来，一贯的宗旨就是为美好的事物花费。这份清单，于己于人，或多或少有所帮助。倘若读者因此受益，实在是荣幸不已。

FuseBox
https://github.com/fuse-box/fuse-box
号称比 Webpack 快得多的打包工具

用React、Redux、Immutable做俄罗斯方块
https://github.com/chvin/react-tetris/
用react写的一款俄罗斯方块的游戏，玩一玩之余，也是一款不错的react练手项目

Bootstrap 4 drops IE9 support and goes full flexbox
https://github.com/twbs/bootstrap/pull/21389
Flexbox becomes the default layout option for Bootstrap 4.

Writing web applications using only the Go Standard Library
https://golang.org/doc/articles/wiki/
用 Go 语言写 Web 应用的新手入门文档

2016年度最受欢迎中国开源软件评选
http://www.oschina.net/project/top_cn_2016
看看今年有哪些好用的开源软件。

Draft.js
https://github.com/facebook/draft-js
Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.

viewerjs
https://github.com/fengyuanchen/viewerjs
一款图片浏览器的js库

anypixel
https://github.com/googlecreativelab/anypixel
AnyPixel.js is an open-source software and hardware library that makes it possible to use the web to create big, unusual, interactive displays.

lightgallery.js
https://github.com/sachinchoolur/lightgallery.js
Full featured JavaScript lightbox gallery.Fully responsive、Animated thumbnails、Mouse drag supports for desktops、Touch support for mobile devices…

optimize-js
https://github.com/nolanlawson/optimize-js
通过将立即执行的函数或者可能要被执行的函数包上括号，来保证这些代码在被js引擎解析时跳过pre-parse阶段，从而达到解析性能大幅提升的效果

Flexbox Patterns
https://github.com/cjcenizal/flexbox-patterns
Build awesome user interfaces with CSS flexbox. Examples and source code included.

rxdb
https://github.com/pubkey/rxdb
Reactive Offline-first Database with Sync, Schema, Mongo-Query, Encryption, LevelDown

产品及其它

移动、前端融合新趋势：属于前端的时代即将来临
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995106&idx=1&sn=3fb607651f92e793e95f5a2a2e65c31b
不管是 Web 前端、iOS，还是 Android，对大前端工程师来说，这是最好的时代。放在几年前 1/3 是大前端，2/3 是后端。而现在则是一半以上是大前端的人，这充分说明大前端的重要性。跨端技术，只是大前端开始。端与端技术之间相互学习和借鉴，这将成为未来前端技术最重要的创新来源。

[译]我会这么多编码套路，你说我不是好开发？那怎样才是？
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995084&idx=1&sn=07271a4af7227290b5afb588e47f8951
软件开发者使用编码套路学习新的软件开发技能确实有效。但当工作面对燃眉之急时，例如要达成最后期限、赶上发布日期、在遗留代码中解决故障等却往往力不从心。本文给出了成为一名好的开发者所应具备的技能，重点强调了转变训练方法的重要性，这些训练方法可完善我们在高强度和具有挑战性环境中工作的技能。

[译] 小心负产出的开发者
https://segmentfault.com/a/1190000007864801
人们很容易高估提前一个月上线的收益，而低估了这之后擦一年屁股的成本。生活中或许很少会遇到类似文中这样的负产出开发者，但类似的例子确实存在，说个最近发生的例子，有些新人开发者遇到问题后不做任何debug尝试就将问题抛向他的导师或者他所使用的产品的管理员，其实都是一些稍微看下文档或者分析下报错就能知道问题所在的小问题，对整个企业的研发效率来讲这就是负产出。也希望所有的开发者能培养自我解决问题的习惯而非做一名不爱思考的伸手党。

复盘投资bilibili的过程，谈谈我对社区的看法
http://mp.weixin.qq.com/s/K0OGB0EfglcnYYR-eODOyg
你会发现越是大的社区，其实越不会轻易定义自己的产品。越是拥有大规模用户的产品，表现就越简洁、越稳定，所谓大道至简。反观那些面面俱到，一个列表恨不得包含十几个功能的复杂产品，一定做不大。一个好的社区是建立在两种基本要素之上的——关系链和内容，只要创业者在这两条线中，能抓好一条就能生存。最终，这两种要素也会演变出不同类型的社区。