McMaster students develop Drive-Thru SPA at YHACK
McMaster students Nathan Jervis (@mirhagk), Sadisha Galapatti (@SadishaG), Rakesh Mistry (@rake_mistry) participated in YHACK at Yale University this weekend. At the hackathon they developed Drive-Thru SPA (see: drivethruspa.com) – a Single Page Application framework that automatically updates the application in the background. Check out the details below:
Take your Single Page Applications to the Drive-Thru!
Web Applications are becoming ever more common. These automatically update their own data, keeping the page fresh for the user.
However since the data is always up-to-date, the user sees no need to reload their tab. Client side navigation means they will always stay on that same page so long as the tab is open. For some applications (Gmail, Facebook, Twitter) the tab is open so long as the computer is on, which can be many months for most users.
If a user doesn’t reload the tab for 6 months, their data stays in sync with the latest, but the code does not. This means the user can be missing out on potentially 6 months of features. Worse yet, they can be missing out on 6 months of security fixes.
There are companies that have a continuous deployment process that means they can deploy to production several times a day. But what is the point if their users could still be using old code for months?
Drive-Thru SPA seeks to solve this issue. It’s a library designed to work with web application frameworks, watch for changes to the application, and seamlessly update the application behind the scenes.
Current Status
This is a prototype of the library, developed in 36 hours at YHACK (Yale University Hackathon).
What the library currently has is a node-js server that a client library can connect to, and watch for updates. Updates are automatically detected from a git push when the appropriate webhook is set up in github. These updates are downloaded and components are extracted and analyzed for differences. The library sends any updated components to any listening client. These clients can then update the component, do any registering of the component or refreshing of views etc. Because the differences are analyzed and updated at a component level, the majority of changes can be done seamlessly, and the user doesn’t even have to know that the application is being updated while they are using it.
There are a few things missing from the library:
- There are no alternative adapters developed yet – only the custom doT.js one is supported
- The server code is messy, and needs to be re-architectured. (It was built in 36 hours during a hack-a-thon after all)
- There isn’t any concern for security or prevention of race conditions – This was not a priority for the prototype, but is required before a usable release
The next steps to go from here
How to Help
If this idea interests you, and you’d like to see it developed further, there are a few ways you can help
- Let us know if you like it – Tweet the developers (@mirhagk, @SadishaG, @rake_mistry) and tell us your thoughts. Comment on reddit with any input you have.
- Suggest features/requirements – What would you need to have before adopting this library? Which adapters should we focus on? What features are we missing? Comment on reddit or add issues to our github repository
- Contribute – The project is not quite yet in a state where it’ll be easy to contribute, but we hope to get there soon. Contributions in the form of documentation, tests, examples, adapters for different frameworks would be greatly appreciated, as well as contributions to the core library.
Drive-Thru SPA Demo from Rakesh Mistry on Vimeo.
Authors and Contributors
Nathan Jervis – @mirhagk
Sadisha Galapatti – @sadishag
Rakesh Mistry – @mistryrn