Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
-
Upload
mark-leusink -
Category
Technology
-
view
1.561 -
download
0
description
Transcript of Escaping the yellow bubble - rewriting Domino using MongoDb and Angular
![Page 1: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/1.jpg)
Escaping the!
yellow bubble
Experiences with rewriting a Domino app using MEAN
![Page 2: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/2.jpg)
Topics• Evolution of web development
• The MEAN stack
• Getting started
• MongoDb, Express, Angular, Node
• Rewriting the Teamroom app with MEAN
![Page 3: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/3.jpg)
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
![Page 4: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/4.jpg)
/me• Freelance full-stack web developer
• XPages, web, mobile, Teamstudio Unplugged
• Open source
• OpenNTF Board
• Bootstrap4XPages, XPages Debug Toolbar, Bootcards
• Technology junkie
![Page 5: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/5.jpg)
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
![Page 6: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/6.jpg)
Traditional model
Client!(browser) Server
Request page
- process request - get data - create HTML
Response • HTML • CSS • Javascript
display
• PHP, ASP, JSP, Domino, XPages
![Page 7: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/7.jpg)
Client-side JavaScript apps
Client!(browser) Server
Request page/ app
Response (static HTML, JS,
CSS)
render
APIData (JSON)
Form data
![Page 8: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/8.jpg)
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
![Page 9: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/9.jpg)
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
![Page 10: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/10.jpg)
Remember…• There is no ‘one size fits all’
• Depends on numerous factors
• Your users/ devices/ browsers
• Available development skills
• Your infrastructure
![Page 11: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/11.jpg)
Ingredients• Server providing a REST API
• Database
• And some (or a lot) JavaScript that creates the app
• jQuery, Dojo
• Framework like Angular, Backbone, Ember
![Page 12: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/12.jpg)
The MEAN stack
• Full-stack JavaScript framework for modern web applications
• Remember LAMP (Linux, Apache, MySQL, PHP)
![Page 13: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/13.jpg)
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
![Page 14: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/14.jpg)
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
![Page 15: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/15.jpg)
Getting started
• A little different from XPages…
• Forget about Domino Designer
• You’re writing JavaScript, HTML, and CSS
• Terminal is your new best friend
![Page 16: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/16.jpg)
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
![Page 17: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/17.jpg)
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
![Page 18: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/18.jpg)
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
![Page 19: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/19.jpg)
• Doesn’t have a fancy UI
![Page 20: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/20.jpg)
![Page 21: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/21.jpg)
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
![Page 22: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/22.jpg)
Express
![Page 23: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/23.jpg)
![Page 24: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/24.jpg)
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
![Page 25: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/25.jpg)
“Angular is what HTML would have been had it been designed for applications”
![Page 26: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/26.jpg)
• 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
![Page 27: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/27.jpg)
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
![Page 28: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/28.jpg)
• HTML with custom attributes (‘directives’)
• Tells Angular that it needs to ‘do’ something
![Page 29: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/29.jpg)
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)
![Page 30: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/30.jpg)
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
![Page 32: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/32.jpg)
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
![Page 33: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/33.jpg)
Moving to MEAN - 1
• Install software: MongoDb, NodeJS, Express, Angular
• Create a basic data model for TeamRoom docs
![Page 34: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/34.jpg)
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
![Page 35: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/35.jpg)
Moving to MEAN - 3
• Write a REST API using Express running on Node
• Proxy to get data from Mongo
Node ExpressBrowser MongoDB
(@mongolab)
![Page 36: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/36.jpg)
Moving to MEAN - 4• Write Angular app
• Using Bootcards as the UI Framework
• Source: https://github.com/teamstudio/Teamroom2Mongo
![Page 37: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/37.jpg)
Not finished (yet)• Proof of concept
• Still a lot of areas to work on/ investigate
• More functions from Teamroom
• Authentication/ security
• Full CRUD
![Page 38: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/38.jpg)
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
![Page 39: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/39.jpg)
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
![Page 40: Escaping the yellow bubble - rewriting Domino using MongoDb and Angular](https://reader034.fdocument.pub/reader034/viewer/2022042623/54b1d9d94a7959c2358b4582/html5/thumbnails/40.jpg)
Questions?
@markleusink
http://linqed.eu