It has been a white since a project has required the type of complexity as the one I am currently working one. Essentially, what you will be viewing is a JavaScript “framework” that wraps around a functional website without JavaScript enabled. The javaScript wrapper effectively converts the site to function similar to an app but most importantly allows the site to run in stand alone mode – without any direct refreshes.
While this is all quit complex I know there has been discussion and I myself am interested in better code organization and JavaScript patterns for larger projects. I thought this would be a good functional example for people to chim in and suggest alternative ways of organizing things that make the code more readable, maintainable and extendable.
The primary framework script is here.
The framework application bridge is here.
The functional example is here.
At this moment this serves as functional prototype, there may be some bugs. Furthermore, I am making use of the history API in a none degrading manor (at this point) so if the browser your using does not support the history API there will likely be errors. Lastly, since this is meant to provide a mobile app like experience, condensing the window to mimic a mobile device on desktop would probably provide the best experience though the site will function regardless. Lastly, for the best experience use chrome since it supports webkit animations. The animations do gracefully degrade but everything is much cooler with the animations.
oh… and don’t just throw it though js lint and regurgitate that information, that is not what I am looking for.
Also, I am aware that what I am doing is similar to jQuery Mobile but jQuery Mobile is an unreliable, resource intensive pile of crap from all my testing, so yeah…
I should also point out that Sitepoint’s own: Building Mobile has been the inspiration for many of the techniques I am employing such as; page changing, history management and animation.
Thanks