This slide deck was used in support of BTE 102 - The future of web development write once, run everywhere with angular.js and domino at IBMConnectED 2015
Presentation was given with Mark Leusink
2. BTE 102: The Future of Web
Development Write Once, Run
Everywhere with AngularJS and
Domino
Marky Roden Mark Leusink
Senior Solutions Architect LinQed
PSC Group LLC
3. About Mark
Freelance consultant/ developer
– XPages, web, mobile, Unplugged
15 years experience (that makes me younger than Marky)
Fan of everything web dev (Angular, Bootstrap, web components)
Open source (OpenNTF, GitHub)
– XPages Debug Toolbar, Bootstrap4XPages, Bootcards
Blog: http://linqed.eu
Twitter: @markleusink
Email: m.leusink@linqed.eu
4. About Marky
Over 17 years IBM Notes Domino® work
Senior Solutions Architect at PSC Group
• XPages Developer
• Project Leader
• AngularJS Protagonist
Contact Information
• Blog: http://www.xomino.com
• Twitter: @markyroden
• Skype: marky.roden
www.psclistens.com @pscgroup
6. Agenda
• Introduction to MVC/ REST architectures
– True Separation of UI and Business Logic
• Introduction to AngularJS
– Why Angular?
– Components and capabilities
– Examples of capabilities
• Domino as a REST Service
• Demo app
– Application Architecture
– How to run the same app “everywhere”
8. About the demo app
The Demo app is built with
– AngularJS
– Bootstrap
– IBM Domino data
– Zero XPages
And to make it better
– A Bootstrap theme from Bootswatch.com (‘United’)
– Font Awesome for icons
– Animate.css for animations
– FastClick.js for a snappier UI
– angular-local-storage for local storage
Sessions data from the Totally Unofficial Totally Unsupported session database
10. Introduction to MVC / REST Architecture
• MVC (Model-View-Controller) is an architectural design pattern that encourages
improved application organization through a separation of concerns.
– The Model manages the data
– The View is the HTML representation of the data through the use of Templates
• What your users see
– The Controller is the application code which is used to determine the way the Model is
populated and displayed.
• Glues the Model and View together
• Angular provides the framework to do client-side MVC
11. Introduction to MVC / REST Architecture
• Representational state transfer (REST) is an architecture style for designing
networked applications
– Uses simple HTTP calls
– JSON
• Performant
• Scalable
• Simple interface
• Portable
12. ServerClient
Introduction to MVC / REST Architecture
• We’ve been building web apps like this
Request page
- process request
- get data
- create HTML
Response
• HTML
• CSS
• JavaScript
(display)
13. Client
Introduction to MVC / REST Architecture
• But this is getting popular
Webserver
Request page/ app
Response
(static HTML, JS,
CSS)
(process)
REST
API
Data (JSON)
Request data
14. Client
Introduction to MVC / REST Architecture
• Or this variation
Webserver
Response
(static HTML, JS,
CSS)
(process)
REST
API
Data (JSON)
Request data
Request page/ app
16. AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your
template language and lets you extend HTML's syntax to express your application's
components clearly and succinctly. Angular's data binding and dependency injection
eliminate much of the code you currently have to write.
“Angular is what HTML would have been had it been designed for applications”
The AngularJS team
17. What is AngularJS
• Web application framework
– Designed as a boilerplate model for an application
– Out of the box capabilities and best practices
– Built with test driven development (TDD) in mind
• Runs in the browser, all client side JavaScript
– Unlike e.g. XPages or C# (SharePoint) where most processing is done server side.
• Helps to create dynamic sites / Single Page Applications
– Partials? Dynamic? Been there, done that!
18. Why AngularJS ?
• Large developer community
– ~75,000 questions tagged on Stackoverflow.com
• Backed by
– Developed by Google and the community
– Open source (MIT license)
• Stable, mature and performant
– Initial release 2009
– Version 1 released Jun 2012
– Current version 1.3.5 (Dec 2014)
– Version 2 scheduled for end of 2015
19. Why AngularJS?
• Ready for the web of tomorrow
• Many Concepts adopted by Web Components standard
• Data driven
• Custom elements (functional custom attributes)
• HTML Imports
• DOM Templating
21. Angular Route Control
• UI-Router, state based management
• Configures the app
• When a route is encountered
– Use this template
– Use this Page Title
– Use this controller
• http://beyondtheeveryday.com/#/sessionsAll
• http://beyondtheeveryday.com/#/favorites
23. • Lazily instantiated, only when they are needed
– “Angular services are substitutable objects that are wired together using dependency injection (DI). You
can use services to organize and share code across your app”
var app = angular.module("sessionsApp.services", []);
app.factory('SessionsFactory', function($http) {
return {
all : function() {
return $http.get(‘db.nsf/collections/name/sessions')
.then(
function(res) {
return res.data;
});
},
...
AngularJS: Factories and Services
24. AngularJS: Directives
• Tells Angular that it needs to ‘do’ something
• Interact with the browser based on the controller’s instructions
• Re-usable components
• Much of Angular’s core functionality Directive based
<div class="row" ng-repeat="speaker in session.speakers">
<div class="col-xs-12 col-sm-12">
{{speaker}}
</div>
</div>
25. AngularJS in depth
• Dependency injections
A software design pattern that deals with how components get hold of their dependencies.
The Angular injector subsystem is in charge of creating components, resolving their dependencies,
and providing them to other components as requested.
31. AngularJS in depth
• How does AngularJS integrate with XPages ?
• An application written using AngularJS uses 4 main things
– HTML Pages
– JavaScript files
– CSS
– A Data Service
• One or many of those can be “XPages”
33. Domino as REST service
• Three options to use Domino as a data store for an Angular application:
– Domino Access Services
• Built-in, easiest to enable
– REST service component from the Extension Library
• More customization options
– Do-it-yourself REST service
• Fully customizable, requires more work
34. Domino as REST service - Domino Access Services (DAS)
• Consists of 3 services: core, data and
calendar
– For the demo app we’ve only used the
data service
• Must be enabled on server level, app
level and form/ view level
• Gives you the data from all fields
(documents) or columns (views)
35. Domino as REST service - Domino Access Services (DAS)
http://beyondtheeveryday.com/beyond/connect2015.nsf/api/data/collections/name/sessionsAll
Server Database path DAS View name
36. Domino as REST service - ExtLib REST
• Drag on an XPage
• Link to data source (view, bean, …)
• Set path
• Done
<xe:restService pathInfo="contactjson">
<xe:this.service>
<xe:viewJsonService viewName="AllContacts" var="entry"
contentType="text/plain" count="10" defaultColumns="true">
</xe:viewJsonService>
</xe:this.service>
</xe:restService>
37. Domino as REST service - custom REST service
public class MyRESTService {
public static String doGet(HttpServletRequest request, HttpServletResponse response)
{
JsonJavaObject json = new JsonJavaObject();
json.put("userName", ExtLibUtil.getCurrentSession().getEffectiveUserName() );
return JsonGenerator.toJson(JsonJavaFactory.instanceEx, json);
}
}
<!--?xml version="1.0" encoding="UTF-8"?-->
<![CDATA[#{javascript:
var externalContext = facesContext.getExternalContext();
var writer = facesContext.getResponseWriter();
writer.write(
eu.linqed.MyRESTService.doGet(
externalContext.getRequest(),externalContext.getResponse()
));
writer.endDocument();
}
}]]>
38. Domino as REST service
• More on this: “REST Services and IBM Domino/XWork” by John Dalsgaard
– http://www.slideshare.net/JohnDalsgaard/dannotes-19-20-november-2014
41. Demo app
• Demonstration you just saw was hosted on….
– IBM Domino ®
– IBM Bluemix ®
– Microsoft SharePoint ®
– IBM MobileFirst Platform Foundation ® (previously: IBM Worklight)
– IBM Connections
• Open source
– http://github.com/markleusink/BeyondSessionsApp
43. Conclusion
• AngularJS: MVC front end client side framework
• Add structure to your code
• Enables hybrid mobile web apps
– PhoneGap, Cordova, Worklight
• Use Domino as a NoSQL app server
– Out-of-the-Box, Proven, Stable, Rock solid security
44. Conclusion
• Modernize Domino Applications smartly
• Running Domino apps within other server platforms
• Make your application code portable
46. Engage Online
SocialBiz User Group socialbizug.org
– Join the epicenter of Notes and Collaboration user groups
Social Business Insights blog ibm.com/blogs/socialbusiness
– Read and engage with our bloggers
Follow us on Twitter
– @IBMConnect and @IBMSocialBiz
LinkedIn http://bit.ly/SBComm
– Participate in the IBM Social Business group on LinkedIn
Facebook https://www.facebook.com/IBMConnected
– Like IBM Social Business on Facebook
61. What is AngularJS
• Framework of methods and objects to model the MVC architecture easily
– App Modules
– App Controllers
– App Directives
– App Factories / Services
Notes de l'éditeur
(won’t talk about this slide: see couple slides later)
Intro, thanks for coming, welcome
I’m from the Netherlands (capital city is Amsterdam, not Kopenhagen)
IBM Champion for 4 years in a row
5
Marky
ML
First a little about the demo app, set the stage
Mark talks about his demo
Built with AngularJS, Bootstrap theme for the UI
REST service provided by Domino
HTML/ JS/ CSS served by Domino too
Uses data from the TUTU database: thanks Mat
Mark L section
Let’s talk about the architecture for the demo app
Mark
- This is what MVC is (diagrams: this is what MVC looks like)
Rendering/ templating done at the server vs client
This is what REST is
This is what we do
‘Traditional’ Domino dev, XPages, PHP, ASP, JSP
Server side rendering
Pushes HTML to the client
Browser just ‘displays’ the HTML it receives
Cons: Network overhead, Server overhead for computations
With standard XPages: Model and views are integrated, maintenance nightmare, makes working in a team more difficult
Browser requests start page
Page (static HTML, JS, CSS) served by webserver
Browser needs to interpret & render the app
DOM Manipulation
Data exchange using a REST API provided by the webserver
Browser might need additional resources (templates) and requests those when needed.
Faster, no network overhead
Loose coupled apps (compared to the tightly coupled one in the prev slide)
OR
App runs a different server then the API
The REST API server could be Domino, but doesn’t have to be (same for the db…)
Marky R
http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
Two way data binding
Cool built-in functions like {cache:true}
Mark L
Mark L
Core: metadata
Data: configurable
Calendar:
More flexibility
Bean as datasource
Resultset
Configure
configure multiple services on 1 page
Just to show that you can also do it fully manual. No in-depth talk
We kept it simple in the app by using DDS
In summary;
Model = data (REST)
View built on top
Mark L Domino (browser),
Mark L Bluemix
– show it with developer tools on to show data source
Remember the architecture slide: we’ve only replaced the webserver
You will run into CORS issues !
Worklight (IBM MobileFirst Platform Foundation Developer edition)
easy: just copy in the entire app (and it’s library dependencies), set the launch page
Mix the Worklight code with your own (initialization, offline detection)
Worklight app can work offline (using local storage or other, like the JSONStore)
Marky does connections and sharepoint
We showed you that using this architecture to build apps you can run it in mult runtimes
App is open source
Tried to keep it simple, while also creating an visually attractive and useful app
Feel free to use it anywhere you want
Mark
Marky
Mark L swap over for beer demos
http://beyondtheeveryday.com/basic-samples/1-simple.html (and next pages)