2011 Pegasystems Inc.
SenchaCon 2011
1
Lessons from the Dynamic Enterprise Pega Ashvin RadiyaStephen Bixby
Wednesday, November 2, 11
2011 Pegasystems Inc.
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
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
3
Pega at a glance
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
4
Pega Process Designer
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
5
Pega UI Designer
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
6
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
7
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
8
Wednesday, November 2, 11
2011 Pegasystems Inc.
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)
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
10
POC Screenshots
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
11
POC Screenshots
Wednesday, November 2, 11
2011 Pegasystems Inc.
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
Wednesday, November 2, 11
2011 Pegasystems Inc.
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
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
14
Dynamic UI
Model-driven, dynamic mobile interfaces
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
15
Live Demo
Wednesday, November 2, 11
2011 Pegasystems Inc.
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
Wednesday, November 2, 11
2011 Pegasystems Inc.
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!
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
18
Large scale app (MVC)
Wednesday, November 2, 11
2011 Pegasystems Inc.
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
Wednesday, November 2, 11
2011 Pegasystems Inc.
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);
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
21
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!
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
22
Dynamic UI (Recall)
Model-driven, dynamic mobile interfaces
Wednesday, November 2, 11
2011 Pegasystems Inc.
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)
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
24
Server Dynamically generates UI
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
25
Client code to work with UI
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
26
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!
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
27
Authentication
Set defaultURL in app.js
Empty Login Form!
Request server for even the login form!
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
28
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!
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
29
Cached views
controller.js
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
30
View actions configure toolbar
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
31
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!
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
32
Multi-device strategy
Different UI for tablets and phone using the same code
Wednesday, November 2, 11
2011 Pegasystems Inc.
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
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
34
Setting profiles in your code
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
35
Logic based on profiles in code
Make one time set up decisions in initComponent()
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
36
Logic based on profiles in code -
Make orientation change decisions in setProfile()
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
37
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!
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
38
Error Handling
Server returns SUCCESS or ERRORS JSON
Wednesday, November 2, 11
2011 Pegasystems Inc.
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)
Wednesday, November 2, 11
2011 Pegasystems Inc.
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)
Wednesday, November 2, 11
2011 Pegasystems Inc.
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
Wednesday, November 2, 11
2011 Pegasystems Inc.
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
2011 Pegasystems Inc.
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
Wednesday, November 2, 11
2011 Pegasystems Inc.
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]
Wednesday, November 2, 11
2011 Pegasystems Inc.
SenchaCon 2011
45
Questions?
[email protected], 408-230-8816, San Jose, [email protected]
Wednesday, November 2, 11