Rich Web Applications in Server-side Java without. Plug-ins or JavaScript

Transcription

1 Rich Web Applications in Server-side Java without twitter: Plug-ins or JavaScript Joonas Lehtinen, PhD Vaadin Ltd - CEO joonas@vaadin.com

2 ?

3

4 Vaadin is a UI framework for desktop-like web apps

5 Vaadin is a UI framework for desktop-like web apps

6 New configs, taglibs and syntax!?! No! JavaScript, DOM, Applet, plugins? This is Java. {Nothing else.

7 java html

8 1998 healthcare portal, 100 kloc of perl,..

9 web 1.0, netscape, ie5, ie6,...

10 thinking of object oriented design, desktop, Java, U and I...

11 desktop programming paradigm for web!

12 found millstone ajax goolge web toolkit

13 re-released as 2009

14 Vaadin is now 21 months young and 10 years old

15 Apache License

16 Contents Server-side RIA What is it? Pros & cons? Discussion Vaadin Big picture, Extending, Getting started In practice Coding a Vaadin application step-by-step

17 Server-side RIA

18 ? Rich Internet Application

19 application that makes developers rich

20 if they bill by hour

21 Architecture

22 Web 1.0 Client 5 Server DOM HTML Page over HttpResponse View 4 Model 3 Parameters over HttpRequest 1 Controller 2 DB

23 client-side ria fat client

24 Client-side RIA Client View 5 4 Requested data to view as XML / JSON Server DOM 1 Model 3 Controller Changes to model encoded as parameters 2 DB

25 challenge web is not easy

26 different features in different browsers

27 different performance in different browsers

28 different bugs in different browsers

29 Google Web Toolkit

30 Subset of java.lang, java.util IE6 Java to IE7 Widgetset JavaScript Compiler Firefox Your Application UI Safari

31 simpler Java only forget the web

32 cost-effective stop debugging JavaScript spaghetti

33 modular extensible

34 Building wonderful apps doesn t require writing fat web clients.

35 server-side ria thin client

36 Server-side RIA Client Server DOM 9 1 TerminalAdapter 8 HTML Page over HttpResponse Automated by the RIA framework Parameters over HttpRequest 2 TerminalAdapter 7 3 View Controller Model DB

37 Server-side RIA Client Server DOM TerminalAdapter HTML Page over HttpResponse Automated by the RIA framework Handled by the framework Parameters over HttpRequest 2 TerminalAdapter 7 3 View Controller Model DB

38 the benefits of Java Java simpler forget the web cost-effective no JavaScript debugging modular extensible

39 even simpler forget the client-side synchronous server resources

40 more flexible all Java tools and libraries any JVM language

41 more flexible all Java tools and libraries any JVM language Scala Clojure Groovy

42 more secure code stays in server less web services

43 not as scalable UI state is stored in the server memory

44 Measured active concurrent users per server for a ticketing app * Amazon EC2-large; Ajax requests / minute peak; limited by storage layer

45 no offline mode server is always required

46 #1 benefit development is really fast

47 Seeing is believing National Geographic Channel 2010

48 What we can do in 15 minutes?

49

50

51 Vaadin Framework

52 1 Great UI Components

53

54 2 Combined power of Server-side RIA Google Web Toolkit

55 Vaadin UI component architecture UI Component Button, Table, Tree,... Server-side data Full Java API HTTP(S) Widget Client-side peer for the component Runs on JavaScript Java Java Compiled with JDK Google Web Toolkit

56 Creating new UI components is really easy

57

58 Implement two classes Server-side Client-side UI Component Define API Receive client events Send UI updates back Automatic Widget Render to DOM Collect user events

59

60

61

62

63

64

65

66

67 3 First class Java citizen

68 Servlet Portlet App Engine

69 Eclipse Maven Netbeans Spring Roo

70 getting started

71

72 brought to you by Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: About Vaadin Creating An Application Components Layout Components Themes Data Binding and more... Getting Started with Vaadin By Marko Grönroos ABOUT VAADIN Vaadin is a server-side Ajax web application development framework that allows you to build web applications just like with traditional desktop frameworks, such as AWT or Swing. An application is built from user interface components contained hierarchically in layout components. In the server-driven model, the application code runs on a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server communications and any client-side technologies, such as HTML and JavaScript, are invisible to the developer. As the client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache License 2.0. Web Browser Client-Side Engine Java Web Server Vaadin UI Components Figure 1: Vaadin Client-Server Architecture If the built-in selection of components is not enough, you can develop new components with the Google Web Toolkit (GWT) in Java. CREATING AN APPLICATION Your Java Application Web Service EJB DB the Vaadin framework needs to inherit Web Browser Client-Side Engine Java Servlet Application Class User Application Figure 2: Architecture for Vaadin Applications Hot Tip AJAX Requests UI Component Inherits Events Changes Event Listener Servlet Container Data Model Data Binding Database Default Theme Inherits Application Themes You can get a reference to the application object from any component attached to the application with Event Listeners In the event-driven model, user interaction with user interface components triggers server-side events, which you can handle with event listeners. In the example below, we handle click events for a button with an anonymous class: Application Resources External Resources File Resources Vaadin 6.4 Edition

73 Forums with 1500 msgs/m sits 102,776 Ask the [really active, world wide] Community

74 PROD CTIVI

75

76 persistence setup --provider HIBERNATE --database HYPERSONIC_IN_MEMORY entity --class ~.domain.topping field string --fieldname name --notnull entity --class ~.domain.pizza field number --fieldname price --type java.lang.float field set --fieldname toppings --type ~.domain.topping

77

78

79 vaadin setup --applicationpackage ~.web --basename PizzaShop --themename pizza --usejpacontainer false vaadin generate all --package ~.web.ui --visuallycomposable true

80

81

82

83

84

85 field string --class ~.domain.pizza --notnull --fieldname name --sizemin 3

86

87 Questions Comments m o c. n i d a a joonas s a n o o j / m o c. n vaadi n e in t h le s a n o jo : r twitte