Java Server-side Breakout

Fabian Urban

>> SenchaCon 2011
Fabian Urban
FORTIS

Using Ext JS with a
Java Back-end

© FORTIS IT-SERVICES GMBH

Wednesday, November 2, 11

Fabian Urban

Ext JS / Sencha Touch with a Java
back-end is a perfect combination

 Having a container has many advantages.

 Web applications must as run smoothly as
desktop applications.

 Using better technologies means writing
less error prone code.

 Theoretically I can do everything, and in
practice it is as simple as in theory :-)



Fabian Urban

>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
What is perfect???
application
save runs
time smoothly
write
less
code
Perfect!
performance
optimized
minimize
risk of
writing
error prone easy
code



Fabian Urban

Having a container has many advantages
No need to persist data across requests. Use different scopes.
Better performance:
No need to recreate instances for every request. No unnecessary
database access.

Client 1 Request Session Application
Request A Scoped Beans Scoped Scoped
Beans Beans
Client 1 Request
Request B Scoped Beans

Client 2 Request Session
Request A Scoped Beans Scoped
Beans
Client 2 Request
Request B Scoped Beans



Fabian Urban

If an application is declared to be
final, then it has to be final
Development Server
Application

database=DEV Database
user=foo DEV
password=bar

Production Server

Database
PROD



Fabian Urban

… so we don’t have to update the
configuration before every deployment
Development Server
Application MyDS
database=DEV

DataSource=MyDS
user=foo Database
password=bar
DEV

Production Server

MyDS
database=PROD
user=abc Database
password=def
PROD



Fabian Urban

The less we have to do
the earlier it’s done
Without Connection Pooling (open / close database connection for
each request)

With Connection Pooling



Fabian Urban

Having a container has many advantages
Java Application Server (Development)
DataSource
Application DataSource: MyDs Configuration

No open / close database
connection for each request. Connection Database
Better Database performance
Pooling Dev
(No session overhead).

Java Application Server (Prod)
DataSource
Application DataSource: MyDs Configuration

Deploy application without
spending time on updating Connection Database
login credentials
Pooling Prod



Fabian Urban

Web applications must run as smoothly
as desktop applications
Server-side Rendering

NETWORK SERVER

Client-side Rendering
No rendering is done on the
server side:
less network traffic.
Web applications run
smoothly like desktop
applications.



Fabian Urban

Using better technologies means
writing less error prone code
 JAX-RS: Easy way to map HTTP requests to
a class/method, using annotations.
 Jackson: Easy way to apply JSON
marshalling/unmarshalling. (http://
jackson.codehaus.org/)
 CDI:
 Easy way to fire/observe events
(loosely coupled).
 Easy way to apply interceptors (AOP).
 Easy way to write portable extensions
(code reuse).



Fabian Urban

Using better technologies means:
writing less code
@ApplicationScoped
public class SomeApplicationScopedBean {

private String fooText;

public String getFooText() { return fooText; }

public void setFooText(String fooText) { this.fooText = fooText; }
}
@SessionScoped
public class SomeSessionScopedBean {
@Inject
private SomeApplicationScopedBean someApplicationScopedBean;

We do not want to worry about {doing stuff like bean injection.
public void doSomething()
someApplicationScopedBean someApplicationScopedBean.getFooText();
String fooText = = … // where do I get this from???
Bean injection somethingautomatically when using the @Inject annotation.
// do is done with fooText
}
}
Thanks to CDI, we don‘t waste time writing unnecessary code.



Fabian Urban

Java data transfer object (DTO)
public class UserDto {

private String firstName;
private String lastName;
private Integer age;

public UserDto() {}

// getter and setter
}



Fabian Urban

Marshalling and unmarshalling JSON
data using Jackson is very easy
ObjectMapper objectMapper = new ObjectMapper();
UserDto fabian = new UserDto("Fabian", "Urban", 27);
String json = objectMapper.writeValueAsString(fabian);
> {"firstName":"Fabian","lastName":"Urban","age":27}

UserDto youngFabian = objectMapper.readValue(
"{"firstName":"Fabian", "lastName":"Urban“,
"age":19}", UserDto.class);

youngFabian.getAge();
> 19

OK, that‘s simple … but you do not really want to
worry about writing that … do you?


Fabian Urban

Applying JAX-RS resources can be that
simple
@javax.ws.rs.ApplicationPath(“resources“)
public class UserManagerApp extends javax.ws.rs.core.Application {
}

@Path(“user“)
public class UserResource {

@POST Why spend time on
@Path(“doSomething") writing complicated
@Consumes(MediaType.APPLICATION_JSON) code that does some
@Produces(MediaType.APPLICATION_JSON) routing and JSON
public UserDto doSomething(UserDto user) { marshalling/
// do something unmarshalling if
JAX-RS and Jackson
return user; can do that for
} you?
}



Fabian Urban


Live Walkthrough

A Simple Chat Application Using
JAX-RS and Jackson on
the Server Side

and

Ext.Ajax.request on
the Client Side



Fabian Urban

Ext Direct libs for Java
 No standard lib but different
implementations available:

 directjngine http://code.google.com/p/
directjngine/
 extdirectspring http://code.google.com/p/
extdirectspring/
 extdirect4java http://code.google.com/p/
extdirect4java
 extdirectj-s2-plugin http://code.google.com/
p/extdirectj-s2-plugin/
 HQExtDirect http://bitbucket.org/cattus/
hqextdirect/



Fabian Urban

Enable Ext Direct on the Java back-
end makes it even simpler
public class UserManager {

@ExtDirectAccess
public UserDto doSomething(@Name(“user”) UserDto user) {
user.setAge(19);
return user;
}
}

var userDto = {
firstName: ‘Fabian’,
lastName: ‘Urban’,
age: 27
};
var namedArguments = { user: userDto };
UserManager.doSomething(namedArguments, function(returnedUserDto) {
Ext.Window.MessageBox.alert(‘Fabians real age’,
returnedUserDto.age); // Fabians real age: 19
});



Fabian Urban


Live Walkthrough

Simple Ext Direct Chat
Application Using
JAX-RS and Jackson on
the Server Side

and

Ext Direct
Technology on the
Client Side



Fabian Urban

Less dependencies in the code makes
maintaining code a lot easier
We do not
worry to We do not want to
care about worry about writing We do not want
JSON complex code to to worry about
marshalling invoke methods on JSON
the server side unmarshalling

But do
w
We do not Today we’ve
want t e then
want to worry learned that we do o worr
about routing not really want to about y
on the server worry about
which
method
s
availa are
side anything
bl
server e on the
side?


Fabian Urban

Less dependencies in the code makes
maintaining code a lot easier
public class FooController {
@Inject
private EventController eventController;

public void handleFooEvent(@Observes FooEvent fooEvent) {
// do something with event data
BarEvent barEvent = new BarEvent(); @ClientEvent
eventController.fireGlobalEvent(barEvent); public class FooEvent {
} // properties,
} // getters,
// setters
}

var fooEvent = { /* some foo event properties */ };
eventController.fireGlobalEvent(‘de.fit4ria.event.FooEvent', fooEvent);

eventController.observes(‘de.fit4ria.event.BarEvent’, function(barEvent){
// do something with barEvent data
});



Fabian Urban


Live Walkthrough

The Event-based Version of the
Chat Application



Fabian Urban

Events vs. Ext Direct
Event-based Service-based
(Ext Direct)
 loosely coupled client needs to
code know the services

 perfectly perfectly
integrates with integrates with
CDI Ext JS



Fabian Urban

We can easily delegate to methods on
the client side
Client Server
public class FooManager {
public void doA() {…}
}

function doSomething() { public class BarManager {
FooManager.doA(); public void doB() {…}
BarManager.doB(); }
XyzManager.doC();
public class XyzManager{
doClientSideAction();
public void doC() {…}
}
}

function doClientSideAction() {
// do something
}



Fabian Urban

… or on the server side
Client Server
public class SomeManager {
@Inject
private FooManager fooManager;

@Inject
private BarManager barManager;

@Inject
private XyzManager xyzManager;
function doSomething() {
SomeManager.doSomething(); public void doSomething() {
doClientSideAction(); fooManager.doA();
} barManager.doB();
xyzManager.doC();
function doClientSideAction() { }
// do something }
}



Fabian Urban

… or you don’t worry about delegation
client or server … doesn‘t matter
Some
eventController.fireGlobalEvent(“some.SomeEvent“);// client
Event
eventController.fireGlobalEvent(new SomeEvent()); // server

Server
public class FooManager {
public void handleSomeEvent(@Observes SomeEvent someEvent) { /* do A */ }
}

public class BarManager {
public void handleSomeEvent(@Observes SomeEvent someEvent) { /* do B */ }
}

public class XyzManager {
public void handleSomeEvent(@Observes SomeEvent someEvent) { /* do C */ }
}

Client
eventController.observes(‘some.SomeEvent‘, function() {
// do something
});



Fabian Urban

Summary

 Technologies / specifications like
JAX-RS, Jackson and CDI simplify the
code.

 The enterprise Java standards not only
support service-based, but also event-
based applications. You have the choice!

 Ext JS / Sencha Touch with a Java back-
end is a perfect combination!



Fabian Urban

>> Contact
Thank you for listening
Contact:
Fabian Urban
fabian.urban@fortis-it.de
www.fortis-it.de

FORTIS IT-Service GmbH
Duvenstedter Damm 72
22397 Hamburg
T: +49(0)40 607 699 22
Altenburger Straße 9
33699 Bielefeld
T: +49(0)521 920 198 40

Want to check examples of this talk?
http://laboris.fortis-it.de/~urbanfbi/SenchaCon2011/ExtJSJavaHowto.pdf



Java Server-side Breakout

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie Java Server-side Breakout

Ähnlich wie Java Server-side Breakout (20)

Mehr von Sencha

Mehr von Sencha (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Java Server-side Breakout