Case Study: Dodging the Pitfalls of Enterprise Ajax Applications

Transcription

1 Case Study: Dodging the Pitfalls of Enterprise Ajax Applications

2 A Quick Introduction: Joshua Gertzen Lead Architect of the ThinWire Ajax RIA Framework Core Technology Architect for CCS (7yrs) Involved in Business and Technology Solutions Long Time Technologist (approx. 15yrs) Blog: Articles: JavaScript OO, AJAXWorld Mag. Feb. 2007

3 What I m Going to Cover Creating an Ajax application for a top ten bank Technology and business decisions we made Numerous pitfalls we discovered along the way How we overcame the challenges to succeed Strategies for dodging the pitfalls in your efforts

4 Custom Credit Systems (CCS) Small Independent Software Vendor (ISV) formed in 1989 Designs Automated Lending System for Top Banks:

5 Taking Custom Credit Systems to the Web Custom desktop development platform from 1990 Employees are desktop programmers using scripting Increasing need for web based products Existing products very complex & data centric

6 Traditional Web Application Limitations Lacks advanced user interface controls Lose real time interaction with the user Poorly handles data centric applications Restricted access to client computer Runtime network demands are typically higher

7 First Attempt 2001: Something Kind of Like Ajax Component model on server (ASP/JS), no HTML or CSS needed. Allowed easy control augmentation. Each page includes a JS library to support various capabilities; page fragment loading, validation, etc Page specific code embedded through framework calls, which output it for the specific page. Used a tiny 3K Applet to handle communication back to server framework for database queries

8 What we Learned From our First Try Component model made life easier and more like a desktop development experience Single language development simplified things a lot, app developers only had to know JavaScript Requesting information incrementally from the server and updating a page was a definite win

9 Where we Wanted to See Improvement Request/Response flow control was hard to follow for most State management was a ugly compared to desktop model Still lacked many UI components from desktop world UI Development spread across client & server Java Applets were abysmal even for simple communication tasks due to VM requirement and compatibility issues

10 Pitfalls we Discovered with Ajax Development Client-side development skills are not prevalent Writing client-side code adds more risk Memory consumption Performance issues Bloat concerns Less mature testing tools and procedures JavaScript must be considered top-tier language New application end-point handlers on server Rethink security & debugging strategies

11 A Complete Picture of the Cookie Monster Active Web Page (HTML / XHTML) Element Level Styling (CSS) Ajax Libraries & Widgets (JavaScript / DHTML / DOM) Application UI Code (JavaScript / XML) End Point Calls (JavaScript / XML) Partial Application State (JavaScript) Web Page Generation (Server Lang. / HTML / CSS) Page Flow Management (Server Lang. / Web 1.0 Framework) Application End Point Handlers (Server Lang. / Web 1.0 Framework) Partial Application State (Server Lang. Session Object)

12 Design Considerations for Next Attempt Eliminate much of the complexity required to build a complex enterprise web application Client can talk to server anytime, so eliminate request/response from developers perspective In reality, developers care about user initiated events, not page requests and form submission Handling all logic and events on the server allowed full access to server resources and ease debugging

13 Established Goals for the New Framework Rich User Interfaces (grids, trees, menus, etc) Response User Experience (anything can change at anytime) Single Technology Development (Java) Component Development Model (encapsulated into classes) Event Driven Development (respond to user actions) Natural State Management (object based management) Security Built In (single comm channel, view source hides)

14 Application Design From A Developers Perspective

15 In The Meantime, Ajax Explodes on to Scene Early 2005, Google Releases Google Maps Adaptive Path follows up with Ajax Article World Erupts in a Frenzy over the New technology Analysts Start Dissecting the Movement and Publishing Statements & Predictions

16 Some basic guidelines: Gartner s classifications Early adoption consists of snippets and widgets 60% of new applications will be based on an RIA framework by 2010

17 Four Levels of Ajax: Level 1 Snippets - Enhancing existing web applications

18 Four Levels of Ajax: Level 2 Widgets - UI Components such as Tree & Grid

19 Four Levels of Ajax: Level 3 Specialized Framework - Single purpose, mostly client-side logic

20 Four Levels of Ajax: Level 4 RIA Framework General purpose, tightly coupled client & server side architecture

21 Why will so many apps use an RIA framework? Majority of applications are for the enterprise Enterprise development favors more structure Well defined layers manage complexity RIA s tend to integrate advanced widgets well

22 RIA + AJAX = Zero Footprint Enterprise Apps RIA s been around, but today it s about AJAX A simplify web development platform: Highly interactive & responsive user interface Tightly coupled with server for ease of development. May be client-centric. Capable of providing desktop application richness in the browser without plug-ins

23 New Framework is Given a Name Renamed to ThinWire Mid 2005 Released Open Source in June 2006 Relicensed under LGPL in late 2006 Over 25,000 downloads from SourceForge

24 For the curious: A simple ThinWire application

25 What happens when you run it?

26 Open Source Licensing GNU Lesser General Public License (LGPL) Use as-is, without warranty & at no cost 100% free for use in commercial applications You must keep original copyright intact You must license derived work under the LGPL

27 Support Subscriptions & Services Support continued investment in framework Annual support subscriptions: Vote on feature requests & bug priority Questions answered by the team in a timely fashion Incident reporting for issue resolution needs Training and certification courses Professional consulting

28 Resources at Development Team Blog Community Forums Issue Tracking Feature Requests Developer Documentation Tutorials Live Application Demos

29 Live Example: Playground Demo Interactive Components Change Properties Modify Styling Activate Listeners View Source Code

30 Live Example: Visual Form Designer Design multiple forms Drag to move & size Alter properties & style Save to XML & code Load from XML

31 Live Example: CCS Lending Platform Over 300 input forms Business rules engine Configurable interface Admin driven content Over 500 active users