1
0
mirror of https://github.com/morris/vanilla-todo.git synced 2025-01-17 12:48:15 +01:00

update numbers, editing

This commit is contained in:
Morris Brodersen 2023-12-02 11:06:09 +01:00
parent 808c8381ff
commit f63c31d37e

View File

@ -2,14 +2,14 @@
A [TeuxDeux](https://teuxdeux.com) clone in plain HTML, CSS and JavaScript
(no build steps). It's fully animated and runs smoothly at 60 FPS
with a total transfer size of **50KB** (unminified).
with a total transfer size of **55 KB** (unminified).
**[Try it online →](https://raw.githack.com/morris/vanilla-todo/main/public/index.html)**
More importantly, it's a case study showing that **vanilla web development** is
viable in terms of [maintainability](#521-the-good),
and worthwhile in terms of [user experience](#51-user-experience)
(**50%** less time to load and **90%** less bandwidth in this case).
(**50%** less time to load and **95%** less bandwidth in this case).
**There's no custom framework invented here.**
Instead, the case study was [designed](#22-rules) to discover
@ -22,6 +22,8 @@ but also demonstrates that standard web technologies can be used effectively and
there are only a few [critical areas](#523-the-bad) where a vanilla approach is
clearly inferior.
_While the first version of the case study has been published in 2020, it has received significant [updates](#9-changelog) over time._
_Intermediate understanding of the web platform is required to follow through._
## Table of Contents
@ -56,7 +58,7 @@ _Intermediate understanding of the web platform is required to follow through._
- [5.2.3. The Bad](#523-the-bad)
- [5.3. Generality of Patterns](#53-generality-of-patterns)
- [6. Conclusion](#6-conclusion)
- [7. What's Next?](#7-whats-next)
- [7. Beyond Vanilla](#7-beyond-vanilla)
- [8. Appendix](#8-appendix)
- [8.1. Links](#81-links)
- [8.2. Response](#82-response)
@ -597,7 +599,7 @@ Run these commands to try it out:
- `npm run lint-styles` to lint CSS
These tools only required minimal configuration to be effective. They also
integrate well with VSCode so I've barely had to run these manually.
integrate well with VSCode so I've rarely had to run these manually.
### 4.3. Testing
@ -674,18 +676,17 @@ and Safari on iOS.
_TODO Test more browsers and devices._
A fresh load of the original TeuxDeux application transfers around **500 KB** and
finishes loading at over **1000 ms**, sometimes up to 2000ms
(measured in 05/2022).
Reloads finish at around **500ms**.
A fresh load of the original TeuxDeux application transfers around **1.2 MB**
and finishes loading at over **1000 ms**, sometimes up to 2000ms
(measured in 12/2023).
Reloads finish at around **700 ms**.
With a transferred size of around **50 KB**, the vanilla application consistently
With a transferred size of around **55 KB**, the vanilla application consistently
loads in **300-500 ms**—not minified and with each script, stylesheet and icon
served as an individual file. Reloads finish at **100-200ms**; again, not
served as an individual file. Reloads finish at **100-200 ms**; again, not
optimized at all (with e.g. asset hashing/indefinite caching).
_To be fair, my implementation misses quite a few features from the original.
I suspect a fully equivalent clone to be well below 100 KB transfer, though._
_To be fair, my implementation misses quite a few features from the original. I suspect a fully equivalent clone to be well below 100 KB transfer, though._
_TODO Run more formal performance tests and add figures for the results._
@ -724,16 +725,15 @@ and some opinionated statements based on my experience in the industry.
- Low coupling
- The result is literally just a bunch of HTML, CSS, and JS files.
- Straight-forward, zero-config testing with Playwright
- Including code coverage
- Includes code coverage
All source files (HTML, CSS and JS) combine to **under 2400 lines of code**,
All source files (HTML, CSS and JS) combine to **under 3000 lines of code**,
including comments and empty lines.
For comparison, prettifying the original TeuxDeux's minified JS application
bundle yields **52678 LOC** (05/2022).
For comparison, prettifying the original TeuxDeux's minified JS assets
yields **81602 LOC** (12/2023).
_To be fair, my implementation misses quite a few features from the original.
I suspect a fully equivalent clone to be well below 10000 LOC, though._
_To be fair, my implementation misses quite a few features from the original. I suspect a fully equivalent clone to be well below 10000 LOC, though._
#### 5.2.2. The Verbose
@ -800,16 +800,16 @@ An open question is if these patterns hold for library authors.
Although not considered during the study, some observations can be made:
- The JavaScript itself would be fine to share as ES modules.
- However, event naming needs great care, as dispatching (bubbling) events
- Event naming needs great care, as dispatching (bubbling) events
from imported behaviors can trigger parent listeners in consumer code.
- Can be mitigated by providing options to prefix or map event names.
- CSS names share a global namespace and need to be managed as well.
- Could be mitigated by prefixing as well, however making the JavaScript
- Can also be mitigated by prefixing, however making the JavaScript
a bit more complex.
## 6. Conclusion
The result of this study is a working todo application with decent UI/UX and
The result of this study is a working to-do application with decent UI/UX and
most of the functionality of the original TeuxDeux app,
built using only standard web technologies.
It comes with better overall performance
@ -846,30 +846,25 @@ my assumptions and preconceptions about vanilla web development.
It was quite liberating to avoid general-purpose utilities and
get things done with what's readily available.
As detailed in the assessment,
the study would likely be more convincing if build steps were allowed.
Modern JavaScript and SCSS could reduce most of
the unnecessarily verbose parts to a minimum.
While I think the study is relatively complete, there's always more to explore.
[Ideas, questions, bug reports](https://github.com/morris/vanilla-todo/issues) and
pull requests are more than welcome!
Finally, this case study does not question using dependencies or frameworks
in general—they do provide lots of value in many areas.
Finally, this case study does not question using dependencies, libraries or frameworks
in general—code sharing is an essential part of software engineering.
It was a constrained experiment designed to discover novel methods
for vanilla web development and, hopefully,
inspire innovation and further research in the area.
## 7. What's Next?
## 7. Beyond Vanilla
I'd love to hear feedback and ideas on any aspect of the case study.
It's still lacking in some important areas, e.g. testing techniques.
Pull requests, questions, and bug reports are more than welcome!
---
Here are a few ideas I'd like to see explored in the future:
As detailed in the assessment, the result of the case study
could be significantly improved if build steps and helpers were allowed.
Beyond the strict rules I've used in this experiment,
here are a few ideas I'd like to see explored in the future:
- Run another case study with TypeScript, SCSS, and build steps (seems promising).
- Research validation rules for utility functions and external dependencies.
- Extrapolate deep utility functions (e.g. `reconcile()`) to mitigate some of the discovered downsides.
- Experiment with architectures based on virtual DOM rendering and standard DOM events.
- Compile discovered rules, patterns and techniques into a comprehensive guide.
@ -913,6 +908,11 @@ Thanks!
## 9. Changelog
### 12/2023
- Edited closing section
- Updated numbers
### 11/2023
- Introduced [tooling section](#4-tooling)