BestHub
Sign in
TikTok Frontend Technology Team
Author

TikTok Frontend Technology Team

We are the TikTok Frontend Technology Team, serving TikTok and multiple ByteDance product lines, focused on building frontend infrastructure and exploring community technologies.

24
Articles
0
Likes
70
Views
0
Comments
Recent Articles

Latest from TikTok Frontend Technology Team

24 recent articles
TikTok Frontend Technology Team
TikTok Frontend Technology Team
May 27, 2024 · Frontend Development

Leveraging Wasm and WebGL for High‑Performance Frontend Rendering: Simple Engine and Lottie WebGL Rendering

This article explains how the Simple rendering engine built with Wasm and WebGL improves performance and resource efficiency for front‑end interactive technologies such as Lottie, animation sprites, and frame‑difference sequences, and details its architecture, benchmarks, compatibility, and future directions.

LottieRendering Enginewasm
0 likes · 16 min read
Leveraging Wasm and WebGL for High‑Performance Frontend Rendering: Simple Engine and Lottie WebGL Rendering
TikTok Frontend Technology Team
TikTok Frontend Technology Team
May 25, 2024 · Game Development

Rendering Practices and Technical Exploration of SAR Creator in Douyin's 2024 Spring Festival Activities

This article details the real‑time rendering techniques, material choices, lighting, shadow, ShaderGraph effects, post‑processing bloom, dissolve, map‑freeze, particle and geometry trails, as well as displacement and bump mapping used in the SAR Creator platform for Douyin's 2024 Spring Festival interactive experiences.

Particle EffectsSAR Creatorgame development
0 likes · 18 min read
Rendering Practices and Technical Exploration of SAR Creator in Douyin's 2024 Spring Festival Activities
TikTok Frontend Technology Team
TikTok Frontend Technology Team
May 24, 2024 · Game Development

Technical Overview of SAR Creator for Interactive Scene Development

This article provides a comprehensive technical overview of SAR Creator, a TypeScript‑based high‑performance interactive solution used by ByteDance, covering its workflow, key features such as canvas adaptation, 2D/3D mixing, bundle splitting, image grading, compression, configuration files, scripting lifecycle, prefab handling, dynamic loading, and future development plans.

Bundle SplittingSAR CreatorTypeScript
0 likes · 20 min read
Technical Overview of SAR Creator for Interactive Scene Development
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Apr 2, 2024 · Game Development

Optimizing Game Interaction Scenarios with AnnieX: Engine Preheat, Asset Offline Library, and Resource Compression

This article details the 2024 Douyin Spring Festival game interaction optimizations using the AnnieX cross‑platform container, covering engine preheat, a shared offline asset library, and advanced 3D resource compression techniques such as quantization, sparse accessors, and meshopt, along with performance results and future plans.

3D assetsAnnieXResource Compression
0 likes · 24 min read
Optimizing Game Interaction Scenarios with AnnieX: Engine Preheat, Asset Offline Library, and Resource Compression
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Apr 1, 2024 · Frontend Development

Implementation of the “Lucky God Dragon” Interactive Gameplay in Douyin’s 2024 Chinese New Year Event

This article details the front‑end interactive development of Douyin’s 2024 Chinese New Year “Lucky God Dragon” activity, covering the cross‑platform framework, SAR Creator engine, bundle/prefab resources, scene construction, animation control, coordinate synchronization, terrain management, performance optimization, and device‑aware caching strategies.

FrontendSAR Creatoranimation
0 likes · 30 min read
Implementation of the “Lucky God Dragon” Interactive Gameplay in Douyin’s 2024 Chinese New Year Event
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Dec 13, 2022 · Frontend Development

Understanding Browser Process Architecture and Rendering Pipeline

This article explains how modern browsers use multi‑process architectures, detailing the evolution from single‑process models, the roles of browser, renderer, GPU, network, and plugin processes, and walks through the navigation and rendering pipelines—including DOM construction, style calculation, layout, layering, painting, rasterization, compositing, and their impact on performance.

BrowserFrontendProcess Architecture
0 likes · 12 min read
Understanding Browser Process Architecture and Rendering Pipeline
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Nov 23, 2022 · Backend Development

Redesigning the Internationalization Translation Platform Document Parsing SDK: Architecture, Layers, and Implementation

This article details the motivation, benefits, and technical design of the Document Parsing 2.0 SDK for the internationalization translation platform, describing a three‑layer architecture, the use of Adapter, Decorator, and Proxy patterns, TypeScript implementations, and a high‑performance batch update mechanism.

Adapter PatternDecoratorNode.js
0 likes · 13 min read
Redesigning the Internationalization Translation Platform Document Parsing SDK: Architecture, Layers, and Implementation
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Nov 16, 2022 · Frontend Development

Design and Implementation of a GraphQL Model Management Platform for Frontend‑Backend Collaboration

The article presents a comprehensive solution for improving interface reuse, domain‑model abstraction, and front‑back collaboration by building a GraphQL‑based Model Management Platform (GMP) that supports data‑model management, service orchestration, request generation, caching, authentication, and monitoring, complete with tooling and workflow integration.

API ReuseApolloGraphQL
0 likes · 18 min read
Design and Implementation of a GraphQL Model Management Platform for Frontend‑Backend Collaboration
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Jun 14, 2022 · Frontend Development

Implementing Accessibility (A11y) in Semi Design: Guidelines and Best Practices

This article explains why accessibility is essential for UI component libraries, describes the main types of disabilities, and provides concrete Semi Design guidelines—including color contrast, keyboard navigation, semantic markup, media handling, and layout recommendations—to create inclusive front‑end experiences.

AccessibilityDesignFrontend
0 likes · 15 min read
Implementing Accessibility (A11y) in Semi Design: Guidelines and Best Practices