Hide Notes 

Slide 1: S/W Development on the Web Platform JaeHyun.Park ThinkFree http://thinkfree.bloter.net
Slide 2: Contents • Platform • Web Platform • The old web development • The new web development technique • The Barriers • How to overcome? • ThinkFree approach
Slide 5: What is a point of sameness?
Slide 6: Computing Platform • In computing, a platform describes some sort of framework, either in hardware or software, which allows software to run. Typical platforms include a computer's architecture, operating system, or programming languages and their runtime libraries. – http://en.wikipedia.org/wiki/Platform_(computing)
Slide 7: Web platform • Web as the computing platform • Web as the delivery platform • Web as the management platform • Web platform is consist of Web browser, Web Server , Web development language with library , and other Web(Open API)
Slide 8: Desktop AP development • Terminal/Server model • Stand alone PC model • Client/Server model
Slide 9: Desktop AP development • Terminal/Server model – Data & view reside on Server – Client is just Dummy!
Slide 10: Desktop AP development • Stand alone PC model – Data & view reside on desktop – AP is very smart Desktop Application(View/controller) Local Storage(Unstructured)
Slide 11: Desktop AP development • Client/Server model – View runs on client – Initial data loads from server then cached on client – Incremental loading of data from server as needed – Client is still smart Client Application(View/controller) Server Server Application (ex,TPmonitor,..) Model DBMS Tables Local Storage(Unstructured)
Slide 12: Old Web Development • Web site development Data resides on server Client sends data request to server(HTTP request, Synchronous) Server sends data(HTML) to client(HTTP response) Communication between client & server using HTTP(delay time) Maximum client data storage allowed for web app: limited to 4k Client is still dummy Web Browser Application(Just View) Server Application DBMS WWW Server HTML (CGI,Servlet) Cookie(Unstructured,4K) Model SQL Tables
Slide 13: Limitation of old web • • • • • • • IE only( maybe firefox ) korea only Almost ActiveX, low level javascript Single canonical design w/HTML table layout Single data source (with DBMS) Structured templating system Poor performance – static cache(70% over) , delay time , page reload , big HTML page • No reuse , spaghetti code
Slide 14: New Web Development • Data resides on server • Client sends request to server(XML HTTP request, Synchronous) • Server sends serialized XML data to client • Client JavaScript code renders and manipulate the data • Client is smart again Web Browser Application(View/controller) WWW Server/Application DBMS Server XML (CGI,Servlet, REST,SOAP) Offline Storage Model SQL Tables
Slide 15: New Web Development • • • • • • • Multiple browsers i18n and l10n RSS REST and/or SOAP APIs JavaScript/DHTML/Ajax, Flash, rich media Multiple style sheets Client is smart again but data & code size still restricted by browser memory limitation
Slide 16: New Web Dev 7 Technique 1. 2. 3. 4. 5. 6. 7. Dynamic User interface Real time event-driven programming Light weight MVC programming on client side Server is headless & open API server Apply the agile web platform Light weight system architecture Software As A Service(SAAS)
Slide 17: Dynamic UI • Dynamic Web UI • Technique – – – – – – – – – Java Applet & Web Start Ajax(Asynchronous Javascript and XML) Macromedia Flash & Flex(Apollo) SVG(Scalable Vector Graphics) Open Laszlo XAML on Windows Vista XUL Application for Firefox Yahoo! Widget(aka.Konfabulator) Apple Dashboard
Slide 18: Real time event-driven Web Browser(MVC) Make Views using DOM/JavaScript WWW Server/Application Server User event User event User event User event User event User event Ajax Engine Model Model Model Model Model Offline Storage XML/ HTTP Model
Slide 19: Lightweight MVC Web Browser(View) Just Viewing the HTML Server Application DBMS WWW Server HTML (CGI,Servlet) Cookie(Unstructured,4K) Model SQL Tables Web Browser(MVC) Make Views using DOM/JavaScript WWW Server/Application Server XML (CGI,Servlet, REST,SOAP) Offline Storage Model DBMS SQL Tables
Slide 20: Lightweight MVC • Model – Build data model using XHTML & DOM – and give ID to the data model • View – Separate the view using CSS • Controller – Give dynamic event code to ID using ECMAscript and DOM
Slide 21: Server is headless & open API server Web Browser(MVC) Make Views using DOM/JavaScript Server WWW Server/Application User event User event User event User event User event User event JSON DOM XSLT Offline Storage Model Model Ajax Engine OPEN API (REST,S OAP,Se rvlet,CG I) Model Model Model XML (RSS, Atom, Microformat, OpenXML,..) Model
Slide 22: Server is headless & open API server • REST(Representational State Transfer) – http://en.wikipedia.org/wiki/Representational_State_Tra nsfer – examples • http://.../file/320/image[2] • http://.../file/320/slide[1]/shape[2] • http://.../file/320/master['title]/text[body] – JSR-311 • Java API for RESTful Web Services • http://developers.sun.com/web/swdp/ – Easy to understand and to use – Most of web2.0 company support it
Slide 23: Apply the agile web platform • Script type – PHP, Python, Ruby/JRuby • Web development framework Ruby on Rails(RoR) , Struts , PEAR LAMP(Linux,Apache,MySQL,PHP&Python &Perl) • Ajaxframeworks(Dojo,Prototype,DWR,Atla s), GoogleWebToolkit(GWT)
Slide 24: Light Weight Architecture WWW server(10K$) Application Server Application Server(20K$ over) Application Server DBMB Server(20K over) XML (Static Content) Model (Dynamic Content) Model DBMS SQL Tables WWW/Application Server1(3K$ ) XML WWW Server Static Content HTMl/Image/files/.. Application Server (Dynamic Content) Model DBMS Tables DBMB Server(20K over) WWW/Application Server10(3K$ ) XML WWW Server Static Content HTMl/Image/files/.. Application Server (Dynamic Content) Model
Slide 25: Software As A Service • Web is not a just development platform. It is a delivery and management platform • SaaS – S/W accessed over the browser and hosted on vendor’s server – Multi-tenant architecture design – Subscription based price model – High availability
Slide 26: Barriers • What are the barriers to develop web apps compete with traditional desktop application? –Can't use offline –Data size limitations –Data loading time –Data handling performance
Slide 27: Google D&S Limited to 500KB
Slide 28: Zoho 800KB XLS file cannot be opened
Slide 29: ThinkFree 4.9MB spreadsheet loads in 2.53 sec.
Slide 30: How to overcome? • Having data persist across multiple browser sessions can reduce initial data loading time. • 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 Embbed DBMS
Slide 31: Cookies • Most commonly used mechanism for data persistence • Supported in all web browsers • Weak security • Unstructured data • Limited to 4KB/domain
Slide 32: 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 33: FireFox DOM Storage • Supported only in Mozilla browsers • Easy to use • Weak security • Unstructured data • Limited to 5MB
Slide 34: 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 35: Embedded Database • Mozilla Storage(only by Extension) • MDB with ActiveX • Derby with Java applet • PROS –Structured data –No size limit • CONS –Requires additional installation step.
Slide 36: 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 37: Data Handling in TF V2
Slide 38: Efficient Large Data Handling • Client fetches visible data fragments asynchronously on demand. • Server keeps LRU data fragments in buffercache, instead keeps the whole large data in memory. • Client batches modified data fragments to merge. • Server merges modified data fragments into the whole large data. • Client keeps redolog in browser local storage to recover from offline. • JAVA, Apollo, etc…may be used to overcome browser restrictions especially for mission critical applications.
Slide 39: 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] [LRU buffer-cache] MMU over AJAX XML/HTTP MMU over AJAX Browser Local Storage [redolog] offline online checkout Unstructured data (doc,xls,ppt...) [file system] commit Repository
Slide 40: Conclusion Desktop Full Access on Local Resource Highest Client Load No Server Load No Server Load Shortest Response Time Highest Fidelity Web/Classic No Access on Local Resource Lowest Client Load Lower "Peak" Server Load Highest "Average" Server Load Long Response Time Lowest Fidelity Real World AJAX Applications Ex-Restricted Access on Local Resource Low Client Load High "Peak" Server Load High "Average" Server Load Shorter Response Time Low Fidelity RIA Restricted Access on Local Resource Higher Client Load Low "Peak" Server Load Higher "Average" Server Load Shorter Response Time High Fidelity Web/AJAX No Access on Local Resource High Client Load Highest "Peak" Server Load Low "Average" Server Load Short Response Time Lower Fidelity