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
![Page 1: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/1.jpg)
Christian Sadilek (@csadilek)Jonathan Fuerth (@jfuerth)JBoss / Red Hat
Rich HTML5 Web Apps: Typesafe Edition
![Page 2: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/2.jpg)
RIPJava™ Programming Language
1995-2009
Photo by: Crismatos From: Flickr
![Page 3: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/3.jpg)
RIPGoogle Web Toolkit
2006-2011
Photo by: Crismatos From: Flickr
![Page 4: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/4.jpg)
RIPJBoss Errai Framework
2010-2013
Photo by: Crismatos From: Flickr
![Page 5: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/5.jpg)
The rumors of my demise are greatly
exaggerated!
![Page 6: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/6.jpg)
1. WHY YOUR JOB IS HARD
![Page 7: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/7.jpg)
LARGE DEVELOPMENT TEAMS MAKE THINGS HARD
Who is working on what?Skill-segregation causes duplicate work.Code rots over time.
![Page 8: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/8.jpg)
LARGE OR COMPLEX CODE BASES MAKE THINGS HARD
Where is code actually used?What can safely be changed?Code rots over time.
![Page 9: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/9.jpg)
LARGE CUSTOMERS MAKE THINGS HARD
Requests big changes frequently.Want mobile NOW.Want super-high performance NOW.
![Page 10: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/10.jpg)
2. HOW ERRAI HELPS
![Page 11: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/11.jpg)
USE THE BEST TOOLS AND STANDARDS
HTML5 and CSS for layoutJava for enterprise developmentJavaScript for the nitty-gritty
![Page 12: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/12.jpg)
SHARE CODE EFFECTIVELY
Don’t repeat yourselfDon’t clone other people’s codeShare data model and validation logic
![Page 13: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/13.jpg)
BUST THAT BOILERPLATE!!!
Declarative, simple codeA little goes a long wayLess code == more time
![Page 14: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/14.jpg)
![Page 15: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/15.jpg)
#JavaStillWins
Typesafe languageRefactoringCode analysisExtremely testableExperienced people with the right skills
![Page 16: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/16.jpg)
3. ERRAI CORE CONCEPTS
![Page 17: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/17.jpg)
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!
![Page 18: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/18.jpg)
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 { ...}
![Page 19: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/19.jpg)
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;
}
![Page 20: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/20.jpg)
@Inject private Event<Document> updatedDocEvent;
TYPESAFE DISTRIBUTED EVENTS
Injecting
updatedDocEvent.fire(document);
firing
public void onUpdatedDocument(@Observes Document doc) { }
and observing events
![Page 21: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/21.jpg)
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);
![Page 22: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/22.jpg)
@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.
![Page 23: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/23.jpg)
@Inject private Camera camera;
GO MOBILE NOW!
Use native Android, iPhone, and BlackBerry features.
public void onBatteryLow(@Observes BatteryLowEvent e) { }
![Page 24: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/24.jpg)
THE BIG INSPIRATIONAL DEMO!
![Page 25: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/25.jpg)
THE END?
THE BEGINNING - OF YOUR ADVENTURE WITH ERRAI!
![Page 26: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/26.jpg)
http://github.com/errai
Get in touch!
Website: http://jboss.org/erraiIRC: #errai on freenodeTwitter: @jbosserrai
Photo by: CHIN.DENG From: FlickrWe ❤ Pull Requests
![Page 27: Rich HTML5 Web Apps: Typesafe Edition](https://reader034.vdocuments.us/reader034/viewer/2022042715/559c46521a28ab8a218b46d1/html5/thumbnails/27.jpg)
QUESTIONS?