CleanShaved

by Frederic Jean

In the video titled CleanShaved, presented by Frederic Jean at the Rocky Mountain Ruby 2012 event, the focus is on a newly introduced Ruby library designed to enhance web development performance, particularly in mobile environments. The library, called Clean Shaved, utilizes Handlebars for template processing and introduces a Rails helper for effective template building. Frederic begins by acknowledging the advances in web browser technology that allow for faster processing through client-side rendering, using tools like Ajax and templating engines.

Key Points Discussed:

- Introduction to Clean Shaved: The library is aimed at improving the efficiency of template rendering for web applications.

- Client-Side Processing Limitations: The speaker highlights a significant performance gap between desktop and mobile browsers, which complicates the effective use of client-side resources on less powerful devices like smartphones and tablets.

- Server-Side Template Precompilation: Clean Shaved addresses this issue by pre-compiling templates on the server before they are sent to the client. This eliminates the need for mobile devices to compile templates on their own, resulting in faster rendering times.

Demonstration:

Frederic demonstrates the functionality of Clean Shaved by showing its implementation in a browser. He changes certain settings and restarts the server, visually illustrating how the mustache syntax disappears as templates are compiled server-side and sent as ready-to-use JavaScript.

Conclusion:

Clean Shaved is now available on GitHub and RubyGems, promising developers a more streamlined approach to web application development. By reducing the workload on mobile devices, this library enhances the speed and efficiency of web applications, making it especially useful for developers targeting mobile users. Frederic expresses gratitude for the audience's attention and encourages them to explore Clean Shaved further.

00:00:06.600 So, what I want to talk about here is something I just pushed to GitHub and RubyGems a few moments ago. I call it Clean Shaved. You can see the mustache disappear. There's been a great trend in web development these days where browsers are becoming faster and faster, allowing us to have the browser do more. We have Ajax and templating engines such as Mustache and Handlebars that enable us to push processing and rendering down to the client.

00:00:18.960 This concept works great. What I'm going to introduce here is Clean Shaved, a small library that provides a few functionalities. It's built on Handlebars and includes a small Rails helper for template building. Here’s what it looks like. You can see on top the syntax for the template that is quite straightforward. The end result, once deployed, generates a script tag with the proper type for JavaScript, and then we provide the template.

00:01:06.280 This is all good until we start looking at mobile. Yesterday, Roy discussed performance across different browsers, and we noticed a huge difference between desktop and mobile browsers, whether it's an iPhone or a tablet. There’s a significant gap in performance, which means that leveraging other people's CPU resources and memory is not as advantageous as it used to be. So, what does Clean Shaved do? It pre-compiles the templates on the server side before sending them down to the client.

00:02:04.920 Let me demonstrate. This setup uses Clean Shaved in the browser without compiling the template itself. I will change a few settings to disable and enable certain features, restart my server, and as you'll notice in the middle bottom area, the mustache will disappear. What we do here is essentially compile the JavaScript on the server side and send it to the client. This means less powerful devices, such as iPhones, iPads, and Android phones, do not have to look for a template, compile it into JavaScript, and use it. We compile it so it’s immediately usable.

00:02:39.680 As you have seen, it still works perfectly. Clean Shaved is currently available on GitHub and RubyGems, and the deck is already specified for your reference. Thank you for your few minutes of attention.