Components in a Monolithic World

Nick Sutterer

Nick Sutterer

#component-based-architecture

#caching

Components in a Monolithic World

by Nick Sutterer and Kevin Triplett

The video titled "Components in a Monolithic World" by Kevin Triplett and Nick Sutterer at the LoneStarRuby Conf 2010 discusses innovative strategies for improving the organization of Ruby on Rails applications, particularly in handling views. The speakers address the common challenges developers face when trying to manage complexity in web applications while maintaining clear and understandable code structure.

Key Points Discussed:
- Introduction to the Problem: Kevin and Nick introduce their quest to simplify Ruby view handling, citing the limitations of partials and filters in Rails, especially post-Rails 2.0, which deprecated the use of components. They emphasize a significant pain point: maintaining organization and clarity in complex applications.
- Nick's Library - Cells: To tackle the issues with Rails views, Nick created a library called Cells, which offers a better alternative for organizing reusable components. Cells enable developers to keep related code together, avoiding the clutter of traditional Rails partials.
- Cells Structure and Features: Each cell comprises a Ruby file and a directory for view files, improving organization. Cells facilitate easy caching and testing in isolation, reducing the complications present in Rails.
- Introduction to Aoto Framework: Building on the work of Cells, the Aoto framework allows for more interactive widgets that can maintain state and respond to events. Nick elaborates on how Aoto can be effectively utilized to create dynamic web elements such as task lists that sync with server data.
- Widget Creation Using Aoto: The presentation details a step-by-step process of generating and integrating widgets into a Rails application using the Aoto framework, which enhances user interaction and simplifies AJAX operations.
- Enhanced User Interaction: Aoto not only improves the organization of views but also supports rich features like autocomplete fields and drag-and-drop functionality, enabling a better user experience without overwhelming code complexity.
- Conclusion and Resources: The speakers close with an invitation to explore Aoto and its capabilities, providing resources for further learning and extending invites for discussions on IRC.

Main Takeaways:
- The need for an alternative to Rails' traditional rendering methods is addressed through the introduction of Cells, which provide a structured way to manage complex views.
- Aoto builds on this foundation to create interactive, stateful widgets, making it a robust solution for modern web applications.
- The enhancements in view management lead to cleaner, more maintainable code, improving overall development efficiency. This talk showcases how innovation within Ruby can lead to dramatic improvements in application structure and user experience.

00:00:10.000 I'm Kevin Triplett, and this is Nick Sutterer from Germany. I'm from Austin, Texas. We're going to be tag-teaming today.

00:00:17.439 This is a Ruby test case, a case study on what to do if you have something written in Ruby and don't like the features it has.

00:00:22.480 The idea is to create a library that makes your life simpler. That's what Nick did, and I found it, fell in love with it, and wanted to share it with you all.

00:00:33.920 This presentation is a testament to the strength of Ruby. Many of you probably work on web applications and recognize MVC, which we absolutely love.

00:00:46.719 Anytime you can organize your code, it's a good practice to do it. This gives us skinny controllers and fat models, but what do we have for views?

00:00:59.640 It seems like we might hate views. I want to change that and share what I found because I'm currently writing a complicated web app.

00:01:13.200 I wanted to use AJAX and Webby 2.0, as they significantly enhance user experience. They offer attractive views, which are not only appealing to users but also beneficial for developers since they help organize views.

00:01:31.240 However, I must mention that components are considered 'dead' starting with Rails 2.0. They killed 'render component' because, according to Rails docs, you shouldn't use components for separating concerns within an application.

00:01:50.560 The idea is that reusable components are not a good way to structure your application. Instead, the Rails philosophy suggests using partials and filters.

00:02:03.439 Whenever I ask why views aren't better, I’m usually told to just use partials and filters. But in my opinion, that’s not sufficient.

00:02:16.160 For instance, Rails provides a solid organization with its MVC structure, having controllers, models, and views. Inside the views, there are different controller directories.

00:02:30.200 For example, take 'users'—it’s nice to have one file per action, and perhaps a partial for handling forms. Or you can be smart and group forms like edit and new into one file.

00:02:41.720 This method keeps things organized, and I love that. But then I run into complications with intricate applications that require scheduling resources, handling users, equipment, and products.

00:03:01.319 I faced an issue when developing an administrative interface with tabs, forms, and many nested forms, leading to chaos.

00:03:16.840 I stated this couldn’t work because I was overwhelmed with partials, despite trying to organize them by naming conventions.

00:03:36.360 This was just one controller in my application, and I found that 'today's tasks' need to appear on every page, which created further complexity.

00:04:11.239 Someone suggested using partials, which I did, but writing a partial statement felt ugly and overly complicated. Passing in nested hashes and the format of rendering was unappealing.

00:04:37.680 Even wrapping partials didn’t fix the core issues. A variable I needed for the task panel was being pulled from the database, so every controller had to initialize that variable.

00:05:03.080 And sure, I could set it up in the application controller with a before filter, but globals pose their own problems.

00:05:22.280 Transitioning back to Nick's experience, he took Ruby and simplified things due to his dislike for Rails' approach to views, creating a library called Cells.

00:05:51.960 Cells are your first step toward widgets, which Nick will dive into later. Notably, Cells work not just with Rails, but also with Sinatra and Padrino.

00:06:03.880 The best part is Cells come with a test suite. Many Rails plugins and gems lack robust test suites, but Cells are actively maintained.

00:06:25.479 Cells provide a dedicated directory where all your widgets can be organized, enhancing clarity. Each cell has both a Ruby file and a folder for its view files for each action.

00:06:50.599 For example, when generating a 'Today's task list' cell, it creates a directory where all your cells reside, keeping things neat.

00:07:02.639 The Ruby file is structured, with supported action methods that allow rendering using standard helpers.

00:07:18.480 Additionally, there's no worry about the double render error common in Rails since you can nest Cells freely.

00:07:39.080 This structure allows for clean code where related views are contained within their corresponding Cells, separated from unrelated content.

00:08:09.960 Cells can also utilize namespacing. If my application becomes complex, I will have nested directories for better organization.

00:08:27.319 Furthermore, Cells allow easy integration with HAML for beautiful HTML generation.

00:09:00.800 Ultimately, I find Cells to be a refreshing addition—organized, elegant, and straightforward.

00:09:13.240 They excel particularly at caching. Although it doesn't implement strict view caching, it does allow specifying the cache directly inside a cell.

00:09:35.279 You can set caching expiration or define its behavior using a block to determine how caches are invalidated.

00:10:18.200 A key advantage of Cells is the ability to test them in isolation. While unit testing is great, view testing can often be integrated poorly.

00:10:40.120 Cells change that by allowing simple tests for each state, making it easy to verify you get the expected HTML output.

00:11:05.360 Moreover, cells lend themselves to inheritance, letting you create variations of a standard widget easily.

00:11:30.280 You can also package these widgets to share them between applications, increasing collaboration within teams.

00:11:52.000 Interestingly, while Rails is powerful, its strength further extends with the introduction of Aoto, which Nick will cover next.

00:12:09.760 Thank you, Nick, for this great talk! Let's give him a round of applause!

00:12:17.960 As for the interactivity aspect, I’ll discuss how to make your Cells act as real widgets that can send data to the server and update in response to events.

00:12:37.480 Aoto is the framework that provides that functionality, building upon the foundation of Cells. It offers interactive widgets, along with statefulness.

00:12:57.760 For those who want even fancier widgets that maintain inner states and structure, Aoto has you covered.

00:13:13.720 We have an interesting event system in Aoto that I developed an affinity for. For instance, I created a small browser game with Aoto, showcasing its capabilities.

00:13:36.680 Additionally, another developer from Canada created a complex backend application using Aoto, demonstrating its versatility.

00:13:52.640 Aoto works excellently for building rich user interfaces, like dashboards that require various lists and forms, employing Web 2.0 features.

00:14:07.640 For today's discussion, we’ll focus on a task cell that Kevin introduced. I've added forms to allow users to input items that sync with the database on the server side and update live on the page.

00:14:30.360 Earlier yesterday, I had a bit too much fun, but today we'll focus on this widget conversion process, step by step.

00:14:50.600 Starting off, we need to generate the widget. There’s a widget generator where I just specify the name of the widget and some standard actions like 'display' using HAML.

00:15:18.640 This will create a widget class and the corresponding standard view for the desired state.

00:15:36.920 The widget then derives from Aoto::Widget instead of just Cells, and creates an action method called 'display', which fetches data from the database.

00:15:53.760 Next, I’ll write a view for this 'display' method, which you’ll find specified in the app/sales/tasks/widget directory.

00:16:15.680 Here, I’ll create a container for my widget that iterates over the tasks to display them in an organized list.

00:16:38.040 To integrate this widget into my controller, I use a class method called has_widgets, which is unique to Rails.

00:16:56.960 This method yields a root widget to which I can attach my 'tasks' widget, accompanied by an ID, which is a requirement for Aoto.

00:17:21.640 It's important to clarify that 'root' serves as the uppermost widget, forming a foundational structure for the rest.

00:17:40.240 To render the tasks widget, I use the render_widget method in the layout of my controller, referencing it by ID.

00:18:03.600 With rendering established, let’s address responsiveness during form submissions.

00:18:27.280 To begin, I’ll add a form to the task list. This includes creating an HTML5 compatible form using unobtrusive JavaScript.

00:18:49.040 I’ll set up a data-event URL that corresponds to Aoto helper methods, which allows for triggering submit events directly.

00:19:09.440 However, please do not execute this code yet since the indentation I’ve used is not correct.

00:19:32.720 Next, it's imperative to add JavaScript to capture form submission through jQuery or any library you choose, keeping the code unobtrusive.

00:19:51.080 Essentially, I will attach a submit event handler to the form and execute an AJAX request to the server.

00:20:09.440 When the form is submitted, it will retrieve the specified data through the data-event URL created by Aoto.

00:20:29.960 Now, let's get back to how my form updates the widget. The event system in Aoto plays a critical role here.

00:20:40.520 By triggering a submit event in Rails, I can capture it in my widget via a method called response_to_event.

00:20:56.360 This method allows me to specify actions that should occur when a particular event, such as 'submit', is received.

00:21:24.480 The processing action I write will handle the form submission, saving new tasks into the database and refreshing the view.

00:21:43.600 In the end, I instruct Aoto to update the widget on the screen with the latest content.

00:22:03.200 This process streamlines user interaction without the clutter of multiple partials and complex Ajax wiring.

00:22:23.040 Next, I devised an autocomplete box widget, demonstrating even further interactivity, triggered by user input.

00:22:39.480 I created a method that listens for typing events and dynamically fetches suggestions in response to user input.

00:23:02.960 Moreover, I explored JSON and JavaScript to create interactive elements, such as drag-and-drop functionality and list updates.

00:23:22.000 For instance, users can drag an item to a trash bin, triggering an event that updates the main list without missing a beat.

00:23:45.200 With Aoto, this is simplified thanks to its event bubbling system, which seamlessly interacts between widgets.

00:24:01.400 In conclusion, Aoto not only facilitates widget creation but also supports further complexity, such as nested widgets and stateful interactions.

00:24:17.560 I’m exploring ideas for a generic widget repository, aiming to enhance the usability of shared widgets across applications.

00:24:33.760 If you’re interested, please check out the online resources and tutorials available at light.auto.de.

00:24:52.920 Additionally, feel free to join me in the sales channel on Freenode IRC for any discussions.

00:25:09.760 Finally, thank you for your attention. Are there any questions?

00:25:25.000 Someone asked whether it's possible to designate specific widgets for replace actions. Yes, you can use the replace method to do this effectively.

00:25:44.320 I also received inquiries about how CSS is incorporated into widgets. Typically, it's taught through conventional methods like importing CSS files.

00:26:06.880 However, we aim to optimize this by allowing CSS to be packaged along with widgets, ensuring a streamlined appearance.

00:26:21.680 Regarding Aoto's widget system, it operates as a foundational structure for lightweight widget design.

00:26:37.840 Ultimately, Aoto simplifies the routing setup for Ajax actions, improving overall efficiency and workflow.

00:26:51.800 Feel free to explore Aoto's capabilities, as it adds a straightforward method for organizing and rendering your views.

00:27:05.520 If you have any final questions or thoughts, now would be the moment.

00:27:26.640 Thank you once again for the wonderful discussions and engaging dialogue!

LoneStarRuby Conf 2010