Contenu connexe Similaire à Java Server-side Breakout (20) Java Server-side Breakout1. Fabian Urban
>> SenchaCon 2011
Fabian Urban
FORTIS
Using Ext JS with a
Java Back-end
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
2. 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 :-)
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
3. 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
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
4. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
5. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
6. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
… 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
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
7. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
The less we have to do
the earlier it’s done
Without Connection Pooling (open / close database connection for
each request)
With Connection Pooling
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
8. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
9. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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.
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
10. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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).
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
11. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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.
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
12. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Java data transfer object (DTO)
public class UserDto {
private String firstName;
private String lastName;
private Integer age;
public UserDto() {}
// getter and setter
}
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
13. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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?
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
14. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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?
}
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
15. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Live Walkthrough
A Simple Chat Application Using
JAX-RS and Jackson on
the Server Side
and
Ext.Ajax.request on
the Client Side
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
16. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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/
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
17. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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
});
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
18. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Live Walkthrough
Simple Ext Direct Chat
Application Using
JAX-RS and Jackson on
the Server Side
and
Ext Direct
Technology on the
Client Side
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
19. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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?
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
20. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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
});
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
21. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
Live Walkthrough
The Event-based Version of the
Chat Application
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
22. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
23. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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
}
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
24. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
… 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 }
}
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
25. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
… 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
});
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
26. Fabian Urban
>> Ext JS / Sencha Touch with a Java back-end is a perfect combination
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!
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11
27. 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
© FORTIS IT-SERVICES GMBH
Wednesday, November 2, 11