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 luc@appfog.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.

Share this post
Facebook Twitter Google
Try AppFog: The new PaaS Hackers love
  • http://twitter.com/JohnHaldson John Haldson

    Great post Luc.

    I am currently building a web app and have the same plans as outlined in your post. I have built a bare minimum app and plan to rewrite and deploy it to various platforms and storages.

    I just discovered appfog and it seems like the ideal service to do this with.

    On getting form input with jquery selector > .val(), I have used two other approaches. Depending on the data type expected, I have found it easier to use .serialize and .serializeArray() on my form inputs and then parse accordingly with something like json stringify, etc. I have also used Backbone Forms on one project and it worked very well and was dead simple to use.

    Good luck with the rest of your app, it’s the beginning of a long but very rewarding learning experience!

    • http://twitter.com/lucperkins Luc Perkins

      Thanks a lot, John! That’s really great advice. I had come across the BackboneSyphon library before but couldn’t seem to get it to work, although in retrospect I think that’s because there were pre-existing problems in my JS code. I’ll go back and give things another shot. I’ll let you know how it goes :)

  • website development

    Hi,

    Your blog is really informative gathered with valuable information..thanks for
    sharing these information..

  • probeseven

    Hi,

    It’s an nice post. Keep Sharing like this valuable information’s

  • bmdmedia

    Great. Thanks for sharing your experience and details about your projects.
    -
    https://www.bmd-media.com/

  • Andrew Harrop

    You really did a great job on his project. You made a simple Backbone.js, but the fact he looks better. I am currently working in http://www.scnsoft.com/ and also tried to start a project based on Backbone.js. The theme is very well received although further development stopped.

  • web development

    Hey that’s really awesome; you
    really are doing great, keep it up!

    I just want to share something more,
    and visit the following:

    web development services in hyderabad

  • Tony Jha
Powered by Olark