My first web development project: a Backbone blog engine
tl;dr: I’ve taken my development learning to the next level, making real use of my GitHub repo. I’d like your help on my project, a front-end blogging engine that will eventually have persistence via connection to a server.
I started working here at AppFog in April. You might remember my first post way back then. Some of my early posts are more than a little embarrassing now, but I’ll admit to getting a little tiny bit wistful reading some of my initial forays into the world of programming and technical writing.
Now, I’d like to at least think that I’ve come a long way. I’ve learned an absolute truckload of stuff about programming, have had the wonderful opportunity to converse with my AppFog colleagues and many others in the Portland programming community and beyond, and think that all of this stuff is really just beyond fascinating. It’s a horizon of knowledge and experience that I honestly never envisioned myself entering, but I’m thrilled that I did.
At this point, after months of actually learning stuff, I’d like to do something a little different: I’d like to start sharing actual development projects on the blog and to start making real use of my GitHub repo, which is probably starting to feel somewhat neglected. My first major project will involve expanding my skills first in both front- and back-end web development.
Introducing the blogging engine
The first step in my project is a purely front-end venture: I’ve made a fairly simple blogging engine in Backbone.js. I say that this is a purely front-end venture because the entire logic for the app is contained in the browser and doesn’t communicate to any server.
The code can be found on GitHub and the functioning app is currently hosted on AppFog at this address. The basic Backbone architecture of the app is contained in the blog.js file, which I have commented on heavily.
So what does this thing do? Well, it’s a lot like blogging engines that many of you may have created when learning Ruby on Rails or another web dev framework. You can create and delete posts, and each will have a timestamp. The difference here is that this engine is currently framework neutral and has no persistence on “refresh.” So be forewarned: if you’re using it to compose your life story or a 21st-century version of the Iliad and you get 300 pages in, you’ll lose everything if you refresh your browser. Caveat emptor.
Where does this thing go from here?
The next step in the project is to link this engine up with a back end, which will enable you to take user-generated content, send it to a server, and store it in a database. I’ll start out simple by using a MySQL database, but eventually I’d like to branch out into other database technologies. I’ll begin by linking the engine up with a Node.js server in a future post, and from there I’ll move on to linking it up with other frameworks, including Sinatra, Rails, and Flask.
The ultimate goal will be to enable myself to actually select which back end and which database I want to use just by selecting a checkbox. So if I’m blogging away and want to use, say, the Scala Play framework for a server and PostgresQL for a database, I will be able to do so in the browser.
Along the way, I’d also like to make a number of improvements to the client side above and beyond connecting it up to various servers. At the moment, the app lacks a Backbone router and I’d like to give it one. I’m currently working on an “edit” mode for specific posts. I’m also looking to utilize the Backbone LocalStorage library to allow for server-less, browser-cache persistence on refresh in addition to database-backed persistence.
You’ve also probably noticed that it’s not terribly exciting to look at. So I’d also like to spruce things up aesthetically a bit and enable users to do more of the kinds of things that they expect out of blogs, like changing the background or text color. Further down the line, I’d even like to enable users to save their CSS profiles as “themes” akin to WordPress themes.
But there is one thing that I’d most like to improve immediately: as it stands, I’m extracting form data using the jQuery
$(‘#elementName’).val() method. This works just fine, but it strikes me as somewhat hacky and I’d love to know if there is a more elegant way of managing form input in Backbone.
This is where you come in
I will be hosting all of the various back ends and database services on AppFog and will be providing all relevant code samples along the way (so feel more than free and watch my GitHub repo if you’re so inclined).
If any of you have suggestions for how to improve the blog engine in any way, don’t be bashful. Please reach out to me in the comments, via e-mail at email@example.com, or, best of all, via pull request (which would really make my day!).
All in all, I’m excited to finally have a lot of the skills I need to start actually embarking on serious projects. This is admittedly a humble start, but it’s a nice toehold into other, more complex things.
Thanks for tuning in, everyone! I can’t wait to see where this project goes with your help.