0
Get Rich Now!
Selecting A Rich Client Technology

Vladimir Vivien
vmatters@gmail.com
Objective


Provide an overview of emerging Rich
Client technology options that are
available.




            Get Rich No...
Agenda
●   Introducing the Rich Client
●   The AJAX Options
●   Mozilla's XUL
●   Flash Platforms: OpenLaszlo & Adobe Flex...
The Rich Client Movement




     Get Rich Now! Selecting A Rich Client Technology   4
By 2010, 30% of new projects will be based on
rich internet clients and 80% of those will
be AJAX-driven

- Gartner Resear...
What Is A Rich Client?
●   To answer, we must look at client/server
    architecture
●   Traditional Client/Server Model
 ...
The Rich Client Proposition
●   Evolution of Client/Server
●   A Multi-tiered Architecture
    –   Highly productivity and...
Rich Client Technology Tiers
●   Highly decoupled technology tiers
●   View tier only handles GUI concerns
    –   Compone...
Rich Client Technology Spectrum
●   Browser-based thin clients
    –   Traditional web-based apps, Ajax-based apps, and Mo...
AJAX




Get Rich Now! Selecting A Rich Client Technology   10
AJAX
●   Asynchronous JavaScript And XML (AKA DHTML)
●   Pattern for Web-Based Development
    –   Use standards: HTML, Ja...
AJAX's XMLHttpRequest




                     ●    Requests are routed using
                          XHR
              ...
Taking A Look
<script>
function sayHello() {

   var label = document.getElementById("label");
   label.style.backgroundCo...
Adopting AJAX
●   AJAX space is crowded
●   Several adoption strategies
    –   Homegrown – write your own JavaScript solu...
AJAX Frameworks
●   Popular Open Source Frameworks
    –   Prototype, Scriptaculous, Rico, Dojo
         ● Provides abstra...
AJAX Code Compilers/Emitters
●   Generated JavaScript
    –   Use other languages to generate JavaScript
    –   Provide J...
AJAX Considerations
●   JavaScript skills are required / learning curves
●   Knowledge of HTML, CSS, and DOM are necessary...
Demo




       Get Rich Now! Selecting A Rich Client Technology   18
XUL




Get Rich Now! Selecting A Rich Client Technology   19
XUL
●   eXtensible User-interface Language
●   Build GUI declartively using XML
     –   Specifies screen element layout
 ...
XUL On Mozilla
●   Extension of Standard Web Technologies
     –   Uses JavaScript, CSS, DOM, and XML
     –   Native look...
Taking A Look
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-...
XUL: Other Family Members
●   Java
    – JAXX: compiled into Swing
    – SwiXml: compiled / Applet runtime
    – Thinlet: ...
XUL Considerations
●   No standard XUL implementations / risk vendor lockin
●   Requires learning new XML language constru...
Flash
Rich Client Platforms




   Get Rich Now! Selecting A Rich Client Technology   25
Flash
●   Vector Multimedia Runtime
     –   Produced by Adobe (obtained from Macromedia)
     –   Compressed small vector...
Flash Rich Client Platforms




           Get Rich Now! Selecting A Rich Client Technology   27
OpenLaszlo
●   Open source project from Laszlo Systems
●   Generates Flash binaries
●   New version generates AJAX
●   Las...
OpenLaszlo Tools
●   Open Laszlo Framework
    –   Full SDK (written in Java)
    –   Runtime compilation of LZX into
    ...
Laszlo Considerations
●   Leverage knowledge of JavaScript
●   Entire technology stack is open source / free
●   Excellent...
Introducing Flex
●   Adobe Flex from Adobe System Software
●   Commercial Platform
    –   SDK (only tool free)
    –   Fl...
Flex Tools
●   Flex Framework
    –   Compile-ahead model – then deploy
    –   MXML/ActionScript Compilation
         ●  ...
Flex Considerations
●   Easy to get started with SDK
●   Extensive documentation/ tutorials / training
●   Leverage of Ado...
Demo




       Get Rich Now! Selecting A Rich Client Technology   34
Other Rich Client Options




    Get Rich Now! Selecting A Rich Client Technology   35
Eclipse RCP
●   Based on Eclipse IDE
●   Desktop Application Framework
●   Java-Based Plugin Model
●   Built-In Updater
● ...
Eclipse Considerations
●   Runs on all popular OS's
●   Great IDE support
●   Large mindshare and community support
●   Ha...
NetBeans Platform
●   Based on NetBeans IDE
●   Desktop Application Framework
●   Java-based Plugin Model
●   GUI Uses Sta...
NetBeans Considerations
●   Uses standard Java
●   Great IDE Support
●   Leverage knowledge of Swing
●   Simple applicatio...
Conclusion




Get Rich Now! Selecting A Rich Client Technology   40
Summary
●   Support for web-based rich clients is growing fast and
    there are plenty of tools available.
●   Select a t...
Resources
●   AJAX
     –   Rico - http://openrico.org/
     –   Dojo - http://dojotoolkit.org/
     –   Yahoo - http://de...
Upcoming SlideShare
Loading in...5
×

Get Rich Now! Selecting A Rich Client Technology

751

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
751
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Get Rich Now! Selecting A Rich Client Technology"

  1. 1. Get Rich Now! Selecting A Rich Client Technology Vladimir Vivien vmatters@gmail.com
  2. 2. Objective Provide an overview of emerging Rich Client technology options that are available. Get Rich Now! Selecting A Rich Client Technology 2
  3. 3. Agenda ● Introducing the Rich Client ● The AJAX Options ● Mozilla's XUL ● Flash Platforms: OpenLaszlo & Adobe Flex ● Other Rich Clients Options ● Summary ● Resources ● Q/A Get Rich Now! Selecting A Rich Client Technology 3
  4. 4. The Rich Client Movement Get Rich Now! Selecting A Rich Client Technology 4
  5. 5. By 2010, 30% of new projects will be based on rich internet clients and 80% of those will be AJAX-driven - Gartner Research Group (2006) Get Rich Now! Selecting A Rich Client Technology 5
  6. 6. What Is A Rich Client? ● To answer, we must look at client/server architecture ● Traditional Client/Server Model – Provides a rich set of GUI components – A granular processing of local event cycles – Seamless connection to back-end data source – Large binaries installed on each client desktop – No middle tier server for business components – Little (or no) business component re-use – Costly and difficult update/deployment cycles – Proprietary and little standards Get Rich Now! Selecting A Rich Client Technology 6
  7. 7. The Rich Client Proposition ● Evolution of Client/Server ● A Multi-tiered Architecture – Highly productivity and interactivity – Rich set of GUI components – Granular processing local event cycles – Seamless connection to middle tier service layer – Reusable middleware business components – Zero (or little) deployment / update costs – GUI layout, data binding, and validation services Get Rich Now! Selecting A Rich Client Technology 7
  8. 8. Rich Client Technology Tiers ● Highly decoupled technology tiers ● View tier only handles GUI concerns – Component event cycles – Data binding and data validation ● Middle / Business Tier – Adopt a service architecture – Expose a well-defined service points – Use standards including Xml-based SOAP / REST – Decouple service points from client technology Get Rich Now! Selecting A Rich Client Technology 8
  9. 9. Rich Client Technology Spectrum ● Browser-based thin clients – Traditional web-based apps, Ajax-based apps, and Mozilla's XUL ● Browser-hosted (Plug-in) – Java Applets and Flash-based ● Browser-Deployed – Java WebStart ● Stand-Alone Desktop-hosted Get Rich Now! Selecting A Rich Client Technology 9
  10. 10. AJAX Get Rich Now! Selecting A Rich Client Technology 10
  11. 11. AJAX ● Asynchronous JavaScript And XML (AKA DHTML) ● Pattern for Web-Based Development – Use standards: HTML, JavaScript, XML, CSS, DOM – Asynchronous requests through XMLHttpRequest ● Browser-Based Technology – Runs on modern browsers: Firefox, Opera, IE, Safari – Application rendered within web browser – Supports for data-binding – Zero-Install / Zero-Update costs on client device – Security constraints – no access to local storage Get Rich Now! Selecting A Rich Client Technology 11
  12. 12. AJAX's XMLHttpRequest ● Requests are routed using XHR ● Register listener for response ● May be synch'd or asynch'd Get Rich Now! Selecting A Rich Client Technology 12
  13. 13. Taking A Look <script> function sayHello() { var label = document.getElementById("label"); label.style.backgroundColor = "red"; msg = "Hello script”; var name = document.getElementById("name"); request = new XMLHttpRequest(); request.open(“GET”, “some/url/page.htm?msg=”+msg , true); request.onreadystatechange=function(){ if(request.readyState==4){ label.innerHTML = request.responseText; } }; } </script> Get Rich Now! Selecting A Rich Client Technology 13
  14. 14. Adopting AJAX ● AJAX space is crowded ● Several adoption strategies – Homegrown – write your own JavaScript solution – Functional abstraction frameworks ● Abtracts browser events, data-binding, and browser implementation differences – Widget frameworks ● Rich GUI components, windowing, and animations – Server-side frameworks ● Ajax Code generated at runtime and push to client – Client- and server-side frameworks Get Rich Now! Selecting A Rich Client Technology 14
  15. 15. AJAX Frameworks ● Popular Open Source Frameworks – Prototype, Scriptaculous, Rico, Dojo ● Provides abstractions, widgets, animations ● Great place to start exploring AJAX – Yahoo API: Mapping, searching, YUI widgets – Google API:Mapping, searching, calendering, Google Web Toolkit, and data processing through Google data – DRW: JavaScript data-remoting API for Java – Zimbra: Up and coming, great component model – And much more ... Get Rich Now! Selecting A Rich Client Technology 15
  16. 16. AJAX Code Compilers/Emitters ● Generated JavaScript – Use other languages to generate JavaScript – Provide JavaScript abstraction for windowing, widgets, animation, data-remoting and event handling. ● Frameworks – Echo2: Server-side Java – Google Web Toolkit: Compiles Java into JavaScript – Java Server Faces: Server-side Java – OpenLaszlo Legals (featured): Tag-based XML language Get Rich Now! Selecting A Rich Client Technology 16
  17. 17. AJAX Considerations ● JavaScript skills are required / learning curves ● Knowledge of HTML, CSS, and DOM are necessary. ● Start simple / start small (try Prototype / Open Rico) ● No standard component models / risk of lock-in ● Debugging may be an issue ● Separate code maintenance / management required ● Both open source and commercial options available ● IDE support non-existent for most open source options ● Rich set of visual web services: – Mapping, calendaring, advertisement, video, content, etc ● Excellent platform for composite applications (mashups) Get Rich Now! Selecting A Rich Client Technology 17
  18. 18. Demo Get Rich Now! Selecting A Rich Client Technology 18
  19. 19. XUL Get Rich Now! Selecting A Rich Client Technology 19
  20. 20. XUL ● eXtensible User-interface Language ● Build GUI declartively using XML – Specifies screen element layout – Style through CSS – Provides scripting language – Facilitates data binding – Abstraction of event management ● Compiled XML – Compiled into executable for a runtime engine – Runs as stand-alone or hosted in a browser ● Diverse Family of Runtime Environments – Mozilla Browser, Flash, Java, and MS.Net. Get Rich Now! Selecting A Rich Client Technology 20
  21. 21. XUL On Mozilla ● Extension of Standard Web Technologies – Uses JavaScript, CSS, DOM, and XML – Native look-and-feel components: Menus, popup menus, lists, trees, grids, panels and tabs. ● ● Proven – Firefox and Thunderbird are XUL applications ● Support Browser-Based Deployment – XUL files downloaded and rendered within browser – Zero-Install / Zero-Update costs ● Support Stand-Alone Deployment – XULRunner runtime tools – Installation and upgrade management Get Rich Now! Selecting A Rich Client Technology 21
  22. 22. Taking A Look <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <?xml-stylesheet href="xul.css" type="text/css"/?> <window title="Client Management" onload="resetScreen()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript" src="../js-lib/utils.js"></script> <groupbox> <hbox> <button id="saveClient" label="Save"/> <button id="newClient" label="New Client"/> </hbox> </groupbox> </window> Get Rich Now! Selecting A Rich Client Technology 22
  23. 23. XUL: Other Family Members ● Java – JAXX: compiled into Swing – SwiXml: compiled / Applet runtime – Thinlet: Applet runtime – Canoo's ULC XML: Applet runtime ● MS XAML – .Net Windows Forms ● Flash (featured) – Flex – OpenLaszlo Get Rich Now! Selecting A Rich Client Technology 23
  24. 24. XUL Considerations ● No standard XUL implementations / risk vendor lockin ● Requires learning new XML language constructs ● Documentation maybe an issue for non-commercial offerings ● Minimal open source IDE support ● Select XUL platform closer to targeted runtime ● Mozilla XUL – Leverage knowledge of web technologies – Plug-in architecture for feature scaling – Skinable look-n-feel – Runtime available for several OS's (Windows, Linux, Mac) – More features in Firefox = more features for your apps Get Rich Now! Selecting A Rich Client Technology 24
  25. 25. Flash Rich Client Platforms Get Rich Now! Selecting A Rich Client Technology 25
  26. 26. Flash ● Vector Multimedia Runtime – Produced by Adobe (obtained from Macromedia) – Compressed small vector file format (swf) – From time-based movie paradigm to desktop app model – Support for multimedia assets and animated components ● Flash-Based Rich Applications – Desktop-like GUI with discrete component event cycles – Browser-hosted: Zero-Install / Zero-Update costs – Browser plug in with large install base (97%) – Ability for stand-alone deployment (via Flash Player) – Abstraction of event handling, animation, and data services – Rich visual components: trees, menus, sliders, grids, etc Get Rich Now! Selecting A Rich Client Technology 26
  27. 27. Flash Rich Client Platforms Get Rich Now! Selecting A Rich Client Technology 27
  28. 28. OpenLaszlo ● Open source project from Laszlo Systems ● Generates Flash binaries ● New version generates AJAX ● Laszlo Platform – Cinematic GUI widgets – OO-based declarative XML language: LZX – Scripted with ECMAScript (standard JavaScript) – Customizable controls: data grid, tree, menus, tabs – Web-based runtime and admin tools Get Rich Now! Selecting A Rich Client Technology 28
  29. 29. OpenLaszlo Tools ● Open Laszlo Framework – Full SDK (written in Java) – Runtime compilation of LZX into ● Flash binaries (version 7, 8, and 9) ● AJAX / DHTML files ● Scalable Vector Graphics (SVG, in early phase) ● Plans for others ● Laszlo Services – Just-in-time compilation via Laszlo Servlet – Data Services: caching, optimization, data remoting – Inherent support of SOAP, XML-RPC, JavaRPC – Built-in security service Get Rich Now! Selecting A Rich Client Technology 29
  30. 30. Laszlo Considerations ● Leverage knowledge of JavaScript ● Entire technology stack is open source / free ● Excellent documentation / tutorials / training available ● Laszlo Legals targets multiple runtime engines ● Provides comparable features as Flex for free ● Default GUI components not crisp / dated look ● Extensible object-oriented API and components ● No Standard CSS model ● Slow, but growing adoption ● No third party component market place ● Not standard / risk of vendor lockin Get Rich Now! Selecting A Rich Client Technology 30
  31. 31. Introducing Flex ● Adobe Flex from Adobe System Software ● Commercial Platform – SDK (only tool free) – Flex Builder IDE (Eclipse-based visual tool) – Flex Charting – Flex Data Services ● Flex Platform – MXML: XML-based language for GUI layout – Scripted with full OO ActionScript (ECMAScript) – Extensible components: data grid, tree, menus, tabs – Implementation of CSS for GUI styling Get Rich Now! Selecting A Rich Client Technology 31
  32. 32. Flex Tools ● Flex Framework – Compile-ahead model – then deploy – MXML/ActionScript Compilation ● SWF binaries only ● ActionScript 3 compiled to native code at runtime ● Data Services – RCP / WebService proxies – Data synchronization – Messaging for ESB integration – Just-in-time compilation through URL requests Get Rich Now! Selecting A Rich Client Technology 32
  33. 33. Flex Considerations ● Easy to get started with SDK ● Extensive documentation/ tutorials / training ● Leverage of Adobe and Macromedia mindshare ● Support for enterprise environment ● MXML is a simpler abstraction of GUI model ● GUI components are nice and modern ● Yahoo Map Flex component available ● Entire technology stack is not free (only SDK) ● Data Service may be costly ● Targets only Flash runtime environments Get Rich Now! Selecting A Rich Client Technology 33
  34. 34. Demo Get Rich Now! Selecting A Rich Client Technology 34
  35. 35. Other Rich Client Options Get Rich Now! Selecting A Rich Client Technology 35
  36. 36. Eclipse RCP ● Based on Eclipse IDE ● Desktop Application Framework ● Java-Based Plugin Model ● Built-In Updater ● GUI Based on Non-Standard SWT ● Uses Native Widgets ● Well-Designed Component Model ● Extended Event Model Get Rich Now! Selecting A Rich Client Technology 36
  37. 37. Eclipse Considerations ● Runs on all popular OS's ● Great IDE support ● Large mindshare and community support ● Has support from numerous commercial and open source backers ● SWT is not standard and can present moderate learning curve ● GUI component model vastly different from standard Swing ● Expected native widget behaviors may differ Get Rich Now! Selecting A Rich Client Technology 37
  38. 38. NetBeans Platform ● Based on NetBeans IDE ● Desktop Application Framework ● Java-based Plugin Model ● GUI Uses Standard Swing ● Built-in update mechanism Get Rich Now! Selecting A Rich Client Technology 38
  39. 39. NetBeans Considerations ● Uses standard Java ● Great IDE Support ● Leverage knowledge of Swing ● Simple application component framework ● Increasing popularity and acceptance ● Support Java Web Start Get Rich Now! Selecting A Rich Client Technology 39
  40. 40. Conclusion Get Rich Now! Selecting A Rich Client Technology 40
  41. 41. Summary ● Support for web-based rich clients is growing fast and there are plenty of tools available. ● Select a technology that best target your environment. ● Only implement rich client where necessary. If site is text driven, then use HTML, if form or requires interactivity, then consider rich client solutions. ● AJAX-based solutions can target the largest user base since only a browser is required. ● Flash solutions are gaining popularity but should be tested first before adoption. ● While open source options are plenty, also consider your commercial options if applicable. Get Rich Now! Selecting A Rich Client Technology 41
  42. 42. Resources ● AJAX – Rico - http://openrico.org/ – Dojo - http://dojotoolkit.org/ – Yahoo - http://developer.yahoo.com/ – Google - http://code.google.com/ ● XUL - http://developer.mozilla.org/ ● OpenLaszlo - http://openloaszlo.org ● Adobe Flex - http://www.adobe.com/products/flex/ ● Eclipse - http://www.eclipse.org/rcp/ ● NetBeans Platform - http://www.netbeans.org/products/platform/ ● Vladimir Vivien Blog - http://vladimirvivien.com/blogs/ot/ Get Rich Now! Selecting A Rich Client Technology 42
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×