Taobao FED

分类:Web开发

WebGL 纹理详解

WebGL 纹理详解Buffer(数据缓冲区)与 Texture(纹理)是 WebGL 程序的两大数据来源。Buffer 可以通过 ArrayBuffer 或更语义化的 TypedArray 来构造;而 Texture 在大多数情况下,是通过 Image 对象来构造的。在构造和使用 Texture 的过程中,需要确定很多选项来以不同的方式构造 Texture;这些选项之间有着各种各样的关系,或互

前端架构杂思录:议 Function Component 与 Hooks

最近团队里 @大果 分享了 React Hooks,也尝试讨论下 Function Component 与 React Hooks,技术的发展路径总是逐步降低其门槛,简单从轻量级角度我们做一个排序: 1createClass Component > Class Component > Function Component 技术上 Class Component 是可以完全代替 cre

Atag - Web Components 最佳实践

引子上一次社区中谈论起 Web Components 已经可以追溯到三四年前了,彼时 Web Components 仍处于不稳定的草案阶段,Polymer 的出世使大家似乎看到了新一代的前端技术,但直到今天,在今年五月 Google I/O 发布 Polymer 3 之后, Web Components 的规模化应用才看似成为了可能。 过去一段时间,我一直在使用 Web Components 构

Workbox 3:Service Worker 可以如此简单

如果你追求极致的 Web 体验,你一定在站点中使用过 PWA,也一定面临过在编写 Service Worker 代码时的犹豫不决,因为 Service Worker 太重要了,一旦注册在用户的浏览器,全站的请求都会被 Service Worker 控制,一不留神,小问题也成了大问题了。不过到了现在有了 Workbox 3,一切关于 Service Worker 的担心都不再是问题。 科普 Ser

活用 Shader,让你的页面更小,更炫,更快

可编程着色器(shader)是运行在 GPU 中的程序,是现代图形渲染技术的基础。shader 赋予了开发者「逐像素着色」的能力。桌面/移动设备的图形程序 API 诸如 OpenGL,OpenGL ES,DirectX 以及新一代的 Vulkan,shader 都是重中之重,核心中的核心。 WebGL 的出现,使得在浏览器环境中渲染 3D 场景变得轻而易举。但是 WebGL 和 shader 不

Rax 系列教程(长列表)

引子Rax 提供的长列表标签有很多,在什么场景下使用什么列表组件,怎样选择列表组件性能会更好,这些问题可能会给刚接触 Rax 的同学带来困扰。本文结合 Rax 0.5 发布版本对列表能力进行一次详细的梳理。 如何让页面滚动在开始正题之前先说说为什么要有长列表的概念,以及如何让页面可以滚动。 传统的 Web 页面天生在浏览器里就是可以滚动的,我们额外引入一个滚动容器的概念好像比较多余。但当我们做跨

G3D —— Hybrid 环境下的 WebGL 3D 渲染引擎

G3D 是一款基于 WebGL 的 JavaScript 3D 渲染引擎,借助 GCanvas,G3D 可以运行在 Weex,ReactNative 等 hybrid 环境下。G3D 由淘宝终端团队推出,并于 2018 年 3 月与 GCanvas 同时宣布正式开源。 那么就会有同学问了,G3D 和 three.js 有什么不同呀?G3D 和 GCanvas 究竟是什么关系啊?这篇文章,就聊一聊

Rax 系列教程(native 扫盲)

引子Rax 天生就是一个跨容器的解决方案,这让我们不必单独了解 iOS 和 安卓背后做了什么,让我们的开发变得很省心。但真实情况是我们的业务往往同时跑在 web 和 native 两端,web 我们轻车熟路是前端天生的优势,native 对很多人来说就会有些陌生,native 上出现的各种问题用 web 的路子去解释往往会解释不通。据 2017 年底粗略统计 Rax 的用户 70% 是前端同学,

Rax 系列教程(上手)

引子这篇文章针对初学 Rax 的同学,主要介绍 Rax 是什么,开发体验的梳理,以及遇到 Rax 的开发问题如何寻求解决。本文配合 Rax 的 0.5 发布版本推出,结合新版 Rax 对于旧版的教程内容做出部分修正。 1、什么是 Rax Rax 是一个源自淘宝的开源项目 https://github.com/alibaba/rax 作为 Weex 的上层 DSL 在集团内有广泛的应用。 除了跨

如何实现一个 Git Diff 解析器

代码审阅中一个重要功能是对两个 commit 进行 diff 并展示到页面中,这篇文章将尝试总结其实现过程。 解析 Git Diff想要展示 diff,首先需要将 Git 提供的 diff 格式解析成结构化数据(比如:JSON)。 基本格式一个基本的 Git Diff 格式如下: 12345678910111213diff --git a/f1 b/f1index 6f8a38c..449b07