Thanks to new angular versions, MEAN stack (MongoDB, Express, Angular(X), Nodejs) comes to new life and confirms its position of cutting-edge technology. Its qualities are well known: flexibility, speed of development, ability to deliver high quality performances. In this talk, after a brief overview at framework level, I ll' take about best practices and tips to follow during the development, in order to reach a scalable, encapsulated, tested and reusable code. These features will be explained using a real production project, focused on machine remote monitoring for retail field.

1. 1
MEAN Inside
Out
(with AngularX)
Paolo Spadoni, sw engineer - developer @ Lynx
& code enthusiast

2. 2
Do you know this cool
movie? Go and see if
you didn’t!
These guys will
take us to
mean stack!

3. 3
SUMMARY
● MEAN stack technology
architecture
● From MEANtoMEA(X)N (that is.. angularX)
● Use case
● Best practices
● Tips

4. 4
MEAN overview
● MEAN stands for

5. 5
MEAN Mongo
● NOSql
● Schema less MongoDB is a document database in−
which one collection holds different documents.
● Document Oriented Storage Data is stored in the−
form of JSON style documents.
● High performances

6. 6
MEAN Node&Express
● Node.js
– built on V8 chrome engine
– open server framework to build scalable applications
– Non blocking-io for asynchronous call
● Express:
– flexible Node.js middleware;
– Handle postdata, session management, static file serving, routing
rich Api middleware→

7. 7
MEAN Angular
● Advantages of angular
– A complete js framework (vs libraries jquery style)
– Modular: component approach to decompose pages in multiple parts;
– Consistent: services, components, directives.. they have a clean structure
– Possibility to encapsulate and re-use code using components
and directives;
– Using typescript, it has all advantages of typed ad compiled code, so prevent
javascript errors
– Google & wide community supporting the framework, highly maintenable

8. 8
Overall Architecture

9. 9
use them all together!
● Json unique exchange data format–
● Speed of development
● Performances, thanks to node
● Huge community around all this stack technologies
● Javascript only one language–
for front end and backend

10. 10
SUMMARY
● MEAN stack technology overview
● From MEAN to MEA(X)N
(that is..AngularX)
● Use case
● Best practices
● Tips

11. 11
MEAN Angular .. New!!
MEAN was coined by Valeri Karpov, a MongoDB
developer. He introduced the term in a 2013.
In 2014 this cool book I advice, by jeff dickey
Nowadays, it s simple as using a skeleton’
by linnovate to get started (mean.io)
with angularX out of the box

12. 12
SUMMARY
● MEAN stack technology architecture
● From MEANtoMEA(X)N (that is..
angularX!)
● Use case
● Best practices
● Tips

13. 13
USE CASE
Application monitoring remote machines for retail distribution
Cloud message provider
Mean Application

14. 14
SUMMARY
● MEAN stack technology architecture
● From MEANtoMEA(X)N (that is..
angularX!)
● Use case
● Best practices
● Tips & tricks

15. 15
Best practices overview
● Back-end
– Separated layers structure
– Test using mocha
– Use promises es6 instead of callbacks
● Front-end
– Use modularization
– Use routing inside modules
– Have a compact app module
– Use components to Encapsulate code

16. 16
Server side code layers (1)
Structure your backend
with Separated Layers
1) API level (REST)
2) Logic (business)
3) DAO (data access object)
– Model to db;
– Queries;

17. 17
Server side code layers (2)
Suppose in real world you’re monitoring remote machines..
API level (REST) is the interface to client
● Remote gsm messages arrive to messageInterceptor.js
● Front end needs to getTotalMoneyInstantaneous.js
● An operator needs to add a new machine operateOnMachines.js
Hey, Im the client!

18. 18
Server side code layers (3)
● Every hour the customer needs to compute the incomes computation.js
● Every hour the customer needs to check machineStatus.js
● Every hour the customer needs to send mail for alerts mail.js
Logic (Business) is the engine

19. 19
Server side code layers (4)
● Customer needs to retrieve machineDao.js
● Every hour the customer needs to check incomeDao.js
DAO (data access object) is accessing the store
● Sometimes the customer needs to poll messageDao.js

20. 20
Mocha Test (1)
Always use a test framework to validate your backend
poor testing strategy means low
quality software, and customer

21. 21
Mocha Test (2)
as simple as “nmp test”

22. 22
Mocha Test (2)
Steps:
– Describe the test;
– it expects a result
– then write the test recalling
the function to test (parsingMessage)
– remember app.closeServer()
– done()
–

23. 23
Prefer promises againts callbacks (1)
The Callback is an asynchronous equivalent for a function.
it is called at the completion of a given task.
It allows to transform Javascript from single thread to
multi-thread language Non blocking i→ /o NodeJs

24. 24
Prefer promises againts callbacks (2)
The Promise object represents the eventual completion or
failure of an asynchronous operation, and its resulting value.
Promises are the evolution on Es6 of callbacks. Why?

25. 25
Prefer promises againts callbacks (3)
- Callbacks becomes complex when handling nested call,
while promises do it clearly ( Promise.all is the magic)
- Promises handle errors in a more elegant way
- Promises are much more readable
- Less readability means also less capability to scale

26. 26
Best practices overview
● Back-end
– Separated layers structure
– Test using mocha
– Use promises es6 instead of callbacks
● Front-end
– Use modularization
– Use routing inside modules
– Have a compact app module
– Use components to Encapsulate code

27. 27
Frontend use modularization– (1)
Root modules
module & routing definition,
libraries handling
Modules folder contains
1 - SHARED MODULES
‘Core , Shared , Common’ ’ ’ ’ ’
2 - feature modules
(dedicated modules for specific features)

28. 28
Frontend - use modularization (2)
root.component.ts contains only navigator and router

29. 29
Frontend use modularization– (3)
App.module.ts so
clean !

30. 30
Frontend Routing at module level–
App.routing.module.ts - use loadChildren
AppRoutingModule
redirects to routes
on each module

31. 31
Frontend Routing at module level–
Don t perform routing inside app.routing.ts’ →
no modularity, less scalability
const routes: Routes = [
path: '', pathMatch: 'full', redirectTo: 'first'{ }
path: 'first', component: FirstComponent ,{ }
path: 'second', component: SecondComponent ,{ }
path: 'third', component: ThirdComponent ,{ }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)}
export class AppRoutingModule {}

32. 32
Frontend shared module–
Shared module - import external modules once
App.module.ts
Shared.module.ts

33. 33
Frontend core module–
Core module - used only to import services once
App.module.ts
Core.module.ts

34. 34
Encapsulate components - example
1
2
3
4
– Component 1 is updated when component 2 has finished processing;
comp.3 can appear/disappear depending on comp.2;
Comp. 4 needs row info from comp.2
– Every component communicates with others through input and output

35. 35
SUMMARY
● MEAN stack technology architecture
● From MEANtoMEA(X)N (that is..
angularX!)
● Use case
● Best practices
● Tips

36. 36
Use visual studio code
● Robust and extensible architecture
● Strong integration with angularX
● TsLint,JsLint
● Integration with
others (java, c#)
● Free

37. 37
What about cloudifyng your mean
app?!
● You only need a credit card $$$$$$ and some time
● kidding..! Free-tier is a free 1 year plan for new customers
https://scotch.io/tutorials/deploying-a-mean-app-to-amazon-ec2-part-1