Lightning talk: Phantastic Phlex

by Roland Studer

Introduction

In this lightning talk titled "Phantastic Phlex," Roland Studer discusses the Flex framework within the context of Ruby on Rails. The focus is on making the view layer of web applications more dynamic and maintainable through the use of Ruby to generate HTML.

Key Points

Audience Engagement: Roland initiates the presentation with questions to gauge the audience's enthusiasm for Ruby, Rails, and ERB (Embedded Ruby). He notes a general love for Ruby on Rails but a lack of excitement for the view layer.
Introduction to Flex: He introduces Flex as a framework for writing HTML with Ruby, emphasizing its ability to create dynamic and maintainable views. Flex employs a base class called Flex HTML, into which various HTML components can be integrated seamlessly.
Creating HTML with Ruby: Using Flex, developers can define components like lists, labels, and articles through Ruby methods. These methods accept attributes as keyword arguments and allow for blocks of content. This structure leads to cleaner, more organized view code.
Enhanced Readability: Roland provides an example demonstrating how Flex can improve the readability of complex ERB templates. By isolating bits of logic into their own methods, the overall structure becomes clearer, making the code easier to navigate and maintain.
Dynamic Views: He explains how Flex allows for dynamic views by emphasizing abstraction. Developers can create reusable components and methods which enable changing the layout or structure without redundant code.
Case Study on Tables: Roland shares an example involving tables, noting that Flex facilitates creating columns instead of just organizing rows. This shift in perspective contributes to a more organized approach to displaying data.
Abstracting Logic: Another key feature of Flex is its capacity for abstraction. Developers can create complex forms that validate and save data while also rendering themselves within the template.
Performance and Usability: Concluding his talk, Roland highlights that Flex is not only fast and performant but also provides an enjoyable experience for developers using it.

Conclusion

Roland encourages attendees to explore Flex further and highlights its documentation available at flex.fun. The talk concludes with the takeaway that Flex can greatly enhance the Ruby on Rails view layer by making it more dynamic, organized, and enjoyable for developers to work with.

00:00:04.560 How is everyone? Okay, are you all good? I will need a little bit of audience participation because today we will talk about Flex and more. Let's talk about ERB, about rendering pretty things with HTML.

00:00:11.160 Most of us write a lot of HTML, and I'm wondering, who here is really in love with it? Are there a few helpers in Ruby on Rails? Can I hear some enthusiasm? Who is in love with ERB? A bit more enthusiasm, please! Who is in love with Ruby and Rails?

00:00:24.680 Exactly! I feel there's a lot of enthusiasm about Rails and Ruby, but not so much when it comes to the view layer. That was the same for me until I found the Flex framework. So, what is Flex? Flex is a way to write HTML with Ruby to generate HTML. We get this basic class called Flex HTML.

00:00:47.280 Let’s build something renderable, like a list that will inherit from the Flex HTML base class. To get content in there, you respond with a template instance method in this class. We have wonderful methods like UL, label, div, and article. For every HTML tag, there is a corresponding Ruby method that accepts keyword arguments for the attributes and a block to hold the content. This way, we now have this pretty class with two wonderful attributes.

00:01:31.759 You might think, 'Yes, I could have written that in HTML!' I completely agree. It only really shows its strength when we take it and make it Ruby. Once we have that, we can extract methods, use inheritance, create entire DSLs, and express our views that can be very dynamic.

00:01:50.240 For example, let me show you a quick ERB example from Ruby’s chs.org search show page. There's a lot going on with HTML tags and conditionals; it’s actually hard to orient yourself. If we express that with a Flex view, we can extract methods for different parts of the view. For instance, there's an error message that we can isolate into its own method, resulting in a much clearer structure.

00:02:56.840 In this example, we have a nested conditional. If there's a Check, we show the search results, otherwise, we show the suggestion results. Here, we separate the logic of the view into two, and the actual HTML parts are generated in private methods. Another example is when I think of tables: I think in columns rather than rows and headers.

00:03:38.080 With Flex components, it's possible to create something that resembles a table, and you call a column method where you define the specifics, like a column name for products along with a description. You can do that with Flex, and it allows for greater abstraction.

00:04:10.840 Flex gives you the ability to abstract as much, or as little, as you want. You can go to the extreme and create a form object that not only validates and saves something but can also render itself. The template can indicate which fields to permit parameters for.

00:04:35.080 So, Flex is really a lot of fun! It's not only performant but also very fast. I encourage you to explore it and have fun with Flex. If you want to find more about it, the address is flex.fun, where you can find the documentation. Thank you very much!