Community Code: Pega Mobile

2011 Pegasystems Inc.

SenchaCon 2011

1

Lessons from the Dynamic Enterprise Pega Ashvin RadiyaStephen Bixby

Wednesday, November 2, 11


SenchaCon 2011

2

Who is Pegasystems?Software provider specializing in Business Process Management (BPM)Browser-based, model-driven development tool for designing, building and deploying dynamic enterprise business applications without writing codePublicly held (NASDAQ: PEGA) Named the leader in BPM and Case Management by Gartner and Forrester Based in Cambridge, MA with regional offices across North America, Europe, India and Asia Pacific

By the NumbersRevenues for 2010 of $337 million Pega technology is used by 8 of the top 10 global banksPega technology is used by 4 of the top 5 U.S. health insurance payersPega technology is used by 7 of the top 10 North American insurance companiesPega technology is used by 7 of the top 10 North American credit card issuersPega technology supports 60% of the world’s payment investigationsPega technology supports healthcare plans covering more than 125 million lives



SenchaCon 2011

3

Pega at a glance



SenchaCon 2011

4

Pega Process Designer



SenchaCon 2011

5

Pega UI Designer



SenchaCon 2011

6



SenchaCon 2011

7



SenchaCon 2011

8



SenchaCon 2011

9

Mobile Approaches: Evaluations &

Traditional desktop browser UI via mobile device

Native iOS app dev

– Dynamic with native and webview

Outsourced native app build separately for each platform

Code-based cross-platform native deployment (Titanium)

Configuration-based cross-platform native deployment (Pyxis)

HTML5 mobile web app (JQM, SenchaTouch, Dojo Mobile)

HTML5 mobile web app deployed as native app (PhoneGap, SenchaTouch 2)



SenchaCon 2011

10

POC Screenshots



SenchaCon 2011

11

POC Screenshots



SenchaCon 2011

12

Why SenchaTouch?

HTML, JS, CSS competency in house

Component based architecture

Robust control library

Object-oriented, reusable, extensible

Theming

Standardized MVC architecture

Top-notch documentation and support community (Forums)

A true “framework”

A company to partner with



SenchaCon 2011

13

Overall Architecture

PegaConfiguration DB

Websphere/Weblogic/Tomcat/JBoss

Pega Server/Engine assembles and generates Sencha JSON from XML(Executes as a dynamically compiled and loaded Java class at runtime)

XML

JSONHTML

Desktop BrowserPega Designer Studio

Desktop BrowserMobile Browser

Oracle/SQLServer/DB2/UDB



SenchaCon 2011

14

Dynamic UI

Model-driven, dynamic mobile interfaces



SenchaCon 2011

15

Live Demo



SenchaCon 2011

16

Typical Sencha Touch Expert

Participate in Application design– Sencha capabilities, budget, timeline

Architect JSONs– Information on the screen + Navigation

Focus is on the front end, client knows the backendPOC, ProductizationClient team building, knowledge transfer



SenchaCon 2011

17

Elements of Enterprise Mobile

Large scale app (MVC)Web access, Home screen App, Restart– Do not make users start at the beginning (deep linking)

Configurable, dynamic UI– Dynamic JSON UI data

AuthenticationData driven– Cache data, reload strategy, cached views

Multi-device and form factors (Phone/tablet, orientation)Miscellaneous– Error handling, Data modeling, Id, KISS my App!



SenchaCon 2011

18

Large scale app (MVC)



SenchaCon 2011

19

Web access, Home screen App,

URL patternsRoutes and matching action in controllerdefaultUrl http://m.pega.com

http://m.pega.com/pyGetAssignmentListhttp://m.pega.com/pyGetAssignmentList/urgenthttp://m.pega.com/pyGetAssignmentList/urgent/customer

routes.js

controller.js

app.js


http://m.pega.com

http://m.pega.com


SenchaCon 2011

20

Calling actions from the code

Ext.redirect, Ext.dispatch– Ext.redirect - Only string params (same as browser URL)– Ext.dispatch – additionally pass objects– Every point of the app is not accessible through a direct URL

Passing information from one view to controller to another view

// dynamic action after loginExt.redirect(loginJSON.NextActionURL);



SenchaCon 2011

21








SenchaCon 2011

22

Dynamic UI (Recall)

Model-driven, dynamic mobile interfaces



SenchaCon 2011

23

Configurable, Dynamic UI

For achieving extreme configurability– “UI JSON” for screens are generated on the server using

xtypes in Sencha TouchJSON responses for screens UI, errors, forms, forms with errorsOne of the biggest benefit of xtype for dynamic systems– Define UI as pure JSON objects (without behavior)



SenchaCon 2011

24

Server Dynamically generates UI



SenchaCon 2011

25

Client code to work with UI



SenchaCon 2011

26








SenchaCon 2011

27

Authentication

Set defaultURL in app.js

Empty Login Form!

Request server for even the login form!



SenchaCon 2011

28








SenchaCon 2011

29

Cached views

controller.js



SenchaCon 2011

30

View actions configure toolbar



SenchaCon 2011

31








SenchaCon 2011

32

Multi-device strategy

Different UI for tablets and phone using the same code



SenchaCon 2011

33

Multi-Device (form factors)

Out of the box support for iOS, Android, …Drill-down approach for phones versus Left Nav Panel for TabletsImplementation techniques– Define profiles– Each view can define its own logic in setProfile(…)

• Framework automatically calls setProfile



SenchaCon 2011

34

Setting profiles in your code



SenchaCon 2011

35

Logic based on profiles in code

Make one time set up decisions in initComponent()



SenchaCon 2011

36

Logic based on profiles in code -

Make orientation change decisions in setProfile()



SenchaCon 2011

37








SenchaCon 2011

38

Error Handling

Server returns SUCCESS or ERRORS JSON



SenchaCon 2011

39

Pure concepts are good for app

Strongly recommend to stick to this structureSame model for multiple stores (static data for local testing VS dynamic data)



SenchaCon 2011

40

Omnipotent “id”, use it with care

Very powerful – easy to access a component from anywhere– Declare – {xtype: ‘panel’, id: ‘coolPanel’, … }– Access – Ext.getCmp(‘coolPanel)

Any other declaration of “id: coolPanel” will create a conflict at the run time– UI may not render, unpredicted behavior

Makes it difficult to create new abstractions– Instance to class, left id in there, created subtle bug

Supply id while instance creation and not in the class definition unless you are sure to create singleton, need to exercise discipline for creating instances, or provide a factory (global function)



SenchaCon 2011

41

KISS my app!

One of my mantras - focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains

- Steve JobsIn POC – Lot of navigation, back and fort– Drill down mechanisms

In productizing, changed design to– Modal approach (full screen overlays with zoom in effect)– In each screen, the user should see only what they need– Reduced Navigation



SenchaCon 2011

42

Notes from Sencha Touch 2

Big conceptual change– ST 1: dispatch actions from the handlers in views– ST 2: Associate actions (listeners, handlers) with events in

controller class– More event driven, loosely coupled solutions, component

queriesMany Cosmetic changes– Index.html – no need to refer to all js files, recompile your

CSS– Strict directory names (app, control, model, view, store)– Explicit dependency declaration (models, views, controllers)– No docketItem!– View definition

• Use Ext.define, initialize() and not initComponent()• Separate config property – remember to put all config options

under itWednesday, November 2, 11


SenchaCon 2011

43

Summary of our key lessons

Use MVC, deep linkingDynamic UI screens from server based on xtypeDeclarative instantiations using xtype – Avoid new myClass(…) as much as possible– Instantiates only when needed (performance)

Cache views and dataUse profiles to create experience based on the form factorAvoid using “id”, use itemId and getComponent()KISS my appGo Sencha Touch 2 – Make your code more loosely coupled, event driven



SenchaCon 2011

44

AvantSoft

Official Sencha PartnerWeb, Hybrid, Native mobile app developmentSencha Touch 2 migration and app dev services– Sencha Touch POC, productization, Maintenance

Ext JS Apps, migration from 3 to 4QA, TestingDesign services– App design, wireframes, graphical assets, styling (CSS, SASS)

Training, consulting, development services– Eclipse Plugins, Java, Sencha, iOS, Android, Cloud, Social

www.avantsoft.com, [email protected]



SenchaCon 2011

45

Questions?

[email protected], 408-230-8816, San Jose, [email protected]


Community Code: Pega Mobile

Technology

dynamic ui senchacon

pega ui designersenchacon

code senchacon

native app build

native app phonegap

home screen app

evaluations senchacon

dynamic mobile interfaces