A JBoss Project
Red Hat

Posts tagged with 'javascript'

In this article we are happy to introduce new features and improvements that have been implemented as part of the JSDT project and now available in the Neon.1 release:

  • Oomph installer for JSDT setup

  • Node.js debugger improvements

  • New JavaScript debugger

  • "Quick Access" for Gulp / Grunt tasks

  • npm scripts support

Overall, 41 bugzillas have been resolved during the Neon.1 development cycle (some of the bugs have been waiting to be fixed for more than 5 years!) Also, we would like to shed some light on our plans for the Neon.2 release.

In order to have all new JavaScript features available out-of-the-box, please, use "Eclipse IDE for JavaScript and Web Developers" / "Eclipse IDE for Java EE Developers" packages

Oomph installer for JSDT setup

Want to contribute to JSDT project but do not know how? Think that environment setup is too difficult and comprehensive? Now you can easily setup JSDT using Oomph within a few minutes! Here is a short demo video which explains how to do it:

More details about Oomph setup can be found on the following link

Node.js Debugger Improvements

Node.js support was originally implemented as part of the Eclipse Neon release. In Neon.1 debugger facilities have been significantly improved. Previously in order to change the code during the debug session one should have saved the JavaScript file, right click on it → V8 Debugging → Push Source Changes to VM. Now saving the file is just enough - new changes will be applied automatically:

node debugger hot swap

Also, there are a few important bug fixes that improve the debugging experience:

  • Bug 491735 - Terminating V8 debugger process should also kill main Node process

  • Bug 497685 - Cannot set a breakpoint in "node_modules" (Windows specific)

  • Bug 497424 - Source not found for main .js file inside node_modules

More details about Node.js support in Eclipse can be found in the article Neon and Node.js: A magical friendship!

New JavaScript Debugger

Now there is a possibility to debug JavaScript using Chrome / Chromium browser. Basically, in order to debug JavaScript one should simply right click on the html file → Debug As.. → Chrome / Chromium Debugger:

There is also a possibility of debugging JavaScript for applications running on servers using Chrome / Chromium Debugger menu item:

"Chrome / Chromium debugger" menu enabled on the server adapters will work only for maven projects in which JavaScript files are located in the "webapp" folder. However, one can always tune the source mapping logic for particular project manually and run Chrome / Chromium with the debugging port enabled. More details about manual debugger setup can be found in the following video

"Quick Access" for Grunt / Gulp tasks

Now it is possible to execute tasks via "Quick Access" - just press Cntrl + 3 / ⌘ + 3 and choose Run As Grunt / Gulp task:

gulp task quick access

npm scripts support

All npm scripts defined in the package.json can be now executed via Run As.. → npm Script context menu:

npm scripts

The output of the script command will be reflected in the "Console" view:

npm scripts console

Neon.2 Agenda

In the next release we are going to switch to the Closure compiler which is more tolerant and has better performance in comparison with currently used Esprima parser. Moreover, we are going to return broken JavaScript search facilities back to JSDT. Actually, most of the work in the search direction is already done:

Other plans are coupled with polishing Node.js / JavaScript debuggers and making the whole feature set smooth, stable and complete. If you want to have some particular bug fixed in Neon.2, please, speak up on the wtp-dev mailing list or let us know on twitter, youtube, stackoverflow etc.

Thank you!

Thank you to the contributors who made the Neon.1 release happen:

  • Patrik Suzzi

  • Esteban Dugueperoux

  • Victor Rubezhny, Red Hat

  • Gorkem Ercan, RedHat

  • Angel Misevski, RedHat

  • Shane Bryzak, RedHat

We would like to express special gratitude to the community for their feedback! We look forward to hearing your comments, remarks and proposals about new Neon.1 release.
Have fun!

Ilya Buziuk
@ilyabuziuk

In this article I’m happy to introduce brand new JBoss Bower Tools:

Bower JBoss Tools

Bower is a front-end package manager which works by fetching and installing frameworks, libraries, assets. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. Bower provides declarative dependency management (dependencies are declared and tracked in a manifest file, bower.json).

Pre-Requirements

JBoss Bower Tools fall back on native Node.js and Bower calls. Hence, the following software must be pre-installed:

  • Node.js

  • npm

  • Bower

Installation instructions for Node.js and npm can be found here. Bower is a command line utility which is installed via npm command npm install -g bower

Quick Start Guide

For now only init and update commands of Bower API are supported. In order to initialize Bower one need to select File → New…​ → Other…​ and choose "Bower Init" wizard:

Bower Init wizard

This wizard helps to create bower.json file depending on set of preferences:

Bower Init wizard page

After pressing "Finish" button bower.json will be created under specified directory:

Default bower.json

In order to add new dependencies one need to specify them in bower.json:

Bower dependencies

For updating dependencies user should right-click on the bower.jsonRun As…​Bower Update

In most cases Bower and Node.js will be detected in the system automatically. However, if the detection failed warn dialog will be shown for specifying location in preferences:
Bower preferences

"Bower Update" launch shortcut makes a native call which will install required packages or update them to the newest version according to bower.json:

Bower Update launch

Specified packages will be created under bower_components folder after "Bower Update" execution:

Bower components

Basically, that is all - one can now use those packages for future front-end development.

Demo

Here is a short demo video which describes a basic use case of JBoss Bower Tools:

How to give it a go ?

Bower support will be available in 4.3.0.Beta2 release and above. You can also use our nightly update site in order to try Bower Tools (JBoss Tools JavaScript Tools category) before the official release:

Bower dependencies

Conclusion

We are trying our best to make our tools as good as possible. User feedback is what we are seeking for now. We look forward to hearing your comments, remarks and proposals.
Have fun!

Ilya Buziuk
@ilyabuziuk

JavaScript is extremely popular nowadays and the fact Eclipse JavaScript Development Tools supports JavaScript ECMA3 standard only didn’t let us sleep well, so we decided to do something about it.

First we got to work and fixed tons of issues in Eclipse JavaScript Development Tools to make it usable, then when it esd good enough we extended it with some good features to make it even better.

Tern.java Adapter for JavaScript Facet

Tern.java is now working behind the scene to provide JavaScript code analysis and content assist. Good news there is no need to configure it manually. Just install Tern.java Adapter from JBoss Tools update site and it configures projects with JavaScript facet automatically to unleash all Tern IDE features for you.

ECMA5 Support

HTML and JavaScript source editors now show JavaScript ECMA5 proposals in content assist for projects with JavaScript facet.

javascript-content-assist

You can also get content assist for many popular JavaScript Libraries through Tern Modules. Manual configuration is required in Project Preferences.

javascript-modules

CordovaJS Module for Tern.java

We provided CordovaJS Module for Tern to improve Cordova related content assist in JavaScript source. Tern integration configure it for Eclipse Thym Project automatically, so you don’t need to do manual configuration to see content assist for CordovaJS. Just create Thym project, open index.htm and start using it.

javascript-cordova-content-assist

AngularJS Tools Early Access

JBoss Tools provides support for AngularJS through JBoss Tools Central Early Access. It installs full distribution of AngularJS IDE with many cool feature like:

  • source code highlighting and navigation

  • source code content assist

  • AngularJS model view

  • and more.

Read about all AngularJS IDE features here.

/Denis Golovin

Looking for older posts ? See the Archived entries.
back to top