MEAN app v1

MongoDB ExpressJS AngularJS and NodeJS = MEAN app

Initially setup on a Raspberry Pi and then replicated to a Windows 7 environment for "local" development.

Steps =
[client side]
Nginx web server running an AngularJS web app
The controllers use the http$ directive to connect to the ExpressJS exposed REST api

[server-side]
NodeJS is installed and from the command line the >node app.js is executed
ExpressJS is listening on a specific port and will execute different actions based on the code in the REST api
For instance, /v1/getCustomers will query the MongoDB, retrieve the results and return the JSON data back to the calling client-side controller.  If any "extra" manipulation or data gathering is required this is encapsulated within the REST api function itself.
Once the data is passed back to the controller, the controller can then insert the result into a $scope variable that can then be rendered within the .html view via the ng-model 2-way data binding.

The advantage of splitting it out in this way is that I can point the controllers to any server that is running the nodeJS app.js - this can be my Raspberry Pi or my local Windows 7 laptop.  What I prefer to do, is to work locally, get it all working as I want it to and then deploy to the Raspberry Pi.
This setup works great.

It allows for nice separation and keeps client-side code client-side and server-side server-side - sounds obvious, but I've seen quite a few projects where the code starts to blur....initially for a work-around and then more and more you see things blurring.  Not good for the future maintenance.

As I say, this is all good and wonderful for a web app that you are accessing from your Desktop/Laptop web browser.... and even from a Tablet across a wifi connection.  AngularJS helps a lot as it really is fast.


At some point I'll post up a sample / skeleton app for the above, with step by step instructions on how to recreate it in your environment.

Actually, scrap that I'll point you to a guy I often refer to: http://scotch.io/tutorials/javascript/build-a-restful-api-using-node-and-express-4

(he's also working on an article that will show how to add "security" to those API calls.... as I imagine there are a few people thinking, hang-on you've exposed those APIs now anyone could potentially add/delete/get data from them.... he's working on that article, just be patient)


Now....you want to access the web app from a Tablet....bluetooth or wifi tethered to your phone...and you've got a real slow 2G (GPRS) connection.... hmmm... things start to take a little bit too long to render.
Yes, there is a ton of stuff you can do to minify your .js controller files and that will help a lot (and it's something you should be doing with the production version anyhow).

..and then you are asked the question, "Can I use 2 devices?".

The initial answer is, "Sure you can...hey it's a web app, it doesn't matter, you can use 10 devices if you like".

Then the conversation may move onto, "So, I have a Nexus Tablet, which is great...and I have a Samsung S4 phone... but I often only have one with me at a time and the Samsung tends to render the web app very slowly and quite often I don't have a data connection.  I would like to be able to have all my customer details offline.  Can you do that?"

As the above MEAN architecture above has been nicely split out, it means we can modify the controllers to not use the http$ module but to use the ondevice SQL database instead.  This will handle the "offline" part.
There are some limitations to the amount of data that can be stored in the browser (5Mb I believe) and there are a lot of debates about not using webSQL... but hey, it's there, it works, let's use it, this app isn't going to live for 10years, maybe 2-3 before it's replaced.

The only extra bit to build is the "syncDB" part, we have to build the ability to call the same expressJS REST api's to allow for all of the CRUD capabilities we need.  We just have to build the wrappers inside our controllers to make sure the server-side is the master source and if we add new data client-side we push that to the server.  This all sounds harder than it really is.

By making the web app "offline", we could make them using native tooling, Android Java, Apple Objective C, etc..etc... but why would we rewrite our web app like this?  We could use Cordova to build our web app and create the output to each of the platforms.
By using Cordova we will also be running natively on the device, therefore it's faster than getting the pages from the internet and rendering them.  I was a bit concerned about the webSQL speed, but it's not a problem for the amount of data that I've been testing with.
The other added advantage of Cordova is access to the Plugins - we can now get device information, probe to find out about the network connection information, invoke and integrate the camera into our web app and use the file Upload plugin to send that captured image to our server to save it for later use, perhaps with invoices....

The evolution of the MEAN app will be a v2 and I'll document that in a lot more detail in a later post.

No comments:

Post a Comment