Your SlideShare is downloading. ×
RIAs - Best Practices for the Enterprise
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

RIAs - Best Practices for the Enterprise

1,511
views

Published on

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 …

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.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,511
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BEST PRACTICES FOR THE ENTERPRISE©Copyright 2012 QA Technologies, Inc. All rights Reserved.
  • 2. “The biggest challenges in creating Ajax applications are nottechnical. The core Ajax technologies are mature, stable, andwell understood. Instead, the challenges are for the designersof these applications: to forget what we think we know aboutthe limitations of the Web, and begin to imagine a wider, richerrange of possibilities.It’s going to be fun.”Ajax: A New Approach to Web ApplicationsJesse 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 … ViewTraditional MVC with RIA RIA without MVC RIA with Slim MVCUI 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 canView = 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 releaseBrowser version date version date 9.0.2 10.0.8102.0 Platform Preview 3Internet (August 11, 2011 ) (September 13, 2011)ExplorerMozilla 11.0 12.0 Beta 2Firefox (March 13, 2012) (March 22, 2012) 5.1.4 5.2Safari (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 CSSBrowsers Standards ModeIE7+, Chrome, Safari, Firefox Style most compliant browser firstJavaScript Graceful degradation Conditionally include correctiveInconsistent event handling, DOM CSS for other browsersinteraction etc.  JavaScript browser detection  Conditional Comments (IE) <!--[if lte IE 7]> <link rel=“stylesheet” …></link> <![endif]-->Use a mature frameworkUpdate and test regularly Third-party styling frameworks ©Copyright 2012 QA Technologies, Inc. All rights Reserved.
  • 16. Design and Development in PracticeUI PrototypeHTML/CSS/ JavaScript UI against Mock ServicesService Interfaces Reconciliation Implement Services/ Backend Integration Testing©Copyright 2012 QA Technologies, Inc. All rights Reserved.
  • 17. Testing the User InterfaceChallenges 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 APIsLog 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? Wed love to connect with you and discuss your companys 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.