Rich Internet Applications (RIAs) combine the power of traditional desktop software with the easy delivery and accessibility of web applications. While RIA technologies and frameworks are readily available and easy to get started with, they pose new challenges to development and maintenance. Often, aspects such as security, coding standards, framework upgrades and localization are neglected. We would like to share our experiences and insights from many years of RIA development and present our best practices on how to develop and maintain rich internet applications for the enterprise.

1. BEST PRACTICES FOR THE ENTERPRISE
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

2. “The biggest challenges in creating Ajax applications are not
technical. The core Ajax technologies are mature, stable, and
well understood. Instead, the challenges are for the designers
of these applications: to forget what we think we know about
the limitations of the Web, and begin to imagine a wider, richer
range of possibilities.
It’s going to be fun.”
Ajax: A New Approach to Web Applications
Jesse James Garrett, 2005
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

3. Overview – RIA for the Enterprise
 What is RIA?
 Architecture Solutions
 Integration with Enterprise Security
 Development and Maintenance
 Performance Considerations
 Other Enterprise Functionality
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

4. RIA vs. Traditional Web Applications
Internal Logic,
Main Page Caching
Page 1 Page 2 Page …
Traditional Web Applications Rich Internet Applications
• Content change = Page  Load main page once
reload  Dynamically replace content
in response to user
• AJAX widgets
interaction
 JavaScript central to UI
Logic
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

5. Architecture: MVC or Not?
Traditional MVCMVC RIA
RIA with Slim with
RIA without MVC
Browser
HTTP Request Execution Parameters Consume Enterprise
HTTP Request API
HTTP Request Execution Parameters Consume Enterprise
Consume Enterprise Enterprise API Enterprise
Browser Controller
Browser Model
Controller API
API Enterprise
API
Mobile Model
HTTP Response
UI API HTTP Response API
Data
UI Content
Data
HTTP Response Data
…
View
Traditional MVC with RIA RIA without MVC RIA with Slim MVC
UI Logic in View and client-side components Client-side components (JavaScript) Model/Controller are used to expose a UI-
Views are specific to one UI consume Enterprise API directly (SOAP) specific API (JSON, REST etc.) that can
View = slow API may not fit UI needs be consumed by different UIs
Bypass controller when possible, avoid
views
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

6. Security – Use Server-Side Technologies
Authentication
Security Filters/Handlers
Session
Server-Side
Web App Authorization Browser
RIA
(JSP, ASP.NET…)
Data, Dynamic
Content
HTML, CSS, Images
JavaScript
Browser sends session info with every request
Server-side applies appropriate restrictions
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

7. Accessing the Security Context in JavaScript
<%
Object obj =
SecurityContextHolder.getContext().getAuthentication().getPrincipal();
UserDetails userInfo = null;
if (obj instanceof User){
userInfo = (User)obj;
} else {
userInfo = (LdapUserDetailsImpl)obj;
}
%>
<SCRIPT type="text/javascript">
var uUserName = '<%= userInfo.getUsername() %>';
var uAuthorities = '<%= userInfo.getAuthorities() %>';
</SCRIPT>
<SCRIPT type="text/javascript">
var uUserName = 'JDOE';
var uAuthorities = 'ROLE_MANAGER,ROLE_AUDIT';
</SCRIPT>
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

8. Role-Based Functionality in JavaScript
Server-side rendering (JSP, ASP…) allows restricted logic to be
excluded from the final script before served.
Sample.js  Sample.js.jsp
// do something unrestricted
alert('Everybody can read this');
// restrict content/functionality using server-side rendering
<sec:authorize access="hasRole('ROLE_ADMIN')">
alert('Only Admins can read this');
</sec:authorize>
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

9. User Experience Problem: Session Timeouts
Logout Logout
UI Session Management
 UI “Heartbeat”  UI activity
monitoring
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

10. Special Challenges for RIA Development
What is so different about RIA
Development?
 Large JavaScript Codebase
 Third-party rendering engines a.k.a. Browsers
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

11. Developing and Maintaining JavaScript Code
 Limited error  Different coding styles
detection by IDE  Debugging/Testing
 Difficult refactoring  Skill sets
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

12. Maintaining and Upgrading JavaScript Code
• Mature Libraries • Plan for updates
• Coding Standards • Minimize customizations
• Repeatable Process • Smart code organization
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

13. Project Layout Example
Images
JSP/HTML Pages
Configuration Scripts
i18n/L0n Resources
JavaScript Code
Utilities and Widgets
Customized
Third-Party Files
CSS Resources
Third-Party Styles
Third-Party Resources
Infrastructure JSPs
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

14. The Web Browser
RIA relies on third-party rendering engines!
Latest release Latest testing release
Browser
version date version date
9.0.2 10.0.8102.0 Platform Preview 3
Internet (August 11, 2011 ) (September 13, 2011)
Explorer
Mozilla 11.0 12.0 Beta 2
Firefox (March 13, 2012) (March 22, 2012)
5.1.4 5.2
Safari (March 12, 2012) (February 16, 2012)
17.0.963.83 18.0.1025.133 (Beta)
Google (March 21, 2012) (March 22, 2012)
Chrome 19.0.1068.1 (Dev)
(March 15, 2012)
11.61 12.00 alpha (Build 1328)
Opera (January 24, 2012) (March 14, 2012)
Source: Wikipedia
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

15. Cross-Browser Support
CSS
Browsers
Standards Mode
IE7+, Chrome, Safari, Firefox
Style most compliant browser first
JavaScript Graceful degradation
Conditionally include corrective
Inconsistent event handling, DOM CSS for other browsers
interaction etc.  JavaScript browser detection
 Conditional Comments (IE)
<!--[if lte IE 7]>
<link rel=“stylesheet” …></link>
<![endif]-->
Use a mature framework
Update and test regularly Third-party styling frameworks
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

16. Design and Development in Practice
UI Prototype
HTML/CSS/
JavaScript
UI against
Mock
Services
Service Interfaces Reconciliation
Implement
Services/
Backend
Integration
Testing
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

17. Testing the User Interface
Challenges
 Different browsers
 Complex User Interaction
 Page state remains loaded for a long time
Repeatable Process!
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

18. RIA Performance Considerations
Performance Bottlenecks
 Resource Loading
 Client-side Script Execution
 Memory leaks
Big Impact Fixes
 Architecture (Thin or No Controller)
 Choice of frameworks
 Coding style (JQuery Selectors etc.)
 Parallel/background loading
 Caching
Squeezing out the last millisecond…
 GZIP, Optimize Request Caching, Minimize downloads
 Use tools like YSlow to optimize performance even more
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

19. Practical Solutions and Considerations
Deep Linking i18n/L0n
Bookmarking
Logging
Branding
Theming
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

20. Deep Linking and Page History
tabs.html tabs.html?pg=2 tabs.html?pg=3
Tab 1 Tab 2 Tab 3
tabs.html tabs.html
tabs.html#pg=2 tabs.html
tabs.html#pg=3
Back/forward browsing, history, page refresh and bookmarking broken
No page reload when URL hash changes
Map hash values to page states
Use third-party library
Query String Hash (Anchor)
page.html?param1=value1&param2=value2#arbitrary_hash_string
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

21. Branding and Theming
$("head").append('css/theme2.css')
 MVC  JavaScript
Widgets often bring their own styles and images!
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

22. Internationalization/Localization (i18n/L0n)
en_US de_DE
JavaScript
Use third-party plugins
- Load messages as JavaScript variables
- Locale-specific formatting and timezone
Server-Side
Use built-in resource mechanisms
<h><spring:message code="cart.title"/></h>
Use UTC timestamps
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

23. Logging
Log to Browser Console or Web Page
 JavaScript APIs
Log to Server File
 Call a Logging Service via AJAX
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

24. Summary
RIA - A new world of possibility ready for
the Enterprise
 Architecture
 Mature Frameworks and Libraries
 Process and Standards
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

25. Source: xkcd
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

26. W E L O O K F O R W A R D T O PA R T N E R I N G W I T H Y O U
©Copyright 2012 QA Technologies, Inc. All rights Reserved.

27. 27
Contact Us
SUPPORT FROM THE START
Looking to learn more about what makes QAT Global
your top partner for strategic consulting, product
engineering, agile cloud development, and
innovation? We'd love to connect with you and
discuss your company's goals and what makes us the
right partner for the future.
“ S T AY C O N N E C T E D ”
Twitter.com/qatglobal Address: 222 South 15th Street, Suite
1404S, Omaha, NE 68102
Linkedin.com/in/company/qat Phone: 402-391-9200
Email: sales@qat.com
©Copyright 2012 QA Technologies, Inc. All rights Reserved.