-
-
Notifications
You must be signed in to change notification settings - Fork 546
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
78 additions
and
3 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
@article{Hunt:1977, | ||
url = {https://dl.acm.org/doi/10.1145/359581.359603#d4019358e1}, | ||
Author = {{Hunt}, J. and {Szymanski}, T}, | ||
Journal = {Association for Computing Machinery}, | ||
Keywords = {Longest common subsequence, efficient algorithms}, | ||
Month = may, | ||
Title = {{A fast algorithm for computing longest common subsequences}}, | ||
Volume = {20}, | ||
Pages = {350--353}, | ||
Year = 1977 | ||
} | ||
|
||
@article{Myers:1986, | ||
url = {https://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.4.6927}, | ||
Author = {{Myers}, E}, | ||
Journal = {Algorithmica}, | ||
Keywords = {longest common subsequence, shortest edit script, edit graph, file comparison}, | ||
Title = {{An O(ND) Difference Algorithm and Its Variations}}, | ||
Volume = {1}, | ||
Pages = {251--266}, | ||
Year = 1986 | ||
} | ||
|
||
@article{Grov:2015, | ||
url = {https://www.duo.uio.no/handle/10852/45209}, | ||
Author = {{Grov}, M}, | ||
Journal = {UiO DUO}, | ||
Keywords = {JavaScript, Virtual, DOM, KVO, dirty, checking, comparison}, | ||
Title = {{Building User Interfaces Using Virtual DOM}}, | ||
Year = 2015 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
--- | ||
title: 'Million.js: A Fast, Compiler-Augmented Virtual DOM For Performant JavaScript UI Libraries' | ||
tags: | ||
- javascript | ||
- ui framework | ||
- user interface | ||
- millionjs | ||
- virtual dom | ||
- react | ||
- compiler | ||
- static analysis | ||
- document object model | ||
- single page application | ||
- web programming | ||
authors: | ||
- name: Aiden Bai | ||
orcid: 0000-0002-3676-3726 | ||
affiliation: 1 | ||
affiliations: | ||
- name: Camas High School | ||
index: 1 | ||
date: 14 Feb 2022 | ||
bibliography: paper.bib | ||
--- | ||
|
||
# Summary | ||
|
||
The need for developing and delivering interactive web applications has grown rapidly. Thus, JavaScript User Interface (UI) libraries were introduced [@grov2015], at the detriment of performance and bundle size. To solve this problem, Million.js was created to allow for the creation of compiler-augmented JavaScript UI libraries that are extensible, performant, and lightweight. This was accomplished by designing a computationally efficient diffing algorithm that relies on a compiler, and then measuring the performance with a series of relevant and exhaustive benchmarks. | ||
|
||
The following mechanisms are built-in to allow for imperative or skip optimizations, reducing runtime diffing: | ||
|
||
- **Keyed diffing:** Special diffing algorithm allows minimizes unnecessary DOM operations [@myers1986; @hunt1977] | ||
- **Flags:** Allows patching algorithm to skip condition branches and regulates tree diffing behavior. | ||
- **Deltas:** Hard coded imperative operations alongside diffing to optimize consistent operations. | ||
- **Blocks:** Serialize blocks of virtual nodes to reduce memory usage. | ||
- **Batching & Scheduling:** DOM operations are batched into an array, and can be scheduled to ensure 60 frames per second. | ||
|
||
When compared to other methods of virtual DOM rendering, these findings showed that Million.js had higher benchmark metrics, with 133% to 300% more operations per second than other Virtual DOM libraries. | ||
|
||
# Related works | ||
|
||
- [snabbdom](https://github.com/snabbdom/snabbdom): General purpose, composable virtual DOM library. | ||
- [ivi](https://github.com/localvoid/ivi) - TypeScript UI library with virtual DOM aimed for optimizing reconciliation. | ||
- [mikado](https://github.com/nextapps-de/mikado): Virtual-DOM based JavaScript UI library aimed for optimizing performance | ||
- [blockdom](https://github.com/ged-odoo/blockdom): "Block"-based virtual DOM library | ||
|
||
# References |