FEX 技术周刊 - 2016/08/15

hefangshi | 15 Aug 2016

深阅读

使用React重构百度新闻WebApp前端
http://wangfupeng.coding.me/share/2016/08/06/restruct-bdnews-webapp-by-react.html
百度新闻近期使用了 React+FIS3 对WebApp进行了一次大改版，让我们看看在其中有怎样的心得体会吧。

滴滴WebApp实践经验分享
https://github.com/DDFE/DDFE-blog/issues/4
本文为滴滴公共FE团队在WebApp方向的一些实践经验总结，主要内容包括：WebApp首页技术架构、前端工程化在WebApp的实践、通用地图JS库的设计和实践、统一登录SDK的设计、通用客户端JSBridge的封装、在公共部门做通用服务的一些感悟、个人成长总结。在这里还可以看看FIS在滴滴的应用。

Google - Fuchsia - a new Operating System
https://github.com/fuchsia-mirror
http://tech.qq.com/a/20160814/004231.htm
谷歌有计划将Fuschia用于除物联网设备以外的其他领域。目前，谷歌正在开发更多的物联网硬件，例如OnHub和谷歌Home，因此很可能需要一款轻量级操作系统，适用于未来的任何硬件产品。

shadow DOM v1: self-contained web components
https://developers.google.com/web/fundamentals/primers/shadowdom/
Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web platform. Without tools or naming conventions, you can bundle CSS with markup, hide implementation details, and author self-contained components in vanilla JavaScript.

The Standard Library of the Internet
https://stdlib.com/
Our vision is simple — we believe every developer should be able to interface with the cloud as if it were an extension of their personal computer. Write backend code, push to stdlib as a microservice and have your logic available everywhere. No servers, no hassle.

The State of JavaScript
https://www.youtube.com/watch?v=5NIL3Epadj0
Jack Franklin tackles JS “fatigue”, transpilers, frameworks and everything in between to get a sense of the good and bad that comes with writing JavaScript in 2016. He looks at what the future holds for JavaScript, what new additions we might see and the direction of JS going forwards.aScript’, where he explores, discusses and criticises the current state of web development with JavaScript.

What are good reads for designing APIs?
https://news.ycombinator.com/item?id=12262586
回答中给出了很多值得参考的东西。和 HTTP 接口定义相关的推荐看 Microsoft REST API Guidelines

A Glimpse Into The Future With React Native For Web
https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
Instead of forcing you to maintain two separate code bases for your mobile and web apps, or making a hybrid app, with all its compromises, React Native for Web is intended to let you write a single app that runs in a browser using standard web technologies, or on iOS and Android as a real native mobile app.

Angular 2 RC5 - NgModules, Lazy Loading and AoT compilation
http://angularjs.blogspot.com/2016/08/angular-2-rc5-ngmodules-lazy-loading.html
Today we’re publishing Angular 2 RC5 - including:

Support for @NgModule decorators
FormsModule, RouterModule, and Material Design modules make it easier to use these libraries
Ahead-of-time (AoT) compilation for components and services
Lazy-loading support for the router

阿里CTO行癫西雅图首次披露阿里技术布局
http://36kr.com/p/5051073.html
阿里云对技术的抽象和理解挺值得学习的。另附：阿里云新logo、AliSQL 即将开源。

NPM packages: they ain’t free, you know
https://medium.com/@david.gilbertson/npm-packages-they-aint-free-you-know-e3506278314c#.bmwybdi9o
As you’re next typing npm install…, stop to think about the total cost of that package, over the lifespan of your project. For you and for your fellow developers. Spend a few minutes to compare that to how much effort it will save you today and maybe, just maybe, that the package is a freebie you can live without. 另附一个 npm 相关的 I Peeked Into My Node_Modules Directory And You Won’t Believe What Happened Next

下一代模块打包工具 - Rollup
http://www.zjy.name/archives/next-generation-module-bundler-rollup.html
Rollup 称自己为下一代打包工具，因为 Rollup 为 ES2015 模块化规范而生的。与当下流行的 CommonJS 打包规范打包工具不同，Rollup 可以直接打包符合 ES2015 模块化规范的代码，而并不需要将代码通过 Babel 转化为 CommonJS 模块化规范的形式。

趣分期基于koajs的前后端分离实践
https://segmentfault.com/a/1190000006265503
实践心得：基于前后端分离的类RESTful架构，能很好的满足WebAPP的业务需求。尤其是WebAPP+NativeAPP产品为主的中小型公司，能让整个公司的服务端研发和部署更灵活。

[译]HTTP/2的应用实战：每天400gb图片
http://www.infoq.com/cn/articles/real-world-http2-400gb-of-images-per-day
本文将对我们采用HTTP/2过程中遇到的性能退化问题进行深入研究。

React Enlightenment
https://www.gitbook.com/book/frontendmasters/react-enlightenment/
React Enlightenment instructs squarely on the basic principles of React code removing any additional tool noise from the topic. 另附官方文档中一篇的翻译 React高级性能优化

How a template engine works
https://fengsp.github.io/blog/2016/8/how-a-template-engine-works
如何实现一个模板引擎

码农·数据技能-第24期
http://www.ituring.com.cn/book/1888
本期《码农》选取了数据采集、数据清洗、数据分析和数据可视化方向的代表性文章，帮助读者掌握从事数据科学工作所面临的问题及必备

Beginner’s Guide to Accelerated Mobile Pages (AMP)
http://www.hongkiat.com/blog/guide-to-accelerated-mobile-pages-amp/
Accelerated Mobile Pages are regular HTML pages that need to follow a set of rules in order to make pages load faster and render with reliable performance. Let’s have a look at the most important things you need to know about it.

Let’s build a URL Shortener with Node, MongoDB and Hapi.js
https://codetuts.tech/build-a-url-shortener-node-hapi-js/
Have you ever wonder how URL shorteners like bit.ly or goo.gl work? Well, we’re going to actually build a simple shortener so you can learn how it’s done

H5 视频直播那些事
http://dev.qq.com/topic/57a42ee6503dfcb22007ede8
目前视频直播，尤其是移动端的视频直播已经火到不行了，基本上各大互联网公司都有了自己的直播产品，所以对于直播的一些基本知识和主要技术点也要有所了解，本次分享就向大家介绍一下其中的奥秘。

Building fast.com
http://techblog.netflix.com/2016/08/building-fastcom.html
The idea behind fast.com is to provide a quick and simple way for any internet user to test their current internet speed, whether they are a Netflix member or not. Since fast.com was released, millions of internet users around the world have run the test. We have seen a lot of interest in the site and questions about how it works. This blog will give a high-level overview of how we handled some of the challenges inherent with measuring internet speeds and the technology behind fast.com.

Design Better Data Tables
https://medium.com/mission-log/design-better-data-tables-430a30a00d8c#.5bnh0nbsb
The ire raised by data tables is due, no doubt, to just how awful they can look when they’re not well designed. The design of a table is its linchpin: if it’s done right, it makes complex data easy to scan and compare. If it’s done wrong, it can render information completely incomprehensible.

微信 Tinker 负责人张绍文关于 Android 热修复直播分享记录
http://www.diycode.cc/topics/231
介绍 Tinker 的实现原理和相关技术比较

Android 进程保活招式大全
http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653577617&idx=1&sn=623256a2ff94641036a6c9eea17baab8
这是不把 Android 玩坏誓不罢休的节奏吗？花这么多精力搞这个还不如实打实地优化应用的体验和性能，做绿色环保好用的 app。

Android开发中应该使用哪一种主流json框架
https://zhuanlan.zhihu.com/p/21919300
无论是在国内还是国际上，有很多应用会用到json框架，其中谷歌提供的gson框架是被使用得最多的，老牌json框架Jackson属于小众，阿里出品的FastJson在国内的使用情况仅次于Gson，但在国际上却基本没有APP在使用。另附：Android开源项目之网络请求哪家强

唯品会全链路应用监控系统解决方案
http://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653547643&idx=1&sn=c06dc9b0f59e8ae3d2f9feb734da4459
借鉴 Google Dapper 实现的全链路监控系统。

技术的正宗与野路子
http://gold.xitu.io/post/57ab4bd32e958a0066cf7041
关于如何学习的讨论，作者的心得是：要把知识梳理成系统的结构，要让头脑中的知识层次清楚，为此，我们需要阅读恰当的东西，需要不断地练习，需要克服种种困难。成长没有捷径可走。需要的是一个一个坚实的突破。

Google的人员管理及容器集群技术案例实践
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650993723&idx=2&sn=f9525dd8c94773ed989f5e2c0d97c2b0
云科技的创始人张鑫，曾参与谷歌私有云管理平台和公有云产品的建设，在这篇文章分享一下谷歌内部项目人员管理和开发运维一体化的实践经验。另附Google Brain团队在线问答两万字全录

新鲜货

Mithril-A Javascript Framework for Building Brilliant Applications
https://github.com/lhorie/mithril.js
http://mithril.js.org/
Mithril is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain. Only 7.8 kB gzipped, no dependencies. Small API, small learning curve

React Server - Blazing fast page load and seamless transitions.
https://react-server.io/
React-server is a framework designed to make universal (née isomorphic) React easier to write, providing standard answers for these questions and more. When you write your app for react-server, you concentrate on your React components, and react-server takes care of everything else that’s needed to run and deploy real React server-rendered apps.

marky-markdown - npm’s markdown parser
https://www.npmjs.com/package/marky-markdown
marky-markdown is a markdown parser, written in NodeJS, that aims for parity with GitHub-style markdown. It is built on top of markdown-it, a CommonMark markdown parser. You can use marky-markdown: programmatically in NodeJS; in your terminal; in the browser *does not yet support syntax highlighting; marky-markdown is the thing that parses package READMEs on http://www.npmjs.com .

Chrome 53 Beta: Shadow DOM, PaymentRequest, and Android autoplay
http://blog.chromium.org/2016/08/chrome-53-beta-shadow-dom.html
Payment 终于来了，另外，Chrome 53 will begin to block Flash

Auto installs dependencies as you code
https://www.npmjs.com/package/auto-install
Auto installs dependencies as you code. Just hit save.

Firestack
https://www.fullstackreact.com/articles/announcing-firestack-for-firebase/
Firestack aims to be a thin wrapper around the already fantastic Firebase JavaScript library, both providing a clean interface to the Firestack backend as well as adding support for the features the official library does not support.

RestQL：现代化的 API 开发方式
http://tech.meituan.com/koa-restql.html
https://github.com/Meituan-Dianping/koa-restql
Build real RESTful APIs without writing one line of code. Cool, right? 来自美团的用 Node 操作数据库的实践。

JS Tips – A JS tip per day!
http://www.jstips.co/
http://www.jstips.co/zh_CN/
With great excitement, I introduce these short and useful daily JavaScript tips that will allow you to improve your code writing. With less than 2 minutes each day, you will be able to read about performance, conventions, hacks, interview questions and all the items that the future of this awesome language holds for us.

Pundle- Peaceful Bundles (pundles!) for everyone
https://github.com/motion/pundle
Pundle is a next generation module bundler. It’s written with extensibility and performance in mind and out performs any other bundler out there. Pundle uses Mono-Repo architecture to manage npm packages, you can browse each module’s individual documentation by visiting packages/$NAME. 相关的还有： https://github.com/lerna/lerna

jointjs
http://www.jointjs.com/
HTML 5 Flow charts, BPMN and other diagrams. 另附一个商业图形库：http://www.anychart.com/ 号称 Robust JavaScript/HTML5 Chart library for any project.

WAUD.JS
http://www.waudjs.com/
Waud is a simple and powerful web audio library that allows you to go beyond HTML5’s

Why can’t node be used for everything?
https://www.reddit.com/r/node/comments/4wzoo9/why_cant_node_be_used_for_everything/
围观下国外码农的“圣战”。

Building Themes with CSS4 Color Features
https://cloudfour.com/thinks/building-themes-with-css4-color-features/
https://drafts.csswg.org/css-color/#modifying-colors
I’ve been experimenting lately with a new way to apply color values in my CSS. Instead of setting explicit values for each color, I calculate the entire palette from a small set of base colors. It’s not an applicable solution for every project, but it might be an interesting alternative method to consider.

微信进军H5工具市场
http://www.jiemian.com/article/783573.html
微信试图通过降低企业在H5上的投入成本，以确保H5的顺利投放。只是它低估了企业对品牌宣传的要求。

产品及其它

Seymour Papert 留给我们的思想遗产
https://zhuanlan.zhihu.com/p/21841141
http://www.media.mit.edu/people/in-memory/papert
西摩尔·帕普特至少给三个领域带来了革命，分别是儿童发展、人工智能，以及科技与教育之融合。他发明的 Logo Programming Language 挺有趣的，这是 Web 版 https://turtleacademy.com/ 。另附：程序员雷霄骅的离去，给我们留下了什么、前华为员工魏延政-人生若如几回忆。向大师及非大师致敬。健康是一种责任，请每位码农务必重视健康，平衡好工作和休息。

不思量，自难忘：我的10年程序生涯
http://www.cnblogs.com/zhouyu629/p/5747467.html
赞这些心得：

坚持两个字说起来非常容易，做起来非常之难。当你在巨大压力下，比别人多坚持一步，也许你就看到黎明的阳光
如果再给我一次机会，我希望我能够做到一专多能。在某一方面深入的研究下去，其他的了解就可以了
我们这些凡夫俗子，能做的就是提升自己的能力
周围总有些人负能量满满，你跟这些人在一起，会或多或少的受他们影响。要么想办法改变，要么就走，请收起你的抱怨

别开发 app 了
http://mp.weixin.qq.com/s?__biz=MjM5ODQwMjA4MA==&mid=2649293557&idx=1&sn=98f34bb53a54331887cb99972c89e1bc
可以顺着这篇文档了解下微信构建的公众号生态。

百度文化 29 条
https://zhuanlan.zhihu.com/p/21925653
百度文化可以归结为：简单可依赖。用内部员工的解释就是做事靠谱，交给的事情可以超出预期的搞定，而不是做个半吊子。前百度大数据部技术经理神策数据创始人桑文峰对百度文化论语的 29 条进行整理，形成成五个部分：决策原则、做事方法、团队氛围、人才和归属感。

内部人建议华为炸掉研发金字塔
http://news.pedaily.cn/201608/20160808401246_all.shtml#p1
其实华为面临的问题不少大公司都有。

如何看待近几年网页设计发展与前途？是否网页设计已死成事实？
http://www.c945.com/article/2f82a350fb19f2f7d4ae1a64.html
一位 Web 设计师的思考

医疗类APP中，挂号功能的实现方式探讨
http://www.woshipm.com/pd/384205.html
起挂号，看起来实在已经是一片红海了，现在做挂号的app好像比做直播的还多，并且很多都已经很成熟了，比如我们常用的就医160、微医等。现在起步做这个，有戏吗？我当时也面临这个问题的挑战，但是仔细研究市场之后，发现还是可以做的。