2015 nas - xtivia xsf overview - slide deck

Single Page Appswith AngularJS, Liferay and XTIVIA Services Framework

(XSF)

Mike Freeman, Enterprise Portal Architect, XTIVIA

OVERVIEW❖ What is XSF?❖ XSF and Modern Web Applications in Liferay❖ A Brief Tour Through XSF❖ CopperPoint Case Study❖ Other XSF Success Stories❖ Obtaining XSF

XSF is a proven framework for rapid development of Liferay-aware REST services that support the modern web application design pattern

What is XSF

XSF is a proven framework for rapid development of Liferay-aware REST services that support the modern web application design pattern

Today’s Enterprise Web Applications

AngularJS

jQuery

ReactJS

Rest Services

Enterprise ServicesEnterprise Data StoresThird Party SAAS …

AngularJS

jQuery

ReactJS

Rest Services

Liferay Container



XSF makes it really easy to build (and test) these REST services in Liferay –and enhances those services with access to features like Liferay roles & permissions

AngularJS

jQuery

ReactJS

Rest Services

Liferay Container



Are These Your Goals?❖ Write REST services as simple annotated POJOs❖ Use canonical URLs for your REST endpoints❖ Control authentication/identity for services with Liferay login❖ Control authorization for services with Liferay roles & permissions❖ Employ additional Liferay features in your services (e.g., caching)❖ Leverage the Spring framework in your services❖ Easily create comprehensive tests for services (both unit and CI) ❖ Leverage Liferay hot deployment for services❖ …then XSF is the solution for you!

XSF Hello World

❖ Step 1. Use the Maven archetype to start a new project

❖ Step 2. Implement a new service as an annotated POJO

❖ Step 3. Change liferay.home property in POM and run mvn install

❖ Step 4.Invoke your service from the browser.

@Route(uri="/hello/world/{last}/{first}", method="GET", authenticated=false)

public class HelloWorldCommand implements ICommand { @Override public CommandResult execute(IContext context) {

Map<String,Object> data = new HashMap<String,Object>();

String firstName = context.find("first"); String lastName = context.find("last"); data.put("first_name", firstName); data.put("last_name", lastName); data.put("execution_time", new java.util.Date()); return new CommandResult(data); }}

http://localhost:8080/delegate/xsfapp/hello/world/Bloggs/Joe

XSF Hello World (continued)❖ Entering the URL results in the

JSON shown to the right❖ Note that no Java-JSON

marshalling code was required❖ Allows for rapid development

of prototype (but fully functional) endpoints for use by AngularJS UX team

❖ While this is the standard output format produced by XSF marshalling can be customized by overriding a single XSF interface

{ "succeeded":true, "data" : { "first_name":"joe", "last_name":"bloggs" "execution_time":"2015-10-07T20:24:07", }, "message":""}

Adding Liferay AuthN/AuthZ

@Route(uri="/hello/world/{last}/{first}", method="GET", authenticated=true)

public class HelloWorldCommand implements ICommand,IAuthorized {

@Override public CommandResult execute(IContext context) { ... }

@Override public boolean authorize(IContext ctx) { ... }}

❖ To enforce authentication for the endpoint set authentication attribute on @Route to TRUE

❖ To enforce authorization for the endpoint implement the IAuthorized interface in the service/command.

Adding Liferay AuthN/AuthZ (continued)public boolean authorize(IContext ctx) { User usr = ctx.find(ILiferayCommandKeys.LIFERAY_USER); if (usr == null) return false; PermissionChecker pc = ctx.find(ILiferayCommandKeys.LIFERAY_PERMISSION_CHECKER);

if (pc == null) return false; List<Organization> userOrgs = OrganizationLocalServiceUtil .getUserOrganizations(user.getUserId());

for (Organization userOrg : userOrgs) { boolean hasPermission = permissionChecker .hasPermission(userOrg.getGroupId(),"33",0,"VIEW"); if (hasPermission) return true; }

return false;}

❖ The logged-in User object is available from the context

❖ A Liferay permission checker is available from the context.

Testing Your Services

CommandContext context = new CommandContext();HelloWorldCommand2 command = new HelloWorldCommand2();@Mock User mockLiferayUser;

@Testpublic void testSuccessWithNoQueryParamAndUser() { context.put("first", "Joe"); context.put("last", "Bloggs"); Mockito.when(mockLiferayUser.getEmailAddress()) .thenReturn("[email protected]"); context.put(ILiferayCommandKeys.LIFERAY_USER, mockLiferayUser); CommandResult cr = command.execute(context); assertEquals(cr.isSucceeded(),true); Map results = (Map) cr.getData(); assertNotNull(results); String firstName = (String) results.get("first_name"); String userEmail = (String) results.get("user_email"); assertEquals(firstName,"Joe"); assertEquals(userEmail, "[email protected]");}

❖ A key goal is to be able to easily test services outside the container

❖ Since the context is an extension of Map it is simple to emulate URL, session, etc. based scenarios in our tests

Additional XSF Features

❖ Commands may be chained together (Composite pattern)

❖ Supports dynamic routing (i.e. a command may not know the routes it needs to support until run-time)

❖ SLF4J logging with Liferay integration❖ XSF Services can be invoked using BASIC AUTH

and will validate credentials as either email or screen name

❖ Built using Liferay Delegate Servlet and Spring❖ Lightweight footprint (2 additional non-Liferay JARs)❖ Leverages Best Practice Design Patterns❖ Pluggable (i.e., key components overridden via Spring)❖ Implemented as a Maven-based Liferay portlet plugin❖ Available via Maven Central (JAR and archetype)

XSF Technical Architecture

CopperPoint Case StudyPolicyholder & Agent Portal at Arizona’s Largest Workers Compensation Insurer❖ Overview: A public website and a portal to

serve workers insurance policyholders and agents with a personalized experience for all user audiences and a set of custom applications that leverage Liferay’s access control.

❖ Challenge: CopperPoint wanted to leverage a Single Page App architecture to build their custom applications so that they could deliver a desktop like experience to their end-users, and also have the ability to scale applications to handle aggressive growth. Additionally, they wanted to leverage key Liferay features such as web content management, access control, caching, etc. in creating a rich user experience.

CopperPoint Case StudySolution:

❖ A joint team composed of engineers from CopperPoint and XTIVIA used AngularJS, Liferay’s out-of-the-box capabilities and XSF to build a new public site at www.copperpoint.com and a new private customer/agent portal.

❖ AngularJS portlets interact (via XSF services) with a wide variety of back-end enterprise systems including multiple RDBMS and SOAP services.

Benefits:

❖ The Angular/XSF architectural approach resulted in the ability to clearly separate the UI from services integration from the developer perspective, and the ability to deliver modern, dynamic, and responsive apps from an end-user perspective.

❖ The new portal has lent CopperPoint’s website a fresh look, and the updated architecture allows them to quickly build and publish new and enhanced functions.

Benefits:

❖ The Angular/XSF architectural approach resulted in the ability to clearly separate the UI from services integration from the developer perspective, and the ability to deliver modern, dynamic, and responsive apps from an end-user perspective.

❖ The new portal has lent CopperPoint’s website a fresh look, and the updated architecture allows them to quickly build and publish new and enhanced functions.

http://www.copperpoint.com/

CopperPoint Case StudyOverall Solution Highlights❖ Personalized online experience and content targeting based on

role ❖ Role Based Access Control (RBAC) ❖ Caching ❖ Rich web content, documents & media ❖ Auto-login hook and SSO ❖ Responsive web design

Other XSF Success StoriesCustomer Portal for a Fortune 500 Telecom Managed Services Company❖ Overview: A Customer Portal that allows large enterprise

customers to monitor the status of their managed telephony and data networks.

❖ Challenge: Client wanted to deliver a blazing fast user experience to their end-users but the Web Services which interacted with the back-end ticketing system were very slow and could not support Interactive Dashboards and Real-Time charts.

❖ Solution: Developed a highly performant, feature rich Liferay based Customer and Partner Portal with a state-of-the-art user experience. Overcame the slow back-end by leveraging caching and creating an efficient ETL process which pulls updates from the ticketing system and stores aggregated summary data for very fast display of Heat Maps and Geographically-based charts. Additionally built a template and theming mechanism that enables a quick on-ramp of new Partners.

Other XSF Success StoriesEnterprise Management Apps Portal at a Major Retail Chain (3,000+ Stores)❖ Overview: Apps to allow customer service team, accounting,

fulfillment, and other departments to perform various back office operations from handling returned checks to inventory charge-off to temporary co-worker assignment to business exceptions/metrics and more.

❖ Challenge: Client wanted to leverage a Single Page App architecture to build these applications.

❖ Solution: XTIVIA was able to quickly design and implement an XSF-based solution to support an AngularJS implementation that used OOTB Angular facilities for Ajax/REST communications.

❖ Benefits: This architectural approach resulted in the ability to clearly separate the UI from services integration from the developer perspective, and the ability to deliver modern, dynamic, and responsive apps from an end-user perspective.

Obtaining XSF❖ Maven Central artifacts (JAR and archetype)

❖ com.xtivia.tools / xsf / 1.1.0❖ com.xtivia.tools/xsf_sample_app-archetype/1.1.0

❖ Our GitHub Site (https://github.com/xtivia/xsf)❖ PDF Documentation❖ Code Samples

How software is built matters and at XTIVIA We simply build it better.

Please visit the XTIVIA booth to learn more about Single Page Apps (SPA) with AngularJS, XSF and Liferay

THANK YOU

2015 nas - xtivia xsf overview - slide deck

Documents