Simplify Web Development using JWt

Simplify Web Development using JWt

Koen Deforche

February 7, 2010

JWt in a nutshell

JWt takes away the pain of web application development

• Programming model resembles Swing (stateful)◦ Component-based (widgets)

• At the same time:◦ Interactive single page applications (AJAX)◦ Accessible multi page applications (plain HTML)◦ Using progressive enhancement

• Deployed as Java Servlet

First release (3.0.0), September ’09.Now: 3.1.0

2 of 28

JWt in a nutshell






2 of 28

JWt in a nutshell






2 of 28

JWt in a nutshell






2 of 28

JWt in a nutshell






2 of 28

Two approaches to web development

Web development: two diverging directions:

UI rendered @ server

• Multi-page

• Server-side frameworks

• Page-based MVC

• RESTful (clean) URLs

• AJAX for enhancements,effects

• e.g. PHP, Django, or Ruby

on Rails + jQuery or Dojo

UI rendered @ client

• Single-page

• JavaScript (DHTML)

• Widget-based MVC

• Backend provides RESTfulservices/RPC

• e.g. ExtJS, Capuccino, GWT,

Vaadin

3 of 28




• Multi-page


• Page-based MVC






• Single-page





Vaadin

3 of 28




• Multi-page


• Page-based MVC






• Single-page





Vaadin

3 of 28




• Multi-page


• Page-based MVC






• Single-page





Vaadin

3 of 28




• Multi-page


• Page-based MVC






• Single-page





Vaadin

3 of 28




• Multi-page


• Page-based MVC






• Single-page





Vaadin

3 of 28




• Multi-page


• Page-based MVC






• Single-page





Vaadin

3 of 28

Server-side rendering

Benefits:

• Does not rely on JavaScript◦ URLs can be indexed by search bots◦ Accessible◦ JavaScript for enhancements

• Data sources are not exposed

• Fast load time

4 of 28

Client-side rendering

Benefits:

• Highly interactive applications◦ taking the server out of the loop: 130 ms → 0 ms

• Widget based MVC → reusable code

• Long running interactivity (e.g. chat functionality)

Drawbacks:

• Manage the communication (chosing between REST or RPC).

• All the head-aches of client-server programming

• Slow load time◦ JavaScript download + parse

5 of 28

Client-side rendering

Benefits:

• Highly interactive applications◦ taking the server out of the loop: 130 ms → 0 ms

• Widget based MVC → reusable code

• Long running interactivity (e.g. chat functionality)

Drawbacks:

• Manage the communication (chosing between REST or RPC).

• All the head-aches of client-server programming

• Slow load time◦ JavaScript download + parse

5 of 28

Client-side rendering: REST or RPC ?

REST:

• Define services for simple (low-level) operations

• Services independent of application complexity and state

• A single event may cause several RESTful updates (slow!)

• And what about transactions ?

RPC:

• Define services for handling particular events

• Services depends on application complexity and state

• A single event will usually cause only one RPC call (fast!)

6 of 28


REST:





RPC:




6 of 28


REST:





RPC:




6 of 28


REST:





RPC:




6 of 28


REST:





RPC:




6 of 28

A slow web application is a slow application

(it’s usually not the web that is slow)

7 of 28

JWt’s rendering model

• Stateful, widget-based◦ Truly reusable components◦ Separate View and Model anyway you like◦ Signals implement Observable pattern

• Rendered server-side◦ As plain HTML◦ Or as AJAX updates◦ Progressive enhancement

• Internal paths◦ http://glorio.us/app/user/kdf/settings (plain HTML)◦ http://glorio.us/app#/user/kdf/settings (AJAX)

8 of 28





8 of 28





8 of 28

Example: hello world

public class HelloMain extends WtServlet {

public HelloMain() {

getConfiguration().setProgressiveBootstrap(true);

}

@Override

public WApplication createApplication(WEnvironment env) {

return new HelloApplication(env);

}

}

9 of 28


public class HelloMain extends WtServlet {

public HelloMain() {

getConfiguration().setProgressiveBootstrap(true);

}

@Override

public WApplication createApplication(WEnvironment env) {

return new HelloApplication(env);

}

}

9 of 28


public class HelloApplication extends WApplication {

private WLineEdit nameEdit;

private WText greeting;

public HelloApplication(WEnvironment env) {

super(env); setTitle("Hello world");

new WText("Your name, please ? ", getRoot());

nameEdit = new WLineEdit(getRoot());

nameEdit.setFocus();

WPushButton button = new WPushButton("Greet me.", getRoot());

greeting = new WText(getRoot());

button.clicked().addListener(this, new Signal.Listener() {

public void trigger() {

greeting.setText("Hello there, " + nameEdit.getText());

}

});

}

}10 of 28

Hello world: plain HTML

11 of 28

Hello world: AJAX

12 of 28

Hello world: behind the scenes

• Automatic propagation of form values

• XSS mitigation

• smart AJAX RPC handling:◦ automatic propagation of widget changes◦ changes to visible widgets are propagated first◦ changes to hidden widgets in a second request in background

13 of 28

Some selected features

• Signals and listeners

• Layout

• Web graphics API

• Rich widgets

• Hybrid validators

• Security

• Internal paths

14 of 28

Signals and listeners: observer pattern

public class AlarmModel {

public Signal2<Integer, String> fired;

private void fireAlarm() {

fired.trigger(42, "Alarma !!");

}

}

public class AlarmView extends WText {

public AlarmView(AlarmModel model) {

model.fired.addListener(this, new Signal2.Listener<Integer, String>() {

void trigger(Integer code, String distress) {

setText(distress);

}

});

}

}

15 of 28

Signals and listeners: observer pattern

• Automatic connection management◦ Protects against memory leaks◦ Uing java.lang.ref.WeakReference and scopes listeners

implemented by anonymous inner classes.

• Signal: for user code

• EventSignal: signals standard DOM events◦ EventSignal1<WMouseEvent> clicked()◦ EventSignal1<WKeyEvent> keyWentDown()◦ Only clicked() events are propagated in plain HTML

• JSignal: can be emitted from user JavaScript code

16 of 28

Layout

JWt offers two options:

• CSS◦ Well-suited for public applications (accessible)◦ Web page like user interfaces◦ Limited vertical layout possibilities◦ Use WTemplate to separate layout from logic

• Layout managers◦ Uses JavaScript to fix deficiencies in CSS◦ Application-like user interface◦ WBoxLayout, WGridLayout, WBorderLayout

17 of 28

Web graphics API

JWt provides a painting API with four backends:

• HTML5 <canvas> (JavaScript)

• SVG, rendering inline as application/xhtml+xml

• VML (for IE browsers)

• PNG (using java.awt.Graphics2D)

This is used in the included charting library.

18 of 28

Rich widgets: chart widgets

19 of 28

Rich widgets: WTreeView

20 of 28

Rich widgets: WTabWidget

(polished theme)

(default theme)

21 of 28

Rich widgets: WDatePicker

22 of 28

Rich widgets: WPopupMenu

23 of 28

Rich widgets: WSuggestionPopup

24 of 28

Hybrid validators

Validators with hybrid implementations:

• Client-side: direct feed-back

• Server-side: trusted validation

Custom validators with hybrid implementations: when based onWRegExpValidator

25 of 28

Security

Built-in prevention of most common web vulnerabilities:

• XSS prevention on output (WText)

• not vulnerable to CSRF (no cookies for session tracking)

• application logic (sequencing)

26 of 28

Internal paths

• Internal paths are abstractions of URLs internal to the application.◦ void setInternalPath()◦ Signal<String> internalPathChanged() signal

• They are rendered in two forms:◦ Using path-info (portable, plain HTML sessions)◦ Using a URL fragment (AJAX, single page interfaces)

• WAnchor:◦ presents portable URL◦ catches click to use URL fragment

27 of 28

Conclusion

JWt for web applications:

• A mature library◦ Wt, its C++ sibling has been around for over five years◦ latest version: 3.1.0

• Unique rendering model◦ benefits of client-side rendering (AJAX)◦ benefits of server-side rendering (accessibility)

• Feature complete◦ not only widgets but also graphics API, l10n, validators, ...

More information at http://www.webtoolkit.eu/jwt/

28 of 28

Conclusion






28 of 28

Conclusion






28 of 28

Conclusion






28 of 28

Documents

Simplify Web Development using JWt