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
- Application’s source code.
- Flickr API
uroslates 