Tj VanToll

Hey Bear,

Certain parts of jQuery UI are more mobile-friendly than others, but the core of jQuery UI is useful in both a mobile and desktop context. For example the widget factory is just as applicable to mobile development as it is to desktop development as it just helps you build widgets—which is why it works fine for jQuery Mobile. Another example would be the position utility, as helps you position elements regardless of the screen it's being positioned on.

There are some widgets in jQuery UI where the default CSS was written with a more traditional desktop browser in mind—datepicker being the best example. Because of this I devote a section of the book showing how to use datepicker in a mobile context, which involves a few media queries and setting a few options. I try to cover these mobile-specific use cases as they come up in the book. For instance setting autocorrect="off" and autocapitalize="off" attributes makes for a more usable autocomplete widget on mobile (as you almost never want the browser to “correct” your predefined options).

In jQuery UI we consider mobile browsers to be extremely important and we've been increasingly working to optimize for these devices. The jQuery UI and jQuery Mobile projects are slowly merging, as users shouldn't have to choose between two libraries—there should just be a bunch of widgets that just work. And since both projects are built on the widget factory it's not that big of a stretch. For example the 1.4 release of jQuery Mobile includes the jQuery UI tabs widgets verbatim—not a single line of JS code is different. You can expect more of this in the near future.

TJ

Hi Ken,

The book assumes some basic knowledge of HTML, CSS, JavaScript, and jQuery. Where intermediate level concepts are used they are explained, but if you don't have a foundation in those web technologies you're going to have some trouble.

TJ

Hey Bear,

I see jQuery UI playing a complimentary role with other UI frameworks. Although there is certainly overlap between what Bootstrap and jQuery UI do, there are a lot of widgets jQuery UI provides that Boostrap doesn't—for instance Bootstrap doesn't have a datepicker.

But more importantly, there's no reason you can't use Boostrap and jQuery UI side by side. There's even a project that integrates the CSS of the two projects so you can use jQuery UI widgets with Bootstrap's CSS: http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/components.html.

In a more general sense, jQuery UI tries to provide extremely high quality, extensible, well documented, and accessible widgets. They're widgets that you can drop in and feel confident that they'll just work—even for users on assistive technologies (i.e. screen readers).

That being said jQuery UI only provides 12 widgets, and most developers are going to need more to build today's client-side-heavy applications. So in jQuery UI we try to make it easy to drop a widget into an existing system. If you have a Bootstrap site you can drop in a jQuery UI datepicker. If you're using Foundation you can drop in a dialog and an autocomplete. The default jQuery UI theme is purposely a grayish color so it doesn't clash with existing themes. The same methodology applies to MVC frameworks. Using Ember? Backbone? Angular? At some point you're still probably going to need an autocomplete or dialog. We try to provide high-quality solutions that integrate into these scenarios.

The AMD support we added in jQuery UI 1.11 helps to complete this story, as it's now super simple to pick out the one or two widgets you need and get a lightweight file you can drop into your existing site.

It's also worth noting that you can use the jQuery UI widget factory to build UI components specific to your application, your company, or whatever. There are lots of people that take the 2k widget factory file from jQuery UI and forego the rest of the library altogether. If you've decided to use jQuery, we feel that the widget factory is the single best way to build reusable components on the web.

TJ

Hey Bear,

This is a great question and one that I get asked a lot.

The most obvious feature is new widgets. Since your 2nd edition of jQuery In Action there have been four new widgets added to the library: selectmenu, tooltip, spinner, and menu. Each widget brings adds some new functionality and each is covered in the book.

New widgets are cool, but I actually get far more excited about the improvements made to the core of jQuery UI, as jQuery UI has always been about quality rather than quantity. The core of jQuery UI is the widget factory, and there have been substantial improvements to the how the widget factory works in the last few years. The most powerful addition is the ability to easily extend widgets. For example, always wish there was a built-in confirmation dialog? You can build one in a few lines of code: http://jsfiddle.net/tj_vantoll/yr06ye4u/. Wish there was an option for using icons in dialogs? You can build one of those too: http://jsfiddle.net/tj_vantoll/23tby3h0/.

We built this functionality because real-world use cases need extremely custom widgets. I'm the first person to see new jQuery UI bug tickets and I close a whole lot of them with custom extensions now. We even have documented extension points in our widget's APIs now (for example here are autocomplete's http://api.jqueryui.com/autocomplete/#extension-points). In the book I devote chapter 2 to learning the widget factory, chapter 8 to building custom widgets, and chapter 9 to building widget extensions.

The book focuses on the widget factory because I believe that it is the best solution out there for building reusable components on the web today. A lot of people don't realize this, but the jQuery UI widget factory is actually the basis of jQuery Mobile, as well as some 3rd-party commercial libraries. So knowing the widget factory's conventions is an important and reusable skill.

The final big feature I'll mention is full AMD support, as it lets you create an optimized build of jQuery UI that's integrated with the rest of your codebase. The single biggest complaint I get about jQuery UI is its size, but jQuery UI is modularly written, and the AMD support gives you an easy way of grabbing only the code you need. I personally am a huge AMD fan and I advocate for its usage in the book.

There are other things—like API redesigns of existing widgets and Bower support—but the big new things I get excited about are the new widgets, an improved widget factory, widget extensions, and AMD support.

TJ

Hi Shiva,

Bear is spot on. You're going to need to know the basics of JavaScript and jQuery before digging into jQuery UI. The book gives does give plenty of real-world examples, and I do believe the book is important to Java developers, but if you're coming in with no JavaScript knowledge you'll want to look to other resources first.

TJ

Hi Marwen,

The primary goal of the book is to thoroughly explain how the jQuery UI widgets work. An important goal of the jQuery UI project in general is to make integration with other frameworks easy. Therefore it should be easy to drop jQuery UI widgets in regardless of what other frameworks you happen to be using.

That being said some of the book is explicitly devoted to showing how jQuery UI integrates with other popular tools and frameworks. Chapter 10 is devoted to working with jQuery UI in an AMD environment and showing how it works with Require.js. I have an appendix designed to show how you can integrate jQuery UI with Backbone.

TJ

Hey Ferdinand,

There is no IDE that I know of that gives you the drag-and-drop functionality you're describing. I wrote a little utility that lets you configure widgets with HTML attributes (https://github.com/tjvantoll/declarative-widgets), but I think that's as close as you're going to get.

TJ

Thanks everyone!

I got started answering questions today and I hope to get through the rest of the open ones tonight. Keep them coming

TJ

Hey Bear,

The book does cover how to use jQuery UI with AMD / RequireJS. It's the focus of chapter 10 and then it's put to use in a real app in chapter 11. I highly encourage the usage of AMD in the book because I think it's important to ship a minimal JavaScript payload to users. The single biggest complaint about jQuery UI is its size, which is silly, because the library is very modular so it's easy to pick out the pieces you need. AMD makes using those modules easy.

To me the biggest challenge when using jQuery UI with any front-end MVC framework (Backbone, etc) is dealing with dynamically inserted content. The conventional model of using jQuery / jQuery UI is you wait for document ready, you select elements with jQuery, and then you make the appropriate plugin calls to build your UI. With MVC frameworks you're dynamically rendering views (often based on templates), which changes how you initialize the widgets you need to use. Appendix C gets into the specifics of how to approach this with Backbone, but I tried to make the discussion somewhat generic to handle any MVC framework. The core of my approach is a small jQuery UI extension that I wrote that lets you configure widgets with HTML attributes: https://github.com/tjvantoll/declarative-widgets.

TJ

Hey Mohamed,

I'd say your best bet is to get familiar with the JavaScript language in general and learn to use the browser's development tools. Being able to interpret error messages is a very valuable skill that takes a long time to figure out.

The book doesn't cover debugging explicitly, but it does provide hints where they make sense. And the book's first appendix covers resources for getting up to speed.

TJ

Hey Qunfeng,

There is no specific chapter on accessibility, but it's brought up as applicable throughout the book. For example the section on button widget discusses how jQuery UI builds accessible buttons; the section on icons discusses how to use icons in a screen-reader friendly manner; the section on form validation discusses how to build accessible form validation; and so forth.

Accessibility is very important to jQuery UI. We work with accessibility groups to improve the usability of our widgets and we're always open to pull requests from the community to address any accessibility shortcomings.

TJ