rich html5 web apps: typesafe edition
Post on 08-Jul-2015
1.354 Views
Preview:
DESCRIPTION
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="you@example.com"> <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?
top related