How about a NoSQL database for your front-end?!

In my working on various front-end systems over the years, one thing that I have continually found painful is trying to manage data. Shoving it in some random location, calling the server relentlessly, keeping state where I need not, storing it in DOM — gross. And as web applications continually get beefier and users expect more responsive, awesome interactivity, the front-end has had to take on more of the workload in working with data. Thanks to HTML5 we have the rather awesome localStorage, but I, personally, find the API to not be really ultra sweet, and what they do give us seems a little under powered, IMHO. I also find that this is not an uncommon issue and in managing data on the front-end numerous developers end up creating a bunch of boiler plate and state management all over their code and it gets messy, painful to look at, and even more painful to manage.

All of that said, here is a pretty rad solution: ku4collections! What is a ku4collection you might ask. Well, a ku4collection is a repository of documents, much like a NoSQL database on the back-end, but it is on the front-end. And, really, that’s it!

Why do you care? Well, because it makes working with data pretty damn easy. For example, say you are working with an admin portal that contains a table of people and each person record contains a person and their personal info. For the sake of this article let’s say that there are 4 people.

Name: John Richards
Title: Owner
Department: Executive
Salary: $30,000.00
Age: 30

Name: Erin Samualson
Title: Developer
Department: IT
Salary: $80,000.00
Age: 24

Name: Jennifer McMullen
Title: Project Manager
Department: IT
Salary: $60,000.00
Age: 25

Name: John Johnson
Title: Janitor
Department: Maintenance
Salary: $50,000.00
Age: 64

With ku4collections you could get this data from the server as JSON and stick it into a ku4collection for later use. So we will simply create a collection with name “persons,” initialize it with some data, and then save it to storage. (You can do this in a console window if you like. I will use Chrome. You can also follow along by grabbing the latest ku4js-data from github)

var persons = $.ku4collection("persons").init([
 {
   firstName: "John",
   lastName: "Richards",
   title: "Owner",
   department: "Executive",
   salary: 30000,
   age: 30
 }, 
 {
   firstName: "Erin",
   lastName: "Samualson", 
   title: "Developer",
   department: "IT",
   salary: 80000,
   age: 24
 },
 {
   firstName: "Jennifer",
   lastName: "McMullen", 
   title: "Project Manager",
   department: "IT",
   salary: 60000,
   age: 25
 },
 {
   firstName: "John",
   lastName: "Johnson", 
   title: "Janitor",
   department: "Maintenance",
   salary: 50000,
   age: 64
 }
]).save();

Now that we have a collection, let’s run some queries on it. With ku4collections you can run all kinds of expected operations including: find, insert, update, and remove.

So let’s say we wanted to find all of the entities in our collection. We could simply write:

persons.find()

and we would get back an array of all of our entities.

Now you are probably saying, “Alright, that’s sort of cool.” Well, word of warning, this is about to get a lot cooler very fast!

Let’s say that I wanted to find all of the persons with name John. Well then I would find by a query

persons.find({"firstName": "John"});

This code is saying find all of the entities in the persons collection that have a firstName value of John. And what do you know? We get back both of the Johns!

Now I hope that you are saying, “Okay, that’s cooler. Now I’m listening.”

Good, because this is where it starts getting awesome!

What if I needed both of the Johns but I wanted the oldest ones first? Well, then you would add an $orderby.

persons.find({"firstName": "John", "$orderby": { "age": -1 }});

If you use $orderby, you simply use -1 to order by descending and 1 to order by ascending.

Pretty cool, huh? But wait, there’s more! (<– Gratuitous infomercial humor :{)})

Maybe you want to find all of the persons who are either Executives or in IT. Then you would use an $in.

persons.find({$in:{"department": ["Executive", "IT" ]}, "$orderby": { "age": -1 }});

Now with this query you get 3 results all ordered by descending age! Wicked cool!!!

Well now what if we wanted to add more people? Simply insert them!

persons
 .insert({
   firstName: "Alex",
   lastName: "Garrison",
   title: "CIO",
   department: "Executive",
   salary: 330000,
   age: 42
 })
 .insert({
   firstName: "Alexa",
   lastName: "Rogers",
   title: "COO",
   department: "Executive",
   salary: 430000,
   age: 38
 }).save();

DON’T FORGET TO SAVE!!!

Now let’s run our last find query again

persons.find({$in:{"department": ["Executive", "IT" ]}, "$orderby": { "age": -1 }});

Now we have 5 results still ordered correctly!

Let’s say this is actually not good, though. We shouldn’t have the Executives in this table. No biggie, we can just remove them.

persons.remove({"department": "Executive"}).save();

This query is saying: remove all of the entities that are in the Executive department

DON’T FORGET TO SAVE!

Now let’s run our last find query again

persons.find({$in:{"department": ["Executive", "IT" ]}, "$orderby": { "age": -1 }});

Now we only get 2 results, still ordered, of course, but the Executives are gone.

I did notice in those results though that Erin’s last name is spelled incorrectly. Let’s fix it.

persons.update({"firstName": "Erin", "lastName": "Samualson"}, {"lastName": "Samuelson"}).save();

This query is saying: update all entities where the firstName is Erin and the lastName is Samualson and update the lastName to be Samuelson — with an “e”.

DON’T FORGET TO SAVE!

And then lets run our find query

persons.find({$in:{"department": ["Executive", "IT" ]}, "$orderby": { "age": -1 }});

And here we see expected results, though, now Erin’s last name is correct.

I hope that by now you are saying to yourself, “Dude, this is pretty sweet!” And thank you if you are. There is one thing that I saved for last though, and IMHO it’s the best — JOINS! Yup, you can join collections too! Check this out.

Let’s create a departments table for our contrived example here:

var departments = $.ku4collection("departments").init([
 {
   "name": "IT",
   "floor": 5
 },
 {
   "name": "Maintenance",
   "floor": 1,
 },
 {
   "name": "Executive",
   "floor": 22
 }
]).save();

DON’T FORGET TO SAVE!

Okay, now lets also add those Executives back.

persons
 .insert({
   firstName: "John",
   lastName: "Richards",
   title: "Owner",
   department: "Executive",
   salary: 30000,
   age: 30
 })
 .insert({
   firstName: "Alex",
   lastName: "Garrison",
   title: "CIO",
   department: "Executive",
   salary: 330000,
   age: 42
 })
 .insert({
   firstName: "Alexa",
   lastName: "Rogers",
   title: "COO",
   department: "Executive",
   salary: 430000,
   age: 38
 }).save();

DON’T FORGET TO SAVE!

And now lets try joining our persons and departments tables.

var personDepartments = persons.join(departments, "department", "name");

Okay, now a lot has just happened with the statement above. The query is saying, join the persons collection and the departments collection on persons.department is equal to departments.name. When we joined our collections it is analogous to us joining SQL tables using aliases. That is, to get the data that we are looking for we will have to be mindful of the collection name and the data. So let’s say I want to find out what floor John Richards works on. I would do the following:

First, I would query for John in my joined collection.

var results = personDepartments.find({"persons.firstName": "John", "persons.lastName": "Richards"});

Now, this returned our results, but of course they are an array. So, lets get the one and only item in our results and then find the floor.

results[0]["departments.floor"];

And we will see that John Richards works on floor 22!

You could do this all inline of course.

persons
 .join(departments, "department", "name")
 .find({"persons.firstName": "John", "persons.lastName": "Richards"})[0]
 ["departments.floor"];

Alright, last thing to do is clean up our toys.

Enter $.ku4store(). Remember how we kept saving? Well this is some syntactic sugar that ku4js-data offers. What it is actually doing is saving to the $.ku4store(). There are all kinds of things to do with the $.ku4store(), but we’ll save that for another article. Before we clean up, though, let’s take a look at one.

During this article we had to save our collections to a var. This can actually be rather painful in a real webapp depending upon how you architect your solution. But what is really great is that you can get your collection by asking $.ku4store() for it. So, let’s try with one of your past queries. Let’s just find all people named John again and order them by descending age.

$.ku4store().read("persons").find({"firstName": "John", "$orderby": { "age": -1 }});

And there you have it. Now you can access your collections anywhere. It gets even simpler and cooler in ku4js-webApp. That article to come soon!

Okay, then, let’s clean up our collections to free up some memory.

$.ku4store().__delete();

And there you go, ku4collections! I hope you find them useful, and just in case you didn’t grab the project yet, you can find it at ku4js-data on github.

Please, comment on and share this post with others if you enjoy it; follow @kodmunki on Twitter for regular updates on new developments, deployments, articles, and tools; and check out kodmunki™ on github for cool, managed, and tested kodmunki™ projects.

Thank you for reading, and as always, happy coding :{)}