1. 1

2. Busy Developer's
Guide to Quickly
Integrating HTML5
with Java EE 7
(Java EE and HTML5, the best of both worlds!)
2

3. Me
 Twitter: @geertjanw
 Facebook: www.facebook.com/geertjanw
 E-Mail: geertjan.wielenga@oracle.com
3

4. Free Tool Box
 HTML
 JavaScript
 CSS
 Java EE
 NetBeans
4

5. What is NetBeans?
Increase Developer Productivity
 Ready to use out of the box
 Support for latest Java
specifications & standards
 Support for HTML,
JavaScript, and CSS
 Intuitive workflow
 Debugger, Profiler,
Editing & Refactoring Tools
 Binaries and ZIPs for Mac OS,
Linux, and Windows
Simply download and run on any operating system!
5

6. What is NetBeans?
Increase Developer Productivity
 Works out of the box
 Freely available
 Open source
 Support for Java standards &
other popular platforms, such as HTML5
 Deeply integrated Maven support
 Extensible Java desktop framework
 Powerful, award winning GUI Builder
 Profiling and debugging tools
 Customizable and extensible
6

7. HTML5 Platform
7

8. HTML5 Platform
<video>
<audio>
<canvas>
8

9. HTML5 Platform
<video>
<audio>
<canvas>
9
CSS3
animations
transformations

10. HTML5 Platform
Backbone.js CSS3
Knockout
<video>
animations
<audio>
Ext JS
transformations
<canvas>
Angular JS
…
10

11. Preprocessors
- SASS, LESS
HTML5 Platform - Emmet
- CoffeeScript
Backbone.js CSS3
- Dart
Knockout
<video>
animations
<audio>
Ext JS
transformations
<canvas>
Angular JS
…
11

12. Mobile
- Android
- iOS
Preprocessors
- SASS, LESS
HTML5 Platform - Emmet
- CoffeeScript
Backbone.js CSS3
- Dart
Knockout
<video>
animations
<audio>
Ext JS
transformations
<canvas>
Angular JS
…
12

13. Hybrid
Mobile
- PhoneGap - Android
- Cordova
- iOS
Preprocessors
- SASS, LESS
HTML5 Platform - Emmet
- CoffeeScript
Backbone.js CSS3
- Dart
Knockout
<video>
animations
<audio>
Ext JS
transformations
<canvas>
Angular JS
…
13

14. HTML5 Tools
 Integration between
IDE and Chrome browser
 Editors for HTML5, JavaScript, CSS3
 JavaScript debugger
 Visual CSS editing
 SASS and LESS CSS preprocessing
 Cordova mobile device development
14

15. JavaScript Editor
 Early JDK 8 build Nashorn JavaScript Engine for parsing
 Out of the box support:
– jQuery
– JSON
– Knockout
– Ext Js
– AngularJS
– JsDoc
– ExtDoc
– ScriptDoc
15

16. JavaScript Debugger
 HTML5 applications are
automatically deployed
in debug mode
 Set breakpoints in JavaScript file,
on Line, DOM, Event,
or XMLHTTPRequest
 Refresh the browser and
immediately step through code
 Use Debugger windows to monitor
watches, threads, and breakpoints
16

17. CSS Editing
 Click in browser
and see CSS styles and rules in IDE
 Changes saved in Chrome Developer Tools
are saved in files in IDE
 CSS styling: box model
styling of hover-based effects
 Changes in CSS Editor
immediately reflected in browser
17

18. SASS and LESS Preprocessing
 Syntax coloring, indentation, reformatting,
code folding, file templates
 Go to declaration, mark occurrences,
instant rename, code completion
 Live reload on change
 Debugging information is displayed
18

19. Easy Mobile & Web Deployment
 Tight integration with
– Chrome
– Embedded WebKit Browser
– iOS (Safari)
– Android (Chrome)
 Also support for
Internet Explorer, FireFox,
Safari, Android default browser
19

20. Cordova Mobile Device Support
 Cordova integration
for hybrid development
 Build native Android
and iOS packages
– Register or generate
required files for
Android and iOS
– Register Android SDK
and iOS SDK
 Helpful samples
and templates
20

21. Demo
21

22. Java EE Platform
22

23. Java EE
 Simplicity
 Productivity
 Specifications
 Convention over configuration
23

24. Java EE
24

25. Java EE Platform
Out of the Box Java EE Support
25

26. Java EE Platform for HTML5
 JSON Processing
 WebSocket
 Concurrency
 Batch
 RESTful Web Services
26

27. Java EE Platform for HTML5
 JSON-P. JSON is a text-based data exchange format
derived from JavaScript that is used in web services and
other connected applications.
The Java API for JSON Processing (JSON-P) enables
Java EE applications to parse, transform, and query JSON
data using the object model or the streaming model.
27

28. Java EE Platform for HTML5
 WebSocket. WebSocket is an application protocol that
provides full-duplex communications between two peers
over TCP.
The Java API for WebSocket enables Java EE applications
to create endpoints using annotations that specify the
configuration parameters of the endpoint and designate its
lifecycle callback methods.
28

29. Java EE Platform for HTML5
 Concurrency. The Concurrency Utilities for Java EE is a
standard API that enables asynchronous capabilities to
Java EE applications through the following types of
objects: managed executor service, managed scheduled
executor service, managed thread factory, and context
service.
29

30. Java EE Platform for HTML5
 Batch. The Batch Applications for the Java Platform
specification is a batch framework that enables support for
creating and running batch jobs in Java applications.
The batch framework consists of a batch runtime, a job
specification language based on XML, a Java API to
interact with the batch runtime, and a Java API to
implement batch artifacts.
30

31. Java EE Platform for HTML5
 RESTful Web Services. The Java API for RESTful Web
Services (JAX-RS) defines an API that enables the
development of web services built according to the
Representational State Transfer (REST) architectural style.
A JAX-RS application is a web application that consists of
classes packaged as a servlet in a WAR file along with
required libraries.
31

32. NetBeans and Java
 Java Editor is
NetBeans IDE’s
central feature
 Developed in
close co-operation
with Oracle Java SE Team
 First editor to
support Java technologies,
e.g., JDK, Java EE, JavaFX
 “javac” is our parser,
all language features
are always in sync
with Java
32

33. NetBeans and Java
 Much More Than Creating, Editing, Refactoring
 Building
– Maven and Ant, community Gradle plugin
 Debugger and Profiler
 Versioning
– Git, Mercurial, and Subversion
At Liquid Robotics, our use of NetBeans
IDE is all about integration. There's the
seamless integration of development
tools and Java technologies within
NetBeans IDE, but it's also very good at
integrating external features, for
example, Jenkins, which we use for our
build server, Git (via GitBlit), which is
our source code repository, JIRA for
bug tracking, Maven for running builds,
and Artifactory for maintaining the
artifacts created from the builds.
 Testing and Code Analysis
– Junit and TestNG
– Static code analysis, e.g., FindBugs
 Continuous Build Servers
 Bug Tracking
33
– JIRA, Bugzilla
“Father of Java”
James Gosling
CTO, Liquid Robotics

34. NetBeans and Java EE
 Developed in close co-operation
with GlassFish and WebLogic teams
 Best in breed GlassFish integration,
strong support for WebLogic
and other servers
 First day support for standards,
e.g., Java EE 6 and Java EE 7
 No plugins needed
Ready to use out of the box
34

35. Java EE, HTML5, and NetBeans
 Easy to use HTML5 features
in Java EE applications
 Features:
– JavaScript Library Manager
– JavaScript Editor and Debugger
– CSS preprocessors
– Visual CSS Editor
– Integration between IDE
and Chrome browser
– Deployment to mobile devices
– Project samples
35

36. Demo
36

37. Summary
37

38. Free Tool Box
 HTML
 JavaScript
 CSS
 Java EE
 NetBeans
38

39. Me
 Twitter: @geertjanw
 Facebook: www.facebook.com/geertjanw
 E-Mail: geertjan.wielenga@oracle.com
39

40. 40