I am trying to create a fast and dirty Javascript library that makes it easier to work with the start pages created on the server and then performs further steps in Javascript.
My problem is that most Javascript MVC solutions , both frameworks and templates, rely on sharing data from the HTML returned by the server. The argument here is that it works best to build and structure a complete web application.
However, they slow down the page loading and do so so that search engines and other clients that do not support Javascript cannot use your site.
Instead of figuring out a way to run JS on the server side to pre-generate the page, I would like instead of making JS read the DOM when the page loads and create its original object state.
I use Django, and my plan is to create templates that work both in Jinja and in a slightly modified version of Handlebars.
This way I can display templates with the same code on the server side and in JS. The only part I'm missing here is to make sure that JS can create this representation of the DOM object when the page loads.
Here's what I’m thinking about templates right now:
<div class="post" js-model="post.id" js-value="{{ id }}"> <div class="post-header"> <span js-model="post.author.username" js-value="{{ author.username }}"> {{ author.username }} </span> <img src="{{ author.avatar }}" js-model="post.author.avatar" js-value="{{ author-avatar }}"> </div> <p js-model="post.content" js-value="{{ content }}"> {{ content }} </p> <div js-model="post.date" js-value="{{ date }}" class="post-footer"> {{ date }} </div> </div>
My Javascript will then read this and generate its internal representation of this object.
I could think about it, and I would be better off doing something with Angular, but I would like some feedback on this to see what others think.
Adam
source share