Overview
The article details the development of custom emojis in Notion, highlighting the technical challenges and solutions involved in integrating these personalized icons into the workspace. It discusses the complexities of rendering, loading, and managing custom emojis while ensuring performance and user experience.
What You'll Learn
1
How to integrate custom emojis into a rich text model
2
Why virtualization improves performance in UI rendering
3
How to manage dynamic loading of resources to optimize app performance
Prerequisites & Requirements
- Understanding of rich text data models and rendering techniques
- Familiarity with frontend development and performance optimization(optional)
Key Questions Answered
How are custom emojis represented in Notion's data model?
Custom emojis are represented in Notion's data model using a structure similar to user mentions, specifically as ['‣', [['ce', '<CUSTOM_EMOJI_ID>', '<WORKSPACE_ID>']]]. This allows for seamless integration and updates across the platform.
What challenges did Notion face when implementing custom emojis?
Notion faced challenges such as managing the loading of hundreds of custom emojis without affecting performance, ensuring fast load times, and maintaining a seamless experience across devices. They utilized virtualization to address rendering issues and improve responsiveness.
What are the pros and cons of preloading custom emojis during app boot?
Preloading custom emojis provides instant access and simplifies implementation, but it can lead to inefficient resource usage and increased network load. Notion capped the number of custom emojis to mitigate these issues while planning for future scalability.
How does Notion ensure custom emojis are updated in real time?
By tying custom emojis to backend IDs, Notion ensures that any changes made to an emoji's image or name are reflected in real time across all instances where the emoji is used, enhancing user experience and consistency.
Key Statistics & Figures
Custom emojis created by users
1.5 million
This statistic reflects the rapid adoption of the custom emoji feature since its launch in October.
Limit of custom emojis per workspace
500
This cap is currently in place to manage resource usage effectively while planning for future scalability.
Key Actionable Insights
1Implement virtualization in UI components to enhance performance.This technique allows for rendering only the visible components, reducing memory usage and improving responsiveness, especially in applications with potentially large datasets.
2Utilize a flexible data model for rich text representation to support various content types.This approach enables the integration of diverse elements like custom emojis, links, and mentions without extensive reengineering, facilitating easier updates and maintenance.
3Consider the trade-offs between preloading resources and dynamic loading.While preloading can enhance user experience by reducing wait times, it may lead to inefficient resource usage. Balancing these strategies is crucial for optimizing application performance.
Common Pitfalls
1
Overloading the client with too many simultaneous image requests can lead to performance degradation.
This issue arises when rendering all emojis at once, causing delays and high memory usage. Implementing virtualization helps mitigate this by only rendering visible emojis.
Related Concepts
Rich Text Data Models
Virtualization Techniques
Dynamic Resource Loading