New JavaScript Editor

I did not write a blog post here for a few weeks. I think the last my post was  about releasing NetBeans 7.1 in the beginning of January. The reason is not that I would change the job:), but that I have concentrated on new JavaScript support/editor.

The new JavaScript editor is written basically from scratch. The answer for the question "Why from beginning again, why do you just improve the old one?" is not easy and the decision has more aspects. One of the main reasons is that the old support was written 4 years ago and the architecture is limited. Also during the time, the APIs were changed and it was very hard to keep the editor up to date. Also there is a license issue etc. In short, it is time to rewrite the old JS editor. 

We build up strong community about the PHP support in NetBeans and because many PHP developers also write JavaScript code I would like to ask you for a help. There is a continual PHP build with the new JavaScript support. You can download the result of the builds here. It's a zip file. You can unzip the file anywhere, where you want. I recommend to run the build with the new userdir, to avoid damaging your current userdir. It shouldn't happened, but just to be sure:). You can achieve this through the switch --userdir. So start the unzipped file from command line from the folder, where you unzipped it, can be done with this command on unix:

bin/netbeans.sh --userdir /path/to/new/userdir

and on windows:

bin\netbeans.exe --userdir D:\path\to\new\userdir

For the developers who use continual php build already, it's well known. There is also full IDE build with the new JavaScript support for people, who need more than only PHP support. 

Because the builds with the new JavaScript editor is created from a branch, there are not nightly builds available. They will be, when we merge the branch to the trunk, but so far we have to work only with the mentioned continual build. We will merge our branch after branching NetBeans 7.2 from trunk. This is also answer for the question, what release of NetBeans will contain the new JS support. It should be the release after NetBeans 7.2.

I'm asking you whether you could play with the builds or better, could work in the builds with new JavaScript support and tell us every issue that you run in. It can be everything what doesn't fit you, something doesn't work as you expected, something is slow, you want change the behaviour of a feature etc. Your input / comments are very important for us and it will help us to achieve the new JavaScript support that you need. 

The best way how to communicate issues is through our Bugzilla, because it is simple to track them. Sure you can write comment here:), but still I prefer Bugzilla for any issue. You can click here (you should be already log in Bugzilla), a form for the new JavaScript issue is opened, with pre-filled component Editor and NO72 keyword.

I will write about the single features later, but now I will mentioned a few features that should work in better way than in the old support. 

  • Syntactic and semantic colouring
  • Navigator
  • Mark Occurrences and GoTo Declaration 
  • Code Completion

    Code Completion is invoked through keyboard shortcut CTRL+SPACE. The first invocation offers items that are found through a source model. Almost all editor features are based on the model, that is build from source code. There is a lot of work on the model yet, but it should offer better results.

    When the pop up window with code completion items is open and you press CTRL+SPACE again, then the code completion offers all elements that are in the project. In the pictures all elements that starts with letter 't'.


  • Formatter with many options
  • and more :)
A few features are not still implemented that are supported in the old JavaScript support (for example jQuery support), but we are adding this features ASAP.

Comments:

Nowadays every PHP developer is using some JS framework, jQuery, Ext JS, Dojo etc. Do you consider to support these frameworks? I use the Spket plugin for Eclipse which is able to "load framework profile" by parsing the JSB files. What about this approach?

Posted by jozef on March 22, 2012 at 01:59 PM CET #

Very nice work.
I just took a little look at other IDEs because of the current JS Support in NetBeans.
I love your new work and will test it.

Currently the Frameworks are already supported. So I think the will be supported in the new Version too.

Posted by guest on March 22, 2012 at 08:48 PM CET #

Yes, the JS frameworks were supported and we work to support them again. I'm also evaluating the possibility to use JSB files that was mentioned by Jozef.

Thanks for your help.

Posted by Petr Pisl on March 23, 2012 at 08:12 AM CET #

Nice work!

Now only a better CSS editor is missing...

Posted by kurt on March 26, 2012 at 02:26 AM CEST #

I used netbeans for a long time.

The are issues related to scope that should be taken in count, also the issues related to module definitions, and stuff like correctly undertand namespaces (literals as packages).

We have discussed them at forum and issues board.

Thanks for the effort i will be testing as soon its ready.

Posted by Andrés Serrón on March 26, 2012 at 04:15 PM CEST #

Nice to see the JS editor getting some attention. Can you tell me, are there going to be improvements with code folding? It's frustrating not to be able to collapse various structures (e.g. anonymous functions)

Posted by Dan on March 27, 2012 at 04:13 AM CEST #

@Andres: You mentioned things that should already work. As I have wrote, the bulk of features are based on a model, that tries to reflect the current source. Try it ad write what is wrong, what doesn't work.

@Dan: Regarding the code folding, I'm working on it just now. It will be available soon. And yes, it should be more flexible, then the previous one.

Posted by Petr on March 27, 2012 at 04:32 AM CEST #

Hi

We are using Javascript editing in some java projects. There we depend on other Javascript libraries (extjs, tinymce, etc) by using maven overlay method.
Would code completion be possible on these libraries?
That would really be awesome

Posted by vdkuil on April 05, 2012 at 06:07 PM CEST #

@vdkuil: Basicaly yes. The JavaScript support doesn't know nothing about the maven, but there are going to be mechanisms, how to define, which libraries are used. It's in my plan.

Posted by Petr Pisl on April 06, 2012 at 05:12 AM CEST #

Ok, working with editor.

Are you usign (i guess so) js pattern files to check how structure is parsed?

In that case, where i could get in touch to provide some, i don't want to send unneeded patterns.

Currently im writting some, just started, coloring and folding are working correctly. I found somethign with array literals as class properties.

Great job, keep in touch.

Posted by guest on April 07, 2012 at 01:06 PM CEST #

@Petr: Great work so far.

Is the namespace support basically complete?

Do you have some sample .js code demonstrating how namespaces and classes within should be declared?

I have some code that works with code completion etc, but it does have some issues so I would like to see a sample before making further comment.

Also it would be great to see namespace() support without having to declare the namespaces in a stub file.

Posted by guest on April 08, 2012 at 04:24 AM CEST #

@gues: The current approach is "manual". I just pick up one of many patterns ant "manually" implementing in the model. I was thinking about a "framework" that will allow to define new patterns, but I'm afraid that it will take much more time and will not be so effective as the "manual" implementation.

If you have list of patterns that should be supported, please send to me, or create an issue and attach the list there.

Regarding arrays, I haven't time so far to implement something special for arrays. So they are basically untouched:). Please send me all the issues or file the issues in our Bugzilla (I put them there anyway to track the them).

The namespaces: I have implemented them, but I don't think that it's all what I can do for it. I'm sure that there can be many improvements. All samples code should be in the test files (http://hg.netbeans.org/web-main/file/76a8b6c8c71d/javascript2.editor/test/unit/data/testfiles). If you can provide other samples it will be great.

I don't understand correctly your point about the stub files, because currently there no stub files. What do you exactly mean. Thanks for your feedback and help.

Posted by Petr Pisl on April 08, 2012 at 06:29 AM CEST #

I am a different guest to the guy asking about patterns.

I am the namespace guest.

Regarding stub files, because the editor can't interp a namespace function, we need something like:

var org = org || {};
org.groupname = org.groupname || {};

it would be great if the editor could understand
namespace("org.groupname");

And then you can create classes under that namespace

org.groupname.MyClass = function() {}...

I can't open the testfiles url, I get an error:
javascript2.editor/test/unit/data/testfiles).@76a8b6c8c71d: not found in manifest

Posted by MikeR on April 08, 2012 at 06:38 AM CEST #

Great to see a better support of JS in Netbeans

I hope you can also add CoffeScript support to the editor also!

Posted by Porfirio Ribeiro on April 09, 2012 at 05:28 PM CEST #

Great, Petr !!!

multiple-levels embed objects navigator, is what i was expecting for several years.
Concerning to autocompletion, in previous versions, i had to declare
var test = {test: 'not_initialized'}; test.test = {test: 'bar'} to autocomplete test.test.test;
I'll check if subtree completion works on var test = {test: {test: 'ok'}}

Posted by bullito on April 11, 2012 at 08:02 PM CEST #

@jozef - For jQuery, you can use jquery-vs-doc (jquery with documented for visual studio intellisense) to get autocomplete at Netbeans.

Posted by guest on April 24, 2012 at 10:43 AM CEST #

I am missing better autocomplete in 7.2beta.
Something like MikeR has mentioned.

var org = org || {};
org.groupname = org.groupname || {};

org.groupname.MyClass = {
fnc1 : function() {

},

fnc2 : function() {
/* @var me org.groupname.MyClass */
var me = this;
me.here_i_need_autocomplete_for_fnc1;
}
};

Posted by jozef on June 07, 2012 at 08:45 AM CEST #

@jozef: the new editor is supporting this, even without the @var comment.

Posted by guest on June 07, 2012 at 02:15 PM CEST #

@quest: are you sure? i have downloaded the latest beta today and tried the above mentioned snippet. it is not working. therefore i wrote the comment. should i try a nightly build?

Posted by jozef on June 07, 2012 at 03:32 PM CEST #

@jozef: I'm sure:). But noticed that the new JS editor is not in NetBeans 7.2. It's going to be apart of NetBeans 7.2.next, which should be named NetBeans 7.3. In the post there are links to the place, where you can download a continual build that contains new JS Editor. I will be glad, if you will test it.

Posted by Petr on June 07, 2012 at 04:12 PM CEST #

@Petr:
1. I have downloaded the continual PHP build, but the autocomplete really doesn't work. (used my previous code example)

2. I am using Ext JS 3.x and 4.1. I would like to see support for Ext JS 4 namespace() and define() constructs.

Ext.namespace('my.company.product');
Ext.define('my.company.product.MyClass', {
property1 : 'hello';
fnc1 : function() {
var a = this.autocomplete_for_property1;
}
};

Posted by jozef on June 08, 2012 at 08:42 AM CEST #

Hi Jozef, did you download the continual php build from here: http://bertram-tst.netbeans.org:8080/job/PHP%20Build%20with%20JavaScript%202/ ? The global variables are purple or green? I'm asking because in my build the code:

var org = org || {};
org.groupname = org.groupname || {};

org.groupname.MyClass = {
fnc1 : function() {

},

fnc2 : function() {

var me = this;
me.fnc1(); -> Here code completion should work correctly
}
};

I will look at the ext support. Please feel free to play with the build and file as many issues as you can:).

Posted by Petr on June 08, 2012 at 09:00 AM CEST #

@Jozef: One more note. The editor doesn't have good error recovery yet. :). There are at least two good issues that can prevent to parse the broken code.

- the last line should be empty. Unfortunately if it's not, then the parser doesn't return nothing and then basically all features doesn't work.

- sometimes helps to place semicolon at the end of the line, where you are editing. So for example me.|; is much better then me.| without the semicolon.

Posted by guest on June 08, 2012 at 09:05 AM CEST #

@Petr
- yes, i have exactly this build
- global var is purple
- semicolon did the trick, without it i don't see fnc1 in autocomplete list
- last line doesn't need to be empty; parser seems to work
- i see an issue in Navigator window, the tree displays structure "org.org" (org has child leaf org), that is wrong in my opinion

Posted by jozef on June 08, 2012 at 09:47 AM CEST #

@Jozef: I have just corrected the issue. It should be ok in the next build. Thanks.

Posted by Petr on June 08, 2012 at 04:00 PM CEST #

Nice job! I need to say that, like Jozef, I'm craving for support of Ext4 in the code Navigator.

This works a charm with Ext3 way:

my.Class = Ext.extend(Ext.Window, {
myMethod: ...
,myProp: ...
};

We're even beginning to get autocomplete for custom class & methods in javascript!

Unfortunately, the navigator remains desperatly empty with the new Ext4 way:

Ext.define('my.Class', {
extend: 'Ext.Window'
,myMethod: ...
,myProp: ...
});

Any plan of adding support for that? I guess there were custom rules for Ext3 classes parsing?

Posted by guest on September 27, 2012 at 02:31 PM CEST #

Hi, not understand, I used 7.4, now trying to use 8.0 in my project, stop working "syntax validation" for JavaScript, how to correct this?

Posted by guest on April 07, 2014 at 06:36 PM CEST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

This blogs is written by NetBeans developers who contribute to the PHP support mainly.

Search

Archives
« April 2015
SunMonTueWedThuFriSat
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  
       
Today