escaping the yellow bubble - rewriting domino using mongodb and angular
DESCRIPTION
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).TRANSCRIPT
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
http://linqed.eu