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

URL Express CRUD Library


A few days ago, as a result of playing with Node, I have created and published an open source node based library called url-express-crud.

The main library objectives are:

  • Quickly expose basic CRUD operations in the application for a concrete model (resource).
  • Make it as flexible as possible, enabling clients (developers) to configure it based on their needs and desires (override resource related templates, make route handlers configurable, …).
  • Make it support content negotiation.

The main motivation for creating this library was to make it possible to quickly provide basic boilerplate CRUD operations for models (resources) that almost every app needs and all with certain level of flexibility in terms of customization that might be required.

However its important to note that the library is its very early phase and there’s a lots of things still to be implemented…

Installation

Just require the library as a dependency in your project’s package.json file:
"url-express-crud": "*"
Than just require it within your project file:
var urlCrud = require('url-express-crud');

And you can start using the library.

Usage

In order to help you understand how to use the library I have created a demo application.

The example application’s source code can be found in the separate github repo located here.

I’ve record a short screen-cast of me going though the process of using the library and creating the example application mentioned above. For now in order to provide you with the video pls contact me here, but if you are patient it will be soon uploaded to this blog.

Links