The document discusses a presentation by Pegasystems on building mobile applications with Sencha Touch. It highlights key lessons and best practices including using an MVC architecture with deep linking, generating dynamic UIs from JSON responses, caching views and data, supporting multiple devices by using profiles, and moving to Sencha Touch 2 for its improved architecture.

1. SenchaCon 2011
Lessons from the Dynamic Enterprise Pega
Ashvin Radiya
Stephen Bixby
 2011 Pegasystems Inc. 1
Wednesday, November 2, 11

2. Who is Pegasystems? SenchaCon 2011
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 code
Publicly 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 Numbers
Revenues for 2010 of $337 million
Pega technology is used by 8 of the top 10 global banks
Pega technology is used by 4 of the top 5 U.S. health insurance payers
Pega technology is used by 7 of the top 10 North American insurance
companies
Pega technology is used by 7 of the top 10 North American credit card issuers
Pega technology supports 60% of the world’s payment investigations
Pega technology supports healthcare plans covering more than 125 million lives
 2011 Pegasystems Inc. 2
Wednesday, November 2, 11

3. Pega at a glance SenchaCon 2011
 2011 Pegasystems Inc. 3
Wednesday, November 2, 11

4. Pega Process Designer SenchaCon 2011
 2011 Pegasystems Inc. 4
Wednesday, November 2, 11

5. Pega UI Designer SenchaCon 2011
 2011 Pegasystems Inc. 5
Wednesday, November 2, 11

6. SenchaCon 2011
 2011 Pegasystems Inc. 6
Wednesday, November 2, 11

7. SenchaCon 2011
 2011 Pegasystems Inc. 7
Wednesday, November 2, 11

8. SenchaCon 2011
 2011 Pegasystems Inc. 8
Wednesday, November 2, 11

9. Mobile Approaches: Evaluations & SenchaCon 2011
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)
 2011 Pegasystems Inc. 9
Wednesday, November 2, 11

10. POC Screenshots SenchaCon 2011
 2011 Pegasystems Inc. 10
Wednesday, November 2, 11

11. POC Screenshots SenchaCon 2011
 2011 Pegasystems Inc. 11
Wednesday, November 2, 11

12. Why SenchaTouch? SenchaCon 2011
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
 2011 Pegasystems Inc. 12
Wednesday, November 2, 11

13. Overall Architecture SenchaCon 2011
Oracle/SQLServer/DB2/UDB
Desktop Browser
Pega Designer Studio Pega
Configuration DB
Websphere/Weblogic/Tomcat/JBoss XML
Pega Server/Engine assembles and generates Sencha JSON from XML
(Executes as a dynamically compiled and loaded Java class at runtime)
HTML JSON
Desktop Browser
Mobile Browser
 2011 Pegasystems Inc. 13
Wednesday, November 2, 11

14. Dynamic UI SenchaCon 2011
Model-driven, dynamic mobile interfaces
 2011 Pegasystems Inc. 14
Wednesday, November 2, 11

15. Live Demo SenchaCon 2011
 2011 Pegasystems Inc. 15
Wednesday, November 2, 11

16. Typical Sencha Touch Expert SenchaCon 2011
Participate in Application design
– Sencha capabilities, budget, timeline
Architect JSONs
– Information on the screen + Navigation
Focus is on the front end, client knows the backend
POC, Productization
Client team building, knowledge transfer
 2011 Pegasystems Inc. 16
Wednesday, November 2, 11

17. Elements of Enterprise Mobile SenchaCon 2011
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
Authentication
Data driven
– Cache data, reload strategy, cached views
Multi-device and form factors (Phone/tablet,
orientation)
Miscellaneous
– Error handling, Data modeling, Id, KISS my App!
 2011 Pegasystems Inc. 17
Wednesday, November 2, 11

18. Large scale app (MVC) SenchaCon 2011
 2011 Pegasystems Inc. 18
Wednesday, November 2, 11

19. Web access, Home screen App, SenchaCon 2011
URL patterns
Routes and matching action in controller
defaultUrl http://m.pega.com
http://m.pega.com/pyGetAssignmentList
http://m.pega.com/pyGetAssignmentList/urgent
http://m.pega.com/pyGetAssignmentList/urgent/customer
routes.js
controller.js
app.js
 2011 Pegasystems Inc. 19
Wednesday, November 2, 11

20. Calling actions from the code SenchaCon 2011
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 login
Ext.redirect(loginJSON.NextActionURL);
 2011 Pegasystems Inc. 20
Wednesday, November 2, 11

21. Elements of Enterprise Mobile SenchaCon 2011
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
Authentication
Data driven
– Cache data, reload strategy, cached views
Multi-device and form factors (Phone/tablet,
orientation)
Miscellaneous
– Error handling, Data modeling, Id, KISS my App!
 2011 Pegasystems Inc. 21
Wednesday, November 2, 11

22. Dynamic UI (Recall) SenchaCon 2011
Model-driven, dynamic mobile interfaces
 2011 Pegasystems Inc. 22
Wednesday, November 2, 11

23. Configurable, Dynamic UI SenchaCon 2011
For achieving extreme configurability
– “UI JSON” for screens are generated on the server using
xtypes in Sencha Touch
JSON responses for screens UI, errors, forms, forms
with errors
One of the biggest benefit of xtype for dynamic
systems
– Define UI as pure JSON objects (without behavior)
 2011 Pegasystems Inc. 23
Wednesday, November 2, 11

24. Server Dynamically generates UI SenchaCon 2011
 2011 Pegasystems Inc. 24
Wednesday, November 2, 11

25. Client code to work with UI SenchaCon 2011
 2011 Pegasystems Inc. 25
Wednesday, November 2, 11

26. Elements of Enterprise Mobile SenchaCon 2011
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
Authentication
Data driven
– Cache data, reload strategy, cached views
Multi-device and form factors (Phone/tablet,
orientation)
Miscellaneous
– Error handling, Data modeling, Id, KISS my App!
 2011 Pegasystems Inc. 26
Wednesday, November 2, 11

27. Authentication SenchaCon 2011
Set defaultURL in app.js
Empty Login Form!
Request server for even the login form!
 2011 Pegasystems Inc. 27
Wednesday, November 2, 11

28. Elements of Enterprise Mobile SenchaCon 2011
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
Authentication
Data driven
– Cache data, reload strategy, cached views
Multi-device and form factors (Phone/tablet,
orientation)
Miscellaneous
– Error handling, Data modeling, Id, KISS my App!
 2011 Pegasystems Inc. 28
Wednesday, November 2, 11

29. Cached views SenchaCon 2011
controller.js
 2011 Pegasystems Inc. 29
Wednesday, November 2, 11

30. View actions configure toolbar SenchaCon 2011
 2011 Pegasystems Inc. 30
Wednesday, November 2, 11

31. Elements of Enterprise Mobile SenchaCon 2011
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
Authentication
Data driven
– Cache data, reload strategy, cached views
Multi-device and form factors (Phone/tablet,
orientation)
Miscellaneous
– Error handling, Data modeling, Id, KISS my App!
 2011 Pegasystems Inc. 31
Wednesday, November 2, 11

32. Multi-device strategy SenchaCon 2011
Different UI for tablets and phone using the same
code
 2011 Pegasystems Inc. 32
Wednesday, November 2, 11

33. Multi-Device (form factors) SenchaCon 2011
Out of the box support for iOS, Android, …
Drill-down approach for phones versus Left Nav
Panel for Tablets
Implementation techniques
– Define profiles
– Each view can define its own logic in setProfile(…)
• Framework automatically calls setProfile
 2011 Pegasystems Inc. 33
Wednesday, November 2, 11

34. Setting profiles in your code SenchaCon 2011
 2011 Pegasystems Inc. 34
Wednesday, November 2, 11

35. Logic based on profiles in code SenchaCon 2011
Make one time set up decisions in initComponent()
 2011 Pegasystems Inc. 35
Wednesday, November 2, 11

36. Logic based on profiles in code - SenchaCon 2011
Make
orientation
change
decisions in
setProfile()
 2011 Pegasystems Inc. 36
Wednesday, November 2, 11

37. Elements of Enterprise Mobile SenchaCon 2011
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
Authentication
Data driven
– Cache data, reload strategy, cached views
Multi-device and form factors (Phone/tablet,
orientation)
Miscellaneous
– Error handling, Data modeling, Id, KISS my App!
 2011 Pegasystems Inc. 37
Wednesday, November 2, 11

38. Error Handling SenchaCon 2011
Server returns SUCCESS or ERRORS JSON
 2011 Pegasystems Inc. 38
Wednesday, November 2, 11

39. Pure concepts are good for app SenchaCon 2011
Strongly
recommend
to stick to
this
structure
Same
model for
multiple
stores
(static data
for local
testing VS
dynamic
data)
 2011 Pegasystems Inc. 39
Wednesday, November 2, 11

40. Omnipotent “id”, use it with care SenchaCon 2011
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)
 2011 Pegasystems Inc. 40
Wednesday, November 2, 11

41. KISS my app! SenchaCon 2011
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 Jobs
In 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
 2011 Pegasystems Inc. 41
Wednesday, November 2, 11

42. Notes from Sencha Touch 2 SenchaCon 2011
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
queries
Many 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
 2011 Pegasystems Inc. under it 42
Wednesday, November 2, 11

43. Summary of our key lessons SenchaCon 2011
Use MVC, deep linking
Dynamic UI screens from server based on xtype
Declarative instantiations using xtype
– Avoid new myClass(…) as much as possible
– Instantiates only when needed (performance)
Cache views and data
Use profiles to create experience based on the form
factor
Avoid using “id”, use itemId and getComponent()
KISS my app
Go Sencha Touch 2
– Make your code more loosely coupled, event driven
 2011 Pegasystems Inc. 43
Wednesday, November 2, 11

44. AvantSoft SenchaCon 2011
Official Sencha Partner
Web, Hybrid, Native mobile app development
Sencha Touch 2 migration and app dev services
– Sencha Touch POC, productization, Maintenance
Ext JS Apps, migration from 3 to 4
QA, Testing
Design services
– App design, wireframes, graphical assets, styling (CSS, SASS)
Training, consulting, development services
– Eclipse Plugins, Java, Sencha, iOS, Android, Cloud, Social
www.avantsoft.com, ashvin@avantsoft.com
 2011 Pegasystems Inc. 44
Wednesday, November 2, 11

45. Questions? SenchaCon 2011
ashvin@avantsoft.com, 408-230-8816, San Jose, CA
stephen.bixby@pega.com
 2011 Pegasystems Inc. 45
Wednesday, November 2, 11