Home / jQuery / Tasks Web Application using backbone.localstorage.js

Tasks Web Application using backbone.localstorage.js

Tasks web app is a simple yet powerful task monitoring app built using Backbone.js. We will be using JS libraries to save text to an online storage instead of a DB like (MySQL or MSSQL). This concept is very similar to the one we saw in ToDo Web App One of the the most attention catching javascript libraries of today is the Backbone.js. As we have gone through the introduction in the ToDo App lets us skip to the development area.

Additional Libraries used: Moment.js, Underscore.js and Backbone.localStorage.js

Remember: The Task ID that appear on the web page with # in the URL are saved in the cache. You can simply use back and forward buttons and notice that the page does not reload.

Assuming that you have a brief idea about the mentioned JS Libraries let us proceed with the Markup.

Do not get confused with the <%- description %> thing. In the above template we set the name of the task and time of creation and it is only for the left side part of the design.

Note that I’ve used <script type=”text/template“>. The browser cannot understand that part and will simply ignore it. We have used the description there to be used only by underscore.js which will communicate with backbone.localStorage.js to save data.

Let us now set up the task description area and comment area.

The above code contains all necessary information to be displayed into the tasks description and comment area on the right pane. All information are related to data being stored using backbone.localStorage.js via underscore.js. Here we use moment.js which has a number of ISO formats for date and time and it is properly designed to work with various javascript libraries.

So that is all with the Markup. CSS will be messed up as I’ve use a predefined set of CSS. It’s app.v2.css. Here you can use twitter bootstrap to make your own style.

Let us break the functions of Creating, Saving, Accessing and Deleting in parts and look into each of it in detail. I will not be explaining the script which hides, activates, deactivates the list items. These are just normal methods followed in the basic tutorials.

Setup basic information for a new task

Setup basic information for a new Comment

Creating a Model for Task App and Generate a new ID and then save the data to local Storage instead of a remote server

Create a Task after initializing Backbone, here we create events for a new task onClick and search.

Generate the Hash URL for the newly created Note and Generate the Task view

Things are now ready to be setup on click of a button! We just need to initialize and create the app

That’s it! This is absolutely challenging to understand for beginners I suggest you to read the Note App Tutorial to get a better understanding.

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Private chatroom using socket.io, NodeJS and MySQL

As I promised to write a tutorial on Private chatroom with MySQL DB in the …

  • JohN

    What can I say, brilliant and exactly what I have been looking for 😉

    Next step implement in my website and hope it works as good as stand-alone tryout


Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!