Taobao FED

主页

深入理解 GraphQL

0.引子通过上一篇文章我们对 GraphQL 有了基础的了解。我们知道 GraphQL 使用 Schema 来描述数据,并通过制定和实现 GraphQL 规范定义了支持 Schema 查询的 DSQL (Domain Specific Query Language,领域特定查询语言)。Schema 帮助将复杂的业务模型数据抽象拆分成细粒度的基础数据结构,而 DSQL 的实现则赋予了前端开发者自由

当前端也拥有 server 的能力

今天看了不少文章,比较感兴趣的是 Cache API。它是浏览器 Request/Response 的缓存管理工具,其使用风格和运用场景让我瞬间联想到了 ServiceWorker 和 Fetch API,相信很多同学也多次看到过这两个东西,本文会对它们做一个简洁的介绍,并谈一谈我对这些新玩具的看法。

淘宝前端团队 2016 实习生招聘开启

校招生小迪的一周年又到了春暖花开的季节,中午时分,漫步在园区的湖间小道,微风吹过脸庞 “再过几天就是我踏入阿里园区一周年纪念了呢” 小迪一边整理被风吹散的头发,一边陷入回忆。 “请简要描述一下事件委托的原理” 电话那头是温暖的男声,带有程序员说话那种简洁明了的感觉,小迪开始有一丝紧张,因为喜爱前端这个职业,享受代码在指尖呈现的美好,小迪从大二就开始学习前端基础,做项目,但因为缺乏体系化学习途径

Canvas 最佳实践(性能篇)

Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形。目前,所有的主流浏览器都支持 Canvas。 Canvas 最常见的用途是渲染动画。渲染动画的基本原理,无非是反复地擦除和重绘。为了动画的流畅,留给我渲染一帧的时间,只有短短的 16ms。在这 16ms 中,我不仅需要处理一些游戏逻辑,计算每个对象的位置、状态,还需要把它

前端工程化:云构建

背景通常个人在开发项目的时,都是在本地编写构建脚本对项目进行构建,这个脚本可能是 Gulp,可能是 Grunt, 可能是 webpack,也可能是其他的一些脚本,每次代码发布之前,都要对代码进行构建,代码仓库里面包含构建脚本和构建之后的代码。对于个人开发,这样做是没有问题的,但是涉及到多人开发或者团队开发就会有一定的问题。说是问题也不是问题只不过是会导致开发效率降低,构建错误的情况越来越多。 在

通通连起来——无处不在的流

最近总是听见 liu 这个东西啊,比如 liu 翔低调宣布新恋情啦、 liu 强冬告白奶茶啦、微软停止支持 IE liu 览器啦,最近我们的淘宝前端夜校讲师也提到了 liu (流)的运用。 在 Unix 系统中流就是一个很常见也很重要的概念。 Unix 的哲学:一个程序只做一件事,并做好。程序要能协作。程序要能处理文本流,因为这是最通用的接口。 – Douglas McIlroy 还记得

进程间通信的另类实现

背景Node.js 内置的进程间通信使用非常简单,但也有一定的局限性,只能在父子进程间通信。下面是官方文档给的一个例子。 首先是父进程的 parent.js : 12345678const cp = require('child_process');const n = cp.fork(`${__dirname}/sub.js`);n.on('message', (m) =&g

JSON Schema 那些事儿:基本概念

引子在早期的淘宝 TMS 页面搭建系统中,为了解决页面模板和数据的分离问题,机智的先知们扩充了一系列灵活的 PHP 标签函数,得以将数据的定义从模板视图中解耦出来。以其中一个最为常用的函数为例: 1_tms_custom('{"name":"TextLinks","title":"文字链接","group":"文字链接","row":"10","defaultRow":"5","fie

前端也应该了解点 docker 知识:docker 架构(上)

上一篇文章 前端也应该了解点 docker 知识:docker 的理念与场景 介绍了 docker 的一些理念,以及在前端方面可能的应用场景,本篇我们梳理一下 docker 的架构。 话说,我们团队的小明同学看了上篇文章之后,很是激动,迫不及待的想尝试下 docker ,然后按照网上一些教程跑出来了一个 “Hello world” ,激动的差点把鼠标给扔了。如果小明的故事到这里,那就不是我们团

无线性能优化:页面可见时间与异步加载

如何让页面尽可能早地渲染页面,页面更早可见,让白屏时间更短,尤其是无线环境下,一直是性能优化的话题。 页面可见时间页面可见要经历以下过程: 解析 HTML 为 DOM,解析 CSS 为 CSSOM(CSS Object Model) 将 DOM 和 CSSOM 合成一棵渲染树(render tree) 完成渲染树的布局(layout) 将渲染树绘制到屏幕 layout 由于 JS 可能随