HTML5 Web Development Support
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 |
|
|
|
|
See Also
- NetBeans IDE 8.1 Release Page for a list of highlighted features in the latest stable release.
- PHP and HTML5 Learning Trail for tutorials that will help you get started.