Your SlideShare is downloading. ×
0
Web 2.0 Frameworks
and Toolkits

Sang Shin
Sun Microsystems, Inc.
sang.shin@sun.com
www.javapassion.com

                 ...
Types of Web 2.0 Toolkit and
Framework Solutions of Today
•   Clients-side JavaScript Libraries (ex: Dojo toolkit and more...
Client Side
JavaScript Libraries
(Examples: Dojo Toolkit,
Ext JS)
Client Side JavaScript Libraries

       HTMP, JSP Pages, JavaScript Event Handlers


      UI Widgets &
      Components
...
Characteristics of Client Side
JavaScript Libraries
• Server side technology agnostic
  > The server side technology can b...
Technical Reasons for using Client-
side JavaScript Libraries
• Handles remote asynch. communication (remoting)
  > Hides ...
Technical Reasons for using Client-
side JavaScript Libraries
• Provides ready-to-use widgets
  > Tree, Calendar, Textfiel...
Technical Reasons for using Client-
side JavaScript Libraries
• Provides advanced UI features
  > Animation
  > Drag and d...
Business Reasons for using Client-
side JavaScript Libraries
• Proven in the market
  > Generally higher quality than your...
Client-side JavaScript Libraries
• DOJO Toolkit
  >   Most prominent and comprehensive
  >   Gaining a leadership in this ...
Client-side JavaScript Libraries
• Script.aculo.us
  > Built on Prototype
  > Nice set of visual effects and controls
  > ...
Demo: Running Various
Client Side JavaScript Toolkit
           Demos

http://www.javapassion.com/han
   dsonlabs/ajaxfram...
Dojo Toolkit
Dojo toolkit is
made of a set
of layered
libraries




                  14
dojo.io.bind()
var sampleFormNode = document.getElementById("formToSubmit");
dojo.io.bind({
    url: "http://foo.bar.com/s...
dojo.event.connect()

window.onload = function () {
 var link = document.getElementById("mylink");
    // “myHandler” even...
Demo: Building and Running
 Dojo Toolkit Applications
http://www.javapassion.com/han
dsonlabs/4260_ajaxdojointro.zip


   ...
Dojo Demo Scenario
• Build and run “input validation” Ajax application
  using Dojo toolkit's dojo.io.bind()
  > Forward, ...
RMI-like Remoting
via Proxy
(Example: DWR)
RMI-like Remoting via Proxy

       JavaScript RMI like call                   Java Method




                         Pr...
Why DWR?
• What happens if you have several methods in a
  class on the server that you want to invoke from
  the browser?...
How DWR Works




                22
DWR Consists of Two Main Parts
• A DWR-runtime-provided Java Servlet running on
  the server that processes incoming DWR r...
How Does DWR Work?
• DWR generates a matching client-side Javascript
  class from a backend Java class
  > Allows you then...
Demo: Building and running
    DWR Application
http://www.javapassion.com/han
dsonlabs/4265_ajaxdwrintro.zip

            ...
DWR Demo Scenario
• Build and run Chat application
  > Test with 2 browser clients
• Show test feature of DWR
  > http://l...
Integration Technology:
jMaki
Motivations for jMaki
• You want to leverage widgets from existing and
  future AJAX toolkits and frameworks in reusable
 ...
Origins of jMaki?

• ‘j’ is for JavaScript™ technology
• Maki == to wrap in Japanese
• Started as a way of wrapping JavaSc...
jMaki Features
• Widgets from popular toolkits
  > Dojo, Yahoo, Script.aculo.us, Spry, Google
  > Self-contained standards...
Benefits of using jMaki




                          31
Demo: Building and running
    jMaki Application
http://www.javapassion.com/handson
     labs/4270_ajaxjmakiintro.zip

htt...
jMaki Demo Scenario
• Build a simple jMaki application using widgets from
  various sources
  > Using simpler syntax and c...
Java Code To
JavaScript/HTML
Translator: GWT
What is GWT?
• Java software development framework that makes
  writing AJAX applications easy
• Let you develop and debug...
Two Modes of Running GWT App
• Hosted mode
 > Your application is run as Java bytecode within the Java
   Virtual Machine ...
Why Use Java Programming
Language for AJAX Development?
• Static type checking in the Java language boosts
  productivity ...
Why GWT?
• No need to learn/use JavaScript language
  > Leverage Java programming knowledge you already have
• No need to ...
Why GWT?
• Leverage various tools of Java programming language
  for writing/debugging/testing
  > For example, NetBeans o...
Demo: Building and running
   GWT Applications
http://www.javapassion.com/han
dsonlabs/4275_ajaxgwtintro.zip


           ...
Demo: GWTHello
• Build and run GWTHello sample application from
  GWT hands-on lab in
  > Hosted mode (Debug project)
  > ...
GWT Demo Scenario
• Build and run a simple HelloWorld GWT application
  > Write the code in Java programming language
  > ...
AJAX-Enabled
JSF Components
AJAX-enabled JSF Components
• AJAX-enabled JSF components hides all the
  complexity of AJAX programming
  > Page author d...
Open-Source Implementations
• Woodstock AJAX-enabled JSF components (open-
  source)
  > https://woodstock.dev.java.net/in...
Dynamic Faces
(DynaFaces)
DynaFaces — Usage Patterns

      • Page Author
        > Use AJAX enabled components
Increasing Complexity Increasing Com...
Views and Partial Views
Views and Partial Views
DynaFaces Usage Patterns: AjaxZones
• The easiest way to AJAXify
  an existing application
• Demarcate one or more
  AJAX ...
Demo: Building and running
  DynaFaces Application
http://www.javapassion.com/han
dsonlabs/4144_jsfdynafaces.zip

        ...
Building Portlets with
Ajax Behavior
Issues with Current Portlet
Architecture
• No easy way to make asynchronous call
  > same as regular Web application
• The...
Demo: Building and running
Porlet Application with Ajax
         behavior
http://www.javapassion.com/han
 dsonlabs/4294_aj...
Portlets with Ajax Demo Scenario

• Build Portlet that has Ajax behavior
• Show two different windows of the same
  portle...
Web Application
Frameworks
with AJAX Extension
Web Application Framework with
Ajax Extension
• Existing Web Application Frameworks add AJAX
  functionality
  > Minimum o...
“Web App Frameworks with AJAX
Extension” Implementations
• Shale
  > http://struts.apache.org/struts-shale/
• Echo2
  > ht...
Demo: Building and running
   Ajax enabled Echo2
       Application
http://www.javapassion.com/han
 dsonlabs/4282_ajaxecho...
So... What Should I Use?
So What Should I Use?
Assuming You are using Java Tech.
• On the UI side
  > Use AJAX-enabled JSF components whenever poss...
So What Should I Use?
Assuming You are using Java Tech.
• On the business logic side
  > If you already have Java EE busin...
So What Should I Use?
If you want use Scripting Language
as a Main enabler
• Use Ruby on Rails or Phobos or Grails
  >   L...
Ajax Frameworks
and Toolkits
Sang Shin
Java Technology Evangelist
Sun Microsystems, Inc.

                             64
Upcoming SlideShare
Loading in...5
×

Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

1,496

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,496
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits"

  1. 1. Web 2.0 Frameworks and Toolkits Sang Shin Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com 1
  2. 2. Types of Web 2.0 Toolkit and Framework Solutions of Today • Clients-side JavaScript Libraries (ex: Dojo toolkit and more) • RMI-like remoting via proxy (ex: DWR) • Integrator (ex: jMaki) • Java to JavaScript/HTML translator (ex: GWT) • AJAX-enabled JSF components (ex: NetBeans VWP) • Dynamic Faces (DynaFaces) • Portlets and Ajax (ex: JSR 168 portlets) • Web Application Frameworks with AJAX extension (ex: Echo2 or Wicket) 2
  3. 3. Client Side JavaScript Libraries (Examples: Dojo Toolkit, Ext JS)
  4. 4. Client Side JavaScript Libraries HTMP, JSP Pages, JavaScript Event Handlers UI Widgets & Components Remoting Abstraction Layer JavaScript, DOM Utilities XMLHttpRequest iFrame 4
  5. 5. Characteristics of Client Side JavaScript Libraries • Server side technology agnostic > The server side technology can be Java EE, .Net, PHP, Ruby on Rails, etc. • You can use them in combination in a single app > You might want to use widgets and JavaScript utilities from multiple sources 5
  6. 6. Technical Reasons for using Client- side JavaScript Libraries • Handles remote asynch. communication (remoting) > Hides low-level XMLHttpRequest operation • Handles browser incompatibilities > No need to clutter your code with if/else's • Handles graceful degradation > Uses IFrame if the browser does not support XMLHttpRequest • Provides page navigation hooks over Ajax > Back and forward buttons > Bookmarking 6
  7. 7. Technical Reasons for using Client- side JavaScript Libraries • Provides ready-to-use widgets > Tree, Calendar, Textfield, Button, Split panes, Fisheye, etc. • Provides easy-to-use DOM utility > Easier to use than original DOM APIs • Provides useful JavaScript utilities > Example: Table management, Timer, etc • Provides error handling hook > Easier to add error handler • Provides more flexible event handling > DOM node based, Function call based, AOP style 7
  8. 8. Technical Reasons for using Client- side JavaScript Libraries • Provides advanced UI features > Animation > Drag and drop > Fade out and Fade in • Generally encourages OO programming style > Helps you write better JavaScript code 8
  9. 9. Business Reasons for using Client- side JavaScript Libraries • Proven in the market > Generally higher quality than your own • Established developer/user communities > Community keeps improving/adding features > Easy to get help from community forums • Easy to use > It is just a matter of having them in the root directory of your Web application or providing URL location • Tool support > IDE's will support them in time 9
  10. 10. Client-side JavaScript Libraries • DOJO Toolkit > Most prominent and comprehensive > Gaining a leadership in this space > Major industry support (Sun, IBM) > http://dojotoolkit.com/ • Prototype > Used by other toolkit libaries > http://prototype.conio.net/ • Ext JS > Gaining popularity > http://extjs.com/ 10
  11. 11. Client-side JavaScript Libraries • Script.aculo.us > Built on Prototype > Nice set of visual effects and controls > http://script.aculo.us/ • Rico > Built on Prototype > Rich AJAX components and effects > http://openrico.org/ • DHTML Goodies > Various DHTML and AJAX scripts > http://www.dhtmlgoodies.com/ 11
  12. 12. Demo: Running Various Client Side JavaScript Toolkit Demos http://www.javapassion.com/han dsonlabs/ajaxframeworks/ 12
  13. 13. Dojo Toolkit
  14. 14. Dojo toolkit is made of a set of layered libraries 14
  15. 15. dojo.io.bind() var sampleFormNode = document.getElementById("formToSubmit"); dojo.io.bind({ url: "http://foo.bar.com/sampleData.js", load: function(type, evaldObj){ // hide the form when we hear back that it submitted successfully sampleFormNode.style.display = "none"; }, backButton: function(){ // ...and then when the user hits "back", re-show the form sampleFormNode.style.display = ""; }, formNode: sampleFormNode }); source: dojotoolkit.org 15
  16. 16. dojo.event.connect() window.onload = function () { var link = document.getElementById("mylink"); // “myHandler” event handler is registered for the // "onclick" event of “mylink” node. dojo.event.connect(link, "onclick", myHandler); } // Define an event handler named as “myHandler” function myHandler(evt) { alert("myHandler: invoked - this is my named event handler"); } </script> <a href="#" id="mylink">Click Me</a> 16
  17. 17. Demo: Building and Running Dojo Toolkit Applications http://www.javapassion.com/han dsonlabs/4260_ajaxdojointro.zip 17
  18. 18. Dojo Demo Scenario • Build and run “input validation” Ajax application using Dojo toolkit's dojo.io.bind() > Forward, backward capabilities • Build and run “Fisheye application” using dojo.event.connect() > Event model 18
  19. 19. RMI-like Remoting via Proxy (Example: DWR)
  20. 20. RMI-like Remoting via Proxy JavaScript RMI like call Java Method Proxy Skeleton Remote Abstraction Layer Framework runtime HTTP Get/Post XMLHttpRequest iFrame 20
  21. 21. Why DWR? • What happens if you have several methods in a class on the server that you want to invoke from the browser? > Each of these methods need to be addressable via URI whether you are using XMLHttpRequest directory or client- side only toolkit such as Dojo or Prototype > You would have to map parameters and return values to HTML input form parameters and responses yourself • DWR provides a client/server framework that addresses these problems • DWR comes with some JavaScript utility functions 21
  22. 22. How DWR Works 22
  23. 23. DWR Consists of Two Main Parts • A DWR-runtime-provided Java Servlet running on the server that processes incoming DWR requests and sends responses back to the browser > uk.ltd.getahead.dwr.DWRServlet > This servlet delegates the call to the backend class you specify in the dwr.xml configuration file • JavaScript running in the browser that sends requests and can dynamically update the webpage > DWR framework handles XMLHttpRequest handling source: http://getahead.ltd.uk/dwr 23
  24. 24. How Does DWR Work? • DWR generates a matching client-side Javascript class from a backend Java class > Allows you then to write JavaScript code that looks like conventional RPC/RMI like code, which is much more intuitive than writing raw JavaScript code • The generated JavaScript class handles remoting details between the browser and the backend server > Handles asynchronous communication via XMLHttpRequest - Invokes the callback function in the JavaScript > You provide the callback function as additional parameter > DWR converts all the parameters and return values between client side Javascript and backend Java 24
  25. 25. Demo: Building and running DWR Application http://www.javapassion.com/han dsonlabs/4265_ajaxdwrintro.zip 25
  26. 26. DWR Demo Scenario • Build and run Chat application > Test with 2 browser clients • Show test feature of DWR > http://localhost:8084/dwr.examples.chat/dwr • Show Java class and its methods that are exposed > Chat has two methods – getMessages() and addMessage() • Show dwr.xml configuration file > Specifies Chat class for remoting • Show client-side JavaScript code > RMI-like syntax (application-level) > Asynchronous callback 26
  27. 27. Integration Technology: jMaki
  28. 28. Motivations for jMaki • You want to leverage widgets from existing and future AJAX toolkits and frameworks in reusable fashion > Dojo, Scriptaculus, Google Widgets, Yahoo UI Widgets, DHTML Goodies, Many more • However, these widgets use different syntax and different data model > There is a need for a common programming model and common data model for using widgets from multiple AJAX toolkits and frameworks 28
  29. 29. Origins of jMaki? • ‘j’ is for JavaScript™ technology • Maki == to wrap in Japanese • Started as a way of wrapping JavaScript technology functionality > Take widgets from many popular AJAX toolkits and frameworks, and wrap them into a JSP or JSF tag • Project jMaki has evolved to provide more 29
  30. 30. jMaki Features • Widgets from popular toolkits > Dojo, Yahoo, Script.aculo.us, Spry, Google > Self-contained standards-based Component Library • Make JavaScript technology accessible to Java technology, Phobos, PHP and Ruby • Publish and subscribe event model • XmlHttpProxy > Allows access to services not in the web app domain • Integrated Tools support > NetBeans and Eclipse plug-in's • Future Protection > Unified data model for widgets from different toolkits 30
  31. 31. Benefits of using jMaki 31
  32. 32. Demo: Building and running jMaki Application http://www.javapassion.com/handson labs/4270_ajaxjmakiintro.zip http://www.javapassion.com/handson labs/4271_ajaxjmakimashup.zip 32
  33. 33. jMaki Demo Scenario • Build a simple jMaki application using widgets from various sources > Using simpler syntax and consistent data model • Build a Mashup application using jMaki widgets > Leveraging publish/subscribe event model • Build a RSS feed application using jMaki widgets > Leveraging XmlHttpProxy 33
  34. 34. Java Code To JavaScript/HTML Translator: GWT
  35. 35. What is GWT? • Java software development framework that makes writing AJAX applications easy • Let you develop and debug AJAX applications in the Java language using the Java development tools of your choice > NetBeans or Eclipse • Provides Java-to-JavaScript compiler and a special web browser that helps you debug your GWT applications > When you deploy your application to production, the compiler translates your Java application to browser-compliant JavaScript and HTML 35
  36. 36. Two Modes of Running GWT App • Hosted mode > Your application is run as Java bytecode within the Java Virtual Machine (JVM) > You will typically spend most of your development time in hosted mode because running in the JVM means you can take advantage of Java's debugging facilities • Web mode > Your application is run as pure JavaScript and HTML, compiled from your original Java source code with the GWT Java-to-JavaScript compiler > When you deploy your GWT applications to production, you deploy this JavaScript and HTML to your web servers, so end users will only see the web mode version of your application 36
  37. 37. Why Use Java Programming Language for AJAX Development? • Static type checking in the Java language boosts productivity while reducing errors. • Common JavaScript errors (typos, type mismatches) are easily caught at compile time rather than by users at runtime. • Code prompting/completion (through IDE) is useful and widely available • Automated Java refactoring is pretty snazzy these days. • Java-based OO designs are easier to communicate and understand, thus making your AJAX code base more comprehensible with less documentation. 37
  38. 38. Why GWT? • No need to learn/use JavaScript language > Leverage Java programming knowledge you already have • No need to handle browser incompatibilities and quirks > GWT handles them for you > Forward/backward buttons > Browser history • No need to learn/use DOM APIs > Use Java APIs • No need to build commonly used Widgets > Widgets come with GWT 38
  39. 39. Why GWT? • Leverage various tools of Java programming language for writing/debugging/testing > For example, NetBeans or Eclipse • JUnit integration > GWT's direct integration with JUnit lets you unit test both in a debugger and in a browser and you can even unit test asynchronous RPCs • Internationalization > GWT internationalization support provides a variety of techniques to internationalize strings, typed values, and classes 39
  40. 40. Demo: Building and running GWT Applications http://www.javapassion.com/han dsonlabs/4275_ajaxgwtintro.zip 40
  41. 41. Demo: GWTHello • Build and run GWTHello sample application from GWT hands-on lab in > Hosted mode (Debug project) > Web mode • Make a break point in Hosted mode 41
  42. 42. GWT Demo Scenario • Build and run a simple HelloWorld GWT application > Write the code in Java programming language > Run it in both hosted and web mode • Open “KitchenSink” NetBeans GWT project and run > Play around various widgets provided by the GWT > Backward and forward button behavior • Show how to invoke JavaScript code from Java code and vice versa • Show how to associate a CSS style items to a GWT widget 42
  43. 43. AJAX-Enabled JSF Components
  44. 44. AJAX-enabled JSF Components • AJAX-enabled JSF components hides all the complexity of AJAX programming > Page author does not need to know JavaScript > The burden is shifted to component developers • Leverages drag-and-drop Web application development model of JSF through an IDE > You can drag and drop AJAX-enabled JSF components within NetBeans Visual Web Pack (and other JSF-aware IDE's) to build AJAX applications • JSF components are reusable > More AJAX-enabled JSF components are being built by the community 44
  45. 45. Open-Source Implementations • Woodstock AJAX-enabled JSF components (open- source) > https://woodstock.dev.java.net/index.html • ICEfaces > http://www.icefaces.org/main/home/index.jsp • ajax4jsf > Can add AJAX capability to existing applications > https://ajax4jsf.dev.java.net/ 45
  46. 46. Dynamic Faces (DynaFaces)
  47. 47. DynaFaces — Usage Patterns • Page Author > Use AJAX enabled components Increasing Complexity Increasing Complexity > Use AjaxZone tag to AJAXify regions of the page > Use provided JavaScript library to AJAXify page elements and components • Component Author > Use provided JavaScript library in custom components > Write your own JavaScript that talks directly to the HTTP protocol and the XML application defined by DynaFaces
  48. 48. Views and Partial Views
  49. 49. Views and Partial Views
  50. 50. DynaFaces Usage Patterns: AjaxZones • The easiest way to AJAXify an existing application • Demarcate one or more AJAX zones within a page • Zones will refresh via 2. See update here AJAX, without full page refresh. causes reaction in another zone Action in one zone 1. Click something in here
  51. 51. Demo: Building and running DynaFaces Application http://www.javapassion.com/han dsonlabs/4144_jsfdynafaces.zip 51
  52. 52. Building Portlets with Ajax Behavior
  53. 53. Issues with Current Portlet Architecture • No easy way to make asynchronous call > same as regular Web application • The response contains markup for the whole page not just for the target portlet • Will be addressed in JSR 286 53
  54. 54. Demo: Building and running Porlet Application with Ajax behavior http://www.javapassion.com/han dsonlabs/4294_ajaxportlet.zip 54
  55. 55. Portlets with Ajax Demo Scenario • Build Portlet that has Ajax behavior • Show two different windows of the same portlet perform Ajax operations independently from each other 55
  56. 56. Web Application Frameworks with AJAX Extension
  57. 57. Web Application Framework with Ajax Extension • Existing Web Application Frameworks add AJAX functionality > Minimum or no requirement of JavaScript coding • Uses JavaScript client library internally 57
  58. 58. “Web App Frameworks with AJAX Extension” Implementations • Shale > http://struts.apache.org/struts-shale/ • Echo2 > http://www.nextapp.com/platform/echo2/echo/ • Wicket > http://wicket.sourceforge.net/ • Ruby on Rails > http://www.rubyonrails.org/ 58
  59. 59. Demo: Building and running Ajax enabled Echo2 Application http://www.javapassion.com/han dsonlabs/4282_ajaxecho2.zip 59
  60. 60. So... What Should I Use?
  61. 61. So What Should I Use? Assuming You are using Java Tech. • On the UI side > Use AJAX-enabled JSF components whenever possible using an JSF-enabled IDE such as Visual Web Pack of NetBeans > If you are not ready to commit yourself to JSF component solutions yet, use jMaki > If you want to have total control on the client side JavaScript coding, use Dojo toolkit > If you already have Swing apps that you want to expose as AJAX-fied Web apps or if you do not want to deal with JavaScript coding, use GWT 61
  62. 62. So What Should I Use? Assuming You are using Java Tech. • On the business logic side > If you already have Java EE business logic that you want to be exposed as RMI calls on the client with AJAX behavior, use DWR > If you are already using a particular Web application framework for building majority of your web application and the framework has AJAX extension, use it 62
  63. 63. So What Should I Use? If you want use Scripting Language as a Main enabler • Use Ruby on Rails or Phobos or Grails > Leverage agile development of scripting > Leverage the power of Java platform > MVC based > Multiple scripting languages 63
  64. 64. Ajax Frameworks and Toolkits Sang Shin Java Technology Evangelist Sun Microsystems, Inc. 64
  1. A particular slide catching your eye?

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

×