• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Gwt and Xtend
 

Gwt and Xtend

on

  • 1,816 views

Everybody knows : Web is the platform of the future. Developing for the browser unfortunately requires us to learn and write JavaScript. Not only that but we also have to integrate the JavaScript ...

Everybody knows : Web is the platform of the future. Developing for the browser unfortunately requires us to learn and write JavaScript. Not only that but we also have to integrate the JavaScript client code with the server side, which often runs on the JVM (i.e. is written in Java). So we have to work in two different languages with completely different tools and APIs, and cannot share code between the client and the server.

The Google Web Toolkit (GWT) provides a way to write your client side web application entirely in Java and have it automatically translated to fast and compact JavaScript. It allows you to access all the browser functionality through a statically typed API. You only have to learn and use one language and you can use your code on the client as well as on the server.
The downside : Java is a bad match for the asynchronous programming model required on the browser and generally forces us to write and read a lot of boilerplate code.

In this session you'll see how programming GWT applications with Eclipse Xtend provides the best of both worlds:
Static typing with advanced IDE support meets a powerful and expressive language - right at your finger tips.

Statistics

Views

Total Views
1,816
Views on SlideShare
1,813
Embed Views
3

Actions

Likes
5
Downloads
21
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Gwt and Xtend Gwt and Xtend Presentation Transcript

  • Web Developmentwith GWT and Xtend Sven Efftinge, Oliver Zeigermann
  • http://todomvc.appspot.com
  • Motivation for GWT:Modern Single Page Applications
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browser
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browser
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browserDeveloping for the Browser is a tough task!
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browserDeveloping for the Browser is a tough task!• Browsers have different levels of maturity and compliance to standards
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browserDeveloping for the Browser is a tough task!• Browsers have different levels of maturity and compliance to standards• Programming to the DOM can be tedious
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browserDeveloping for the Browser is a tough task!• Browsers have different levels of maturity and compliance to standards• Programming to the DOM can be tedious• JavaScript
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browserDeveloping for the Browser is a tough task!• Browsers have different levels of maturity and compliance to standards• Programming to the DOM can be tedious• JavaScript
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browserDeveloping for the Browser is a tough task!• Browsers have different levels of maturity and compliance to standards• Programming to the DOM can be tedious• JavaScriptMany projects also require a server side backend
  • Motivation for GWT:Modern Single Page ApplicationsSingle Page Application• Works like a client/server application in the browserDeveloping for the Browser is a tough task!• Browsers have different levels of maturity and compliance to standards• Programming to the DOM can be tedious• JavaScriptMany projects also require a server side backend•Common toolset, code, and language desirable for frontend and backend
  • GWT for the win!
  • GWT for the win!Abstraction from differences between
  • GWT for the win!Abstraction from differences between
  • GWT for the win!Abstraction from differences between• Client & Server o Write everything in Java o Shared code between Client and Server
  • GWT for the win!Abstraction from differences between• Client & Server o Write everything in Java o Shared code between Client and Server• Different Browser implementations o Special JavaScript per browser o Common Widgets to unify differences
  • Client Server Communication Unification of client and server code
  • Call from client side: Loading Todos TodoServiceAsync service = GWT.create(TodoService.class);service.load(name, new AsyncCallback<List<Todo>>() { @Override public void onSuccess(List<Todo> result) { // store and display todos } @Override public void onFailure(Throwable caught) { GWT.log("Loading todos failed", caught); }});
  • Implementation on server sidepublic class TodoServiceImpl extends RemoteServiceServlet implements TodoService { @Override public List<Todo> load(String name) { return getMemcacheService().get(name); } @Override public void save(String name, List<Todo> todos) { getMemcacheService().put(name, todos); }}
  • User Interfaces with GWTWidgets working on all browsers without touching the DOM
  • Building UIs Programmatically
  • Programmatically Composing Widgets:Displaying a Todo FlowPanel view = new FlowPanel(); view.setStyleName("view"); ... Label label = new Label(); view.add(label); Button button = new Button(); button.setStyleName("destroy"); view.add(button); button.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { // remove element from todo list } });
  • Any idea how this will look likewhen displayed?
  • Declarative UI Design using
  • UiBinder XML <g:HTMLPanel> <li ui:field="li"> <g:FlowPanel styleName="view"> <g:CheckBox ui:field="checkBox" styleName="toggle"/> <g:Label ui:field="label"/> <g:Button ui:field="removeButton" styleName=destroy/> </g:FlowPanel> </li></g:HTMLPanel>
  • UIBinder Code for dynamic stuff public class TaskComposite extends Composite { // ... @UiField Label label; // ... @UiHandler("label") public void editTask(DoubleClickEvent event) { editMode(); } // ...}
  • The Tragedy of Building UIs
  • The Tragedy of Building UIs Declarative using XML
  • The Tragedy of Building UIs Declarative using XML structure of code reflects structure of UI (declarative)
  • The Tragedy of Building UIs Declarative using XML structure of code reflects structure of UI (declarative) XML
  • The Tragedy of Building UIs Declarative using XML structure of code reflects structure of UI (declarative) XML needs Java code for dynamic parts
  • The Tragedy of Building UIs Declarative using XML structure of code reflects structure of UI (declarative) XML needs Java code for dynamic parts code duplication (through binding)
  • The Tragedy of Building UIs Declarative using XML structure of code reflects structure of UI (declarative) XML needs Java code for dynamic parts code duplication (through binding) Imperative using Java
  • The Tragedy of Building UIs Declarative using XML structure of code reflects structure of UI (declarative) XML needs Java code for dynamic parts code duplication (through binding) Imperative using Java all in one place
  • The Tragedy of Building UIs Declarative using XML structure of code reflects structure of UI (declarative) XML needs Java code for dynamic parts code duplication (through binding) Imperative using Java all in one place hard to read (imperative)
  • Statically Typed like Java
  • Statically Typed like Java Compiles To Java
  • Statically Typed like Java Compiles To Java Much more concise
  • Statically Typed like Java Compiles To Java Much more concise Powerful possibilities
  • Clearing Completed TasksclearCompletedButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { List<Todo> result = new ArrayList<Todo>(); for (Todo t : getTodos()) { if (!t.isDone()) { result.add(t); } } setTodos(result); } });
  • Clearing Completed TasksclearCompletedButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { List<Todo> result = new ArrayList<Todo>(); for (Todo t : getTodos()) { if (!t.isDone()) { result.add(t); } } setTodos(result); } });
  • Clearing Completed TasksList<Todo> result = new ArrayList<Todo>();for (Todo t : getTodos()) { if (!t.isDone()) { result.add(t); }}setTodos(result);
  • Clearing Completed Tasksval List<Todo> result = new ArrayList<Todo>();for (Todo t : getTodos()) { if (!t.isDone()) { result.add(t); }}setTodos(result);
  • Clearing Completed Tasksval List<Todo> result = new ArrayList<Todo>();for (Todo t : getTodos()) { if (!t.isDone()) { result.add(t); }}setTodos(result);
  • Clearing Completed Tasksval List<Todo> result = new ArrayList<Todo>();for (Todo t : getTodos()) { if (!t.isDone()) { result.add(t); }}setTodos(result);
  • Type Inference
  • Semicolons?
  • Property Access
  • Operator Overloading
  • Operator Overloading sty le! va e Ja e rativ still imp that’sBut
  • Functional Xtend Style
  • Functional Xtend Styletodos = todos.filter[!done].toList
  • Functional Xtend StyleclearCompletedButton.addClickHandler [ todos = todos.filter[!done].toList]
  • clearCompletedButton.addClickHandler [ todos = todos.filter[!done].toList] clearCompletedButton.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { List<Todo> result = new ArrayList<Todo>(); for (Todo t : getTodos()) { if (!t.isDone()) { result.add(t); } } setTodos(result); } });
  • Client Server Communication Revisited
  • GWT-RPC in Java1) Server-Side Service Implementation public class TodoServiceImpl extends RemoteServiceServlet implements TodoService { public List<Todo> load(final String name) { return (List<Todo>) getMemcacheService().get(name); } public void save(final List<Todo> todos, final String name) { getMemcacheService().put(name, todos); } }
  • GWT-RPC in Java1) Server-Side Service Implementation public class TodoServiceImpl extends RemoteServiceServlet implements TodoService { public List<Todo> load(final String name) { return (List<Todo>) getMemcacheService().get(name); } public void save(final List<Todo> todos, final String name) { getMemcacheService().put(name, todos); } }2) Server-Side Service Interface @RemoteServiceRelativePath("todoService") public interface TodoService extends RemoteService { public List<Todo> load(final String name); public void save(final List<Todo> todos, final String name); }
  • GWT-RPC in Java1) Server-Side Service Implementation public class TodoServiceImpl extends RemoteServiceServlet implements TodoService { public List<Todo> load(final String name) { return (List<Todo>) getMemcacheService().get(name); } public void save(final List<Todo> todos, final String name) { getMemcacheService().put(name, todos); } }2) Server-Side Service Interface @RemoteServiceRelativePath("todoService") public interface TodoService extends RemoteService { public List<Todo> load(final String name); public void save(final List<Todo> todos, final String name); }3) Client-Side Async-Interface public interface TodoServiceAsync { public void load(final String name, final AsyncCallback<List<Todo>> result); public void save(final List<Todo> todos, final String name, final AsyncCallback<Void> result); }
  • GWT-RPC in Xtend1) Server-Side Service Implementation @GwtService class TodoServiceImpl { override List<Todo> load(String name) { return memcacheService.get(name) as List<Todo> } override void save(List<Todo> todos, String name) { memcacheService.put(name, todos) } }
  • GWT-RPC in Xtend1) Server-Side Service Implementation @GwtService class TodoServiceImpl { override List<Todo> load(String name) { return memcacheService.get(name) as List<Todo> } override void save(List<Todo> todos, String name) { memcacheService.put(name, todos) } } @GwtService is a so called “Active Annotation”. It adds the needed boilerplate during compilation.
  • Building UIs Programmatically with Xtend
  • Imperative UIs in JavaFlowPanel view = new FlowPanel();view.setStyleName("view");...Label label = new Label();label.setText(todo.getText());view.add(label);Button button = new Button();button.setStyleName("destroy");view.add(button);button.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { deleteTodo(todo); }});
  • Declarative UIs in XtendflowPanel [ styleName = view ... label [ text = todo.text ] button [ styleName = destroy onClick [ deleteTodo(todo) ] ]]
  • Declarative UIs in XtendflowPanel [ styleName = view ... label [ text = todo.text ] button [ styleName = destroy onClick [ deleteTodo(todo) ] ]] That’s a so called Builder API
  • Declarative UI Design using
  • The XML <section id="todoapp"> <header id="header"> <h1>todos</h1> <g:TextBox ui:field="todoText"/> </header> <section ui:field="mainSection"> <input ui:field="toggleAll" type="checkbox"></input> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list"> <g:FlowPanel ui:field="todoPanel"></g:FlowPanel> </ul> </section> <footer ui:field="todoStatsContainer"> <span id="todo-count"> <strong class="number" ui:field="remainingTodosCount"></strong> <span class="word" ui:field="remainingTodosLabel"></span> left. </span> <g:Button ui:field="clearCompleted"> Clear completed (<span class="number-done" ui:field="clearTodosCount"></span>) </g:Button> </footer> </section>
  • public class ToDoView extends Composite { interface ToDoViewUiBinder extends UiBinder<Widget,ToDoView> { } private static ToDoViewUiBinder uiBinder = GWT.create(ToDoViewUiBinder.class); @UiField protected SpanElement clearTodosCount; @UiField protected SpanElement remainingTodosLabel; @UiField protected FlowPanel todoPanel; Here’s the boilerplate! @UiField protected InputElement toggleAll; @UiField protected Element remainingTodosCount; @UiField protected Button clearCompleted; @UiField protected TextBox todoText; @UiField protected Element mainSection; @UiField protected Element todoStatsContainer; // ... actual implementation}
  • Active Annotations Once More@WithUiBindingclass ToDoView extends Composite { // ... actual implementation}
  • Active Annotations Once More@WithUiBindingclass ToDoView extends Composite { // ... actual implementation} @WithUiBinding looks up the XML and adds the boilerplate for you.
  • Wrap-up
  • Wrap-up GWT is cool!
  • Wrap-up GWT is cool! Even more so with Xtend :-)
  • Questions?
  • Questions?