Rich HTML5 Web Apps:
Typesafe Edition

Christian Sadilek (@csadilek)
Jonathan Fuerth (@jfuerth)
JBoss / Red Hat
RIP
Java™ Programming Language
1995-2009

Photo by: Crismatos From: Flickr
RIP
Google Web Toolkit
2006-2011

Photo by: Crismatos From: Flickr
RIP
JBoss 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 t...
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 layout
Java for enterprise development
JavaScript for the nitty-gritty
SHARE CODE EFFECTIVELY
Don’t repeat yourself
Don’t clone other people’s code
Share data model and validation logic
BUST THAT BOILERPLATE!!!
Declarative, simple code
A little goes a long way
Less code == more time
#JavaStillWins

Typesafe language
Refactoring
Code analysis
Extremely testable
Experienced people with the right skills
3. ERRAI CORE CONCEPTS
HTML5 TEMPLATING
Use HTML5/CSS templates directly from the designer or
brand team.
<!DOCTYPE html>
<link href="css/bootstr...
NAVIGATION AND BOOKMARKING
Declare a page:
@Page
@Templated
public class ComplaintForm extends Composite {
...
}

And navi...
TWO-WAY DATA BINDING
Remove boilerplate code and bring forms to life with
a few simple annotations.
@Templated
public clas...
TYPESAFE DISTRIBUTED EVENTS
Injecting
@Inject
private Event<Document> updatedDocEvent;

firing
updatedDocEvent.fire(docume...
TYPESAFE RPC AND REST
Simple and powerful to set up, leaving a foundation
of confidence to refactor, test, and maintain.
@...
JPA, OFFLINE MODE AND DATA SYNC
Stay connected, even when you can’t. Satisfy rising
demands for online collaboration.
@Inj...
GO MOBILE NOW!
Use native Android, iPhone, and BlackBerry features.
@Inject
private Camera camera;

public void onBatteryL...
THE BIG INSPIRATIONAL DEMO!
THE END?

THE BEGINNING - OF YOUR ADVENTURE WITH ERRAI!
Get in touch!
Website: http://jboss.org/errai
IRC: #errai on freenode
Twitter: @jbosserrai

We ❤ Pull Requests

Photo by: ...
QUESTIONS?
Rich HTML5 Web Apps: Typesafe Edition
Upcoming SlideShare
Loading in …5
×

Rich HTML5 Web Apps: Typesafe Edition

1,905 views

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,905
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rich HTML5 Web Apps: Typesafe Edition

  1. 1. Rich HTML5 Web Apps: Typesafe Edition Christian Sadilek (@csadilek) Jonathan Fuerth (@jfuerth) JBoss / Red Hat
  2. 2. RIP Java™ Programming Language 1995-2009 Photo by: Crismatos From: Flickr
  3. 3. RIP Google Web Toolkit 2006-2011 Photo by: Crismatos From: Flickr
  4. 4. RIP JBoss Errai Framework 2010-2013 Photo by: Crismatos From: Flickr
  5. 5. The rumors of my demise are greatly exaggerated!
  6. 6. 1. WHY YOUR JOB IS HARD
  7. 7. LARGE DEVELOPMENT TEAMS MAKE THINGS HARD Who is working on what? Skill-segregation causes duplicate work. Code rots over time.
  8. 8. LARGE OR COMPLEX CODE BASES MAKE THINGS HARD Where is code actually used? What can safely be changed? Code rots over time.
  9. 9. LARGE CUSTOMERS MAKE THINGS HARD Requests big changes frequently. Want mobile NOW. Want super-high performance NOW.
  10. 10. 2. HOW ERRAI HELPS
  11. 11. USE THE BEST TOOLS AND STANDARDS HTML5 and CSS for layout Java for enterprise development JavaScript for the nitty-gritty
  12. 12. SHARE CODE EFFECTIVELY Don’t repeat yourself Don’t clone other people’s code Share data model and validation logic
  13. 13. BUST THAT BOILERPLATE!!! Declarative, simple code A little goes a long way Less code == more time
  14. 14. #JavaStillWins Typesafe language Refactoring Code analysis Extremely testable Experienced people with the right skills
  15. 15. 3. ERRAI CORE CONCEPTS
  16. 16. HTML5 TEMPLATING Use 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> ...and just attach it! @Templated public class ComplaintForm extends Composite { @Inject @DataField private TextBox name; ... }
  17. 17. NAVIGATION AND BOOKMARKING Declare a page: @Page @Templated public class ComplaintForm extends Composite { ... } And navigate: @Page public class WelcomePage extends Composite { @Inject private TransitionTo<ComplaintForm> complaintForm; @EventHandler private void onComplaint(ClickEvent e) { complaintForm.go(); } }
  18. 18. TWO-WAY DATA BINDING Remove boilerplate code and bring forms to life with a few simple annotations. @Templated public class ComplaintForm extends Composite { @Inject @Model private UserComplaint model; @Inject @Inject @Inject @Inject } @Bound @DataField private @Bound @DataField private @Bound @DataField private @DataField private Button TextBox name; TextBox email; TextArea complaint; submit;
  19. 19. TYPESAFE DISTRIBUTED EVENTS Injecting @Inject private Event<Document> updatedDocEvent; firing updatedDocEvent.fire(document); and observing events public void onUpdatedDocument(@Observes Document doc) { }
  20. 20. TYPESAFE RPC AND REST Simple and powerful to set up, leaving a foundation of confidence to refactor, test, and maintain. @Inject private Caller<UserComplaintEndpoint> endpoint; ...and with the bound model: endpoint.call().create(model);
  21. 21. JPA, OFFLINE MODE AND DATA SYNC Stay connected, even when you can’t. Satisfy rising demands for online collaboration. @Inject private EntityManager entityManager; @Inject private ClientSyncManager syncManager;
  22. 22. GO MOBILE NOW! Use native Android, iPhone, and BlackBerry features. @Inject private Camera camera; public void onBatteryLow(@Observes BatteryLowEvent e) { }
  23. 23. THE BIG INSPIRATIONAL DEMO!
  24. 24. THE END? THE BEGINNING - OF YOUR ADVENTURE WITH ERRAI!
  25. 25. Get in touch! Website: http://jboss.org/errai IRC: #errai on freenode Twitter: @jbosserrai We ❤ Pull Requests Photo by: CHIN.DENG From: Flickr http://github.com/errai
  26. 26. QUESTIONS?

×