Video Review: Building an Application with CoffeeScript

Darko Bozhinovski's video course Building an Application with CoffeeScript was published last month by Packt Publishing. In this post, I review this video course on CoffeeScript (described on its main web page as "a little language that compiles into JavaScript" that is "an attempt to expose the good parts of JavaScript in a simple way").

Building an Application with CoffeeScript runs in the same web browser-based Packt Video Player used by other video courses from Packt Publishing that I've previously reviewed: HTML5 Game Development, jQuery UI Development, and JBoss EAP Configuration, Deployment, and Administration. The player runs completely in a web browser and features short video segments (ranging from 1 minute to 9 minutes each) divided into eight sections (chapters) with between 2 and 3 videos per section.

Section 1: CoffeeScript 101

The first section of Building an Application with CoffeeScript includes three videos and the initial video is the longest of the entire video course with a duration of almost 9 minutes. This initial video's summary includes three bullets and provides a link to additional references for more details. The video introduces CoffeeScript via the CoffeeScript site. In describing how CoffeeScript allows the best parts of JavaScript to be used, the video author also references Douglas Crockford's JavaScript site. Much of this first video uses examples on the CoffeeScript site to compare and contrast CoffeeScript with JavaScript. The site shows CoffeeScript and equivalent JavaScript code side-by-side and the video author shows these same CoffeeScript-to-JavaScript comparisons in the web-based JavaScript-to-CoffeeScript compiler js2coffee. As he narrates, he shows how subtle changes to the CoffeeScript or the JavaScript impact the other language in the js2coffee tool. One slightly distracting issue with the first video is the presence of "Topic 3" text at the end of a bullet on the first slide; I suspect this was template text that should have been removed when the bullet was added.

The second video demonstrates how to download and install the CoffeeScript compiler via download of Node.js. The video demonstrates using the command-line compiler to compile a "Hello, World" example written in CoffeeScript to JavaScript and then shows that JavaScript rendered in a web browser.

Section 1's third video introduces cake, described in the CoffeeScript site as, "a (very) simple build system similar to Make and Rake." Bozhinovski demonstrates writing a Cake task that compiles all CoffeeScript files in a given directory to their CoffeeScript equivalents and then demonstrates running that Cake task.

Section 2: Head-first Application Development

Section 2 features three video snippets that cover concepts such as object-oriented programming, inheritance, classes, and MVC. The first video of Section 2 is the one that really started to pique my interest in CoffeeScript. Although I liked some of the conciseness that CoffeeScript offers over JavaScript as shown in earlier video snippets, it was the support for class-based object-oriented programming in CoffeeScript that really caught my attention. The narrator demonstrates using js2coffee that classes in CoffeeScript are functions in JavaScript and one cannot help but notice how much more readable the CoffeeScript classes are than the JavaScript functions. The author also uses this first video of Section 2 to introduce his project with code examples that are used in the course.

The second video snippet of Section 2 focuses on Model-View-Controller and begins this focus with a reference to the Wikipedia page on MVC. Bozhinovski returns to his Github project coffeescript-course again and makes a short detour to advertise benefits of Github and how to start with Github. He then shows that the files in his project are empty and explains that he will populate them as part of the video course. At that point, he creates base model, controller, and view classes.

The third video of Section 2 begins with a focus on class-based inheritance in CoffeeScript. This coverage includes referencing the CoffeeScript site and demonstrating extending the base classes written in the previous video. A significant portion of this video highlights more resources available to viewers interested in CoffeeScript at the CoffeeScript site, via JavaScript frameworks, and at the http://todomvc.com/ site.

Section 3: The Storage Layer – Models and Data Persistence

There are only two video snippets in Section 3, but the section's overall duration is among the highest of the video course. The first video in this section discusses Web/DOM storage and which browser versions support this feature. The author points out advantage of local (web) storage such as its better support among common web browsers as compared to alternatives such as IndexDB and Web SQL Database.

Section 3's first video demonstrates use of localStorage by opening a web brower's console and running JavaScript-based examples using localStorage in that console (brief discussion on how to open this console in different browsers is included). The examples are then shown in js2coffee so that use of localStorage can be seen both directly in JavaScript and in CoffeeScript.

The second video in Section 3 is "the fun part" and begins with a demonstration of writing a class in CoffeeScript that encapsulates persisting and retrieving data values to localStorage. The example highlights the ability to specify static methods on a CoffeeScript class with the @ symbol and demonstrates how these static methods would be called by clients. Section 3's second video also demonstrates completing and persisting the model classes. JSON.parse and JSON.stringify are demonstrated within CoffeeScript as well.

Section 4: Routing and Views

Section 4 is composed of three video snippets. The first video in this section reviews the roles of controller, view, and model and then introduces the concept of routing. The video demonstrates building a routing class for the example application, but the narrator explains the basic theory behind routers and points out third-party routing micro frameworks that are already available for use. The author's examples are relatively simple, associating routes with controllers' methods, but the author points out that more elaborate routing is possible.

The second video of Section 4 builds on the section's first video to cover routers and controllers in more detail. The author demonstrates writing new controller methods and demonstrates more concretely the association between controllers and routers.

Section 4's final video is the longest of the section and introduces views. Along the way, this video demonstrates some more CoffeeScript features such as its constructor method, its multi-line string support, and its for-of loop. The example application at this point has HTML tags added to its rendering portion of its view classes and jQuery is used here as well.

Section 5: Interactions and Event Handling – Using JQuery with CoffeeScript

Using jQuery was mentioned very briefly a couple times in earlier sections, but the two-video Section 5 makes the use of jQuery with CoffeeScript a central theme. The first of the section's two videos demonstrates how to prevent a hypertext action in the example application from going to a newly served page and instead be routed via the router built in Section 4. This is key to implementing a single-page application. This video also demonstrates additional CoffeeScript/jQuery binding concepts and demonstrates CoffeeScript's switch/when statement.

Section's final second and final video starts by revisiting the hash change support in modern browsers. The author also mentions the pushState API. Demonstration of writing a global Event Emitter based on Backbone.js's Backbone.Events class is also demonstrated and it is explained that this approach allows for less tight coupling than using direct calls between views and controllers.

Section 6: Extending Our Application – Manipulating Stored Data

There are three video snippets in Section 6 and all three use creation and enhancement of the example applications category and document concepts to illustrate organization of data and of additional CoffeeScript code in practice. These are code-heavy videos that illustrate practical implementation of new features for the example application.

Section 7: Extending Our Application – Add an External Library

The first video of Section 7 introduces the idea of using Summernote in the example application to support rich text editing. The second video demonstrates integrating Summernote with the example application, including saving the rich text.

The second video also introduces jsPDF and the third video of Section 7 demonstrates integrating jsPDF with the example application so that the example application can export PDF from HTML.

Section 8: Publishing and Real-world Usage for Our Documents

The final section has three videos. The first of these three demonstrates using the Blob API to allow the example application to export documents in text and HTML formats. The second video demonstrates how to allow a user of the example application to publish the document to a WordPress blog. The third and final video of this section (and final video of the course) talks about ways that viewers could customize and enhance the example application built during the course. The author outlines other possible applications that could be built from it and talks about other ways to change it.

General Observations

• The title "Building an Application with CoffeeScript" articulates well what this video course is. Although the video course is often introductory in nature, it is organized around demonstration of building an application using CoffeeScript and incidentally providing introductory information along the way. This is different than being organized as an introduction to CoffeeScript that happens to build an example application along the way. Instead of providing lengthy lists of features and syntax examples (which is what a course focused on introduction over application building might do), this video course provides just enough introductory coverage of required features and syntax to allow the work of building an example application to take place.
• Numerous online references are shown and discussed in this video course, making it easier for the viewer to identify sources of additional details and background information. These online resources help the narrator to explain the topic and showing them to the viewer allows the viewer to directly access them after being introduced to them. The video course makes it even easier to find these resources by listing the URLs for most of them in the summary area of each section.
• There are several occurrences in the video course when the author references the associated GitHub project ("coffeescript-course") for additional or deeper details than covered in the video. This allows the video presentation to avoid getting too deep in details while at the same time allowing viewers to learn more details as desired after finishing the video.
• Viewers of Building an Application with CoffeeScript will be best served if they have basic familiarity with JavaScript. This is because many of the examples teach CoffeeScript via comparison to JavaScript and because basic familiarity with JavaScript allows the viewer to more quickly appreciate what CoffeeScript offers in its place.
• I liked that several popular JavaScript frameworks were used in the example application built in this video course. Specific examples of frameworks used in the example application include jQuery, BackBone, and Bootstrap-based Summernote.
• I liked that several features of modern web browsers were used in the example application built in this video course.

Conclusion

Building an Application with CoffeeScript delivers on what its title promises: demonstration and explanation of building a simple application with CoffeeScript. This video is most likely going to appeal most strongly to developers who have basic JavaScript familiarity and want to get a quick overview of what CoffeeScript offers and how it can ease some of the burdens of JavaScript development.