I hope to show you a couple of tactics for writing backend-less apps below. Here goes.
Every time we, programmatically, or the user, manually, changes the URL with a different hash value, we can handle that event and act upon it. The action, in this app’s case, would be to process a new Google Maps instance and render the appropriate template into our main content area.
Storing data…in the URL!?
So, without a database to hold our data, what can we do? Well, we can encode it and store it in the URL, then when another user hits the link, we can parse the relevant data and show them the relevant map location. Because we have a “#” symbol in our URLs, I used the Bit.ly API to shorten our link for easy sharing purposes (I’ll get onto that in a minute). We can take the first user’s latitude and longitude from Google Maps/HTML5 Geolocation and pass it to Bit.ly like so:
This will be the link that the user will come into the app on (maybe from Twitter, or an email), which might look like:
Which we can easily parse to work out where they are (to plot them on the map from Google), like so:
A small gotcha with doing this method: without the decodeURIComponent method, iOS was converting the object in the URL to entities which weren’t parse-able by JSON.parse(). Desktop browsers didn’t seem to encode it, so we were fine, but the above code was required to make it work on iOS.
Bit.ly shortening API
Like I mentioned earlier, I used Bit.ly for easy URL sharing. The whole code to shorten a link through Bit.ly looks something like this:
So we can quite easily use this new URL to populate a tweet intent link or a mailto link.
I hope you’ve seen a few tricks and tips to get you going building backend-less apps. They’re a fun challenge and they make you think in totally new ways, ie. techniques aren’t quite so mature and proven as server-side rendered applications.
A big ol’ disclaimer should probably be (you’ve probably wondered it all the way down to here), of course iHi does run on a server (it’s hosted on GitHub pages), but by “backendless”, I mean that none of the logic is on the server and we don’t use any databases; client-side techniques only around here.
Oh, and the “2 hours” part, although slightly link-baiting, is completely doable…just use some/all of the techniques above!
I'm available for hire