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

ToDo Web Application using backbone.localstorage.js

ToDo web app is a simple notes taking app which saves text to be retrieved later. We will be using JS libraries to save text to an online storage instead of a DB like (MySQL or MSSQL). One of the the most attention catching javascript libraries of today is the Backbone.js. It is a javascript library with a RESTful JSON interface to transfer data and it is based on the MVP (Model – View – Pattern) model in design aspects. I personally assign the term ‘One Man Army’ to Backbone.js as it is lightweight and capable of performing amazing operations (explained in detail in this tutorial) since it is dependent only on one javascript library which is Underscore.js

Before getting started we need to know the basics of backbone.js and backbone-localStorage.js

Remember: All the date 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.

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.

The above code contains all necessary information to be displayed into the note list on the right sidebar. 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. Do not care about the CSS as I’ve messed it up writing a number of lines, let us focus more on the script which is the heart of this system.

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. Have a look at the notes.js files available in the download. Also check out the backbone.localStorage.js link provided above you will get a lot of information regarding this app.

Setup basic information for a new note

Creating a Model for ToDo App and Generate a new ID for the new one

Create an Note

Generate the Hash URL for the newly created Note and Generate the note 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! Understanding the process is a bit challenging to the beginners. I suggest you to learn Backbone.js and Angular.js to get the Internet world into the fold of your hands!

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 …

  • esboost

    Hi Ashik. Thanks for this wonderful tuto. I would like to store in a SQL table. Could you, please, add the code to send all those informations in to SQL table? Cheers,

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!