HTML5 Web Development Support

Java Enterprise application development in the NetBeans IDE
Click image for fullscreen preview

Starting with NetBeans IDE 7.3, new features to support and enhance the development experience with client side Web applications that utilize the HTML5 family of technologies have been introduced. You can use this to rapidly and intuitively create rich Web applications that support the responsive web design paradigm targeting desktop and mobile platforms simultaneously. In addition, you can use HTML5 technologies within Java EE and PHP applications.


Node.js Development Support

The NetBeans IDE enables quick and easy development with the Node.js runtime environment. Via wizards and templates, you can rapidly set up your Node.js applications and use NetBeans IDE for running, debugging, and testing.

Alternatively, you can use the built-in integration with Express to create front-end JavaScript applications with Node.js on the back-end.

The IDE recognizes Node.js code and provides coding assistance and highlighting.


Accelerated HTML5 Development Support

The NetBeans IDE enables accelerated HTML5 Web application development right from when you create a HTML5 project. You can select from a list of popular online templates for HTML5 projects or specify the location of a .zip archive of a site template. When you create a project based on a site template, the files, libraries and the structure of the project are determined by the template.

Alternatively, you can use all the HTML5 features described below after creating Java EE applications and PHP applications.

Once set up, the live preview of Web pages, editor support, debugging capabilities and other features, help in developing, testing and debugging your HTML5, Java EE, and PHP applications.

Getting started with HTML5 Development


Live Preview of Web Pages

Better than WYSIWYG as most professional developers would confess, the deep integration with Chrome and the internal Embedded WebKit Browser, both of which are WebKit based, ensures a seamless connection between your code and the page design.

Through the use of the remote WebKit API's, you continue to have complete visibility and control of the code in the IDE while getting instant visual feedback from the browser page.

Note: Live web preview of web pages is also available on mobile devices, that is, not only on Chrome and the internal Embedded WebKit Browser, but also on Chrome on Android and on Mobile Safari on iOS.


Responsive Web Design Capability

NetBeans IDE supports the use of Responsive Web Design architectures by letting you select various form factors for your Web page and instantly laying out the visual elements of the Web page in the browser to that form factor. You can select from a range of preset form factors ranging from smart phones to desktops, in either portrait or landscape modes.

In addition to enhancing browser capabilities, the IDE's CSS Style editor is also aware of the media query that the browser is currently displaying and will place edits to the CSS into that media query automatically.


Enhanced JavaScript Support

The JavaScript support in the IDE has been overhauled. Support includes JavaScript framework-specific syntax coloring, code completion, as well as other editing and refactoring tools.

The following JavaScript frameworks are supported: jQuery, JSON, Knockout, Ext Js, AngularJS, JsDoc, ExtDoc, and ScriptDoc.

You can also now control the formatting options for the JavaScript language itself, in the Options dialog box.


CSS Editing and Styling Support

Editing support for Sassy CSS and LESS CSS preprocessors is provided, including syntactic and semantic coloring for language constructs, indentation, reformatting, code folding, and file templates. Code completion and refactoring tools are available for variables and mixins.

Deep integration with WebKit browsers allows you to see the changes that you make in the CSS Style window, live, as they happen, in the browser. No more guessing what the CSS changes will look like until you refresh the browser. The changes are live and in the source code.

You can also "inspect" from the browser and the CSS Style window will display the CSS rules of the element you have selected in the browser automatically. You can now edit your CSS from the CSS Style window using properties, or go directly to the CSS source code and edit from there, with code completion and inline documentation.

Working with CSS in HTML5 applications

Note: CSS editing and styling support is also available on mobile devices, that is, not only on Chrome and the internal Embedded WebKit Browser, but also on Chrome on Android and on Mobile Safari on iOS.


Mobile Device Support and Cordova Development

Develop applications in HTML5, JavaScript, and CSS3 and let the IDE create native distributions for you, via its Cordova/PhoneGap support. Each HTML5 project in the IDE can be turned into a native iOS or Android package and be deployed to the native device directly from the IDE.

The IDE lets you visually edit CSS files and debug JavaScript in the Chrome browser and the embedded WebKit browser, as well as directly on iOS devices (Safari) and Android devices (Chrome).

Note: Any kind of web application, whether it is HTML5, Java EE, or PHP, can be tested and debugged on a mobile device.


Debugging & Testing

Web Services Consumption

Cross Browser Compliance

You can debug JavaScript code with the Chrome browser, the internal Embedded WebKit Browser, the Chrome browser on Android, and the Mobile Safari browser on iOS.

Debugging and Testing JavaScript

Easily access your enterprise data by creating JavaScript clients for RESTful Web services.

Using the RESTful JavaScript client wizard, quickly generate a JavaScript client for a RESTful Web service located in a NetBeans project containing the Web service.

Ensure that your application works across multiple browsers.

With the inline documentation available via code completion, the IDE informs you about browser support for particular code constructs.

See Also