Web App I am building out – just rendering it with HTML was getting BLOATED. We were seeing 1.18MB pages, lol – now I am down to 40kb
So I went back to the drawing board and jump all the data into the page using JSON, and with that – dynamically build the views on the client.
The beauty is, no more post backs at all, I just do ajax for everything. I can rebuild the entire ui with a command when data changes from the server.
It has been years since I’ve done this, any pitfalls to watch out for?
Assuming you’re still loading the same content, you’re not really saving bandwidth, and it takes at least as long to render. However, if you load things in the proper order it’ll appear to load much faster.
A lot of it depends on context. Obviously the page is quite complex, what does it do?
I am not looking for extensive backwards compatibility, if they lack HTML5, oh well. If there is a big enough demand, I’ll reconsider. I don’t think load times (downloading content) is much of a concern really.
Basically, I am building a ‘billing’ page to add/remove billing items for invoices (More complex than that, but that is a high level).
I guess load time on the client is fine, IMO – realistically they have a "View one invoice at at time" approach, so this allows them to swap between the invoices easily.
This is much, much, much easier now that jQuery is around. Last time I did this kind of work was like 6 years ago… LOL
– Watch out for the number of DOM injections you use. If there are a lot, use document fragments.
– Don’t pollute the global namespace.
– Don’t excessively use closures, or keep things in memory when they need to be garbage collected.
– If you’re using jQuery, make sure to cache your re-usable objects and use them as context.
– Since you don’t care about backwards compatibility and can use HTML5; do it, and avoid expressions.
– If you’re using a service, minimize the number of calls to the server that you can. Ie: Grab as much data via JSON from the user as you can before calling your service.
– If you’re doing extensive UI, look into platforms such as Node.
Twitter achieved a massive gain in load times by moving their rendering to serverside. You’re right about them implementing AMD modules – which are great for development and I love, but the bulk of their gains were based on NOT building everything clientside like they used to.
Here it is from the horse’s mouth:
Here’s an interesting aside on hashbangs/too much reliance on JS:
Hashbangs for Lunch
SITE BUILDING, SERVERS, HOSTING