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

20.
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

21.
Express

22.
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

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

24.
• 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

25.
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

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

27.
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)

28.
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

29.
Let’s start simple…

30.
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

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

32.
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)

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

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

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

36.
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

37.
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

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