探客时代
Vanilla TODO
A case study on viable techniques for vanilla web development.
README
VANILLA TODO
A TeuxDeux 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 55 KB (unminified).
More importantly, it's a case study showing that vanilla web development is
viable in terms of maintainability, and worthwhile in terms of
user experience (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 to discover minimum viable
patterns that are truly vanilla. The result is
maintainable, albeit verbose and with considerable
duplication.
If anything, the case study validates the value of build steps and frameworks,
but also demonstrates that standard web technologies can be used effectively and
there are only a few critical areas 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 over time._
_Intermediate understanding of the web platform is required to follow through._
1. Motivation
I believe too little has been invested in researching practical, scalable
methods for building web applications without third party dependencies.
It's not enough to describe how to create DOM nodes or how to toggle a class
without a framework. It's also rather harmful to write an article saying you
don't need library X, and then proceed in describing how to roll your own
untested, inferior version of X.
What's missing are thorough examples of complex web applications built only with
standard web technologies, covering as many aspects of the development process
as possible.
This case study is an attempt to fill this gap, at least a little bit, and
inspire further research in the area.
2. Method
The method for this case study is as follows:
- Pick an interesting subject.
- Implement it using only standard web technologies.
- Document techniques and patterns found during the process.
- Assess the results by common quality standards.
This section describes the method in more detail.
2.1. Subject
I've chosen to build a (functionally reduced) clone of
TeuxDeux for this study. The user interface has
interesting challenges, in particular performant drag & drop when combined with
animations.
_The original TeuxDeux app deserves praise here. In my opinion it has the best
over-all concept and UX of all the to-do apps out there.
The user interface is arguably small (which is good for a case study) but large
enough to require thought on its architecture.
However, it is lacking in some key areas:
- Routing
- Asynchronous resource requests
- Complex forms
- Server-side rendering
2.2. Rules
To produce valid vanilla solutions, and because constraints spark creativity, I
came up with a set of rules to follow throughout the process:
- Only use standard web technologies.
- Only use widely supported JS features unless they can be polyfilled (1).
- No runtime JS dependencies (except polyfills).
- No build steps.
- No general-purpose utility functions related to the DOM/UI (2).
(1) This is a moving target; the current version is using ES2020.
(2) These usually end up becoming a custom micro-framework, thereby questioning
why you didn't use one of the established and tested libraries/frameworks in the
first place.
