Hide Notes 

Slide 1: Handling Large Data in Rich Ajax Applications ThinkFree
Slide 2: Ajax on Desktop • Ajax based Web apps are replacing traditional desktop apps –Zimbra, Gmail & Google Calendar (Outlook replacement) –Google Docs & Spreadsheets, Zoho, Ajax Office, ThinkFree (Office suite replacement) • But can they really handle the work of traditional desktop apps?
Slide 3: Barriers to Adoption • What are the barriers to adopting Ajax apps to replace traditional desktop apps? –Can't use offline –Data size limitations –Data loading time –Data handling performance
Slide 4: Rich AJAX Applications Desktop Full access to local resource Highest client load No server load No server Load Shortest esponse time Highest rendering power Web/AJAX No access to local resource High client load Highest "peak" server Load Low "average" server Load Short response time Lower rendering power Rich AJAX Applications More restricted access to local resource Low client load High "peak" server load High "average" server load Shorter response time Low rendering power RIA Restricted access to local resource Higher client load Low "peak" server Load Higher "average" server Load Shorter response time High rendering power Web/Classic No access to local resource Lowest client load Lower "peak" server Load Highest "average" server load Long response time Lowest rendering power
Slide 5: Data Handling on Desktop • Terminal/Server model – Data & view reside on Server • Stand alone PC model – Data & view reside on desktop • Client/Server model – View runs on client – Initial data loads from server then cached on client – Incremental loading of data from server as needed
Slide 6: Data Handling in Web App • • • • • Data resides on server Client sends data request to server Server sends data to client View data via HTML Communication between client & server using HTTP requires frequent data reloading • Maximum client data storage allowed for web app: limited to 4k browser cookies
Slide 7: Data Handling in Ajax App • • • • Data resides on server Server sends serialized XML data to client JavaScript code renders data Since only needed data is passed between client & server, data transmission time is reduced. However, data loss may occur when connection breaks • Data & code size still restricted by browser memory limitation
Slide 8: Data Handling in Google D&S Limited to 500KB
Slide 9: Data Handling in Zoho 800KB XLS file cannot be opened
Slide 10: Data Handling in ThinkFree 4.9MB spreadsheet loads in 2.53 sec.
Slide 11: Data Handling in TF 2
Slide 12: Efficient Large Data Handling • Client fetches needed data fragments asynchronously on demand • Server keeps data fragments in buffer cache, instead of keeping the whole data in memory • Client sends modified data fragments to server • Server merges modified data fragments into the whole data • Client keeps redo log in browser local storage to recover from disconnected use • Java, Apollo, etc... may be used to overcome browser restrictions especially for mission critical applications
Slide 13: Browser Local Storage • Having data persist across multiple browser sessions can reduce data loading time but must pay attention to security • Data persistence may also be used to back up edited data when network connection is not reliable • Data persistence may be achieved by using – – – – Cookies Flash Local Storage FireFox DOM Storage Internet Explorer userData behavior
Slide 14: Cookies • Most commonly used mechanism for data persistence • Supported in all web browsers • Weak security • Unstructured data • Limited to 4KB/domain
Slide 15: Flash Local Storage • Flash installed on 96% of computers • Maybe used by non Flash apps • Easy to use • Weak security • Unstructured data • Requires Flash plug-in • Limited to 100KB/domain (10MB total)
Slide 16: FireFox DOM Storage • Supported only in Mozilla browsers • Easy to use • Weak security • Unstructured data • Limited to 5MB
Slide 17: IE UserData Behavior • Supported only in Internet Explorer • Maximum amount of UserData storage available Security Zone Intranet Internet Restricted Document 512KB 128KB 64KB Domain 10240KB 1024KB 640KB
Slide 18: Embedded Database • Mozilla Storage(via extension) • MDB with ActiveX • Derby with Java applet • PROS –Structured data –No size limit • CONS –Requires additonal installation step.
Slide 19: Browser & Local Storage Browser All Flash Player 6 and above IE5 and above FF2 and above Storage Cookies Flash local shared object userData DOM stoage Max Size 4KB/domain 100KB/domain (max 10M) 1MM/domain 5MB/domain Embedded DB Java applet with Derby MDB with ActiveX Mozilla storage
Slide 20: DemandFetch & SmartMerge Client-side(Browser) Client Application View (HTML) Data Fragments [real-memory] Server-side Server Application Structured Data Fragments [virtual-memory] Model [paging-unit] [buffer-cache] MMU over AJAX AJAX/HTTP MMU over AJAX Browser Local Storage [redolog] offline online checkout Unstructured large data (doc,xls,ppt...) [file system] commit Repository
Slide 21: Breaking the Barriers • Divide up the work between client and server to handle large data • Fetch only needed data, only when needed and do it asynchronously • Use browser local storage to overcome issues relating to unreliable connection • Wait until FF3 or use Java et al to provide offline support