FEX 技术周刊 - 2017/04/10

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

深阅读

React v15.5.0
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html
The biggest change is that we’ve extracted React.PropTypes and React.createClass into their own packages. Both are still accessible via the main React object, but using either will log a one-time deprecation warning to the console when in development mode.

ReactXP
https://microsoft.github.io/reactxp/
The authors of React use the phrase “learn once, write anywhere”. With React and React Native, your web app can share most its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform. We have taken this a step further and developed a thin cross-platform layer we call ReactXP. If you write your app to this abstraction, you can share your view definitions, styles and animations across multiple target platforms. Of course, you can still provide platform-specific UI variants, but this can be done selectively where desired.

Sketch 43 will change the way we work and think
https://medium.com/sketch-app-sources/sketch-43-will-change-the-way-we-work-and-think-e4c919957423
What I want to talk about is the implications it will have on the design eco system, workflow and 3rd parties products (aka complementary products for Sketch). So first of, if — “design is code and code is design” as Andree write, it means that file organization is going to be critical. 另附： Everything you need to know about the Sketch 43 file format。

Webpack and Rollup: the same but different
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c
Facebook merged a monster pull request into React that replaced its existing build process with one based on Rollup, prompting several people to ask ‘why did you choose Rollup over webpack’? 文章的建议是：Use webpack for apps, and Rollup for libraries.

Unhandled Promise Rejections in Node.js
http://thecodebarbarian.com/unhandled-promise-rejections-in-node.js.html
Node.js 6.6.0 added a sporadically useful bug/feature: logging unhandled promise rejections to the console by default.

Node.js War Stories: Debugging Issues in Production
https://blog.risingstack.com/node-js-war-stories-solving-issues-in-production-2/
In this article, you can read stories from Netflix, RisingStack & nearForm about Node.js issues in production - so you can learn from our mistakes and avoid repeating them. You’ll also learn what methods we used to debug these Node.js issues. 另附：Debugging JavaScript with the Node Debugger.

Regular Expressions in a post-ES6 world
https://ponyfoo.com/articles/regular-expressions-post-es6
In this article we’ll take a look at regular expressions in and after ES6. There’s a couple of regular expressions flags which were introduced in ES6: the /y or sticky flag, and the /u or Unicode flag. Then we’ll discuss five proposals which are making their way through the ECMAScript specification development process at TC39.

The Glimmer VM: Boots Fast and Stays Fast
http://yehudakatz.com/2017/04/05/the-glimmer-vm-boots-fast-and-stays-fast/
To improve initial render performance without sacrificing updating performance, Ember use two general approaches: static optimizations and dynamic optimizations. 另附：Why I’m excited about GlimmerJS

rems and ems, and why you probably don’t need them
https://hackernoon.com/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f
You may have heard that when defining the size of things in your website, you should be using em or rem units, rather than good old fashioned pixels. Well I have some fantastic news for you. You don’t need to mess up your life with these pesky units. Pixels are just fine. In fact it turns out that pixels are really good at defining the size you want things to be.

Deploying Brotli for static content
https://blogs.dropbox.com/tech/2017/04/deploying-brotli-for-static-content/
In this blog post, we are going to share our experiences with rolling out Brotli encoding for static content used by dropbox.com, decreasing the size of our static assets by 20% on average.

From CSS Preprocessors to Styled Components
https://pusher.com/sessions/meetup/reactivate-london/from-css-preprocessors-to-styled-components
In this lightning talk we’ll speak about moving from CSS preprocessors to styled components, and how you can achieve more maintainable styling in your React project today.

WePY 在小程序性能调优上做出的探究
https://www.madcoder.cn/wepy-performance-research.html
文中结合demo从预先加载和数据绑定2个方面来介绍如何在小程序中进行性能优化，同时也列举了一些WePY的一系列开发效率上的优化。

浓缩的才是精华：浅析GIF格式图片的存储和压缩
https://www.qcloud.com/community/article/946621001490345387
本文所探究的问题来自于某个业务场景下——为用户批量推送GIF表情包。一批图像大约有200-500张，以缩略图列表的形式展示在客户端。

由FlexBox算法强力驱动的Weex布局引擎
http://www.jianshu.com/p/d085032d4788
详细的分析Weex是如何高性能的布局原生界面的，之后还会与现有的布局方法进行对比，看看Weex的布局性能究竟如何。

如何重构“箭头型”代码
http://coolshell.cn/articles/17757.html
本文主要起因是，一次在微博上和朋友关于嵌套好几层的if-else语句的代码重构的讨论（微博原文），在微博上大家有各式各样的问题和想法。按道理来说这些都是编程的基本功，似乎不太值得写一篇文章，不过我觉得很多东西可以从一个简单的东西出发，到达本质，所以，我觉得有必要在这里写一篇的文章。

Android App包瘦身优化实践
http://tech.meituan.com/android-shrink-overall-solution.html
美团的经验，另附 尚妆「Android」APK瘦身探索

[译]How you create your own Native Bridge - JSVM and the first adventure
http://efe.baidu.com/blog/how-to-create-you-own-native-bridge-c2/
你之前对 JS 引擎是否有过了解？有没有试着在自己的项目里面嵌入一个 JS 引擎玩玩儿？在这篇文章里面，我会给你一些指引，以便可以顺利通过含有 Hosted Objects, Virtual Machines, Interpreters 以及一些其它稀奇古怪玩意儿的『魔法森林』。

Best RESTful API books in 2017
https://reactdom.com/blog/restful-api-books
More and more developers are using RESTful APIs to build their systems. Having a working knowledge of how to use and implement RESTful APIs can only help you leverage your career as a developer. This list of the best RESTful API books should get you started to working with and building out your own APIs using REST.

Why you should use Object.is() in equality comparison
http://www.jstips.co/en/javascript/why-you-should-use-Object.is()-in-equality-comparison/
The great news that in ES6 there is the new ‘Object.is()’ which is better and more precise it has the same features as ‘===’ and moreover it behaves well in some special cases.

新鲜货

Preact 8.0 Beta Released: A Faster, Smaller React-a-Like
https://github.com/developit/preact/releases/tag/8.0.0
A fast 3KB React alternative with the same API. 8.0 boasts significant performance improvements, smaller size, and fewer edge cases.

React datasheet
https://github.com/nadbm/react-datasheet
A simple react component to create a spreadsheet.

glamorous
https://github.com/paypal/glamorous
React component styling solved with an elegant (inspired) API, small footprint (<5kb gzipped), and great performance. 通过这个组件可以帮助我们更便捷的生成有自定义样式的Dom组件。另附阮一峰老师的：CSS in JS 简介

Office UI Fabric React
https://dev.office.com/fabric
The official front-end framework for building experiences that fit seamlessly into Office and Office 365.

Haul - A command line tool for developing React Native apps
https://github.com/callstack-io/haul
Haul is a drop-in replacement for react-native CLI built on open tools like Webpack. It can act as a development server or bundle your React Native app for production.

Using the Chrome devtools new code coverage feature
https://blog.logrocket.com/using-the-chrome-devtools-new-code-coverage-feature-ca96c3dddcaf
Code coverage has finally made it out of experiments and into Chrome Canary, meaning that it will soon reach general availability. This is an exciting feature that is useful both when working with JavaScript and CSS, so I thought I’d do a quick demo and explore how it can be helpful.

WebGPU Prototype and Demos
https://webkit.org/blog/7504/webgpu-prototype-and-demos/
As of Safari Technology Preview Release 26, and WebKit Nightly Build, a WebGPU prototype is available for you to experiment with on macOS.

nbind
https://github.com/charto/nbind
nbind is a set of headers that make your C++11 library accessible from JavaScript. With a single #include statement, your C++ compiler generates the necessary bindings without any additional tools. Your library is then usable as a Node.js addon or, if compiled to asm.js with Emscripten, directly in web pages without any plugins. Magical headers that make your C++ library accessible from JavaScript

n-api: add support for abi stable module API
https://github.com/nodejs/node/commit/56e881d0b0b2997b518753cb627eb3b50eeb6f62
N-API aims to provide ABI compatibility guarantees across different Node versions and also across different Node VMs - allowing N-API enabled native modules to just work across different versions and flavors of Node.js without recompilation.

Caporal
https://github.com/mattallty/Caporal.js
A full-featured framework for building command line applications (cli) with node.js, including help generation, colored output, verbosity control, custom logger, coercion and casting, typos suggestions, and auto-complete for bash/zsh/fish.

StandardJS 10.0.0 Released: JS Code Standards and Linte
https://standardjs.com/changelog.html
JavaScript style guide, with linter & automatic code fixer

Pure.css
https://purecss.io/
A set of small, responsive CSS modules that you can use in every web project.

css-razor
https://github.com/tscanlin/css-razor
css-razor is a fast way to remove unused selectors from css. Essentially, it accomplishes the same goal as uncss.

Grid Garden: A Game for Learning CSS Grid
http://cssgridgarden.com/
一个用于学习CSS Grid属性的一套小游戏

SweetAlert2
https://limonte.github.io/sweetalert2/
A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript’s popup boxes. Zero dependencies.

SVG.js
http://svgjs.com/#svg-js
The lightweight library for manipulating and animating SVG. SVG.js has no dependencies and aims to be as small as possible while providing close to complete coverage of the SVG spec. If you’re not convinced yet, here are a few highlights.

Matreshka.js
https://github.com/matreshkajs/matreshka
Matreshka.js is a simple JavaScript framework for single page applications creation. It fills the gap between a junior and a senior because of simple and intuitive API based on JavaScript classes and accessors. Everything you need to get stared is your JavaScript knowlege.

Eris
https://github.com/liriliri/eris/
Eris是一套在开发中实践积累起来的实用JavaScript工具库。该库目前拥有超过180个模块，包括Dom操作，cookie设置，类创建，模板函数，日期格式化等实用模块，同时配套有打包工具Eustia进行定制化，使JS脚本加载量缩减在10KB以下，极大优化移动端页面的加载速度。

Tippy.js
https://atomiks.github.io/tippyjs/
A lightweight, pure JavaScript tooltip library

BitArray.js
https://github.com/brockwhittaker/BitArray.js
BitArray.js is a micro-library that creates an array of booleans with less than 2% of the memory consumption of an array of booleans.

UPNG.js
https://github.com/photopea/UPNG.js
纯 JS 写的 PNG 解析

Project Mosaic
https://www.mosaic9.org/
Mosaic is a set of services, libraries together with a specification that defines how its components interact with each other, to support a microservice style architecture for large scale websites.

Django 1.11 released
https://www.djangoproject.com/weblog/2017/apr/04/django-111-released/
A few highlights are: Class-based model indexes for creating database indexes; Template-based widget rendering to ease customizing form widgets; Subquery expressions to create explicit subqueries using the ORM.

微信“开源”品牌设计细节 发布品牌视觉应用规范
https://wechat.design/?locale=zh_CN
微信对外宣布发布品牌应用规范，对外公布了包括logo、字体在内的微信品牌形象素材，以期帮助合作伙伴规范微信品牌形象的正确应用，保证品牌完整性和一致性。根据微信官方设计团队发布的介绍显示，微信主品牌规范包括品牌主标志、文字标志、完整标志、标准字体、标准色彩以及客户端标志。相关介绍 http://tech.qq.com/a/20170407/045893.htm

感谢 Google，为了更美的中文互联网，带来了新的免费字体
http://www.ifanr.com/813974
Adobe 正式宣布推出思源宋体（Source Han Serif），这距离之前公布的思源黑体（Source Han Sans）已经有三年时间了。这次思源宋体与黑体相配套，主要解决在东亚地区统一字体的使用问题。

产品及其它

Web的50年——从Tim Berners-Lee的图灵奖说起
https://zhuanlan.zhihu.com/p/26191617
https://news.mit.edu/2017/tim-berners-lee-wins-turing-award-0404
Tim 说过，Web 从来不仅是技术的发明，更多的是一种社会的创造。无论是 HTTP 还是 PageRank，无论是 Wiki 还是 Facebook，人的因素是主导因素。开放、交流、合作，新一代的 Web 的技术，必然还是要以人的需要、长处、局限、价值为出发点。技术只是一小部分，社会模式的变迁才是最根本的。另附：World Wide Web, Not Wealthy Western Web

当领导提了不靠谱需求，怎么办？
http://www.yixieshi.com/78793.html
相信每个人都会遇到不靠谱的领导，毕竟我们都无法保证能一直遇到对的领导，完美的团队。当我们遇到不靠谱的领导时，如何对待呢？

吴军：你们谈的创新，其实是在发明一种病
http://mp.weixin.qq.com/s?__biz=MzA3NTIzMzIxNQ==&mid=2652794406&idx=1&sn=5933dee2683d5f1e91ed7c06bb20f1ef
“ 0 到 1 ”可能一开始对世界并没有太大影响，而真正把漫长发明路走完的那些人才是产生巨大影响的。很多时候很多人在谈论创新的时候，实际上在不断发明“一种病”。真正的创新，你要解决一种真的问题，一种真正的病。

从0到1，浅谈需求的模型转化
http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653434046&idx=1&sn=bb8b3819f3af137ae11382c94e426164
产品设计流程中，在完成需求与市场分析之后，产品经理需要拆解需求场景抽离核心路径，梳理出大大小小的各类功能点，划分功能优先级最终得到版本需求列表，随着项目的行进，在设计师和工程师的协助下，以超出用户预期为目标实现产品满足用户需求。将产品由抽象的思维模型转换为逐步具象化的概念模型，最终推导出可行的功能和版本规划，是产品由0到1的关键转换节点。产品经理应该如何判断需求的主场景，如何定义和连接触点实现场景最佳路径，如何评价构建路径的功能价值呢？

未来，什么样的程序员才是不可替代的
http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659599126&idx=1&sn=07f889ee360440228fe89b581d03767c
有的公司把程序员看作和水电、机器一样的冷冰冰资源，做项目计划时，一些项目经理以为只要给项目分配足够的资源（包括程序员、水电、机器）并加以正确的管控，项目就可以预期的顺利完成。但是，程序员首先是有血有肉的人，绝不等同于毫无感情的机器。一个有雄心的公司要不断提升产品的竞争力，什么是竞争力？就是把产品做的好到不能再好，天下第一，谁与争锋？产品向好的每一步都需要借助于程序员创造力和想象力，这才是程序员的价值之所在。没有程序员愿意把最宝贵的创造力和想象力奉献给只把自己看作资源的公司。所以，聪明的管理者会想方设法把程序员这种创造力和想象力激发出来。