Video Review: jQuery UI Development

This post is my review of jQuery UI Development, a Packt Publishing video course by Ben Fhala that is intended to help viewers "utilize jQuery UI to its full potential." The jQuery UI page describes jQuery UI as "a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library."

jQuery UI Development consists of six sections viewable in the same browser-based Packt Video Player as the video courses I have previously reviewed (JBoss EAP Configuration, Deployment, and Administration and HTML5 Game Development). As was the case with those video courses, jQuery UI Development is divided into separate and videos ranging from roughly 1 minute long to 8 minutes long.

Section 1: Getting Started with jQuery UI

The first section of the video course jQuery UI Development is very introductory. The first video of this section introduces the video course and the next two videos introduce jQuery and jQuery UI at high levels based on a review of their current main web pages. Fhala explains why jQuery is so popular for web development and how jQueryUI supplements core jQuery. His video shows current content on the main jQuery and jQuery UI pages and he adds explanation and personal opinions to what is stated on those pages.

The fourth and fifth videos in Section 1 briefly describe the two methods for acquiring jQuery and jQuery UI: downloading them ("local download") at http://jquery.com/download/ and http://jqueryui.com/download/ respectively or referencing them in Content Delivery/Distribution Networks (CDN). The author/narrator specifically describes accessing jQuery and jQuery UI from the Google CDN (jQuery/jQuery UI) and from the Microsoft Ajax CDN (jQuery/jQuery UI). He outlines advantages and disadvantages of using CDNs in each case (jQuery and jQuery UI) and briefly summarizes tactics for developing against downloaded versions and deploying against CDN versions. He also discusses and demonstrates how to reference these CDN-hosted libraries from HTML pages. The narrator references his site http://02geek.com/ to show an example of converting HTML links to buttons. An interesting side note is that there is also a jQuery CDN.

The final video of the first section covers the tools the narrator is using for the video course. He uses MacOS, Safari web browser, and Sublime Text editor, but he also points out that a viewer could use any tools that he or she is comfortable with rather than these tools. He also shows how one can configure Safari's Developer Tools to be enabled and how to view source in Safari.

Section 2: Working with the CSS Framework

The second section of jQuery UI Development focuses on Cascading Style Sheets (CSS) support. It starts with videos demonstrating how to add an HTML input field, easily convert that field to a jQuery UI datepicker, and then how to easily change the jQuery UI theme via change of specified theme folder.

The fourth video in Section 2 demonstrates how to only download pieces of jQuery UI that an application needs using Download Builder and the fifth video demonstrates applying these "minified" code dependencies to an application. The sixth and seventh videos of Section 2 delve deeper into jQuery CSS support by looking at the overall file hierarchy of CSS support files and introducing the impressive ThemeRoller that allows one to dynamically create jQueryUI themes with no knowledge of CSS and without any CSS skills (style and taste are the only limiting factors).

Section 3: Working with Widgets

The third section focuses on "Widgets" components. It is the longest section of the video series (the second longest section, Section 5, is also the second session on "Widgets"). The narrator begins by demonstrating creation and manipulation of a simple jQuery UI Dialog. As part of this, he demonstrates Download Builder's really useful feature of associating selected components with components they depend upon so that all dependencies are automatically selected with any components that depend upon them.

Options, methods, and events for widgets are explained in this section. They are introduced collectively in a video as the jQuery UI API documentation for Dialog is shown and then each of them is featured in its own video. Widget events are covered as callbacks in this third section.

Section 4: Adding Interaction

The focus of the fourth section is on using Events to add interaction to an application. Fhala uses console.log to show some of the internal workings of Events and to figure out what options, methods, and events a particular widget supports. Fhala explains why a standalone Event might be preferable over a simple inline callback (more than one widget can use the same named standalone Event) and discusses practices to make these more generally useful. He makes several mistakes during the demonstration and does some on-the-fly debugging and resolves those typos and mistakes. These don't add much overall time to the length of the section, but I think they add a realistic view of what anyone who does real application development experiences every day.

Section 5: More about Widgets

Section 5 is the last significant section of the video course because Section 6 is a very short overall summary. Section 5 returns to the topic of Widgets with focus on six jQuery UI widgets (Tooltip, Spinner, Menu, Slider, Accordion, Tabs) with one video per covered widget. I liked the general pattern Fhala followed in the videos of this section. He started with simple HTML elements such as <div> or <input> tags and then applied the jQuery UI components to those HTML elements. By showing each step in code and demonstration, the pattern was established and it was obvious how easy it was to apply jQuery UI components to traditional HTML elements. The video on the Slider component was perhaps the longest of the entire video course (over 8 minutes), but included a look at a bit more complex JavaScript than most of the other examples in this video course.

Section 6: Course Recap

The final section is a single, short video. It's not really so much a recap as it is a reference to the author's contact information and finding other work of the author on Packt Publishing's site.

General Observations

• One thing that is quite different about this video course as compared to the HTML5 Game Development and JBoss EAP Configuration, Deployment, and Administration video courses is that this course features video of the speaker himself throughout whereas the speaker is never visible in the other courses. I was a bit concerned at first when the video of him speaking seemed to take up too much real estate on the screen, but was relieved to see that he minimized the video of him speaking and moved it into the lower corner when it was important to show documentation, code, or application demonstration on the screen.
• Fhala states the versions of jQuery (1.9) and jQueryUI (1.10.1) covered in this video course. I appreciate this because with rapidly changing technologies, it is important to know to which versions the teaching material applies. Fhala states that he chose jQuery 1.9 rather than jQuery 2 to allow support for older versions of Microsoft Internet Explorer (IE 6, IE 7, and IE 8).
• Fhala heavily references the jQuery documentation and especially the jQuery UI documentation. This documentation is pretty impressive, thorough, and approachable, but Fhala's presentation makes it even more approachable and easier to understand. He mixes emphasis on text in the documentation with his verbal commentary and illustrations of the documentation principles in practice via coding and running the examples. Although most of the material covered in this video course is readily available online, the video presentation smooths out the initial learning curve and allows the viewer in roughly 2 hours to be very comfortable with the overall concept and use of jQuery UI and how to effectively use the jQuery UI documentation.
• It feels like Fhala did plan out the overall presentation and topics of this video course ahead of time, but that many of the low-level specifics of the presentation were not as practiced, scripted, or rehearsed as the overall concept was. Although this could be seen as less polished, I did not mind it and thought it provided a more realistic view of how a developer would use and apply jQuery UI documentation and jQuery UI in coding. The fact that some real typos and other mistakes were made did not take a lot of extra time to fix and provided a realistic view of how a developer works with any language or framework including jQuery UI. It is useful to see what types of errors occur rather than always seeing the polished "happy path."
• jQuery UI Development is very approachable for those new to jQuery and jQuery UI. It is helpful for viewers to have very basic HTML, JavaScript, and CSS knowledge, but very little knowledge of these is needed. Fhala does a good job of presenting this material in a way that is approachable even to those with only a very small amount of experience with JavaScript, CSS, HTML, and jQuery. About the only thing one needs to understand about jQuery when approaching this video course is that the dollar sign ($) is an alias for jQuery rather than for document.getElementById().
• The video is clear and easy to view (should be viewed in full screen mode when watching code examples). The audio is generally good, though once or twice the narrator's voice seems to trail off a bit and there were occasional mistakes in the verbal descriptions that were generally quickly remedied.
• Besides video of code editing in Sublime Text, video of running and debugging the simple applications in Safari, and video of the author speaking, the videos in this course occasionally include other minor effects that add some liveliness and emphasis to the presentation.
• Other online reviews of jQuery UI Development video course are available at Video Course Review: jQuery UI Development and O'Reilly reviews.
• The Packt Publishing site for this video course features numerous screen snapshots of the video course under the heading "Screenshots from the course." Some of these provide representative samples of how the video is laid out for examples and for featuring the narrator speaking.
• The Packt Publishing site for this video course also features a sample video clip. I highly recommend viewing this clip to determine if this approach to learning jQuery UI suits you.
• Most of the sections in this video course featured an initial video that provided a high-level overview of what was to come in that section.
• As stated in the previous bullet, Fhala does an excellent job providing an introductory jQuery UI video course. It is important to note that the emphasis is introductory and that developers with moderate to significant jQuery UI experience are likely to get less out of the video course. It seems targeted at people with little or no jQuery UI experience.

Conclusion

jQuery UI Development is a great introduction to jQuery UI that is especially suited for those with minimal HTML/JavaScript/CSS experience and little or no jQuery and jQuery UI experience. The video course provides a high level overview of jQuery UI along with enough details to present a representative sample of the types of things one can do with jQuery UI and the basic patterns used to apply jQuery UI. Along the way, author Ben Fhala highlights some key commonly accepted best practices of JavaScript/jQuery development. Although the material covered in this video course is available online in the excellent jQuery UI documentation that Fhala frequently references, there are advantages to seeing video of the concepts being applied that are difficult to match in a static text-oriented web page.