Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Escaping the yellow bubble - rewriting Domino using MongoDb and Angular

4,583 views

Published on

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

Published in: Technology
  • Be the first to comment

Escaping the yellow bubble - rewriting Domino using MongoDb and Angular

  1. 1. Escaping the! yellow bubble Experiences with rewriting a Domino app using MEAN
  2. 2. Topics • Evolution of web development • The MEAN stack • Getting started • MongoDb, Express, Angular, Node • Rewriting the Teamroom app with MEAN
  3. 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. 4. /me • Freelance full-stack web developer • XPages, web, mobile, Teamstudio Unplugged • Open source • OpenNTF Board • Bootstrap4XPages, XPages Debug Toolbar, Bootcards • Technology junkie
  5. 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. 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. 7. Client-side JavaScript apps Client! (browser) Server Request page/ app Response (static HTML, JS, CSS) render API Form data Data (JSON)
  8. 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. 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. 10. Remember… • There is no ‘one size fits all’ • Depends on numerous factors • Your users/ devices/ browsers • Available development skills • Your infrastructure
  11. 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. 12. The MEAN stack • Full-stack JavaScript framework for modern web applications • Remember LAMP (Linux, Apache, MySQL, PHP)
  13. 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. 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. 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. 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. 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. 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. 19. • Doesn’t have a fancy UI
  20. 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. 21. Express
  22. 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. 23. “Angular is what HTML would have been had it been designed for applications”
  24. 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. 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. 26. • HTML with custom attributes (‘directives’) • Tells Angular that it needs to ‘do’ something
  27. 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. 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. 29. Let’s start simple…
  30. 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. 31. Moving to MEAN - 1 • Install software: MongoDb, NodeJS, Express, Angular • Create a basic data model for TeamRoom docs
  32. 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. 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. 34. Moving to MEAN - 4 • Write Angular app • Using Bootcards as the UI Framework • Source: https://github.com/teamstudio/ Teamroom2Mongo
  35. 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. 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. 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. 38. Questions? @markleusink m.leusink@linqed.eu http://linqed.eu

×