Simplify Web Development using JWt
Upcoming SlideShare
Loading in...5
×
 

Simplify Web Development using JWt

on

  • 1,578 views

 

Statistics

Views

Total Views
1,578
Views on SlideShare
1,577
Embed Views
1

Actions

Likes
0
Downloads
10
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Simplify Web Development using JWt Simplify Web Development using JWt Presentation Transcript

  • Simplify Web Development using JWt Koen Deforche February 7, 2010
  • JWt in a nutshell JWt takes away the pain of web application development 2 of 28
  • JWt in a nutshell JWt takes away the pain of web application development • Programming model resembles Swing (stateful) ◦ Component-based (widgets) 2 of 28
  • 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 2 of 28
  • 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 2 of 28
  • 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
  • Two approaches to web development Web development: two diverging directions: UI rendered @ server UI rendered @ client 3 of 28
  • Two approaches to web development Web development: two diverging directions: UI rendered @ server UI rendered @ client • Multi-page • Single-page 3 of 28
  • Two approaches to web development Web development: two diverging directions: UI rendered @ server UI rendered @ client • Multi-page • Single-page • Server-side frameworks • JavaScript (DHTML) 3 of 28
  • Two approaches to web development Web development: two diverging directions: UI rendered @ server UI rendered @ client • Multi-page • Single-page • Server-side frameworks • JavaScript (DHTML) • Page-based MVC • Widget-based MVC 3 of 28
  • Two approaches to web development Web development: two diverging directions: UI rendered @ server UI rendered @ client • Multi-page • Single-page • Server-side frameworks • JavaScript (DHTML) • Page-based MVC • Widget-based MVC • RESTful (clean) URLs • Backend provides RESTful services/RPC 3 of 28
  • Two approaches to web development Web development: two diverging directions: UI rendered @ server UI rendered @ client • Multi-page • Single-page • Server-side frameworks • JavaScript (DHTML) • Page-based MVC • Widget-based MVC • RESTful (clean) URLs • Backend provides RESTful • AJAX for enhancements, services/RPC effects 3 of 28
  • Two approaches to web development Web development: two diverging directions: UI rendered @ server UI rendered @ client • Multi-page • Single-page • Server-side frameworks • JavaScript (DHTML) • Page-based MVC • Widget-based MVC • RESTful (clean) URLs • Backend provides RESTful • AJAX for enhancements, services/RPC effects • e.g. PHP, Django, or Ruby • e.g. ExtJS, Capuccino, GWT, on Rails + jQuery or Dojo 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) 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: RPC: 6 of 28
  • Client-side rendering: REST or RPC ? REST: • Define services for simple (low-level) operations RPC: • Define services for handling particular events 6 of 28
  • Client-side rendering: REST or RPC ? REST: • Define services for simple (low-level) operations • Services independent of application complexity and state RPC: • Define services for handling particular events • Services depends on application complexity and state 6 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!) 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
  • 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
  • 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 8 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 8 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
  • Example: hello world 9 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
  • Example: hello world 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 on WRegExpValidator 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 28 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) 28 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, ... 28 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