JavaScript Frameworks with Ruby

Talks

Wynn Netherland

5 talks

JavaScript Frameworks with Ruby

by Wynn Netherland

The video titled "JavaScript Frameworks with Ruby" by Wynn Netherland discusses the intersection of Ruby and JavaScript frameworks in web development, focusing on how these technologies can enhance web-facing applications. Presented at the LoneStarRuby Conf 2008, the talk aims to familiarize attendees with various JavaScript and Ruby frameworks, outlining their functionalities and integrations that benefit developers involved in web applications.

Key Points Discussed:
- Introduction of Wynn Netherland: Wynn introduces himself as a member of Squeegee, a Ruby consultancy, and mentions the focus of his talk on Ruby and JavaScript frameworks.
- Framework Types: The discussion begins with a mention of Ruby frameworks such as Camping and Sinatra for micro apps and highlights JavaScript frameworks like Prototype, Scriptaculous, and jQuery, which are prominent in the Ruby community.
- Importance of JavaScript Frameworks: Wynn explains the necessity of JavaScript frameworks to manage browser inconsistencies and enhance Ajax support, a crucial component for any Web 2.0 application.
- Deep Dives into Frameworks:

- Prototype: Emphasized for its object-oriented programming support and ease with Ajax handling.
- Scriptaculous: Complementary to Prototype, providing effects like dragging elements and Ajax interactions seamlessly.
- jQuery: Noted for its user-friendly syntax and browser compatibility, particularly its chaining feature that simplifies managing multiple elements.
- MooTools and YUI: Introduced as additional frameworks that supplement JavaScript functionalities, with YUI also providing CSS tools and UI components.
- Integration with Ruby: The approach to integrate JavaScript into Ruby frameworks is discussed, mentioning the use of helpers for clearer synergy between Ruby and JavaScript, as well as the benefits of adopting Unobtrusive JavaScript (UJS) principles for cleaner code.
- Introduction of SproutCore: Wynn presents SproutCore, a JavaScript framework that reflects Ruby’s structural principles, including data binding and MVC patterns, enhancing Ruby developers’ experience while giving a demo of a photo collection application utilizing drag-and-drop features.
- Final Thoughts: The presentation concludes with a broader discussion about maintaining a clean coding practice in integrating JavaScript with Ruby applications and the importance of utilizing the right frameworks to create efficient web applications.

Overall, the talk underscores the significance of JavaScript frameworks in improving the functionality of Ruby web applications, revealing methods to better integrate these technologies for optimized web development.

00:00:06.359 Video equipment rental costs were paid for by Peep Code.

00:00:18.600 Let me introduce myself. My name is Wynn Netherland, and I'm with Squeegee, a Ruby consultancy based in Texas. We are located in Dallas, Houston, and Austin. We even have one guy stationed in China for the next two weeks, as he has been there all summer and is probably ready to come home. This talk is about JavaScript and Ruby frameworks.

00:00:31.880 Hopefully, no one else is experiencing any technical difficulties. I’m dealing with three machines at home to switch between, so let’s get started.

00:00:45.680 As you'd expect, we're going to talk about Ruby frameworks and JavaScript frameworks. Since this is a Ruby conference, as opposed to a Rails conference, I’m not going to spend too much time discussing Rails specifically.

00:01:05.880 However, there are also frameworks like MB, which is an upcoming framework referred to as the 'Pocket Rocket'. We have others like Camping and Sinatra, which are geared towards micro apps—much simpler applications than what you would typically build with Rails or MB.

00:01:18.000 On the JavaScript side, most people are familiar with Prototype and Scriptaculous because they’re integrated with Rails. If you are using Ruby, chances are you know about both Prototype and Scriptaculous. Another popular library is jQuery, particularly among the Ruby crowd due to its easy-to-understand syntax.

00:01:42.159 I hope to expose you to a couple of frameworks you may not have heard of: MooTools, YUI, and XJS. The plan is to discuss each of these frameworks.

00:02:02.680 I originally intended to focus on MB and jQuery when I pitched this talk. However, after reading up on the descriptions of the other speakers, I found it necessary to adjust my presentations slightly.

00:02:20.280 A quick search regarding Mr. Katz revealed some interesting things. While not all results were relevant, I discovered that Mr. Katz actually wrote a book on jQuery, literally. This gives him a significant standing in both communities, as he is a core developer for MB and a jQuery committer, heavily involved in the Data Mapper project.

00:02:46.519 So, in defense of Mr. Katz, if you want to hear a talk about MB and jQuery, it’ll be at 10:00 AM tomorrow.

00:03:03.920 Now, you might be asking, why discuss JavaScript at a Ruby conference? Well, the answer became clear when I asked how many people are doing web-facing Ruby work. The response indicated that quite a few are involved in this area. Since web application development relies heavily on this intersection, the stronger JavaScript developers we have, the better our web applications will be.

00:03:58.680 So, why JavaScript frameworks? Primarily to handle browser quirks. No more checking the user agent (such as MSIE or Mozilla) to determine what content to serve up to a particular browser. Frameworks help extend the JavaScript language to add features that aren't available by default and facilitate the use of Ajax in applications. You can’t have a Web 2.0 application without Ajax, and these frameworks typically provide some sort of Ajax plumbing, bringing sanity to events in the process.

00:04:50.240 The event model in JavaScript has historically been problematic across different browsers. Frameworks wrap event handling in JavaScript, addressing these issues. Furthermore, effects are integral to any JavaScript framework, and Prototype is among the most popular ones available, especially in the Ruby community due to its integration with Rails.

00:05:50.159 Prototype introduces several object-oriented programming enhancements, making it easier to work with objects. It includes various utility functions, notably around form handling and Ajax support. Many developers began writing Ajax in JavaScript through Prototype because of how it simplifies Ajax integration.

00:06:03.520 We pair Prototype with Scriptaculous for JavaScript effects—think fade and puff, as well as drag-and-drop functionalities that add interactivity to your applications, enabling elements to be dragged around and dropped with appropriate event handling.

00:06:52.000 jQuery is another well-known framework, which we won’t cover in depth since YUI will discuss it tomorrow. However, I was initially hesitant to delve into jQuery because I wasn't aware of its syntax. Once I discovered the differences in syntax, I found programming with it quite enjoyable.

00:07:43.720 jQuery’s signature feature is its chaining syntax. You can perform the same action on items within a collection with ease, reducing the need for loops. Its Ajax support is more user-friendly; for example, jQuery’s load method allows you to easily load external content into a div, with the added functionality of using a CSS selector as a second argument.

00:08:28.680 What’s remarkable is that jQuery allows you to process only the necessary content from a server response by leveraging CSS selectors. Also, jQuery’s built-in effects include fading and puffing, similar to what Prototype offers, making it easy to transition between states in a user-friendly manner.

00:09:02.480 One of jQuery's strengths is its plugin architecture. It allows developers to avoid potential conflicts with global variables when using multiple libraries. jQuery enables you to change the default dollar selector, allowing for compatibility with other frameworks. The MoolTools library also offers enhancements to JavaScript arrays, hashes, and numbers while providing object-oriented capabilities.

00:09:59.400 The MooTools framework is richly designed, often appealing to developers who value aesthetics. Additionally, the Yahoo User Interface (YUI) library offers a heavier package that combines JavaScript with some CSS reset tools and UI components.

00:10:13.880 YUI benefits from its architecture, which promotes compatibility with other frameworks rather than interfering with them. In contrast, XJS provides widgets geared toward data manipulation, particularly in applications requiring client-side sorting.

00:11:04.840 It’s essential to consider how these JavaScript libraries interact with Ruby. There are various approaches to integrating JavaScript code in Ruby projects, particularly through Rails and MB frameworks.

00:11:36.160 The first approach involves using helpers, commonly employed by Rails and MB developers. Many rubyists who focus on backend work tend to avoid handling JavaScript directly, perceiving it as messy against their neatly structured Ruby code.

00:12:02.480 Helpers offer a clean way to include JavaScript in Ruby views, avoiding confusion caused by mixing languages. This method reduces the clutter that arises when intermingling JavaScript with Ruby syntax and HTML.

00:12:32.120 However, there's a downside to using helpers, particularly when they can become too complicated. In the example I have, the dry code involved could lead to excessive size in the final output if many records are rendered.

00:12:53.640 Helpers may lead to redundancy in the browser if many AJAX calls with similar links are rendered. For instance, if you have 100 records, you could end up repeating the exact same code 100 times, increasing page size unnecessarily.

00:14:27.640 One remedy to this is the concept of Unobtrusive JavaScript (UJS). UJS promotes maintaining good semantic markup. It allows you to structure your views such that they link to a confirm-to-delete action.

00:15:39.900 By doing so, most of the JavaScript remains separate from the markup, leading to leaner code. The JavaScript is written once rather than repeated, as is common with traditional approaches.

00:16:01.040 jQuery natively supports UJS, effectively promoting good usage of CSS selectors as tools for targeting elements more precisely. LowPro is another tool associated with Prototype that simplifies the attachment and detachment of behaviors to page elements.

00:16:51.000 It allows for inheriting behaviors, creating a more modular structure for managing behaviors attached.

00:17:06.240 Additionally, there’s also a UJS plugin for Rails; however, its activity seems to have slowed since early 2007. Another approach to consider is building ‘widgets’ or reusable UI components and making use of their benefits in applications.

00:18:00.640 These components offer a programmatic API, similar to desktop components, and each framework discussed offers different support for UI widgets. Checking out tools like jQuery UI can also enhance your UI component library, allowing for customized design themes.

00:19:23.120 In this discussion, maintaining the MVC pattern within your JavaScript is equally relevant. There are frameworks, like SproutCore which adopts an MV* pattern—helping you keep your code organized and modular.

00:20:12.240 A key aspect of SproutCore is that it is JavaScript-based and functions like Ruby. With its syntax closely mirroring Ruby, it makes it easier for Rubyists to navigate.

00:20:30.080 SproutCore brings in data binding and view update functionalities similar to desktop apps, utilizing Ruby-style syntax, providing a familiar environment for Ruby developers.

00:20:54.560 Let me quickly show you a demo of SproutCore, which involves working with a sample application that displays a photo collection with drag-and-drop and data-binding capabilities.

00:22:00.240 The collection allows for dragging and dropping images, showing mirrors of desktop applications in functionality. Forms can also have validation elements integrated as you would expect in service-based Ruby applications.

00:23:12.560 The view code in SproutCore heavily resembles Ruby’s ERB. For example, you can define properties in a straightforward manner with a clear structure for establishing relationships.

00:23:58.640 SproutCore offers an impressive level of Javascript generation on the fly, which is particularly helpful when debugging. The global store holds methods for managing the life cycle of your application.

00:25:47.480 To persist data beyond the in-memory storage, a callback to the server may be made. The framework allows for easy integration with JSON responses and manages how properties are set and read, aligning your development experience more closely with Ruby practices.

00:27:53.280 During our last slides, we noted that the syntax allows developers to relate back to their understanding of Active Record, leading to an organized structure for managing models.

00:30:15.480 The framework also supports localization. You define your language strings neatly, allowing easy changes for the user interface.

00:31:55.760 Many of these frameworks have been made available through CDN services, allowing developers to utilize their features without hosting extensive libraries independently.

00:32:20.880 All in all, we’ve explored various frameworks in terms of their structures, usability, and how they cater to Ruby developers aiming for a richer client-side experience.

00:33:09.760 Thank you for your attention, and I'm open to any questions you might have.

00:39:55.079 This concludes the presentation. Video equipment rental costs were paid for by Peep Code.

LoneStarRuby Conf 2008