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

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

3
Free Tool Box
 HTML
 JavaScript
 CSS
 Java EE
 NetBeans

4
What is NetBeans?
Increase Developer Productivity
 Ready to use out of the box
 Support for latest Java

specifications ...
What is NetBeans?
Increase Developer Productivity
 Works out of the box
 Freely available

 Open source
 Support for J...
HTML5 Platform

7
HTML5 Platform
<video>
<audio>
<canvas>
8
HTML5 Platform
<video>
<audio>
<canvas>
9

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

Preprocessors
- SASS, LESS
HTML5 Platform - Emmet
- CoffeeScript
Backbone.js CSS3
- Dart
Knockout
...
Hybrid
Mobile
- PhoneGap - Android
- Cordova
- iOS

Preprocessors
- SASS, LESS
HTML5 Platform - Emmet
- CoffeeScript
Backb...
HTML5 Tools
 Integration between

IDE and Chrome browser
 Editors for HTML5, JavaScript, CSS3
 JavaScript debugger
 Vi...
JavaScript Editor
 Early JDK 8 build Nashorn JavaScript Engine for parsing
 Out of the box support:
– jQuery
– JSON

– K...
JavaScript Debugger
 HTML5 applications are

automatically deployed
in debug mode
 Set breakpoints in JavaScript file,

...
CSS Editing
 Click in browser

and see CSS styles and rules in IDE
 Changes saved in Chrome Developer Tools

are saved i...
SASS and LESS Preprocessing
 Syntax coloring, indentation, reformatting,

code folding, file templates
 Go to declaratio...
Easy Mobile & Web Deployment
 Tight integration with
– Chrome
– Embedded WebKit Browser
– iOS (Safari)
– Android (Chrome)...
Cordova Mobile Device Support
 Cordova integration

for hybrid development
 Build native Android

and iOS packages
– Reg...
Demo

21
Java EE Platform

22
Java EE
 Simplicity

 Productivity
 Specifications
 Convention over configuration

23
Java EE

24
Java EE Platform
Out of the Box Java EE Support

25
Java EE Platform for HTML5
 JSON Processing
 WebSocket
 Concurrency
 Batch

 RESTful Web Services

26
Java EE Platform for HTML5
 JSON-P. JSON is a text-based data exchange format

derived from JavaScript that is used in we...
Java EE Platform for HTML5
 WebSocket. WebSocket is an application protocol that

provides full-duplex communications bet...
Java EE Platform for HTML5
 Concurrency. The Concurrency Utilities for Java EE is a

standard API that enables asynchrono...
Java EE Platform for HTML5
 Batch. The Batch Applications for the Java Platform

specification is a batch framework that ...
Java EE Platform for HTML5
 RESTful Web Services. The Java API for RESTful Web

Services (JAX-RS) defines an API that ena...
NetBeans and Java
 Java Editor is

NetBeans IDE’s
central feature
 Developed in

close co-operation
with Oracle Java SE ...
NetBeans and Java
 Much More Than Creating, Editing, Refactoring
 Building
– Maven and Ant, community Gradle plugin

 D...
NetBeans and Java EE
 Developed in close co-operation

with GlassFish and WebLogic teams
 Best in breed GlassFish integr...
Java EE, HTML5, and NetBeans
 Easy to use HTML5 features

in Java EE applications
 Features:
– JavaScript Library Manage...
Demo

36
Summary

37
Free Tool Box
 HTML
 JavaScript
 CSS
 Java EE
 NetBeans

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

39
40
Upcoming SlideShare
Loading in...5
×

Busy developer-html5-javaee7

1,460

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,460
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Busy developer-html5-javaee7

  1. 1. 1
  2. 2. Busy Developer's Guide to Quickly Integrating HTML5 with Java EE 7 (Java EE and HTML5, the best of both worlds!) 2
  3. 3. Me  Twitter: @geertjanw  Facebook: www.facebook.com/geertjanw  E-Mail: geertjan.wielenga@oracle.com 3
  4. 4. Free Tool Box  HTML  JavaScript  CSS  Java EE  NetBeans 4
  5. 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. 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. 7. HTML5 Platform 7
  8. 8. HTML5 Platform <video> <audio> <canvas> 8
  9. 9. HTML5 Platform <video> <audio> <canvas> 9 CSS3 animations transformations
  10. 10. HTML5 Platform Backbone.js CSS3 Knockout <video> animations <audio> Ext JS transformations <canvas> Angular JS … 10
  11. 11. Preprocessors - SASS, LESS HTML5 Platform - Emmet - CoffeeScript Backbone.js CSS3 - Dart Knockout <video> animations <audio> Ext JS transformations <canvas> Angular JS … 11
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21. Demo 21
  22. 22. Java EE Platform 22
  23. 23. Java EE  Simplicity  Productivity  Specifications  Convention over configuration 23
  24. 24. Java EE 24
  25. 25. Java EE Platform Out of the Box Java EE Support 25
  26. 26. Java EE Platform for HTML5  JSON Processing  WebSocket  Concurrency  Batch  RESTful Web Services 26
  27. 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. 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. 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. 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. 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. 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. 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. 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. 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. 36. Demo 36
  37. 37. Summary 37
  38. 38. Free Tool Box  HTML  JavaScript  CSS  Java EE  NetBeans 38
  39. 39. Me  Twitter: @geertjanw  Facebook: www.facebook.com/geertjanw  E-Mail: geertjan.wielenga@oracle.com 39
  40. 40. 40
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×