Slides from my ICON UK 2014 session held on September 13, 2014 at IBM Southbank, London. The session was an introduction to the MEAN stack (Mongo, Express, Angular and Node).

1. Escaping
the!
yellow
bubble
Experiences with rewriting a Domino app using MEAN

2. Topics
• Evolution of web development
• The MEAN stack
• Getting started
• MongoDb, Express, Angular, Node
• Rewriting the Teamroom app with MEAN

3. Disclaimer
• We’re in the DEV track
• So expect a technical session
• This session does NOT contain:
• Objective C!
• Swift!
• Java!
• It does contain: HTML, CSS and JavaScript

4. /me
• Freelance full-stack web developer
• XPages, web, mobile, Teamstudio Unplugged
• Open source
• OpenNTF Board
• Bootstrap4XPages, XPages Debug Toolbar,
Bootcards
• Technology junkie

5. Development shift
• Shift in how web apps are developed
• Logic moving from server to client
• From tightly coupled to loosely coupled using
APIs
• Driving forces: mobile & cloud
• Offline hybrid apps don’t have a server

6. Traditional model
Client!
(browser)
Server
Request page
- process request
- get data
- create HTML
Response
• HTML
• CSS
• Javascript
display
• PHP, ASP, JSP, Domino, XPages

7. Client-side JavaScript apps
Client!
(browser)
Server
Request page/ app
Response
(static HTML, JS,
CSS)
render
API
Form data
Data (JSON)

8. Into the new world
• All application logic written in JavaScript
• On first request, the server sends the application
source to the client
• Runs completely in the browser
• When it needs data, an API is called
• Typically using REST and JSON

9. Pros and cons
Pros!
• app can respond faster
• strict separation from
back-end
• building API first allows
for multiple clients
• generic skill set
Cons!
• client rendering is slower
• less compatibility with
older browsers
• SEO
• accessibility

10. Remember…
• There is no ‘one size fits all’
• Depends on numerous factors
• Your users/ devices/ browsers
• Available development skills
• Your infrastructure

11. Ingredients
• Server providing a REST API
• Database
• And some (or a lot) JavaScript that creates the
app
• jQuery, Dojo
• Framework like Angular, Backbone, Ember

12. The MEAN stack
• Full-stack JavaScript framework for modern web
applications
• Remember LAMP (Linux, Apache, MySQL, PHP)

13. The MNEA stack
• More logical order: MNEA (backend to frontend)
• MongoDB: NoSQL database
• NodeJS: JavaScript server engine
• Express: application running on Node to make it easier
to write applications
• AngularJS: client-side front end framework
• All components are open source
• Runs on Windows or Mac

14. The MEAN stack
• MEAN is used as an acronym
• It is also a ‘product’:
• MEAN.io (Linnovate)
• MEAN.js
• Offer boilerplate and sample code to get you up
and running quickly

15. Getting started
• A little different from XPages…
• Forget about Domino Designer
• You’re writing JavaScript, HTML,
and CSS
• Terminal is your new best friend

16. Getting started
• And you’ll need a text editor
• Use Notepad if you like :-)
• But there are better alternatives
• Syntax highlighting, code completion, debugging
• I like Sublime Text 3, but there are more:
• WebStorm (JavaScript IDE), Coda 2, Brackets

17. MongoDB
• Very popular NoSQL database
• High performance & -scalability
• Sharding
• Run locally or in the cloud
• BlueMix, mongolab.com, Joyent, Amazon Web Services
• Open source AGPL 3 license
• Changes to MongoDB must be made public, but your
apps not

18. NodeJS
• “A platform to build fast and scalable network
applications”
• Simply put: a JavaScript server engine
• Built using Google’s V8 Engine
• It can be a web server, app server, API server

19. • Doesn’t have a fancy UI

21. Express
• Web application framework, built on top of
NodeJS
• Used in the MEAN stack for the server side
component:
• Serving static resources (HTML, JS, Images,
CSS)
• Providing API routes to send/ receive data to/
from the Angular app

22. Express

24. AngularJS
• Front-end web application framework
• Runs in the browser, all client side JavaScript
• Helps to create dynamic sites / Single Page
Applications
• Built-in functions to do partials
• Built with testing in mind
• Uses client-side templating

25. “Angular is what HTML would have been
had it been designed for applications”

26. • Initial release 2009
• Developed by and the community
• Major driver for user (developer) adoption
• Model-View-Controller (MVC) to make
development and testing easier
• Decouples DOM manipulation from application
logic

27. Sidestep: MVC Frameworks
• ‘Force’ you to structure your code
• Model = data
• View = what user’s see (HTML)
• Controller = glues Model & View together
• Less spaghetti code
• AngularJS, Ember, Backbone, Knockout, and a lot more
• todomvc.com

28. • HTML with custom attributes (‘directives’)
• Tells Angular that it needs to ‘do’ something

29. AngularJS demos
• Demos showcasing some of Angular’s out-of-the-box
features
• Using remote data, served by Domino Data
Services (DDS)
• See http://www.browniesblog.com/A55CBC/
blog.nsf/dx/09042013111234MBRF6E.htm
• Can also use REST service from the ExtLib (or
write one yourself)

30. AngularJS demo
• Local Domino server
• Static files served from domino/html folder
• I want to serve them from a server
• Same domain - so no CORS (Cross Origin Resource Sharing)
issues
• Could also have used NodeJS, Apache, …
• Demo files and NSF:
https://github.com/markleusink/XPagesBeerAngular

31. Let’s start simple…

32. Moving to MEAN
• Subset of Teamroom
• Rewritten in Angular
• Data imported in Mongo
Teamroom
NSF
MongoDB@
(Mongolab)
NodeJS
server
Domino
app & data (REST)
AngularJS
app
browser

33. Moving to MEAN - 1
• Install software: MongoDb, NodeJS, Express,
Angular
• Create a basic data model for TeamRoom docs

34. Moving to MEAN - 2
• Script to get data from Domino into
MongoDb
• Connect to Domino REST API
• Retrieve documents as JSON
• Call MongoDb REST API for every
document
• Beware of invalid JSON !
Teamroom
NSF
NodeJS
server
MongoDB@
(Mongolab)

35. Moving to MEAN - 3
• Write a REST API using Express running on
Node
• Proxy to get data from Mongo
Node
Express
Browser
MongoDB
(@mongolab)

36. Moving to MEAN - 4
• Write Angular app
• Using Bootcards as the UI Framework
• Source: https://github.com/teamstudio/
Teamroom2Mongo

37. Not finished (yet)
• Proof of concept
• Still a lot of areas to work on/
investigate
• More functions from Teamroom
• Authentication/ security
• Full CRUD

38. Why?
• Way forward for web development
• Required if you want to build mobile hybrid apps
• Cordova, PhoneGap, Worklight
• No server-side web framework needed
• Serve multiple clients

39. Conclusions
• Quite a different skill set…
• Many people learning, but only few have mastered it
• Young technology
• Best practices are just evolving
• Need to pick the right components to use
• Fun and ‘fresh’ way to develop apps

40. Questions?
@markleusink
m.leusink@linqed.eu
http://linqed.eu