How to improve your productivity using GWTP

HOW TO IMPROVE
YOUR PRODUCTIVITY
USING GWTP
CHRISTIAN GOUDREAU
GWT.create 2015

Motivations
HOW TO IMPROVE YOUR PRODUCTIVITY USING GWTP
➔ Scalability
➔ Maintainability
➔ Extensibility

Architecture
➔ SOLID - Uncle Bob
➔ MVP - Martin Fowler
➔ Iterative and incremental
development - Craig
Larman

THERE’S JUST
TOO MANY
GOOD PRACTICES

Frontend
➔ GWTP
➔ REST-Dispatch
➔ GSS

MODEL
PRESENTER
VIEW
MVP
PATTERN

Presenter

public class ApplicationPresenter
extends Presenter<ApplicationPresenter.MyView, ApplicationPresenter.MyProxy> {
interface MyView extends View {
}
@ProxyStandard
interface MyProxy extends Proxy<ApplicationPresenter> {
}
@ContentSlot
public static final Type<RevealContentHandler<?>> SLOT_MAIN = new Type<RevealContentHandler<?>>();
@Inject
ApplicationPresenter(EventBus eventBus,
MyView view,
MyProxy proxy) {
super(eventBus, view, proxy, RevealType.RootLayout);
}
@Override
protected void onReveal() {
}
@Override
protected void onBind() {
}
}

View

public class ApplicationView extends ViewImpl implements ApplicationPresenter.MyView {
interface Binder extends UiBinder<Widget, ApplicationView> {
}
@UiField
SimplePanel main;
@Inject
ApplicationView(Binder uiBinder) {
initWidget(uiBinder.createAndBindUi(this));
}
@Override
public void setInSlot(Object slot, IsWidget content) {
if (slot == ApplicationPresenter.SLOT_MAIN) {
main.setWidget(content);
}
}
}

Model

public class Dashboard {
private int id;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
}

Tips
➔ Use UiHandlers
➔ Use the EventBus
➔ Use collaborators

UiHandlers and Presenter

public interface FeedbackUiHandlers extends UiHandlers {
void performMail(Feedback currentFeedback);
}
public class FeedbackPresenter
extends Presenter<FeedbackPresenter.MyView, FeedbackPresenter.MyProxy>
implements FeedbackUiHandlers {
...
@Inject
FeedbackPresenter(...) {
super(...);
getView().setUiHandlers(this);
}
@Override
public void performMail(Feedback currentFeedback) {
...
}
}

public class FeedbackView
extends ViewWithUiHandlers<FeedbackUiHandlers>
implements FeedbackPresenter.MyView {
...
@UiHandler("submit")
void onClick(ClickEvent e) {
getUiHandlers().performMail(feedback);
}
}

EventBus

@Override
protected void onReveal() {
themeService.withCallback(new AbstractAsyncCallback<Theme>() {
@Override
public void onSuccess(Theme result) {
super.onSuccess(result);
getView().edit(result);
}
}).getByOrganizationId(currentUser.getOrganizationId());
UpdateBreadcrumbEvent.fire(this, breadcrumbBuilder.theme());
}

Collaborators

public interface LocationFacade {
/**
* Adds a new browser history entry. Calling this method will cause
* {@link com.google.gwt.event.logical.shared.ValueChangeHandler
* #onValueChange(com.google.gwt.event.logical.shared.ValueChangeEvent)}
* to be called as well if and only if issueEvent is true.
*
* @param historyToken the token to associate with the new history item
* @param issueEvent true if a
* {@link com.google.gwt.event.logical.shared.ValueChangeHandler
* #onValueChange(com.google.gwt.event.logical.shared.ValueChangeEvent)}
* event should be issued
*/
void newItem(String historyToken, boolean issueEvent);
/**
* Reloads the current browser window. All GWT state will be lost.
*/
void reload();
String getCurrentHash();
}

public class LocationFacadeImpl implements LocationFacade {
@Override
public void newItem(String newUrl, boolean fireEvent) {
History.newItem(newUrl, fireEvent);
}
@Override
public native void reload() /*-{
$wnd.location.reload(true);
}-*/;
@Override
public String getCurrentHash() {
return Location.getHash();
}
}

REST
Dispatch
➔ JAX-RS
➔ Command pattern
➔ Simplest implementation

REST
Dispatch
➔ JAX-RS
➔ Command pattern
➔ Simplest implementation
Bonus
➔ Response - RestCallback
➔ GWTP-Extensions - Rest-
delegates
Downside - not type safe

REST Dispatch setup

public class ServiceModule extends AbstractGinModule {
@Override
protected void configure() {
install(new RestDispatchAsyncModule.Builder().build());
}
@Provides
@RestApplicationPath
String getApplicationPath() {
String baseUrl = GWT.getHostPageBaseURL();
if (baseUrl.endsWith("/")) {
baseUrl = baseUrl.substring(0, baseUrl.length() - 1);
}
return baseUrl + API;
}
}
<inherits name="com.gwtplatform.dispatch.rest.delegates.ResourceDelegate"/>
<inherits name='com.gwtplatform.mvp.MvpWithEntryPoint'/>

REST Dispatch usage

@Path(DASHBOARDS)
public interface DashboardService {
@GET
@Path(DASHBOARD)
Dashboard getByOrganizationId(@PathParam(ORGANIZATION_ID) int organizationId);
@PUT
@Path(DASHBOARD)
void update(@PathParam(ORGANIZATION_ID) int organizationId, Dashboard dashboard);
}
private void loadTemplate() {
dashboardService.withCallback(new AbstractAsyncCallback<Dashboard>() {
@Override
public void onSuccess(Dashboard result) {
setInSlot(SLOT_TEMPLATE, templateSelector.createTemplate(result));
}
}).getByOrganizationId(currentUser.getOrganizationId());
}

UIDesign
➔ GSS + GSSS
➔ UiBinder
➔ CSS expert

GSS + GSSS

@Source({"com/arcbees/gsss/mixin/client/mixins.gss", "css/colors.gss", "fonts/geometria/geometria.gss", "css/style.gss"})
Style style();
@Source({"com/arcbees/website/client/resources/css/gridSettings.gss", "com/arcbees/gsss/grid/client/grid.gss"})
GridResources.Grid grid();
http://dev.arcbees.com/gsss/mixins/

@require "colors";
@require "geometria";
@require "gsss-mixins";
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
@media (max-width: 979px) {
html {
font-size: 59%;
}
}
.selectedFile {
background-color: C_PRIMARY;
color: #fff;
display: inline-block;
padding: .5rem .5rem .5rem 1rem;
@mixin rounded(4px);
}

What’s next?
➔ Full JAX-RS coverage
➔ XML and custom
serializers/deserializers
➔ New way of writing Presenters
➔ Generator rewrite for extensibility
➔ Pushstate
https://docs.google.com/a/arcbees.com/document/d/1N9dMDxTFmZzF3xNTpnP3HIuwZC9OGtPPm_QVEikMP4g/

@Presenter(token = HOME, for = MyView.class, slot = ApplicationPresenter.SLOT_MAIN)
@UseCodeSplit
@UseGatekeeper(AclGatekeeper.class)
@GatekeeperParams(ORGANIZATION_SETTINGS_DASHBOARD_READ)
public class DashboardPresenter {
interface MyView extends View {
}
@Inject
DashboardPresenter() {
}
@OnReveal
void onReveal() {
}
@OnBind
void onBind() {
}
...
}

Christian Goudreau
Co-Founder and Bee-EO
at Arcbees
+ChristianGoudreau
@imchrisgoudreau

How to improve your productivity using GWTP

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

How to improve your productivity using GWTP