ANNE Stack - Angular JS, Node, Neo4J and Express

Learn how Graph DB, Node JS, Angular and Express can be used to create next generation application. This article introduces you to the ANNE Stack – Angular JS, Neo 4J, Node Js and Express

Written by 42ID on November 05 2014

The ANNE Stack

The world of a software developer is littered with 4 letter acronyms – from the ubiquitous early acronym LAMP describing the technology platforms used, to the more modern MEAN stack, we have plenty to keep track of. So in the spirit of ever evolving world of IT we live in, let’s introduce another one to the mix – ANNE.

What is ANNE you ask?

Its a technology stack made up of Angular JS, Node JS, Neo4J and Express. Those of you familiar with the MEAN stack are already three fourths familiar with what’s being discussed here! The new kid on the block here is Neo4J. And what is Neo4J? Neo4J is an increasingly popular Graph DB based on the class of NoSql database. Before you dismiss Graph DB as something you will not use, consider this: Does your application use relational database? Do you have related items in you application? Do you want to leverage the flexibility of NoSql database and yet be able to describe and maintain relationships? If you answered yes to the above questions, and lets face it, most of our applications fall in that category, then your app can use Graph DB.

Still don’t believe me? Alright, lets take an example and work through it.

Consider this problem domain: You are building an internet application that shows the interaction of different drugs when taken together. I’m sure you have seen various sites that provide this service. Chances are they are using some sort of relational database to describe their model. How would you go about designing this relational database? Probably have a table describing all the different drugs. And another table that maps one drug to another with a list of interactions between the two.

Figure 1. Traditional Relational Database tables

Given a list of drugs the patient takes, you could query this table and for every drug listed by the patient you would find out if there is a row describing interaction between this drug and another that the patient uses.

While this model works, is it optimal? Is this model intuitive? Does it scale well? Can you easily visualize all the interactions taking place? What happens when you have specific interactions that you did not account for initially – for example what if there is a specific interaction between 3 drugs – interaction with drug A happens only when taken with drug B and drug C and not otherwise? What happens if you need to add a newly discovered interaction to a specific drug? What will you have to do to your model to extend it to meet additional criteria?

Let’s think about that for a moment. How much refactoring or re-design would you have to do?

Now, lets see how a graph database can help.

Graph DB

Lets start by defining Graph Database. Simplistically speaking, a graph database is a collection of nodes and relationships. The relationships describe how the nodes are connected or related to each other. A graph db can have directional relationship or undirected relationship between two nodes. Node contain key-value pairs that describe the properties of the node. A relationship can also contain key-value pairs that further describe the relationship between the nodes. A graph database comes with its own intuitive sql like language that help query for information within the store. Together, these features offer a very powerful way of modelling and querying the database.

One of the strengths of graph database is that in spite of a growing dataset, the performance tends to stay relatively constant as opposed to a relational database where intensive joins tend to degrade the performance. Graph database allows you to quickly establish the persistence layer for your application while allowing all the flexibility inherent in a NoSql schema-less store.

Here’s another way to look at our models as they are represented in a traditional databases versus a graph database. In a traditional database, the data is stored in a flat structure and the application infers the relationship between data. On the other hand in a graph database, the data itself is stored as a connected data. This creates tremendous advantage when retrieving data. Especially when you need to travel down the chain.

Modelling our problem domain

Let’s go back to our problem and see how we can design and describe our model using Graph Database. Each node contains key value pairs that describe each drug. When an interaction exists between two drugs, a relationship is created between these two corresponding nodes. The properties on this relationship describe the interaction specific to these two drugs.

Figure 2: Modelling with Graph Database

What about a scenario where drug A interacts only in the presence of drug B and drug C? We can introduce a new node which has a “COMPOSED OF” relationship that connects it to drug B and drug C. This new node then can have a “INTERACTS_WITH” relationship with drug A. See how easily we can introduce new models and relationships?

Figure 3. Easily add additional relationships

Let’s say later you needed to expand your application and add alternatives to a particular drug. Easy enough. You just introduce an “ALTERNATIVE_TO” relationship between the nodes in your database.

Figure 4: Scale easily without affecting existing relationships

Now that we have our model, how do you query for this data?

Cypher Query Language

Enter a specialized language called Cypher for querying this connected dataset. Cypher is an expressive language that is also easy to read and understand. Here’s how you will query for all drugs that have an INTERACTS_WITH relationship with drug A

Match (a {name: ‘A’})-[:INTERACTS_WITH]-(b)
Return b

Match (a)-[:COMPOSED_OF]->(b {name: ‘B’}), (a)-[:COMPOSED_OF]->(c {name: ‘C’}), (a)-[:INTERACTS_WITH]-(d)
Return a, d

Even without looking at the documentation, you can pretty much say what each query is doing. The power and expressiveness of the language is evident when you start chaining the requests

Live Example

Click here for a live example of the application using the ANNE Stack.

Technology Stack

OK, so we have looked at what a Graph DB is. Now how do we go about using this? Specifically, how do we use Neo4J with our JS stack? Head over to Neo4J website and download and install Neo4J server. Or, alternatively, go to and get a free Neo4J sandbox. Neo4J exposes a RESTful API through which you can execute Cypher queries. There are several JavaScript libraries that wrap the low level API calls in form of JavaScript method calls. The one that we are going to use is neo4j-js. There’s a npm module available for this library that you can use to add to your node project. The rest of the components are already familiar to most people - Angular Js, Node Js and Express. If you are not, there are plenty of resources available on the topic. If you wish, shoot me an email and I will elaborate on those as well.

Next, download the project scaffold from github repository:

 The structure and organization of the project is based on the single page application template provided by John Papa. The scaffold uses the Graphenedb sandbox for Neo4J and provides a basic pages for creating nodes, relationship and for querying the datastore.

Let’s talk a bit about the structure of the code. The ‘public’ folder contains the client code. ‘public/vendor’ contains vendor specific JavaScript files and libraries. ‘public/app’contains your application specific views and JavaScript files, each organized in sub directories that correspond to a page or module within your application. The ‘public/services’ folder contain common directives used in the application along with dataservice calls that reach out to the server API. ‘public/common’ folder contains common modules and helper functions used within your application – modules such as logger or spinner control.

Like any Node JS program, you can start the server by executing ‘node server’ command on your command prompt.

Was this useful?

Spread the word if you found this useful! Tweet us on @thelatestbrian and @yanamegainfo