云音乐前端专栏

实现一个简单的基于 WebAssembly 的图片处理应用

2020-07-01

本文希望通过 Rust 敲一敲 WebAssembly 的大门。作为一篇入门文章,期望能够帮你了解 WebAssembly 以及构建一个简单的 WebAssembly 应用。在不考虑IE的情况,目前大部分主流的浏览器已经支持 WebAssembly,尤其在移动端,主流的UC、X5内核、Safari等都已支持。读完本文,希望能够帮助你将 WebAssembly 应用在生产环境中。

互动直播中的前端技术 -- 即时通讯

2020-06-08

在疫情期间,上班族开启了远程办公,体验了各种远程办公软件。老师做起了主播,学生们感受到了被钉钉支配的恐惧,歌手们开启了在线演唱会,许多综艺节目也变成了在线直播。在这全民互动直播的时期,我们来聊聊互动直播中的即时通讯技术在前端中的使用。

React Hooks 最佳实践

2020-05-22

在过去的几个月里,React Hooks 在我们的项目中得到了充分利用。在实际使用过程中,我发现 React Hooks 除了带来简洁的代码外,也存在对其使用不当的情况。这篇文章中,我想总结我过去几个月来对 React Hooks 使用,分享我对它的看法以及我认为的最佳实践,供大家参考。

Node.js 应用日志切割原理与踩坑实践

2020-05-09

2019 年初的时候,我们业务组上线了一个新的 Node.js 应用,主要提供C端的 API 服务。 随着应用流量的逐渐增加,线上监控平台会偶发性报警,提示磁盘 disk_io 平均等待时间超出 1000ms,随后观察发现磁盘 IO 每秒写字节量突然飙高,但很快又下降。

Node CLI 工具的插件方案探索

2020-04-28

CLI 工具作为开发者们亲密无间的好伙伴,996 风雨无阻地陪伴着我们进行日常的开发工作。身为前端开发,你一定也亲自开发过一套属于你自己的 CLI 小工具!

从零搭建中后台框架的核心流程

2020-04-17

随着 React 生态的快速发展,社区基于 React 的状态管理方案层出不穷,这意味着很多方案开发者依然要做很多选择,没有约定的团队,沟通成本和跨团队协作成本,以及长期的维护是非常高的,这时候统一一套开发模式就显得尤为重要。

Web 视频播放的那些事儿

2020-04-07

对于视频的在线播放,按视频内容的实时性可以分为点播(VOD)和直播(Live Streaming)。现如今在 Web 环境下需要进行视频播放时,通常可以使用 video 标签,通过它将视频播放的各个环节都托管给浏览器。

从全局播放到单例模式

2020-03-24

本文以音频能力中的全局播放为切入点,探讨单例模式在前端业务中的应用。文中代码均为 React 组件内代码。

Three.js 动效方案

2020-03-17

Three.js(下面简称 Three) 作为一个 3D 库,不仅减少了我们学习 OpenGL 和 WebGL 的成本,还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知,Three 更多的是用 3D 模型 + 投影相机 + 用户交互的方式来构建一个「3D 世界」。

支持动态路由的 React Server Side Rendering 实现

2020-02-28

服务端渲染有很多坑会踩,针对路由本文提出一种解决方案,在服务端不使用中心化的路由配置,结合 Code Splitting ,通过一次预渲染,获取当前 URL 对应的模块名和数据获取方法。

前端 DSL 实践指南(上)—— 内部 DSL

2020-02-20

本文作者由于工作经历上的特殊性,积累了一些关于前端 DSL 的实践经验(主要是外部 DSL),在所维护的开源项目中也有一些体现,同时作者在社区也有过一些不成体系的回答如《如何写一个类似 LESS 的编译工具》。这次我会尝试从前端开发的视角来完整探讨下 DSL 这个「难以细说」的议题。

捕获 React 异常

2020-01-14

韩国某著名男子天团之前在我们平台上架了一张重磅数字专辑,本来是一件喜大普奔的好事,结果上架后投诉蜂拥而至。部分用户反馈页面打开就崩溃,紧急排查后发现真凶就是下面这段代码。

用 Web 实现一个简易的音频编辑器

2020-01-09

市面上,音频编辑软件非常多,比如 cubase、sonar 等等。虽然它们功能强大,但是在 Web 上的应用却显得心有余而力不足。因为 Web 应用的大多数资源都是存放在网络服务器中的,用 cubase 这些软件,首先要把音频文件下载下来,修改完之后再上传到服务器,最后还要作更新操作,操作效率极其低下。如果能让音频直接在 Web 端进行编辑并更新到服务器,则可以大大提高运营人员的工作效率。下面就为大家介绍一下如何运用 Web 技术实现高性能的音频编辑器。

函数式编程进阶:杰克船长的黑珍珠号

2019-12-30

本系列文章适合拥有扎实的 JavaScript 基础和有一定函数式编程经验的人阅读,本文的目的是结合 JavaScript 的语言特性来讲解范畴论的一些概念和逻辑在编程中的实际应用。

「圣诞特辑」纯前端实现人脸识别自动佩戴圣诞帽

2019-12-25

叮叮当,叮叮当,吊儿个郎当,一年一度的圣诞节到咯,我不由的回想起了前两年票圈被圣诞帽支配的恐惧。对于懒人的我来说,自己调整一个圣诞帽子佩戴还是太麻烦了。于是我就想了,有没有什么办法能让我的头像自动佩戴上圣诞帽呢?还真给我想到了,这就是今天的主题,用纯前端的方式给你做一个自动佩戴圣诞帽的网站。

从 Fetch 到 Streams —— 以流的角度处理网络请求

2019-12-23

流在开发中是一个很常见的概念。有了流,在处理大文件时就不再需要等待整个数据获取完毕后才处理数据,而是可以一段一段地拿到数据,在获得数据的同时直接解析数据。这样既可以高效利用 CPU 等资源,还减少了存放整个数据的内存占用。不过在过去,客户端 JavaScript 上都没有流的概念,而随着 Streams API 在各大浏览器上的逐步实现,我们终于可以使用原生的 API 以流的角度来看待数据了,例如从 fetch 请求上可以得到一个网络流。

开发高质量服务端 API

2019-12-17

如果使用了 Node.js 作为服务端开发语言,我们肯定要开发 API 接口。本文用一个示例需求,来讲述一下如何高效开发高质量的服务端 API 接口。

云原生基础及调研

2019-12-09

本文仅用于简单普及,达到的目的是给没接触过或者很少接触过这方面的人一点感觉,阅读起来会比较轻松,作者深知短篇幅文章是不可能真正教会什么的,所以也不会出现 RTFM 的内容。

前端领域的 Docker 与 Kubernetes

2019-11-27

看完本文希望读者能够了解到,Docker 的基本原理,Kubernetes 是怎么工作的, 对于前端 Kubernetes 有哪些优势与玩法。

使用 svrx 实现更优雅的接口 Mock

2019-11-20

目前 Web 开发普遍都切换到了前后端分离的开发模式。虽然在工程和职能上已经分离了,但在实际工作中,前后端在开发进度上往往会出现不一致的情况,此时就会极大地影响开发效率。 接口 mock 在此时就发挥出了巨大价值,它磨平了这个时间差,最终实现高效的前后端分离开发。

Lighthouse 测试内幕

2019-11-12

云音乐前端性能监控平台,底层使用了 Lighthouse 进行审计评分,在实践过程中我们积累了一些 Lighthouse 内部实现的研究经验,希望通过这篇文章可以分享给各位读者。

JavaScript 中的位运算和权限设计

2019-11-07

先简单回顾下位运算,平时用的少,相信不少人和我一样忘的差不多了,根据位运算的特点,设计一个权限系统(添加、删除、判断等)

从零实现自定义 JSON Parser

2019-10-31

Zergling 是我们团队自研的埋点管理平台,默认的数据格式有点特殊,需要一个自定义的 json parser 来规范输入问题,总的分为词法分析和语法分析两部分

Web Audio在音频可视化中的应用

2019-09-26

本文有两个关键词:`音频可视化`和`Web Audio`。前者是实践,后者是其背后的技术支持。 Web Audio 是很大的知识点,本文会将重点放在**如何获取音频数据**这块。

Web 应用的撤销重做实现

2019-08-22

前不久,我参与开发了团队中的一个 web 应用,过程中让用户能够进行操作的**撤销、重做**会提高编辑效率,大大提高用户体验,而本文要讲的正是在这个功能实现中的探索与总结。