I’ve been at an impass recently, unsure where to go. We currently ship 150 template segments (or view/model pairs) with our products, we’ve been very strict about definitions to ensure consistency, the only struggle we’re now running into is file size.
Currently we produce a 10kb minified file, and we’re fine with this, but a new project we have will produce a 1mb minified file for the entire application, and the majority is the template engine bloat, so we’re considering rewriting our template system.
Here’s how it works currently:
Define a view and model pair (template segment)
Write the markup
Bind events, etc on the model
The model commits to the view in a cloned representation of the DOM, we do a basic diff, and fire the DOM changes at once along with other components that need to update
One developer suggested we keep the approach, but add two important factors:
On compile, we should replace the template HTML with a representation of the node, for example we turn:
“
content
” ....Into an array, and make each element have types by ID, map them to a “database” object of types, compose the strings into numbers based on letter and type, then instead of the giant bloat we have, we can ship some ints that represent our markup. He demonstrated a proof of concept, the file size dropped to 145kb, the fundemential Question is, is this worth it?
Another developer suggested simply shipping a block render engine, and polling blocks as straight HTML files. I’ve never been a fan of this structure as I want to ship everything collapsed together, so if there’s no network we can still populate and run, and sync when back online.
All this being said, any ideas on where to go from here? Our target range is under 110kb file size
Top comments (0)