FEX 技术周刊 - 2017/01/09

FEX 百度 Web 前端研发部 36 阅读



飞叔新作,结合一些典型场景探讨了 Web 应用数据层的可行实现方式,对做单页应用非常有帮助。


Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability
The redux-thunk and redux-saga libraries are the most widely-used libraries for “side effects” in Redux. There’s been a lot of recent statements arguing that thunks (and sagas) are bad and should almost never be used. As a result, I’ve seen developers confused and wondering what alternatives they have to implement a given feature. The concerns being raised are valid, but to balance the discussion, I would argue that thunks are a useful tool in Redux applications, and that developers should not be scared to use thunks in their codebase. 作者的 Idiomatic Redux 系列文章挺不错的。

The memory models that underlie programming languages
There are about six major conceptualizations of memory, which I’m calling “memory models”², that dominate today’s programming. These models shape what our programming languages can or cannot do at a much deeper layer than mere syntax or even type systems. Mysteriously, I’ve never seen a good explanation of them — you pretty much just have to absorb them by osmosis instead of having them explained to you — and so I’m going to try now. Then I’m going to explain some possible alternatives to the mainstream options and why they might be interesting.

Clean Code concepts adapted for JavaScript
Software engineering principles, from Robert C. Martin’s book Clean Code, adapted for JavaScript. This is not a style guide. It’s a guide to producing readable, reusable, and refactorable software in JavaScript. Not every principle herein has to be strictly followed, and even less will be universally agreed upon. These are guidelines and nothing more, but they are ones codified over many years of collective experience by the authors of Clean Code.

The PRPL Pattern
PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. It stands for:
- Push critical resources for the initial URL route.
- Render initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.

Algorithm-Driven Design: How Artificial Intelligence Is Changing Design
This is a story of a beautiful future, but we should remember the limits of algorithms — they’re built on rules defined by humans, even if the rules are being supercharged now with machine learning. The power of the designer is that they can make and break rules; so, in a year from now, we might define “beautiful” as something totally different. Our industry has both high- and low-skilled designers, and it will be easy for algorithms to replace the latter.

How Difficult Can It Be to Integrate Software Development Tools
An unintegrated software development and delivery toolchain creates bottlenecks, drains productivity, impedes collaboration and inhibits project visibility. Integration of the toolchain may seem like a straight forward undertaking, but it is much more difficult than it appears initially.

React’s Five Fingers of Death. Master these five concepts, then master React
Now don’t get me wrong, this doesn’t mean I can turn you into a React master instantly. But at least you’ll understand all the major concepts, if you do decide to jump in. The five key concepts are: Components、JSX、Props & State、The Component API、Component Types.

How I converted my React app to VanillaJS
This little exercise started as a React replacement project, but quickly turned into a React appreciation project. I’m quite sure that if I hadn’t been peeking over the shoulder of React, my efforts would have been a white hot mess. Frameworks will often be doing a bit of extra work that you could avoid if you wrote the code yourself, this is true. But on the whole, I think this is a fair tradeoff for the improved productivity that comes with using a well-written framework that encourages some great practices.

Authoring and publishing JavaScript modules with Flow
I hope this blog post gives you a look into the world of writing typed JavaScript with Flow. In terms of the type system itself this blog post barely touches the power of Flow, and it’s something I’ll be writing more about as I get more comfortable with it and learn more. If you’re a library author I’d encourage you to try writing in Flow, it’s a great experience whilst developing a library and can help prevent bugs.

How to ask good questions
Asking good questions is a super important skill when writing software. I’ve gotten way better at it over the years (to the extent that it’s something my coworkers comment on a lot). Here are a few guidelines that have worked well for me!


13 best practices to secure your web application
Everyone agrees that web application security is very important but few take it seriously. Here’s a 13-step security checklist that you should follow before deploying your next web application.

Node.js Interview Questions and Answers (2017 Edition)
Finally and most importantly: we are all humans, so make your hiring process as welcoming as possible. These questions are not meant to be used as “Questions & Answers” but just to drive the conversation.


整理了 GPU 合成的相关资料,另外推荐看看 Chromium 的设计文档,更详细


阿里HotFix2.0升级详解 畅谈热修复领域那些事
比较业界的各个热修复方案,并提出基于 AndFix 的下一代方案。另附: 腾讯开源手游热更新方案


TypedArray or DataView: Understanding byte order
使用 TypedArray 的时候需要注意这个问题


大批 MongoDB 因配置漏洞被攻击
另附:耗子哥的 从 MONGODB “赎金事件” 看安全问题 、MongoDB 官方的: How to Avoid a Malicious Attack That Ransoms Your Data

微信iOS客户端将于3月1日前逐步升级为WKWebview内核,请网页开发者尽快做好各自网站的兼容检查,完成适配。WKWebview是苹果为支持最新的Webkit功能,自iOS 8起引入的网页浏览控件。开发者可以在微信已发布的6.5.3版本客户端中,手动切换到WKWebview,再检查自己的网页表现是否正常。

Inferno - An extremely fast, React-like JavaScript library
Inferno is an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client and server. Inferno aims to provide all the great benefits that React does, plus other great features for people already familiar with the React ecosystem, such as: lifecycle events on functional components, server side render streams, better real-world performance, lower memory consumption and faster parse/load times.

A spring that solves your animation problems.

Transitioning Firefox’s rendering engine from Gecko to Servo
For the past several years, Mozilla’s been working on a brand new, top-secret engine. Except it’s totally not top-secret. Never was. At another company it would have been a top-secret project. At Mozilla, it’s all done out in the open. The project is called Servo . It was started as an experiment. It’s coded in a new programming language called Rust. Servo is a modern, high-performance browser engine designed for both application and embedded use.

flatpickr - javascript datetime picker
lightweight and powerful datetimepicker with no dependencies

A pure JavaScript image zooming plugin;as seen on Medium.com.

unpkg is a fast, global content delivery network for stuff that is published to npm. Use it to quickly and easily load files using a simple URL like: https://unpkg.com/package@version/file

LoadJS is a tiny async loading library for modern browsers (IE9+). It has a simple yet powerful dependency management system that lets you fetch JavaScript and CSS files in parallel and execute code after the dependencies have been met. The recommended way to use LoadJS is to include the minified source code in your <html> and then use the loadjs global to manage JavaScript dependencies after pageload.

A simple HTTP/2 server for development
simplehttp2server serves the current directory on an HTTP/2.0 capable server. This server is for development purposes only.

Viz.js — Graphviz in your browser
Graphviz is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. It has important applications in networking, bioinformatics, software engineering, database and web design, machine learning, and in visual interfaces for other technical domains. Viz.js is a hack to put Graphviz on the web.

3 JavaScript Libraries to Keep an Eye on in 2017

Test how mobile-friendly your site is
来自 Google 的工具:Test how mobile-friendly your site is.

HTML5 Canvas Gauge
This is tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

High-resolution JavaScript timer based on performance.mark() and measure()

Anbody used Ant Framework? Looks awesome!
国外社区对 antd 的讨论,antd 在国外社区也越来受欢迎了。

What did you do after quitting the IT industry and how have things been?
围观下老外关于退出 IT 行业后干啥的讨论。

Grumpy: Go running Python
Grumpy is an experimental Python runtime for Go. It translates Python code into Go programs, and those transpiled programs run seamlessly within the Go runtime. The goal is for Grumpy to be a drop-in replacement runtime for any pure-Python project.

Font Face Observer Build Status
Font Face Observer is a small @font-face loader and monitor (3.5KB minified and 1.3KB gzipped) compatible with any web font service. It will monitor when a web font is applied to the page and notify you. It does not limit you in any way in where, when, or how you load your web fonts. Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.

Mobile UI Components, based on Vue.js and ionic CSS.


CES 2017
关注下今年有啥高科技,附: CES2017十大最具看点新品 CES 2017 上有不少黑科技,但主角并不是硬件

10 Web Predictions for 2017
Each year, Craig Buckler makes 10 predictions about the year to come, and gives himself a score for the previous year. Read on to see how he performed in 2016, and what he predicts for the web in 2017!


研发浪费通常发生在三个地方:方向上的浪费、低价值需求的浪费、产品经理level高低带来的浪费。如果能得到良好控制,程序员减少几倍,沟通成本随之减少几倍,带动研发效率翻倍上升,就可以实现 APP 由小团队来完成。小团队的精髓并不是牛逼的程序员,而是对需求的冷静把控。产品发展起来,融资到位以后,真正杀死小团队的不是业务成长,而是亢奋带来的需求膨胀。Medium 近期的计划可以算是这篇文章的典型案例: Venture capital is going to murder Medium Renewing Medium’s focus 、译文在这里:http://www.ifanr.com/771571

作者:FEX 百度 Web 前端研发部
原文地址:FEX 技术周刊 - 2017/01/09, 感谢原作者分享。