I know this question has been asked, how to make a site like facebook/gmail as in loading in the content.
But answers are thin on the ground. To help, I have done some research. Has anyone looked into this and can give some guidence?
I have 3 different routes I could go:
1) jquery.load (load in html), load in css and getscript JS.
What I do not yet understand and I need to figure out, is how to keep track of what CSS / JS has been dynamically loaded in. IOW I don’t want to keep loading in the same CSS/JS when a user visits a page they already have cached.
Would it be wise to use global JS variables, or hidden divs?
2) Bigpipe.
I have seen implementations of this for .net. But does anyone know of a PHP implementation. I see this on github: https://github.com/dynamoid/bigpipe But I wasn’t too impressed with it. Any other implementations?
3) Jquery Templates
I have been doing a bit of research with this. Would this be the best way to go? Even if I can get the template to get loaded first (and cached) and then the data to be applied to it. I am still fuzzy on keeping track of what CSS and JS is loaded per page.
Finally, if you know of any resources that talks about choices of best practices, please let me know.
Thanks 🙂
I thought I would come back and answer this question.
After coming across this blog: http://jmperezperez.com/ I came up with my own solution.
1) I created a wireframe of the header, content and footer. The header and content areas were later given id’s to load content into them.
2) Using Jquery address I was able to then update the address bar when navigating the site without any page refreshes.
3) On the backend, I then assemble json to feed back the content, which can be multiple divs and then the JS and CSS to load.
4) I then created a script to load in the CSS and JS dynamically and to keep track of what was already loaded. CSS and JS can’t be loaded in twice should a page be requested more than once.
Maybe later, I’ll check out how to do things much better: http://jmperezperez.com/talk-facebook-frontend-javascript/
Now my site operates exactly like facebook/gmail. No page refreshes at all, well except for login and log out.
If anyone knows any github repos that deal with single page applications using jquery. Let me know.
Thanks