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.
