The full open source code can be found on BitBucket here: https://bitbucket.org/rickdzekman/web-app-starter-kit.
As the project lead for whatistheretodo.com I make sure to fill any role on the team where we have a knowledge gap. In that process I had to learn how to do front-end web development and I architected the AJAX – MVC integration necessary for the the site to have a web-app feel about it. The first version of the site was filled with problems largely because I was steering blind.
While we are working on the next version of the site I thought I would release an open-source starter kit featuring the various things that I had learned along the way. This starter kit is focused mainly on dynamic page reloads using AJAX but also a number of other extras:
- Mobile touch icons and startup screens + web-app capability so that mobile devices can load the web-app full screen without a browser
- addToHome.js plugin modified embedded to appear only on the home page and integrated into the AJAX workflow
- Google Analytics push code built into the AJAX workflow to automatically track page views for dynamically loaded pages (tracked the same way any other page view is tracked)
- Mobile first CSS using a flexbox layout (without fallback for browsers that don’t support flexbox)
- A simple mobile toggle menu using progressive enhancement
- A number of accessibility features that I hope will encourage accessible web development
The key AJAX component is available largely from these two functions. The first tracks clicks on <a> elements with the .ajax class, while the second fights a persistent problem with the jQuery history plugin – some browsers present the first page load as a “pop”, while other browsers only treat back/forward button presses as “pops”.
$(document).on(‘click’, ‘a.ajax’, function(event) {
event.preventDefault();
var page = $(this).attr(‘href’);
var State = History.getState();
if (urldecode(page) === urldecode(State.hash)) {
ajaxRefresh(page);
} else {
ajaxClick(page);
}
return false;
});
var State = History.getState();
History.getState();
if (urldecode(window.location) !== urldecode(State.url)) {
window.location = State.url;
} else {
History.replaceState({}, State.title, State.url);
}
A visual summary
