Escaping the!
yellow bubble
Experiences with rewriting a Domino app using MEAN
Topics• Evolution of web development
• The MEAN stack
• Getting started
• MongoDb, Express, Angular, Node
• Rewriting the Teamroom app with MEAN
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
/me• Freelance full-stack web developer
• XPages, web, mobile, Teamstudio Unplugged
• Open source
• OpenNTF Board
• Bootstrap4XPages, XPages Debug Toolbar, Bootcards
• Technology junkie
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
Traditional model
Client!(browser) Server
Request page
- process request - get data - create HTML
Response • HTML • CSS • Javascript
display
• PHP, ASP, JSP, Domino, XPages
Client-side JavaScript apps
Client!(browser) Server
Request page/ app
Response (static HTML, JS,
CSS)
render
APIData (JSON)
Form data
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
Pros and consPros!
• 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
Remember…• There is no ‘one size fits all’
• Depends on numerous factors
• Your users/ devices/ browsers
• Available development skills
• Your infrastructure
Ingredients• Server providing a REST API
• Database
• And some (or a lot) JavaScript that creates the app
• jQuery, Dojo
• Framework like Angular, Backbone, Ember
The MEAN stack
• Full-stack JavaScript framework for modern web applications
• Remember LAMP (Linux, Apache, MySQL, PHP)
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
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
Getting started
• A little different from XPages…
• Forget about Domino Designer
• You’re writing JavaScript, HTML, and CSS
• Terminal is your new best friend
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
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
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
• Doesn’t have a fancy UI
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
Express
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
“Angular is what HTML would have been had it been designed for applications”
• 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
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
• HTML with custom attributes (‘directives’)
• Tells Angular that it needs to ‘do’ something
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)
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
Moving to MEAN
• Subset of Teamroom
• Rewritten in Angular
• Data imported in Mongo
Teamroom NSF
MongoDB@ (Mongolab)
NodeJS server
Domino
AngularJS app
app & data (REST)
browser
Moving to MEAN - 1
• Install software: MongoDb, NodeJS, Express, Angular
• Create a basic data model for TeamRoom docs
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
MongoDB@ (Mongolab)
NodeJS server
Moving to MEAN - 3
• Write a REST API using Express running on Node
• Proxy to get data from Mongo
Node ExpressBrowser MongoDB
(@mongolab)
Moving to MEAN - 4• Write Angular app
• Using Bootcards as the UI Framework
• Source: https://github.com/teamstudio/Teamroom2Mongo
Not finished (yet)• Proof of concept
• Still a lot of areas to work on/ investigate
• More functions from Teamroom
• Authentication/ security
• Full CRUD
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
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
Questions?
@markleusink
http://linqed.eu
Recommended
