How to Create a Simple Todo App With KnockoutJS
Lately, I’ve been interested in learning more about MVVM frameworks for JavaScript. I’ve heard a lot of good things about KnockoutJS ever since I started my career as a web developer, and I thought that this might be a good time to learn more about it, so I wrote a simple todo app (I know, really cliché) to get familiar with the syntax.
I thought some newer developers looking for a good framework to learn might like a gentle intro to Knockout, so I decided to write a tutorial about how to write an (perhaps your first) application.
First, checkout the source code here.
If you want to be a JavaScript developer, you’ll likely want to learn how to use Node. We’re going to install NVM and then install the latest (as of publication of this article) version of Node.
If you’re running Windows, checkout this repo and run the installer. Open a command console (type cmd into a “Run” query or ask Cortana to open it if you don’t know what that is) and type nvm install 6.1.0 and NVM will install the latest version of NodeJS.
For Linux and Mac OS X, run this command in a terminal:
https://gist.github.com/jonpemby/7b52e7b31c59d311c0f8abc83916060b
Resource your terminal: source ~/.profile or close the current terminal and restart it.
Run the following command to install the latest version of Node: nvm install 6.1.0.
If you haven’t already, download the source for the project.
Unzip the contents to any folder you like. I usually like to use a “dev” folder inside my home folder, but I’m on Linux. You should choose a folder that you can easily find. You can run the project if you feel comfortable doing so to get an idea of what we’re building.
Open a terminal and navigate to the project folder. Then, run npm install and NPM will install Express and its dependencies.
We’re going to use Express to serve our app. Once we’re finished, you can use this to launch your new app on Heroku (which I will probably cover in a later article because Heroku is awesome).
So, now that you’ve got the project files set up, let’s go over how to write the app step by step.
Create a new file called app.js in your project root. This will be our server, and we’re going to include logic that will handle routes; routes are relative paths in our URL that then have logic associated with them.
Let’s initialize our NPM package, because if we want to deploy this at some point we will need a package.json file that tells Node how to interact with our project and what modules it depends on. We’ll install a module called Express, which is a framework for writing a Node server.
Type this command in your project root: npm init and answer the questions. You can realistically just enter a name and press Enter to use the default values for the rest of the questions and you’ll be fine.
Once you have set up your package, run this command: npm install --save express
This will install Express in the node_modules directory. We can now use Express in our app.
Write the following code in app.js:
https://gist.github.com/jonpemby/4914279cd67531ce403c0988815eb478
Let’s walk through this step by step.
https://gist.github.com/jonpemby/08846c3e0a1413f02d85891a4df5d8b7
First, we will include the Express framework in our app. Express comes with a lot of great functionality to handle Node server side logic, which will help us get our server up and running quickly.
https://gist.github.com/jonpemby/d5d0d11dc1b63eab909d30699522cbe4
We need to create a new Express app, so we are going to initialize Express to a variable called app. We’ll use this variable a lot, so make it something simple and easy to identify.
https://gist.github.com/jonpemby/baf53d5cbc6e2e7a6be42a1cb98b6ab8
We are going to set up a public directory to serve our clint side code. I’m calling mine public, but you can call it anything that will make it easier for you to develop your app. Some developers prefer to call their client-side directory client, there are other popular terms as well but I’ll stck with public for my code.
This directory is going to contain our HTML, JavaScript, and CSS for our app. It is used for anything that the server needs to serve.
https://gist.github.com/jonpemby/ba10fa5ae56fe30477dab179a4526194
This code serves the route for the root of our application.
Routes, like I mentioned before, are relative paths for our app. Let’s imagine that our app exists on a server and has a domain name. The domain might be myapp.com. The root route is what you would see if you visit myapp.com.
If you had a route for users, for example, you could visit myapp.com/users to see a list of people that signed up for your app, perhaps. Really, you could have it do something else, too, but usually with routes you want the route to explain what it does so that if your users wanted to visit that particular area of your site they could easily remember it.
That’s basic routing; we’ll likely get into some more advanced topics later. For now, let’s just serve the root of our app.
res usually stands for “response,” at least it does in this case. Every Express route handler receives a reference to the request and the response. We won’t use the req object in this example, but if you needed to retrieve information from your client side code, you would find it here.
We’re going to serve our index.html file, which is what res.render('index'); does.
https://gist.github.com/jonpemby/aef2e20fc35dcbfa63a3afa04aaa33af
We’re finally ready to run our server! The app.listen method listens on a specified port for traffic. Don’t worry too much about what this means, but just know that we’re going to use port 3000 for our app. You can set this to any open port, but developers often use ports 3000, 8000, 8100, 8008, or 9100. There are many ports on your computer, but often times nothing else is utilizing these ports so they should be open. If you have trouble launching your app, try a different port and you should be fine.
Once you’ve saved your app.js file, we’re ready to set up our front end code! Nice, you just wrote your (presumably first) Node server!
So, we want to make sure our server is set up correctly. Let’s start out with a Hello World first, then we’ll roll into our todo app. Sound good? Let’s start by creating a new HTML file. Let’s put it in your public directory, and let’s call it index.html because that’s what our server is going to serve.
Write a simple HTML file with the following:
https://gist.github.com/jonpemby/3f7b1ab26c04c204cab2df4dc4fed393
Let’s start our server and check it out.
In a terminal, run the following: node app.js from our project directory. This will start the server. You should see a message that says that the app is listening on port 3000.
Visit localhost:3000 in your browser. You should see a plain “Hello, World!”
Congratulations, you’ve written a “Hello, World” app with Express!
Rather than give you a down and dirty example on how to write a todo app with Knockout, I’ve decided to give you an overview about how to really write software. So many tutorials I’ve seen just give you a quick rundown on how to do a particular thing, but I want to show you how to write your own project. You may not be ready, yet, and that’s perfectly fine. But in the future, you’ll probably want to write something using the skills you’ve acquired through this tutorial and others.
Planning is an important first step before starting a project. We have a few needs before we start, so let’s take a look at what we want to accomplish.
Our app needs to have a way for users to write a description of their task. We’ll also probably want a way to tell whether a task is complete or not. We’ll also probably want a way to delete a task if it’s no longer relevant. We’ll also want a way to mark a task as complete.
We’ve defined our “MVP” (or “Minimum Viable Product”). There are a lot of ways to determine what this is. Our app revolves around a single feature, which is the ability to manage a to do list. Users need to be able to interact with this feature completely, and features usually involve a set of operations referred to as “CRUD” (“_C_reate _R_ead _U_pdate _D_elete”) operations.
Larger apps will likely have several more features that will all require the same set of operations: a way to create, read, update, and delete items. Not all features are the same, so some features may not require “CRUD” at all. In this case, a user needs to be able to interact with the to do list with these operations in order for our app to work.
We’ve ignored updating the title for now, because our feature is simple enough that deleting a task and rewriting it as a new task is enough. We can save that for version 2. Our update operation right now is essentially just the ability to mark a task as complete or uncheck it.
Determining what features are important for our app to launch is an essential part of planning, and someday you’ll likely be involved in these types of activities in your job or even if you decide to produce your own application.
How will we set up our app for our users to interact with it?
Because we’re going for simplicity, we can utilize a “MVVM” (“Model-View View-Model”) framework. JavaScript has several and one of the most prominent is KnockoutJS. An MVVM framework is useful in this instance because it allows us to define a model and use two-way data-binding to tie the model to a view. Our HTML would be our view, while our JavaScript would handle our model and interactivity concerns. This seems really useful for our todo app, so let’s checkout KnockoutJS.
In a planning period, you would want to review each feature and try to review different solutions for each feature. One framework should be enough for most applications, but you may require some utilities and other libraries. Look at all of your options while you’re planning!
Browsers utilize forms to receive user input. We can use an input element to allow a user to type a description of their task.
For the rest of our interactivity, we can utilize buttons.
If our app was more complex we might want to draw a flow chart and perhaps some wireframes. We would likely write a sheet of specifications that flesh out our ideas and describe the technical requirements of the app. We could pass this to a designer who would design an interface for our app. This is outside the scope of this tutorial, but involving these steps for a larger application is ideal.
For our purposes, we’ve defined our requirements and that’s good enough.
Also during our planning phase, we’re going to want to gather any resources we need. So, let’s get KnockoutJS. We might need icnos, and we might need a font. I’ve already chosen some that work, but for your app you might like a different set. Experiment with some different open source sets.
Getting a good font for your app is ideal, and Google fonts has plenty of good fonts to use.
For the icons, I like Font Awesome.
Personally, I like to tackle the logic first. If we need to change it later we can, but writing our logic first allows us to make better structural decisions for our view later.
Let’s start by writing our todo.js file:
We’ll start by writing a function for our Todo model.
https://gist.github.com/jonpemby/c0dcdf858a4f0f1fb4dc0c6cd9342323
Let’s include our script in our HTML and make sure everything is wired together, first:
https://gist.github.com/jonpemby/eb72c81c87ac1791cc5f1d12c80677d8
Let’s reload our page and check our console. If there’s something wrong, let’s address that before we continue. Check to make sure you’re including all of the libraries we’ll need and that everything loads. Start by making sure the simple things are taken care of before we proceed.
Once we’re set, let’s continue writing our logic. We’ll start by defining our model’s properties.
https://gist.github.com/jonpemby/953df834cb910275a49e7dcf11963f5b
So, we’ve got a collection of to do items and a “newToDo” string. I think what we should do is use this string as the title of a new to do when it’s added by the user. The “newToDo” string can be tied to the value of a form input. Good going, we’ve made an important decision about how to structure our view!
The “ko.observable()” and “ko.observableArray()” functions are methods on the Knockout object. Observables are special functions that update the view for us automatically when the model changes. Wow, that’s a lot of legwork for us. If you’ve ever written an application with plain JavaScript or perhaps jQuery where you had to watch events and update the DOM, you probably realize that this is a huge load taken off of our shoulders by the Knockout framework. Don’t worry too much about what these do, because we’re going to work more with them later, but for now just realize that observables are how Knockout ties together the model we are creating and the view that the user sees.
Let’s write the logic for adding a new item and removing an item from the list.
https://gist.github.com/jonpemby/8491dfd6e14ee663c3e171db7d91b3e7
Knockout observables let us get the current value by calling the observable. So, by setting “val” to “this.newToDo()” we’re receiving the value of the newToDo property on our model.
We’re then assigning val as the description of our new todo object.
When we set up the complete property, we’re creating a new Knockout observable with the value initialized to false. This is because we want our to do items to start out as not being complete.
Cool! We’ve got our create and delete operations set up. Let’s work on our view now so that we can demo the logic. We’ll then see where we stand.
Now that we've defined our logic, let's work on our view and try out our application.
For our To Do app, let's modify the index.html view we currently have:
https://gist.github.com/jonpemby/c02cf6b961f1bf2df670fa7dd45dc7d3
So the way I've decided to structure the app is like so: the application title appears at the top, then a header to hold the new todo item's input and a button to add the todo item.
Then, we have a list to hold our todo items.
You've probably noticed that there's an attribute called data-bind with some strange new values you've probably never seen before. This is Knockout's way of binding view-model logic to the view.
<input id="newToDo" class="newTodo" type="text" data-bind="value: newToDo">
This binds the newToDo property of the model to the view. Anytime the input's value changes, the model property updates. This is fantastic, because without the help of Knockout we would have had to write a complicated event listener and handle the model update ourselves.
<button class="new" data-bind="click: addToDo">Add</button>
Here, we're binding the click event to a the addToDo function we wrote.
<ul class="todos" data-bind="foreach: todos">
We’re going to loop through all of the todo items, here. The bindings will now reference the single todo item within the loop, but we can override this by using $parent, which we’ll see in just a moment.
<span class="desc" data-bind="description"></span>
Since we’re in a loop, we’re able to bind the item’s description property. So, we’re going to use a span to hold the description, then we’ll have a button to remove the to do item.
<button class="remove" data-bind="$parent.removeToDo">Delete</button>
And here, we’re binding the removeToDo function to the click event. What’s interesting about this is that we get the item we want to remove as a parameter of the removeToDo function. Cool!
Now that we’ve got our view set up, check out your application in your browser. Start up your server and visit localhost:3000 in your browser.
Improving the Application
So, our app works. Data binding is cool, but the app isn’t very flattering. We’ve got unstyled HTML and we are missing some functionality that was present in the demo. The way the app currently stands, many users likely wouldn’t be that impressed.
We’re going to add some functionality: we need a way to mark tasks as complete, and we need to improve the visual aspect of the application. There’s also a slight annoyance in that when we add a new to do item, we have to delete the text for our old one and then click the button again. We could rework the logic a bit to fix this issue. Challenge accepted!
https://gist.github.com/jonpemby/e559758ba55d47ada5084784af270517
We’re now getting the input element by its ID, and we’re doing something new with Knockout observables. What for, you may be wondering? First, we’re going to set the value of the new todo’s title to the val variable like before. Then we’re going to set i to the input HTML element.
We’re going to create our new todo item as before, but then we’re going to reset thenewToDo property to a blank string by calling the observable with a new value. Thissets the value instead of retrieving it. Awesome!
After that, we want to refocus the input element to make it easier for users to create a new item. Sweet!
https://gist.github.com/jonpemby/2c1d66649687203186423d00bf9b92e8
Much like a JavaScript array, an observable array has a method called indexOf that we can use to find the index of an element if it exists in the array. Let’s do that!
We’ll find the index of the todo item we are completing by passing it to the indexOfmethod on the observable. Then, we’ll check to make sure that index is greater than -1. If the index is -1, the item does not exist so we don’t want to do anything.
If the item exists, we’ll set the complete property of the todo item to the opposite of what the current complete state is.
Working with observables is different from plain JavaScript because we have to treat them as functions. Calling an observable retrieves its value. So, because we want the observable array’s value, we will call it as such: this.todos()[index]. This will get us the element of the array that we want to modify.
Then, because we want to set the complete property of that item, we have to call its observable with a new value.
So, the complete line of code looks like this: this.todos()[index].complete(!todo.complete());
Here’s what our end result is going to look like:
https://gist.github.com/jonpemby/45557e98fec5813af0c7053eac87e34b
https://gist.github.com/jonpemby/ac22a438affcae10f17f9beae366cce2
Let’s start by refactoring our view code.
https://gist.github.com/jonpemby/856d8395c3d1f784c32f7a2a4f7734dc
We’ll give our button an icon from the Font Awesome set. Cool!
https://gist.github.com/jonpemby/9b1c19fb640a5a7abbbafcd2b96f1c14
Let’s refactor our todo item a bit. We’ll split it up into two parts, the action buttons and the description. We’ll give it an icon for whether it is complete or not, as well.
Knockout will also allow us to dynamically bind a CSS class by using the css binding. Knockout will evaluate whether the given value for a class is true or false and assign the class if it is true. You can use an object to map multiple classes if you like, which is what we’re going to do here. We’re going to change the icon depending on whether the item is marked complete or not.
We’re also adding a new button to the UI to handle item completion. We’re binding thecompleteToDo handler; much like the removeToDo handler we will get the todo item as a parameter.
With the new styles, we’ve actually got an okay looking application! And with out updated logic, we’re ready to launch our ToDo application.
We've learned how to set up a simple Express server to serve our app. It only took 11 lines of code, and we learned how to handle a route and set up our public directory. Later, we can do more advanced things like use an MVC methodolgy to better separate our logic.
What we have for our Knockout Todo app is fine for now, but if we wanted to add an API for our app to consume we should probably set up a controller for each resource. This is a more advanced concept, so we'll look at this later when we add some more complex features to our app.
We also learned how to create a client side todo application using Knockout. We defined a View-Model for our Todos and we bound the data to our view. We also defined some logic that allows users to add a new item and remove items, as well as check an item as completed and uncheck it if they wanted to.
You're well on your way to creating web applications with KnockoutJS. Congratulations! Next time, I'm going to show you how to interact with a server using Knockout. Stay tuned!
romaincrisis
baratheonpilled
discoholicmusic
prguitarman
andulkaphoto
areudirty
dededos
