A Fresh Approach to JavaScript Documentation — The New Ext JS 4 Documentation Center

At Sencha, we’ve been challenging ourselves to improve our API documentation, and listening to your feedback on what we should focus on. Today, I’d like to share a few of the improvements we’ve made, as well as some of what we’re working on for the future. We hope you like what we’ve done and where we’re headed.

The redesigned Ext JS 4 Doc Center features Docs, Guides, Videos, and Examples all in one place.

The Return of Tabs

The first thing you’ll notice when you load the docs is that tabs are back — and sexier than ever! While the earlier versions of the docs app had many improvements, tabs were missed by many so today we’re bringing them back by popular demand.

Easy Access to Learning Materials

In addition to the existing API reference and reference guides, we’ve also added easy access to examples, screencasts and other learning materials. The updated docs adds new tabbed sections for examples, guides, and videos. We’ve also revamped and in some cases rewritten the Ext JS 4 guides, improving flow, fixing inaccuracies and bringing them into a new “Guides” section. Now that the examples are part of the docs app, you can play with an example while you’re reading details on the classes that power it.

Another brand new addition to the docs is the videos section. We’re launching with 30 Ext JS videos, ranging from SenchaCon 2010 sessions to screencasts on how to use the framework’s components. We’ll continue to regularly upload more content here, especially in the area of new screencasts explaining many of the framework components such as Windows and Toolbars. All the screencasts and learning materials will also be mirrored on our learning center for those of you who prefer to access materials that way.

We’ve also implemented another of the most requested features, an easy-to-read print view for docs. Click the large printer icon at the top right of a Docs page to preview.

API Reference Upgrades

The new materials aren’t the only improvements we’ve been making: the API reference itself has also benefitted from a lot of hard work. We’ve been through every class in Ext JS to improve the accuracy of the reported types for each of the functions, configs and events, now explicitly stating precisely what types each function or configuration takes.

Badges

We’ve also added badges to all of the functions that are currently Deprecated, Static or Protected, so it’s easy to see if a function is already deprecated. The deprecation notices also point you to the function you should be using instead. The Static functions on each class are separated into their own section so that they’re not confused with normal instance functions.

Inline Examples

Perhaps the biggest upgrade for the class reference pages is the addition of inline examples. We’ve always included code snippets and screenshots in the documentation but before, you had to copy them into your own app to see them work. Now, the new inline examples have a brand new preview mode that allows you to immediately see how sample code looks. Even cooler — you can now edit the example code inline and see your changes live on the page:

The new inline examples lets you edit sample code and see it instantly in a brand new preview mode.

Many of the UI classes already have inline examples and we’ll continue to roll out more.

Powered by Sencha Labs

All of the functionality improvements above are enabled by work on JsDuck, our documentation generator and presentation app. JsDuck is a open source project of Sencha Labs and is hosted on the Sencha Labs github account. JsDuck builds on the standard JSDoc syntax while adding many enhancements to generate excellent documentation for your Ext JS and Sencha Touch projects.

Some of the recent additions to JsDuck include compatibility with Markdown, easy search integration and history/deep linking support. Best of all, the front end app we use on our docs is an Ext JS 4 MVC app and comes included with JsDuck. It’s easy to install for your own projects. Give it a try and let us know what you think.

We’re Just Getting Started

Since the launch of Ext JS 4.0 we’ve been hard at work improving all aspects of helping you learn the framework and build amazing apps. We’ve launched a new learning center, improved the way we track bugs and respond to issues on the forums and more. We’re also working on more screencast videos, more guides and several larger MVC example apps. You’ve given us a tremendous amount of support as well as suggestions on how to improve via the active docs app threads on the forums.

We hope to continuously release documentation updates, so make sure you leave a comment here on on the forum with what you think of the progress and what you want to see next.