5 Productivity-Boosting Features – Sencha JetBrains IDE Plugin

Developers are often spoiled by the helpfulness of Integrated Development Environments (IDEs). When writing the Sencha Ext JS plugin for JetBrains IDEs, I rarely typed a full line of code without IntelliJ finishing it for me. I’ve been developing in Java for over a decade but honestly I’m not sure I could get anything beyond a hello world app to compile if all I had was vi and javac. For better or worse, I’ve become married to IntelliJ, til death do us part.

Like most developers, I also write a ton of JavaScript code. When doing so, I find that I expect far less from my IDE than when coding in Java. Code completion for JavaScript? Generally unreliable. Any kind of understanding of the frameworks, libraries, and idioms I commonly use? Not likely. Keep those API docs on speed dial because the most you can hope for when coding in JavaScript is for the IDE to politely suggest some strings you’ve already typed elsewhere.

The aspects of JavaScript we love – open typing, functions as first class objects, that wonderful prototypical inheritance model – are also its achilles heel when it comes to IDE support. A new JavaScript framework pops up every week. Many of them, like AngularJS and React, alter the way we design our code to such an extent that using them is almost like coding in an entirely different language. It simply isn’t realistic to expect JavaScript IDEs to support all of these frameworks. If we focus on a single framework, however, especially one with a rich class system like Ext JS, we can build a much better experience. Here are 5 features in the Sencha JetBrains IDE plugin that we’re super proud of and hope will raise your expectations of what a JavaScript IDE can do.

Try Ext JS and the JetBrains IDE Plugin

Five Productivity-Boosting Features

1. Config Completion

Most JavaScript editors simply suggest snippets you’ve already typed in place of true code completion or “intellisense”. Some of the best IDEs like WebStorm or Visual Studio can provide pretty decent suggests when completing object properties and methods, but none of them understand configs. With the Sencha JetBrains IDE plugin installed, you can type something like…

Ext.create(‘Ext.panel.Panel’, {
      // ctrl-space here	
})

… hit “ctrl-space”, and get all of the available configs to pop up. Seems simple, but for me that’s the plugin’s single most helpful feature. It will drastically reduce the number of trips you make to the API docs.

2. Event Listener Completion

Ext JS has a rich event system with some classes firing over 100 different events. You can get a complete list of available events by typing “ctrl-space in” any “listeners” object, or the “on”, “mon”, “un”, or “mun” methods of any subclass of Ext.Component. For example:

var panel = Ext.create(‘Ext.grid.Panel’, {
      listeners: {
            // ctrl-space here
      }
});

panel.on(/* or here */);

3. Automatic ViewController Method Generation

Copying the order and type of parameters passed into an event handler from the API docs can be a real pain. When you need to handle an event on a component with a bound ViewController, add the listener binding first and let the plugin add the handler method to the ViewController for you automatically. For example:

Ext.define(‘MyApp.view.User’, {
      controller: ‘user’,

      buttons: [{
            text: ‘Save’,
            listeners: {
                  // the plugin will warn you if this 
                  // controller method doesn’t exist
                  // and offer to create it for you
                  click: ‘onSaveClick’
            }
      }]
});

If the UserController doesn’t have an onSaveClick method, the plugin will underline “onSaveClick” and suggest a quickfix that will create the method for you with the appropriate parameters and even annotate it with JSDuck @param tags, so code completion will work when using each parameter in the method body.

4. Automatically Manage the requires Array

Ext JS 4 introduced the requires array to keep builds small. The plugin helps keep your requires arrays up-to-date by warning you when classes are used but not required. It suggests a quickfix and adds all referenced classes to the requires array with a single click. You also get a warning when required classes are no longer needed and an accompanying quickfix that allows you to remove all unused classes with a single click. The plugin can be configured to do all of this automatically via Preferences >> Other Settings >> Sencha.

5. Add Columns to a Grid for all Model Fields

Almost every enterprise app has at least one giant grid with enough columns to lose yourself for days. While these may give your UX guys nightmares, sometimes they are a necessary evil (because requirements!). Once you’ve got an Ext.data.Model or Ext.data.Store class defined and bound to your grid, you can right click…

Ext.create(‘Ext.grid.Panel’, {
      viewModel: ‘user’,
      bind: {
            store: ‘{users}’
      },
      // right click here
});

… and select “Generate >> Generate Columns from Model”. The plugin will add a column for each model field and even derive column header text by humanizing each field name. Mouse haters can access the “Generate” menu using ctrl-return.

A Few Best Practices

It’s always been our design goal for the plugin to “just work”. That said, here are some tips to keep it “just working” smoothly.

Feed it the Ext JS/Touch Source

The plugin doesn’t come bundled with any hard-coded information about classes, properties, configs, events, etc. It derives all of that from scanning the source code. This means that it’s always up-to-date as you migrate to new versions of the framework, and it understands your classes as well as it understands Sencha classes. It also means that it needs access to the unminified Ext JS or Sencha Touch source code to work properly. If the framework source is located within your project tree, no additional configuration is required (as is the case if you’ve used Sencha Cmd or the plugin itself to create your app). If not, you just need to add a JavaScript library that points to the location of the framework SDK.

In WebStorm you can do this via:

Preferences >> Languages and Frameworks >> JavaScript >> Add…

Give your library a name, point it to the root directory of the framework, and select “<Custom>” for “Framework type” instead of any of the Ext JS items that appear in the list (which are provided not by the plugin, but by WebStorm itself, and aren’t up-to-date).

JSDuck Comments

The only way that the plugin can infer a method parameter’s type is via jsduck / jsdoc comments. All of the Sencha API documentation is generated using jsduck. If you’re not using it already, I highly recommend it for creating beautiful, searchable docs. For example, code completion will work much better in methods if you add comments like:

/**
 * Fetches some data from the server. These comments make code completion work in the method body!
 * @param {String} url The url to fetch
 * @param {String} method The http method to use
 * @return {Ext.Promise}
 */
fetchData: function(url, method) {
      // now code completion will work on url and method based on the type info above
      // also, any code that references the result of this method will autocomplete properties of Ext.Promise because of the @return tag in the comments
}

It’s also important to use @cfg when defining configs for your own classes. For example:

Ext.define(‘MyApp.view.MyView’, {
      extend: ‘Ext.Component’, 
      /** 
       * @cfg {String}
       * This ensures that myConfig shows up when completing configs on an instance of this class
       */
      myConfig: undefined
});

Multiple Sencha Frameworks/Versions

If you’ve yet to migrate your Ext JS and Sencha Touch apps to Ext JS 6 universal apps, or you have multiple versions of Sencha frameworks in your app, the plugin is here to help. You just need to add each framework as a JavaScript library and tell the IDE which parts of your app go with with the framework using “scopes”. The steps for it are provided in our documentation for IDE plugins.

Let us know how it goes. You can share your feedback in the forum.