rich html5 web apps: typesafe edition
DESCRIPTION
In modern Web applications, the complexity of code deployed to the browser now exceeds the complexity of server-side code. Why write the simpler tier in toolable, typesafe languages but throw the constantly evolving user interface layer to the JavaScript wolves? Through compile-time source code translation, the Errai framework brings mature, proven, toolable Java enterprise programming models to the browser so your team can pole-vault over the complexity wall. In this session, members of the Errai team demonstrate how to build rich Web applications the toolable, typesafe way, without boilerplate. Errai offers a concise programming model to build next-generation Web applications by combining the best aspects of JavaScript and Java.TRANSCRIPT
Christian Sadilek (@csadilek)Jonathan Fuerth (@jfuerth)JBoss / Red Hat
Rich HTML5 Web Apps: Typesafe Edition
RIPJava™ Programming Language
1995-2009
Photo by: Crismatos From: Flickr
RIPGoogle Web Toolkit
2006-2011
Photo by: Crismatos From: Flickr
RIPJBoss Errai Framework
2010-2013
Photo by: Crismatos From: Flickr
The rumors of my demise are greatly
exaggerated!
1. WHY YOUR JOB IS HARD
LARGE DEVELOPMENT TEAMS MAKE THINGS HARD
Who is working on what?Skill-segregation causes duplicate work.Code rots over time.
LARGE OR COMPLEX CODE BASES MAKE THINGS HARD
Where is code actually used?What can safely be changed?Code rots over time.
LARGE CUSTOMERS MAKE THINGS HARD
Requests big changes frequently.Want mobile NOW.Want super-high performance NOW.
2. HOW ERRAI HELPS
USE THE BEST TOOLS AND STANDARDS
HTML5 and CSS for layoutJava for enterprise developmentJavaScript for the nitty-gritty
SHARE CODE EFFECTIVELY
Don’t repeat yourselfDon’t clone other people’s codeShare data model and validation logic
BUST THAT BOILERPLATE!!!
Declarative, simple codeA little goes a long wayLess code == more time
#JavaStillWins
Typesafe languageRefactoringCode analysisExtremely testableExperienced people with the right skills
3. ERRAI CORE CONCEPTS
HTML5 TEMPLATINGUse HTML5/CSS templates directly from the designer or brand team.
<!DOCTYPE html><link href="css/bootstrap.css" rel="stylesheet">
<form id="app-template"> <input id="name" type="text" placeholder="Full Name"> <input id="email" type="text" placeholder="[email protected]"> <textarea id="text" rows="10"></textarea> <button id="submit">Submit</button></form>
@Templatedpublic class ComplaintForm extends Composite { @Inject @DataField private TextBox name; ...}
...and just attach it!
NAVIGATION AND BOOKMARKINGDeclare a page:
@Pagepublic class WelcomePage extends Composite {
@Inject private TransitionTo<ComplaintForm> complaintForm; @EventHandler private void onComplaint(ClickEvent e) { complaintForm.go(); }}
And navigate:
@Page@Templatedpublic class ComplaintForm extends Composite { ...}
TWO-WAY DATA BINDINGRemove boilerplate code and bring forms to life with a few simple annotations.
@Templatedpublic class ComplaintForm extends Composite { @Inject @Model private UserComplaint model;
@Inject @Bound @DataField private TextBox name; @Inject @Bound @DataField private TextBox email; @Inject @Bound @DataField private TextArea complaint; @Inject @DataField private Button submit;
}
@Inject private Event<Document> updatedDocEvent;
TYPESAFE DISTRIBUTED EVENTS
Injecting
updatedDocEvent.fire(document);
firing
public void onUpdatedDocument(@Observes Document doc) { }
and observing events
TYPESAFE RPC AND RESTSimple and powerful to set up, leaving a foundation of confidence to refactor, test, and maintain.
@Injectprivate Caller<UserComplaintEndpoint> endpoint;
...and with the bound model:endpoint.call().create(model);
@Inject private EntityManager entityManager;
@Inject private ClientSyncManager syncManager;
JPA, OFFLINE MODE AND DATA SYNC
Stay connected, even when you can’t. Satisfy rising demands for online collaboration.
@Inject private Camera camera;
GO MOBILE NOW!
Use native Android, iPhone, and BlackBerry features.
public void onBatteryLow(@Observes BatteryLowEvent e) { }
THE BIG INSPIRATIONAL DEMO!
THE END?
THE BEGINNING - OF YOUR ADVENTURE WITH ERRAI!
http://github.com/errai
Get in touch!
Website: http://jboss.org/erraiIRC: #errai on freenodeTwitter: @jbosserrai
Photo by: CHIN.DENG From: FlickrWe ❤ Pull Requests
QUESTIONS?