a 20 minute introduction to angularjs for xpage developers
DESCRIPTION
Slides for the session I gave at the XPages & Beer event on July 2nd, 2014. See https://github.com/markleusink/XPagesBeerAngular for the demo files.TRANSCRIPT
A 20 minute introduction to
Me• Freelance web developer
• XPages, web, mobile, Teamstudio Unplugged
• Open source
• OpenNTF Board, XPages Debug Toolbar, Bootstrap4XPages
• @markleusink
• http://linqed.eu
What is AngularJS?• (front end) Web application framework
• Runs in the browser, all client side JavaScript
• Unlike XPages where (almost) all processing is done server side.
• Helps with creating dynamic sites / Single Page Applications
• Partials? Dynamic? Been there, done that!
• Server side templating (XPages) vs client side (Angular)
“Angular is what HTML would have been had it been designed for applications”
What is AngularJS?
• Initial release: 2009
• Developed by and the community
• Major driver for user (developer) adoption
• MIT licensed, open source
Facts• Model-View-Controller (MVC) to make development
and testing easier
• Decouples DOM manipulation from application logic
• HTML with custom attributes (‘directives’)
• Tells Angular that it needs to ‘do’ something
<html ng-app=“myFirstApp”>
<div ng-repeat=“beer in beers”>
Development• A little different then XPages…
• Forget about Domino Designer
• You’re writing HTML, CSS, JavaScript
• Any editor will do, use Notepad if you like :-)
• Some editors help you:
• syntax highlighting, code completion, debugging
• I like Sublime Text 3, but there are more:
• WebStorm (full JavaScript IDE), Coda 2, Brackets
Demos - Setup• Local Domino server in a Windows VM
• Static files served from domino/html folder
• I want to serve them from a server (local file access in browsers has restrictions)
• Could also have used NodeJS, Apache, …
• Demo files and NSF:
https://github.com/markleusink/XPagesBeerAngular
Demos - Setup• Using remote (Domino) data
• For the demo I’m using Domino Data Services (DDS)
• See http://www.browniesblog.com/A55CBC/blog.nsf/dx/09042013111234MBRF6E.htm on how to enable
• Make sure that you’re logged in or the allow Anonymous access
• Can also use REST service from the ExtLib (or write one yourself)
• Same domain - so no CORS (Cross Origin Resource Sharing) issues.
Why?• Seems to be the way forward for web dev
• Add structure your code
• Required if you want to build mobile hybrid apps
• Cordova, PhoneGap, Worklight
• No server-side web framework needed
• Lots of alternatives: Ember, Backbone, Knockout, Dojo, YUI
• todomvc.com
Questions?