Building single page apps with require, backbone, Flickr API …


Building single page apps might implicate a lot of tools and technologies. In this post I have provided you with a small single-page application that is consuming public Flickr API service (json based). It renders a list of items retrieved based on the tag search, which are linked to an internal details page. You will find out how you might be using frameworks like

  • backbone.js to try to structure your applications a bit better,
  • require.js to modularize your application code and perform dependency management,
  • grunt.js to enhance your build process,
  • compass  for css preprocessing
  • karma to help you automate your tests running
  • jasmine to help you write your javascript tests

About the application

The application’s requirements can be found within README.md file, but here are some of the things to be done:

  • App consumse a Public JSON API Feed (documentation) and displays the resulting data according to the wireframes (Wireframes-spec.pdf).
  • Should function as a sinigle-page app (SPA)
  • Use responsive techniques to ensure it works on a range of devices
  • Use Backbone for adding a structure to the application (MVC like style).
  • Implement search box where text entered is matched against public Flickr API tags
  • Provide build process for generating production-ready code

Development Process

In the following screencast I will try guiding you trough the app and its source code and explain some implementation specific details.   The video quality is not good at all, but hey you can get everything for free! 🙂 Hope you’ll find it helpful!

Outro

There is so much more that can be improved and implemented here but it is outside the scope of this tutorial, whose only purpose is to help you wrap your head around the ways of configuring these technologies and using them in your everyday work and process of building single page applications.

Your company needs help from an expert?  Feel free to contact me.
 

Links

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s