云音乐 React Native 优化实践之拆包与预热

2020-11-12
阅读 3 分钟
2.6k
随着 React Native 技术在业务中广泛的应用,一些比较重要的功能也开始采用 React Native 的技术方案来实现,这就给 React Native 页面的打开速度提出了更高的要求,因为打开速度是影响用户跳出率的重要原因之一。

函数式编程进阶:应用函子

2020-11-06
阅读 10 分钟
3.7k
上一章中介绍了 Functor(函子) 的概念,简单来说,就是把一个 “value” 填装进 “Box” 中,继而可以使用 map 方法映射变换 Box 中的值:Box(1).map(x => x+1)。本章我们在继续在 Box 的基础上继续扩展其他更强大的理念,从纯函数与副作用)的概念及用途作为承上启下的开端,继续巩固 Functor 的概念以及接下来将要介绍的...

前端组件化埋点的实践

2020-10-30
阅读 7 分钟
5.2k
开始正文前先介绍一下相关概念,熟悉的读者可以略过。前端埋点:一种收集产品数据的方式,它的目的是上报相关行为数据,相关人员以数据为依据来分析产品在用户端的使用情况,根据分析出来的结果辅助产品优化、迭代。BI:商业智能,公司内部做数据分析相关的部门。

网易云音乐 iOS 14 小组件实战手册

2020-10-26
阅读 16 分钟
11.9k
苹果在今年的 WWDC20 上发布了小组件(WidgetKit),支持在 iOS、iPadOS 主屏幕展示动态信息和个性化内容。加上 iOS 系统应用抽屉的加入,苹果对一向保守主屏幕大动干戈,导致用户也对小组件非常期待。但小组件的运行限制很多,如何在有限的机制上怎样做好用户体验就成为需要完成的挑战。

基于 qiankun 的 CMS 应用微前端实践

2020-10-22
阅读 16 分钟
5.2k
LOOK 直播运营后台工程是一个迭代了 2+ 年,累计超过 10+ 位开发者参与业务开发,页面数量多达 250+ 的“巨石应用”。代码量的庞大,带来了构建、部署的低效,此外该工程依赖内部的一套 Regularjs 技术栈也已经完成了历史使命,相应的 UI 组件库、工程脚手架也被推荐停止使用,走向了少维护或者不维护的阶段。因此, LOOK ...

聊聊 JavaScript 的并发、异步和事件循环

2020-10-19
阅读 5 分钟
4.1k
JavaScript 作为天生的单线程语言,社区经常聊 JavaScript 就聊异步、聊 Event Loop,看起来它们好像难舍难分,实际上可能只有五毛钱的关系。本文把这些串起来讲讲,希望能给读者带来一些收获,如果能消除一些误解那就最好了。

UIButton 状态新解

2020-10-14
阅读 6 分钟
2.6k
作为 iOS 开发者,一提到控件,就不得不提到 UIButton,它做为 iOS 系统最常用的响应用户点击操作的控件,为我们提供了相当丰富的功能以及可定制性。而我们的日常工作的 80% ~ 90% 做是在与 UI 打交道,处理控件在用户的不同操作下的不同状态,最简单的,比如用户没有登录时,按钮置灰不可点击,用户点击时出现一个反色...

搭建一个属于自己的在线 IDE

2020-10-12
阅读 13 分钟
5.4k
这几个月在公司内做一个跨前端项目之间共享组件/区块的工程,主要思路就是在 Bit 的基础上进行开发。Bit 主要目的是实现不同项目 共享 与 同步 组件/区块,大致思路如下:在 A 项目中通过执行 Bit 提供的命令行工具将需要共享的组件/区块的源码推送到远端仓库,然后在 B 项目中就可以同样通过 Bit 提供的命令行工具拉取...

RBAC 权限模型在 EggJS 中的实践

2020-09-24
阅读 5 分钟
3.2k
一提到后台系统,权限管理体系是其中一个必不可少的组成部分。后台往往涉及到大量的数据(包含许多隐私数据),这些数据通常需要不同职责的人员进行分别管理也就是我们所谓的各司其职。一个良好的权限设计能够起到保证业务数据处理的流畅性,降低操作风险,保障数据安全的作用。在近期负责的中后台应用中正好有权限设计...

字体构造与文字垂直居中方案探索

2020-09-09
阅读 8 分钟
6.6k
垂直居中基本上是入门 CSS 必须要掌握的问题了,我们肯定在各种教程中都看到过“CSS 垂直居中的 N 种方法”,通常来说,这些方法已经可以满足各种使用场景了,然而当我们碰到了需要使用某些特殊字体进行混排、或者使文字对齐图标的情况时,也许会发现,无论使用哪种垂直居中的方法,总是感觉文字向上或向下偏移了几像素,...

云音乐 React Native 体系建设与发展

2020-09-02
阅读 7 分钟
11.8k
17 年 3 月份,为了解决商城性能和用户体验问题,云音乐技术团队组建了一只 4 人 ReactNative 开发小分队:我负责 RN 前端开发,安卓和 iOS 两位开发负责在云音乐 App 里面嵌入 RN Native SDK,还有一位 Java 开发来负责部署平台工作。

用「增量」思想提升代码检查和打包构建的效率

2020-08-26
阅读 7 分钟
4.1k
在这里「增量」这个概念的对立面是「全量」。在 Linux 系统中当需要备份数据或者跨服务器同步文件时,会用到一个叫 rsync 的工具,它的速度会比 scp/cp 命令更快,因为它会先判断已经存在的数据和新数据的差异,只传输不同的部分,即「增量」同步。

面向复杂场景的表单解决方案

2020-08-20
阅读 9 分钟
8.7k
云音乐 B 端业务场景非常多,B 端业务相对于 C 端业务产品生命周期更长而且更注重场景的的梳理。很多时候开发 B 端业务都是拷贝之前的代码,这样增加了很多重复而且枯燥的工作量。

React Fiber 源码解析

2020-08-11
阅读 16 分钟
11.2k
在 React v16.13 版本中,正式推出了实验性的 Concurrent Mode,尤其是提供一种新的机制 Suspense,非常自然地解决了一直以来存在的异步副作用问题。结合前面 v16.8 推出的 Hooks,v16.0 底层架构 Fiber,React 给开发者体验上带来了极大提升以及一定程度上更佳的用户体验。所以,对 React 17,你会有什么期待?

Web 端 APNG 播放实现原理

2020-08-06
阅读 10 分钟
12.2k
如果动画仅单独展示可以使用 <img> 直接展示 APNG 动画,但是会存在兼容性 Bug,例如:部分浏览器不支持 APNG 播放,Android 部分机型重复播放失效。

React Native 实现自定义下拉刷新组件

2020-07-21
阅读 7 分钟
8.1k
Web 应用如果要更新列表数据,一般会选择点击左上角刷新按钮,或使用快捷键 Ctrl+F5,进行页面资源和数据的全量更新。如果页面提供了刷新按钮或是翻页按钮,也可以点击只做数据更新。

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

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

构建基于 iOS 模拟器的前端调试方案

2020-06-24
阅读 5 分钟
8.2k
我们在开发 iOS App 内的前端页面时,有一个很大的痛点,页面无法使用 Safari Inspector 等工具调试。遇到了问题,我们只能想办法加 vConsole,或者注入 Weinre,或者盲改,实在不行就找客户端同学手动打包调试,总之排查问题的路途非常艰难。

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

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

React Hooks 最佳实践

2020-05-22
阅读 19 分钟
3.6k
在过去的几个月里,React Hooks 在我们的项目中得到了充分利用。在实际使用过程中,我发现 React Hooks 除了带来简洁的代码外,也存在对其使用不当的情况。

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

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

Node CLI 工具的插件方案探索

2020-04-28
阅读 7 分钟
2.3k
CLI 工具作为开发者们亲密无间的好伙伴,996 风雨无阻地陪伴着我们进行日常的开发工作。身为前端开发,你一定也亲自开发过一套属于你自己的 CLI 小工具!如果没有,本文也不会教~ 在接下来的五分钟里,我们来聊聊 Node CLI 工具的进阶设计,探索一下在 CLI 端需求复杂化的场景下,如何利用插件机制来为这类小工具带来更...

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

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

Web 视频播放的那些事儿

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

从全局播放到单例模式

2020-03-24
阅读 7 分钟
1.8k
图片来源:[链接]本文作者:郑正和 本文以音频能力中的全局播放为切入点,探讨单例模式在前端业务中的应用。文中代码均为 React 组件内代码。 全局播放 在文章一开始,我们先解释一下全局播放的含义: 媒体在应用中时时都在播放(跨路由、跨 tab、后台播放) 用户对媒体有全局控制能力 对大多数具备音频能力的应用而言,...

Three.js 动效方案

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

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

2020-02-28
阅读 9 分钟
2.2k
Server Side Rendering(SSR):服务端渲染,简而言之就是后台语言通过模版引擎生成 HTML 。实现方式依赖于后台语言,例如 Python Flask 的 Jinja、Django 框架、Java 的 VM、Node.js 的 Jade 等。

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

2020-02-20
阅读 13 分钟
6.3k
前言 近几年,前端社区中 DSL 这个词开始频繁出镜,这和环境的变化有很大关系: React、Vue、Angular 等现代框架的表现层设计往往和 DSL 有较强的关联,透过这些优秀作品我们可以得到一些实践指引。 前端相关语言的转编译工具链趋于成熟,如 babel,postcss 等工具可以帮助开发者以扩展插件的方式低成本地参与到语言构建...

捕获 React 异常

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

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

2020-01-09
阅读 11 分钟
5k
市面上,音频编辑软件非常多,比如 cubase、sonar 等等。虽然它们功能强大,但是在 Web 上的应用却显得心有余而力不足。因为 Web 应用的大多数资源都是存放在网络服务器中的,用 cubase 这些软件,首先要把音频文件下载下来,修改完之后再上传到服务器,最后还要作更新操作,操作效率极其低下。如果能让音频直接在 Web ...