angular.js in xpages

44
MWLUG 2014 Write once, run anywhere Angular.js in XPages Mark Roden PSC Group LLC Senior Solutions Architect

Upload: mark-roden

Post on 25-May-2015

3.526 views

Category:

Software


8 download

DESCRIPTION

This was presented at MWLUG - August 26th 2014

TRANSCRIPT

Page 1: Angular.js in XPages

MWLUG 2014

Write once, run anywhereAngular.js in XPages

Mark RodenPSC Group LLCSenior Solutions Architect

Page 2: Angular.js in XPages

About Marky

Over 17 years IBM Notes Domino® work Senior Solutions Architect at PSC Group

• XPages Developer • Project Leader• Angular.js Protagonist

Contact Information– Blog: http://www.xomino.com– Email: [email protected]– Twitter: @markyroden– Skype: marky.roden

– "Come work for us - it will be fun"

www.psclistens.com @pscgroup

Page 3: Angular.js in XPages
Page 4: Angular.js in XPages

Angular.js in XPages

• What is Angular.js ?

• How does Angular.js integrate with XPages ?

• Why do I care ?

• Demonstration

• Behind the demonstration

• Ok I care – so now what ?

Page 5: Angular.js in XPages

Angular.js in XPages

Page 6: Angular.js in XPages

Angular.js in XPages

• What is Angular.js ?

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

Page 7: Angular.js in XPages

Angular.js in XPages

• What is Angular.js ?

• MVC web framework to model your application using client side JavaScript as opposed to Server side code.– The Model is the data created by the application– The View is the HTML representation of the data through

the use of Templates– The Controller is the application code which is used to

determine the way the Model is populated and displayed.

Page 8: Angular.js in XPages

Angular.js in XPages

• How does Angular.js integrate with XPages ?http://xomino.com/category/angular-in-xpages/

• Domino is the original NoSQL database– Secure– XPages is Domino with a Java Server Faces server – Multiple options for data retrieval

• Domino Data Services• Custom Rest Service• ExtLib Rest Service• ?ReadViewEntries

Page 9: Angular.js in XPages

Angular.js in XPages

• How does Angular.js integrate with XPages ?

• An application written using Angular.js uses 4 main things

– HTML Pages– JavaScript files– CSS– A Data Service

• One or many of those can be “XPages”

Page 10: Angular.js in XPages

Angular.js in XPages

• How does Angular.js integrate with XPages ?

• HTML and JavaScriptin the WebContent folder

Page 11: Angular.js in XPages

Angular.js in XPages

• How does Angular.js integrate with XPages ?

• Data from the server via Domino Data Services

Page 12: Angular.js in XPages

Angular.js in XPages

• How does Angular.js integrate with XPages ?

• Code written in *anything* including (but mostly excluding) Domino Designer

– Notepad– Notepad++– JetBrains WebStorm

Page 13: Angular.js in XPages

Angular.js in XPages

• How does Angular.js integrate with XPages ?– Hook WebStorm up to the On Disk Structure of your DB

Page 14: Angular.js in XPages

Angular.js in XPages

• How does Angular.js work?

– Model• Domino Data

– View• HTML

– Controller• JavaScript

Page 15: Angular.js in XPages

Angular.js in XPages

• How does Angular.js work?ViewModel

Page 16: Angular.js in XPages

Angular.js in XPages

• How does Angular.js work?

– PersonDetailCtrl

C .createPerson()R .getPerson()U .savePerson()D .deletePerson()

Page 17: Angular.js in XPages

Angular.js in XPages

• How does Angular.js work?Controller

Page 18: Angular.js in XPages

Angular.js in XPages

• Why do I care?

• Business Perspective– Requirements– Customers

• Personal Perspective– Web development– Increasingly popular– Too bleeding edge for Enterprise today but they will

catch up eventually

Page 19: Angular.js in XPages

Angular.js in XPages

• Why do I care?

• Requirements– Mixed technology production environment– Multiple Web Server environment– Pressure on existing Notes applications to Modernize or

Die?

Page 20: Angular.js in XPages

Angular.js in XPages

• Why do I care?

• Requirements– Because you want a subset of one application’s

functionality to appear in another application – Dashboards• Charts• Reports

– Functional decision making across systems

Page 21: Angular.js in XPages

Angular.js in XPages

• Demonstration

• People application

1. Running independently on Domino 2. Running within another application3. Running on different Domino Server

Page 22: Angular.js in XPages

Angular.js in XPages

• Demonstration

• Basic People application– Add new People– Edit– Delete

Page 23: Angular.js in XPages

Angular.js in XPages

• Demonstration

Page 24: Angular.js in XPages

Angular.js in XPages

• Demonstration

Page 25: Angular.js in XPages

Angular.js in XPages

• Demonstration

Page 26: Angular.js in XPages

Angular.js in XPages

• Demonstration

– Including the application to a new Domino site

Page 27: Angular.js in XPages

Angular.js in XPages

• Demonstration

Page 28: Angular.js in XPages

Angular.js in XPages

• Demonstration

– Running the same app on a different Domino Server

Page 29: Angular.js in XPages

Angular.js in XPages

• Demonstration

Page 30: Angular.js in XPages

Angular.js in XPages

• Behind the demonstration

– Cross-Origin Resource Sharing (CORS)• Browser security• Preventing cross site scripting attacks

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Page 31: Angular.js in XPages

Angular.js in XPages

• Behind the demonstration– Consolidating the inclusion code

Page 32: Angular.js in XPages

Angular.js in XPages

• Behind the demonstration– Consolidating the inclusion code

Page 33: Angular.js in XPages

Angular.js in XPages

• Directives

– Angular.js “plugins” to run a batch of code based on an HTML attribute

– Portable code which can be plugged into any application at any time.

Page 34: Angular.js in XPages

Angular.js in XPages

• Ok I care – so now what ?

– A new paradigm of business application integration

Write once – run anywhere? Seriously !

Page 35: Angular.js in XPages

Angular.js in XPages

• Ok I care – so now what ?

– More Demonstrations

Page 36: Angular.js in XPages

Angular.js in XPages

• Demonstration– Data Binding with an Angular Driven Chart Directive

Page 37: Angular.js in XPages

Angular.js in XPages

• Bluemix

Page 38: Angular.js in XPages

Angular.js in XPages

• Bluemix

Page 39: Angular.js in XPages

Angular.js in XPages

• Demonstration– XPages application running inside of Connections

Page 40: Angular.js in XPages

Angular.js in XPages

• Demonstration– XPages application running inside of Connections

using the Connections Business Card API

Page 41: Angular.js in XPages

Angular.js in XPages

• Demonstration– Context specific, integrated Charting within Connections

Page 42: Angular.js in XPages

Angular.js in XPages

• Demonstration– XPages application running inside of SharePoint

Page 43: Angular.js in XPages

Angular.js in XPages

• Conclusion

– Angular.js: MVC front end client side framework– Use Domino as a NoSQL app server

– Modernize Domino Applications smartly– Running Domino apps within other server platforms– Make your application code portable

Page 44: Angular.js in XPages

Angular.js in XPages

Questions ?For more information on Angular.js, XPages and

Application Modernization

[email protected]

twitter: marky.rodenskype: marky.roden