escaping the yellow bubble - rewriting domino using mongodb and angular

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

Let’s start simple…

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

m.leusink@linqed.eu

http://linqed.eu