Fabian Urban                               >> SenchaCon 2011                         Fabian Urban                         ...
Fabian Urban      Ext JS / Sencha Touch with a Java      back-end is a perfect combination       Having a container has m...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      What is perfect???          ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Having a container has many ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      If an application is declare...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      … so we don’t have to update...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      The less we have to do      ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Having a container has many ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Web applications must run as...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Using better technologies me...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Using better technologies me...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Java data transfer object (D...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Marshalling and unmarshallin...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Applying JAX-RS resources ca...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Live Walkthrough            ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Ext Direct libs for Java    ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Enable Ext Direct on the Jav...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Live Walkthrough            ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Less dependencies in the cod...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Less dependencies in the cod...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Live Walkthrough            ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Events vs. Ext Direct      E...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      We can easily delegate to me...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      … or on the server side     ...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      … or you don’t worry about d...
Fabian Urban      >> Ext JS / Sencha Touch with a Java back-end is a perfect combination      Summary       Technologies ...
Fabian Urban      >> Contact      Thank you for listening      Contact:      Fabian Urban      fabian.urban@fortis-it.de  ...
Upcoming SlideShare
Loading in …5
×

Java Server-side Breakout

4,978 views

Published on

Understand the approaches and best practices for integrating client side applications - both desktop and mobile - with various server-side technologies.

Fabian Urban (27) is an IT Consultant at FORTIS IT-Services GmbH in Hamburg, Germany. He is a web development expert for both - client and server side technologies.

During his professional career he designed and implemented interfaces and automated services to share data between affiliate partners and CRM and billing solutions at the telecommunications industry.

As a passionate rich internet application developer he has not only implemented web technology solutions, but has always tried to validate and optimize available frameworks to the limit of possibilities. Besides organizing and holding sessions at the Ext JS User Group Hamburg, he will talk about modern RIAs at the SenchaCon 2011.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,978
On SlideShare
0
From Embeds
0
Number of Embeds
927
Actions
Shares
0
Downloads
65
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Java Server-side Breakout

  1. 1. Fabian Urban >> SenchaCon 2011 Fabian Urban FORTIS Using Ext JS with a Java Back-end © FORTIS IT-SERVICES GMBHWednesday, November 2, 11
  2. 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 GMBHWednesday, November 2, 11
  3. 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 GMBHWednesday, November 2, 11
  4. 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 GMBHWednesday, November 2, 11
  5. 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 GMBHWednesday, November 2, 11
  6. 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 GMBHWednesday, November 2, 11
  7. 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 GMBHWednesday, November 2, 11
  8. 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 GMBHWednesday, November 2, 11
  9. 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 GMBHWednesday, November 2, 11
  10. 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 GMBHWednesday, November 2, 11
  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 GMBHWednesday, November 2, 11
  12. 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 GMBHWednesday, November 2, 11
  13. 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 GMBHWednesday, November 2, 11
  14. 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 GMBHWednesday, November 2, 11
  15. 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 GMBHWednesday, November 2, 11
  16. 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 GMBHWednesday, November 2, 11
  17. 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 GMBHWednesday, November 2, 11
  18. 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 GMBHWednesday, November 2, 11
  19. 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 GMBHWednesday, November 2, 11
  20. 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 GMBHWednesday, November 2, 11
  21. 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 GMBHWednesday, November 2, 11
  22. 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 GMBHWednesday, November 2, 11
  23. 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 GMBHWednesday, November 2, 11
  24. 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 GMBHWednesday, November 2, 11
  25. 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 GMBHWednesday, November 2, 11
  26. 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 GMBHWednesday, November 2, 11
  27. 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 GMBHWednesday, November 2, 11

×