前端架构与工程-腾讯云开发者社区

开发者社区

文档建议反馈控制台

腾讯云架构师技术同盟

文章/答案/技术大牛

发布

前端架构与工程

专栏成员

71

文章

92113

阅读量

41

订阅数

Puppeteer+RabbitMQ：Node.js 批量加工pdf服务架构设计与落地

rabbitmq 架构设计 pdf puppeteer 服务

个册三个部分的PDF数据来源不同，生产逻辑独立由不同的服务生产，最终将三份PDF合并为一份，还要支持班级所有学生批量生产和压缩打包，所以这个功能在技术角度最主要的特征就是环节多、耗时长：

2023-04-27

7700

翻译：SockJS-node文档（一）

api 编程算法 node.js 数据结构 html

SockJS是一个提供Websocket通信的JavaScript库，目的是实现在浏览器与服务器之间低延迟、全双工、跨域通信，它提供跨浏览器的统一API，即使不支持HTML5 Websocket的浏览器也能通过SockJS实现Websocket通信，SockJS支持不同的后端脚本语音，包括NodeJS、Python、Java等，这里主要介绍SockJS-node，即支持NodeJS的版本。

2022-03-30

2.1K0

hover 背后的数学和图形学

webgl canvas svg api css

前端开发中，hover是最常见的鼠标操作行为之一，用起来也很方便，CSS直接提供:hover伪类，js可以通过mouseover+mouseout事件模拟，甚至一些第三方库/框架直接提供了 hover API ，比如 jQuery 的 hover() 函数。大部分前端开发者在使用这些很方便的方法时，可能并没有思考过 hover 背后的实现原理。

2021-11-19

1.4K0

好未来数据中台 Node.js BFF实践（一）：基础篇

java rxjs nest javascript json

好未来数据中台的Node.js中间层从7月份开始讨论可行性，截止到9月已经支持了4个平台，其中3个平台生产环境稳定，另1个在测试阶段近期上线。

2021-10-09

3.7K1

基于 Vuex 的时移操作（撤回/恢复）实现

vue.js 编程算法

最近做了一个 BI 平台的可视化看板编辑器，项目刚做完一期，各方面的功能都还能粗糙，但该有的也都有了，比如编辑器场景下最基本的两类时移操作-撤回(undo) 和恢复 (redo)。

2021-09-29

1.4K0

学废了系列 - WebGL与Node.js中的Buffer

node.js webgl 编程算法 javascript

WebGL 和 Node.js 中都有 Buffer 的使用，简单对比记录一下两个完全不相干的领域中 Buffer 异同，加强记忆。

2021-08-12

1.3K0

学废了系列 - WebGIS vs WebGL图形编程

编程算法 webgl 网站 javascript

目前工作中有不少涉及到地图的项目，我参加了几次技术评审，前端伙伴们在 WebGIS 方面的知识储备稍有不足，这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识。另外，我之前的工作中积攒了一些从零开始搭建 WebGL 地图引擎的微薄经验，虽然最终遗憾没有上线，但在其中学到的一些WebGL知识还是值得分享一下。WebGL 可以说是前端可视化技术领域难度最大的一项图形编程技术，所以今天就结合 WebGIS 这个话题顺带分享一些 WebGL 的相关知识，不会太深入，很细节的技术点在后续文章里再讲解。

2021-06-21

1.9K0

Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案

redux vue.js mobx ecmascript react

近期准备开发一个数据分析 SDK，定位是作为数据中台向外输出数据分析能力的载体，前端的功能表现类似低代码平台的各种拖拉拽。作为中台能力的载体，SDK 未来很大概率会需要支持多种视图层框架，比如Vue2/Vue3/React等。所以在技术架构上对视图层框架的依赖性越轻，迭代的成本越低。基于这样的目标，本文对前端状态管理工具进行调研，在技术选型上应当尽量减轻与视图框架的绑定程度，理想的目标是构建与视图框架无关的数据/状态管理层。

2021-06-11

2K0

理解微信小程序的双线程模型

javascript webview 网站小程序微信

有过微信小程序开发经验的朋友应该都知道“双线程模型”这个概念，本文简单梳理一下双线程模型的一些科普知识，学识浅薄，若有错误欢迎指正。

2021-05-19

2.6K0

使用Actor模型管理Web Worker多线程

webgl 网站编程算法

前端固有的编程思维是单线程，比如JavaScript语言的单线程、浏览器JS线程与UI线程互斥等等，Web Woker是HTML5新增的能力，为前端带来多线程能力。这篇文章简单记录一下搜狗地图WebGL引擎（下文简称WebGL引擎）使用Web Worker的一些实践方案，虽然这个项目最终夭折并且我也从搜狗离职了，但在开发WebGL引擎过程中的一些心得和实践还是值得写一写的。

2020-11-24

1.1K0

利用Decorator和SourceMap优化JavaScript错误堆栈

api sdk ide 编程算法云开发

最近收到用户吐槽 @cloudbase/js-sdk（云开发Cloudbase的JavaScript SDK）的报错信息不够清晰，比如下面这条报错：

2020-09-02

7220

云开发模式下的研发职能洗牌和工程模型

小程序·云开发 serverless 网站系统架构运维

软件开发经历几十年的发展到今天，开发者的关注点其实只有两个：系统架构和软件架构。下图中列出的内容有的属于系统架构层面，比如异地容灾、网络专线、网络防护等等；有些属于软件架构层面，比如数据库、高并发、文件存储等等。

2019-11-12

4210

Typescript+WebGL+Webpack开发环境搭建

ecmascript 编程算法 typescript webpack webgl

目前Web实现矢量渲染的主流技术包括SVG、VML和WebGL。相对而言，VML是一种较古老的技术，虽然未成为W3C标准，但被早期的IE浏览器（IE9以下）和微软Office广泛使用，目前已经远离了浏览器战场。所以可供选择的仅剩SVG和WebGL。SVG是XML的一个子集，秉承了一个标签对应一条数据的原则，目前经常被使用于数据量较小的web项目，比如图表和地铁图。Web矢量地图的数据量非常庞大，举个例子，如下图所示的一个512px*512px的瓦片，其数据量是一个接近5位数的二维数组。而这个瓦片仅仅是最简单的大陆和海洋轮廓，同尺寸街道图的数据量更加庞大。

2018-10-09

2K0

SVG的动态之美-搜狗地铁图重构散记

搜狗地图发布了新版的移动端地铁图，改版初衷是为了用户交互体验的提升以及性能的改善。原版地铁图被用户吐槽最多的是pinch缩放不流畅、无过渡动画、拖拽边界不合理等等，大体上都是交互体验上的问题。实际上原版的问题不仅仅存在于交互体验上，源代码也是一团糟：无模块化概念；存在冗余逻辑和文件；滥用第三方库&工具； UI的更新仍旧是直接操作DOM；构建&发布流程不规范。以上问题其实跟业务以及技术选型无关，可以说是任何一个“历史悠久”的项目都难以避免的问题。针对以上问题的重构方案不是本文要阐述的核心，所以就一笔

2018-05-30

2.2K0

前端工程化-构建

构建的核心是资源管理。简单说，构建就是把前端工程师开发的源代码进行编译、压缩、打包等一系列操作，最终产出可以直接上线或者可供后端工程师的资源。构建可以划分为纯前端构建和前后端协作构建。这两个不是专业术语，如果你有更合适的称谓，欢迎指正。所谓纯前端构建，就是说不涉及后端模板的构建，经过构建之后的前端代码可以直接上线。这种情形下大多是数据驱动UI的web应用，模板只负责提供空白的容器和基础的静态资源，UI的文档结构交由前端JavaScript实现。这个过程可以使用一些框架，比如近期较流行的React

2018-01-30

1.1K0

Nodejs建站笔记-注册登录流程的简单实现

node.js 网站建设 javascript

1. 使用Backbone实现前端hash路由登录注册页面如下：初步设想将注册和登录作为两个不同的url实现，但登录和注册功能的差距只有form表单部分，用两个url实现显然开销过大，所以最终

2018-01-30

2.2K0

Node.js建站笔记-使用react和react-router取代Backbone

node.js 网站建设 javascript react

斟酌之后，决定在《嗨猫》项目中引入react，整体项目偏重spa模式，舍弃部分server端的模板渲染，将一部分渲染工作交给前端react实现。 react拥有丰富的组件，虽然不如Backbone和underscore这对老基友成熟，但考虑到嗨猫的前端并不需要很多的MV*架构，目前使用到Backbone的地方只有hash路由而已，所以最终决定使用react-router取代Backbone，underscore也从项目依赖中移除。下面就以登录&注册页为例，简单讲述整个替代过程。 1. 安装并二次编译rea

2018-01-30

2.3K0

前后端分离和模块化-58到家微信首页重构之路

javascript ecmascript webpack

微信钱包内的58到家全新首页已经上线，感兴趣的同学们可以在微信中打开“我的->钱包->58到家”查看。 58到家全新首页提出重构主要是为了解决以下问题：每个城市开通的服务项目不同，有些内容是写死在tpl中，维护非常头疼；开通新服务或者某些UI调整（比如更换服务项的图片造成更改雪碧图）时必须走代码上线流程；原有的前端切图、后端写逻辑的开发模式造成开发周期拉长和上线流程繁琐；原有配置后台操作复杂，且可配置细节不完善；首页加载速度太慢，用户体验欠佳。 58到家目前两年左右的发展期，整个技术生态还不完善。

2018-01-30

1.3K0

webpack多页面开发与懒加载hash解决方案

本文内容只适用于webpack v1版本，webpack v2已经修复了hash计算规则。之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景，如果是常规单页面应用的话，上篇文章提供的方案是没有问题的。但是前端项目复杂多变，应对复杂多页面项目时，我们不得不继续踩webpack的hash坑。在进入正文之前先解释一下所谓的常规单页面和复杂多页面是什么意思。这两个并非专业术语，而是笔者实在想不出更恰当的说法了，见谅。 1. 项目类型 1.1 常规单页面项目常规单页面符合以下条

2018-01-30

1.3K1

Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

javascript webpack

文件的hash指纹通常作为前端静态资源实现增量更新的方案之一，Webpack是目前最流行的开源编译工具之一，其强大的功能也带来很多坑（当然，大部分麻烦其实都可以在官方文档中找到答案）。比如，在Webpack编译输出文件的配置过程中，如果需要为文件加入hash指纹，Webpack提供了两个配置项可供使用：hash和chunkhash。那么两者有何区别呢？其各自典型的应用场景又是什么？本文结合笔者工作中遇到的问题，简单记录一下以上问题的解决方案。 1. hash与chunkhash 首先我们先看一下官方文档对

2018-01-30

2.1K0

点击加载更多

社区活动

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·干货材料·成员作品最新动态