In previous installments we looked at getting started with creating an Express.js MVC application, creating controllers and views. And then we looked at middleware and creating a config file to store application constants.
Now we will look at something that truly makes an Express.js application dynamic (and fun): data-access… which essentially boils down to the use of a database to store, retrieve, and manipulate information.
Like many things in technology, people will always argue about what is the “best” way to do something and what the best technologies to use for doing that something are. And the way in which an application should store data is not going to be excluded from this discussion (read: Internet flame-war). It is not really part of our purposes to argue what is “best” or “better” when it comes to data-access, but it is probably worth pointing out that a lot of the Express.js and Node.js communities seem to have embraced NoSQL databases such as MongoDB, and CouchDB. There is even a full “stack” you will hear mentioned known as the MEAN stack (MongoDB, Express, AngularJS, and Node.js) — just like you’d hear of a LAMP stack (Linux, Apache, MySQL, and PHP). The inclusion of MongoDB in this shows its prominence in developer preference in Express and Node applications.
So, it is probably worth knowing a bit about how to use a MongoDB database in a Node.js and Express.js application because you are more than likely to come across it at some point in your life as a developer. So, resultantly, we’ll utilize MongoDB in our application.
Installing MongoDB
Head on over to MongoDBs home page and download MongoDB for your OS. You’ll probably just want to pick the standard install and won’t need any fancy cloud services at this point. Be sure to read through the installation section in the docs section of the site. and do the subsequent tutorials to make sure you can test out that MongoDB was installed correctly. There is a “Getting Started” section that should walk you through this where you can try out creating, reading, inserting and deleting data a sample MongoDB database.
After you have installed MongoDB create a new folder in the root of your application can call it “db”. This is where we are going to store our database and we’re going to point MongoDB to put all the files for this database in here.
To start things up, next go to the directory where you installed Mongo and navigate into the bin directory and open a command window. So on Windows, for example, if you installed in the C:\mongodb directory, you would open a command window or shell in C:\mongodb\bin. You could also get there by opening a command window anywhere and typing
cd "C:\mongodb\bin"
Then you would type the following into the command window where we should specify the path to the “db” folder we just created. So wherever your application lives on your system you’ll want to specify that path by running the following command.
mongod --dbpath "C:\path\to\application\db"
or if you’re using BASH, something like this…
mongod --dbpath /c/path/to/application/db
If all goes well, you should see a message saying that MongoDB is waiting for connections. By default at the time of this writing, the version of MongoDB being used waits for connections on port 28017… so you should see that reflected somewhere in the messaging. Leave this running by leaving this window open (you can minimize if you like).
NOTE: When you first run this command, MongoDB will create all the files it needs in the “db” folder we created, so you should see a number of files pop up in there. Some are quite large.
Now that we have MongoDB installed and we can connect to it, lets write some Node.js code to do some data operations! Woo hoo! Like with so many things we have done before, we will utilise a module to act as a wrapper for our data access with MongoDB. Remember, you could always set things up and write your own code in Node.js for accessing data. Using modules is basically just a way to circumvent all of that grunt work and manual labor involved in those processes. If somebody else has already done the heavy lifting in making a module, might as well make use of it.
Installing Mongoose
I am going to use a popular module for accessing MongoDB on npm called Mongoose.js (which like pretty much all Node.js modules is avialble on npm). There are probably some other modules that you could use, we’re just going to go with this one to start. So as we have done before when we are adding a new module, we need to update our package.json with a new reference to Mongoose. We will also add another module called body-parser which is going to be useful for getting data out of forms so we can save it in our database.
{
"name": "MVC-Express-Application",
"description": "An Express.js application using the MVC design pattern...",
"version": "0.0.1",
"dependencies": {
"express": "4.4.4",
"body-parser": "1.4.3",
"express-handlebars": "1.1.0",
"morgan": "1.1.1",
"errorhandler": "1.1.1",
"mongoose": "3.8.8"
}
}
Then again, we should open a shell in our project root directory and run
$ npm install
which will pull down all the Mongoose and body-parser files.
Read More »
I was developing an HTML5 mobile app for an organization. The app was very simple and essentially consisted of a number of different chapters with a lot of text in each. So the homepage of the app was just a list of the chapters and each list item linked to a chapter page. All the text was in a single page (HTML document) and the app framework would just show/hide the relevant portions of it when needed. A lot of mobile HTML5 frameworks do this implementation and it essentially amounts to a simple single page application. None of the content for this app was stored on a server.
However, one of the features requested was search in that they wanted the ability to search for a term and link to the term from a search page. This is usually pretty easy if content is stored in a database because all the infrastructure to run queries against content in said database is there for you. However if all the text is in a single page application, how would you 1. find it and 2, link to it? What follows is essentially my approach in what amounts to essentially a local search functionality in a single page application.
For starters, say we had the following HTML document…
<!doctype html>
<html>
<head>
<title>App</title>
</head>
<body>
<div id="home" class="page">
<ul id="menu" class="page">
<li><a href="#search">Search</a></li>
<li><a href="#chapter1">Chapter 1</a></li>
<li><a href="#chapter2">Chapter 2</a></li>
<li><a href="#chapter3">Chapter 3</a></li>
</ul>
</div>
<div id="chapter1" class="page">
<p>The quick brown fox jumped over the lazy dog.</p>
<p>How now brown cow?</p>
<p>Something else</p>
</div>
<div id="chapter2" class="page">
<p>Chapter 2 text here...</p>
<p>More text here...</p>
</div>
<div id="chapter3" class="page">
<p>Chapter 3 text here...</p>
<p>More text here...</p>
</div>
<div id="search" class="page">
<input id="search-box" type="search" />
<ul id="search-results"></ul>
</div>
</body>
</html>
Each div with the class “page” would be loaded into the main view when a user clicked on a link to the id of the <div> as can be seen in the menu page. For brevity, I’ve kept the content of each <div> really small but imagine that there were a number of chapters and each paragraph in each chapter had large amounts of text.
What I ended up doing is I added a class called “indexed” (to say that the content of this element is going to be indexed in the search functionality) and some “data-reference” attributes to each paragraph of text to be able to tell where in the application I was. If we were going to have for text *with links*, we’d need to have a way to tell “where we are” so that when we load that page we could scroll to the div that had the text that was searched for.
<!doctype html>
<html>
<head>
<title>App</title>
</head>
<body>
<div id="home" class="page">
<ul id="menu" class="page">
<li><a href="#search">Search</a></li>
<li><a href="#chapter1">Chapter 1</a></li>
<li><a href="#chapter2">Chapter 2</a></li>
<li><a href="#chapter3">Chapter 3</a></li>
</ul>
</div>
<div id="chapter1" class="page">
<p class="indexed" data-reference="1-1">The quick brown fox jumped over the lazy dog.</p>
<p class="indexed" data-reference="1-2">How now brown cow?</p>
<p class="indexed" data-reference="1-3">Something else</p>
</div>
<div id="chapter2" class="page">
<p class="indexed" data-reference="2-1">Chapter 2 text here...</p>
<p class="indexed" data-reference="2-2">More text here...</p>
</div>
<div id="chapter3" class="page">
<p class="indexed" data-reference="3-1">Chapter 3 text here...</p>
<p class="indexed" data-reference="3-2">More text here...</p>
</div>
<div id="search" class="page">
<input id="search-box" type="search" />
<ul id="search-results"></ul>
</div>
</body>
</html>
So as the user types into the search box if we use some jQuery and some RegEx we can 1. search through every “indexed” element for the text that was searched for and 2. populate the search results <div> with links to the various elements. It would look a little bit like this…
jQuery(document).ready(function(){
function search(searchedText) {
if(searchedText.trim() === ""){
jQuery('#search-results').empty().text('No results...');
return;
}
var res = jQuery(".indexed:contains('"+searchedText+"')").each( function() {
var current = jQuery(this).closest('div[class="page"]');
var regex = new RegExp(".{0,20}" + searchedText + ".{0,20}", "i");
var str = jQuery(this).text().match(regex);
var ref = jQuery(this).closest('[data-reference]');
jQuery('#search-results').append('<li><a href="#'+ current.attr('id') +'?reference='+ ref.attr('data-reference') +'">... '+ str +' ...</a> - '+ current.find('h1').text() +'</li>');
return;
});
if(res.length === 0) {
jQuery('#search-results').empty().text('No results...');
}
}
var searchResults = jQuery('#search-results'), searchTimeout;
jQuery('#search-box').on('keyup', function(){
var el = jQuery(this);
searchResults.empty();
clearTimeout(searchTimeout);
searchTimeout = setTimeout(function() {
search(el.val());
}, 1000);
});
});
So basically what we are saying here is that while we type into the search box, we will wait until the user is finished typing and then we will check each “indexed” element for the text we are searching for. If we find it we will create a link to that text to the chapter and append a query string value to the “data-reference” value of the element that contains the text. We can then use the event that fires every time the page changes (as a lot of mobile frameworks have) to check for this reference parameter in the url. If it is there we can do something like the following to scroll to the paragraph that contains the text we were searching for. We call the following scrollTo function on each change/load of a page.
function getParameter(name){
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
function scrollTo() {
if(getParameter('reference')) {
jQuery('html,body').animate({
scrollTop: jQuery('[data-reference="'+ getParameter('reference') +'"]').prev().offset().top -20
}, 100);
}
}
The way things are set up at the moment, the regular expression will search for the exact text entered into the search box. Thus, search is case-snesitive at the moment. No matter. If we wanted to incorporate case-insensitivity into things we could simply add the following method…
// make :contains case insenstive for search
jQuery.expr[":"].contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
By implementing these sorts of techniques and methods, you can incorporate local search and linking into a single page application with a relatively small amount of code. You could take this and expand upon it pretty easily. So even within the perceived limitations of a single page application, you can find ways to implement dynamic functionality that you would expect from any other application. Until next time, happy searching!
View Demo
Because JavaScript is such a flexible and dynamic language it’s always interesting to take a look at different ways of accomplishing things. In our ongoing studies of some of the inner-workings of the language we looked at the apply and call methods. Today we are going to look at their cousin bind.
So what does bind do? Much like apply and call, bind is going to have a lot to do with context and what the “this” keyword points to and it can sometimes be a little bit confusing as to what it is really doing at first. Let’s take a look at the description of bind() from the Mozilla Developer Network…
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Hopefully it will make a bit more sense after we get through “this” (*Groan*)
One of the more common uses of the bind method within JavaScript applications is to pass the parent scope downward as you go multiple levels deep within methods within in object literal. For example, let’s say we had the following very general “actionClass” object literal. A lot of JavaScript applications use this pattern as an implementation…
<div class="button">Click me!</div>
<script type="javascript">
var actionClass = {
init: function(){
this.setEvents();
},
setEvents: function(){
// we will set events here...
},
doSomething: function(){
console.log('We are doing something');
},
doSomethingElse: function() {
console.log('We are doing something else');
}
};
actionClass.init();
</script>
As we can see we are calling the actionClass.init() method which will set up some event handlers. So let’s add an event where when we click an element we call another one of the methods within our actionClass object.
<div class="button">Click me!</div>
<script type="javascript">
var actionClass = {
init: function(){
this.setEvents();
},
setEvents: function(){
jQuery('.button').on('click', function(){
this.doSomething();
});
},
doSomething: function(){
console.log('We are doing something');
},
doSomethingElse: function() {
console.log('We are doing something else');
}
};
actionClass.init();
</script>
This code does not work. When we try to click the div we get “Uncaught TypeError: this.doSomething is not a function” Why is that? Well it is because the callback function for the click event has its own scope. “this” is now pointing at the function it is being called from. One way that developers solve this is by setting a variable to the parent scope. The following code works…
<div class="button">Click me!</div>
<script type="javascript">
var actionClass = {
init: function(){
this.setEvents();
},
setEvents: function(){
var self = this;
jQuery('.button').on('click', function(){
self.doSomething();
});
},
doSomething: function(){
console.log('We are doing something');
},
doSomethingElse: function() {
console.log('We are doing something else');
}
};
actionClass.init();
</script>
This is certainly a viable option and works fine for our simple example. However, as we go deeper and get more complex into multiple levels of nested functions with events or getting data asynchronously via AJAX requests or any number of other possibilities the process of constantly assigning variables to the scope that you want can get kind of messy. So what other approach can we take? This is where bind comes into the picture. We could also do something like the following…
<div class="button">Click me!</div>
<script type="javascript">
var actionClass = {
init: function(){
this.setEvents();
},
setEvents: function(){
jQuery('.button').on('click', function(){
this.doSomething();
}.bind(this));
},
doSomething: function(){
console.log('We are doing something');
},
doSomethingElse: function() {
console.log('We are doing something else');
}
};
actionClass.init();
</script>
Simply by attaching .bind(this) after our function closing bracket } we are changing the scope of the function. We longer need to say var self = this; This gives us a nice clean implementation for how we organize our code.
Read More »
Event delegation is a very important part of writing efficient code for handling events in JavaScript. We looked at JavaScript events in this section here and looked at some other components of it when exploring things like the publish/subscribe pattern in creating JavaScript event channels.
What is event delegation? Well, in general the concept of event delegation could be thought of as assigning a single event handler to handle multiple items.Event delegation is not necessarily a requirement for handling JavaScript events, but it certainly is a good practice and a good habit to apply to your JavaScript code.
We’ll take a look at this below using jQuery in our example. Let’s say we had a simple menu like the following.
<!DOCTYPE html>
<head>
<title>Event Delegation jQuery | 9bit Studios</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Projects</a>
</div>
</body>
</html>
So how would we add events to our <a> elements? Certainly we could do something like the following…
<!DOCTYPE html>
<head>
<title>Event Delegation jQuery | 9bit Studios</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Projects</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu a').on('click', function(e){
console.log(e.target);
});
});
</script>
</body>
</html>
In doing this, we have added events to each of the individual <a> elements. While this certainly works it becomes a bit messier when you start to dynamically add elements to the DOM. In modern web applications, dynamic, interactive, client-side updating of content is certainly a very common implementation that you come across. Let’s say we wanted to add a button to dynamically add new items to our menu…
<!DOCTYPE html>
<head>
<title>Event Delegation jQuery | 9bit Studios</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Projects</a>
</div>
<a id="addNew" href="#">+ Add New Menu Item</a>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu a').on('click', function(e){
console.log(e.target);
});
jQuery('#addNew').on('click', function(e){
var html = '<a href="#">New Item</a>';
jQuery('#menu').append(html);
});
});
</script>
</body>
</html>
When you add a few new menu items what happens when you click on the newly created items? Nothing. Why is that? Because when we ran our code to add the events to each individual <a> elements those newly added elements did not exist (and thus never got event handlers attached to them).
What could we do to solve this? Well, we could certainly run the code to add event handlers again, but as our codebase gets bigger and more complex handling things this way gets a bit on the messy side.
What should we do then? As it turns out a better way to approach this is to add the event to something that will always be there and won’t change. In this case, it’s our <div id=”menu”> container. By adding the click event to the this container, it servers as the delegate for all of our <a> elements. We can then do the following…
<!DOCTYPE html>
<head>
<title>Event Delegation jQuery | 9bit Studios</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Projects</a>
</div>
<a id="addNew" href="#">+ Add New Menu Item</a>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#menu').on('click', 'a', function(e){
console.log(e.target);
});
jQuery('#addNew').on('click', function(e){
var html = '<a href="#">New Item</a>';
jQuery('#menu').append(html);
});
});
</script>
</body>
</html>
Notice the syntax of displaying the a selector after the. As is described in the jQuery docs for the .on() method…
If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.
When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.
So now what happens when you click on a newly created <a> element in our menu. Voila! The event is captured. Huzzah! We now never have to worry about adding (or removing) any events for our dynamically created elements because we have used event delegation to handle it for us. A single function takes care of all future updates. It’s a one and done kinda thing.
Hopefully, this discussion has helped you better understand what event delegation is and where it might be useful. Until next time, happy delegating!
Previously, in an earlier installment we discussed some initial considerations for creating an application in Express.js following the Model View Controller (MVC) design pattern. We’ll pick up where we left off in what follows. The focal point will center around middleware and configuration…
Middleware
One of the things that we are going to want to implement in our application is middleware. There is a pretty good list of Express.js middleware in the Express.js project. Middleware is an important component of Express.js applications. You couple probably think of a middleware function or method as a function that runs on every request/response cycle at whatever point you want to specify. For example, if you wanted to see if the current user who is making the request is authenticated on every single request, you might have this authentication check run in a middleware function before issuing the response. That’s just one example, but there are many other pieces of functionality that you can run within middleware functions.
So let’s add some of the common Express.js middlewares. One useful middleware utility that we can use is a logging component. This will give us information about all of the requests made as our application runs. Express.js uses something called Morgan to accomplish this.
To add middleware, we’re going to want to add it to our package.json file as a dependency. So let’s update our package.json file to look like the following
{
"name": "MVC-Express-Application",
"description": "An Express.js application using the MVC design pattern...",
"version": "0.0.1",
"dependencies": {
"express": "4.4.4",
"express-handlebars": "1.1.0",
"morgan": "1.1.1",
}
}
Don’t forget that we have to install our new module as well. Fortunately, Node.js and npm make this easy. All we have to do is run $ npm install again and all of our packages will be updated…
$ npm install
Now that our dependency is installed, we need to add a reference to it in our main application file…
var logger = require('morgan');
Let’s add the following lines of code to our main app.js file…
/* Morgan - https://github.com/expressjs/morgan
HTTP request logger middleware for node.js */
app.use(logger({ format: 'dev', immediate: true }));
Now if we run our application and look at our CLI window we can see all the requests being output on every request response cycle. And just like that, we have made use of our first middleware.
Read More »
