web 2.0 frameworks web 2.0 frameworks and toolkits and toolkits

64
1 Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits Sang Shin Sang Shin Sun Microsystems, Inc. Sun Microsystems, Inc. [email protected] [email protected] www.javapassion.com www.javapassion.com 1

Post on 12-Sep-2014

1.761 views

Category:

Documents


5 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

1

Web 2.0 Frameworks Web 2.0 Frameworks and Toolkitsand Toolkits

Sang ShinSang ShinSun Microsystems, Inc.Sun Microsystems, [email protected]@sun.comwww.javapassion.comwww.javapassion.com

1

Page 2: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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)

Page 3: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Client SideClient SideJavaScript LibrariesJavaScript Libraries(Examples: Dojo Toolkit,(Examples: Dojo Toolkit,Ext JS)Ext JS)

Page 4: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

4

Client Side JavaScript Libraries

JavaScript,DOM Utilities

HTMP, JSP Pages, JavaScript Event Handlers

UI Widgets &Components

Remoting Abstraction Layer

XMLHttpRequest iFrame

Page 5: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 6: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 7: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 8: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 9: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 10: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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/

Page 11: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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/

Page 12: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

12

Demo: Running VariousDemo: Running VariousClient Side JavaScript Toolkit Client Side JavaScript Toolkit

DemosDemos

http://www.javapassion.com/hanhttp://www.javapassion.com/handsonlabs/ajaxframeworks/dsonlabs/ajaxframeworks/

Page 13: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Dojo ToolkitDojo Toolkit

Page 14: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

14

Dojo toolkit is made of a set of layered libraries

Page 15: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 16: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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>

Page 17: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

17

Demo: Building and Running Demo: Building and Running Dojo Toolkit Applications Dojo Toolkit Applications

http://www.javapassion.com/hanhttp://www.javapassion.com/handsonlabs/4260_ajaxdojointro.zipdsonlabs/4260_ajaxdojointro.zip

Page 18: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 19: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

RMI-like Remoting RMI-like Remoting via Proxyvia Proxy(Example: DWR)(Example: DWR)

Page 20: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

20

RMI-like Remoting via Proxy

HTTP Get/Post

JavaScript RMI like call Java Method

Proxy Skeleton

Frameworkruntime

RemoteAbstraction Layer

XMLHttpRequest iFrame

Page 21: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 22: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

22

How DWR Works

Page 23: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 24: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 25: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

25

Demo: Building and running Demo: Building and running DWR ApplicationDWR Application

http://www.javapassion.com/hanhttp://www.javapassion.com/handsonlabs/4265_ajaxdwrintro.zipdsonlabs/4265_ajaxdwrintro.zip

Page 26: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 27: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Integration Technology:Integration Technology:jMakijMaki

Page 28: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 29: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 30: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 31: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

31

Benefits of using jMaki

Page 32: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

32

Demo: Building and running Demo: Building and running jMaki ApplicationjMaki Application

http://www.javapassion.com/handsonhttp://www.javapassion.com/handsonlabs/4270_ajaxjmakiintro.ziplabs/4270_ajaxjmakiintro.zip

http://www.javapassion.com/handsonhttp://www.javapassion.com/handsonlabs/4271_ajaxjmakimashup.ziplabs/4271_ajaxjmakimashup.zip

Page 33: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 34: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Java Code To Java Code To JavaScript/HTMLJavaScript/HTMLTranslator: GWTTranslator: GWT

Page 35: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 36: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 37: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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.

Page 38: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 39: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 40: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

40

Demo: Building and running Demo: Building and running GWT ApplicationsGWT Applications

http://www.javapassion.com/hanhttp://www.javapassion.com/handsonlabs/4275_ajaxgwtintro.zipdsonlabs/4275_ajaxgwtintro.zip

Page 41: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 42: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 43: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

AJAX-EnabledAJAX-EnabledJSF ComponentsJSF Components

Page 44: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 45: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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/

Page 46: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Dynamic FacesDynamic Faces(DynaFaces)(DynaFaces)

Page 47: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

DynaFaces — Usage Patterns

• Page Author> Use AJAX enabled components> 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

Increasing Complexity

Increasing Complexity

Page 48: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Views and Partial Views

Page 49: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Views and Partial Views

Page 50: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

AJAX, without full page refresh.

1. Click something in here

2. See update here

Action in one zone

causes reaction in another zone

Page 51: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

51

Demo: Building and running Demo: Building and running DynaFaces ApplicationDynaFaces Application

http://www.javapassion.com/hanhttp://www.javapassion.com/handsonlabs/4144_jsfdynafaces.zipdsonlabs/4144_jsfdynafaces.zip

Page 52: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Building Portlets withBuilding Portlets withAjax BehaviorAjax Behavior

Page 53: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 54: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

54

Demo: Building and running Demo: Building and running Porlet Application with Ajax Porlet Application with Ajax

behaviorbehavior

http://www.javapassion.com/hanhttp://www.javapassion.com/handsonlabs/4294_ajaxportlet.zipdsonlabs/4294_ajaxportlet.zip

Page 55: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 56: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

Web Application Web Application FrameworksFrameworkswith AJAX Extensionwith AJAX Extension

Page 57: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 58: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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/

Page 59: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

59

Demo: Building and running Demo: Building and running Ajax enabled Echo2 Ajax enabled Echo2

ApplicationApplication

http://www.javapassion.com/hanhttp://www.javapassion.com/handsonlabs/4282_ajaxecho2.zipdsonlabs/4282_ajaxecho2.zip

Page 60: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

So... What Should I Use?So... What Should I Use?

Page 61: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 62: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 63: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

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

Page 64: Web 2.0 Frameworks Web 2.0 Frameworks and Toolkits and Toolkits

64

Ajax Frameworks Ajax Frameworks and Toolkitsand ToolkitsSang ShinSang ShinJava Technology EvangelistJava Technology EvangelistSun Microsystems, Inc.Sun Microsystems, Inc.

64