A New Pair of Shoes!

GUI Programming

Jason R. Clark

1 talk

#shoes-rb

#jruby

#gui-programming

#cross-platform-development

#domain-specific-language-dsl

#ruby-community

#open-source

A New Pair of Shoes!

by Jason R. Clark

In the talk titled "A New Pair of Shoes!" presented by Jason R. Clark at RubyConf 2017, attendees are introduced to Shoes, a simple and engaging GUI framework for Ruby suitable for beginners and kids. The session emphasizes the need for accessible programming tools that run on desktop environments as a counter to the complexities often faced in web or mobile app development.

Key points of the presentation include:

- Audience Engagement: A playful call to action encourages audience members to chime in with 'Give me a chicken!' whenever they feel inspired.

- Overview of Shoes: Shoes is highlighted as a Domain Specific Language (DSL) designed to facilitate the development of GUI applications across multiple platforms including Windows, Mac, and Linux.
- Installation Process: The framework relies on JRuby, with a simple command to install Shoes via Ruby's gem package manager.

- Basic Application Creation: Demonstrations show the minimal lines of code required to create a basic Shoes application, allowing users to quickly see results.

- User Interaction Features: Shoes supports interactive elements such as buttons and input forms, showcasing the ease with which programmers can create responsive applications.

- Element Layout and Design: The framework provides methods for laying out GUI elements simply, using concepts familiar to web designers, thus reducing the learning curve.

- Support for Creative Learning: Clark shares anecdotes, including programming with his daughter, illustrating how Shoes engages children with features like drawing shapes, fostering creativity alongside logical thinking.

- Community and Historical Context: The talk dives into the origins of Shoes, originally developed by Wai ‘the lucky stiff’, and chronicles its evolution through community efforts to modernize the framework, culminating in Shoes4’s recent release candidate.

- Contribution Invitation: Clark encourages audience members to participate in the project, highlighting its newcomer-friendly environment and community spirit.

- Final Thoughts and Takeaways: The concluding remarks underscore the excitement surrounding the upcoming capabilities of Shoes4, potential contributions to open-source projects, and the joy found in sharing software that supports beginners in their programming journey.

The overall message reinforces Shoess' role as an introductory tool for developing software, emphasizing its accessibility, ease of use, and strong community support for educators and new developers alike.

00:00:10.690 Well, good morning everyone. Thank you for coming. My name is Jason Clark, and I work at New Relic, although that has nothing to do with this talk today.

00:00:16.759 This is something entirely different. Before I get started, I have a quick little story and a request for you all.

00:00:25.880 Back in college, one of my best friends, whom I have known since I was five years old, and I had one class together. It was a software engineering class.

00:00:39.860 My friend Mike is a funny guy, a bit quirky, and fun to be around. One funny thing he did in this software engineering class was introduce a concept he called the "learning chicken."

00:00:52.460 Anytime the professor said something particularly profound, he would balk like a chicken. It was so much fun; it transformed a software engineering class that could have been dry into something engaging.

00:01:08.300 I want to bring that forward today. During this talk, if at any point you feel like you've learned something, I want you to yell out "Give me a chicken!" Let's practice that. If you don't do it, I might find a couple of moments to put it in myself. But call on me and let me know when you're feeling inspired.

00:01:32.900 So, we're here today to talk about Shoes, and the motivation behind this talk, and this piece of software, is to answer a question I hear from beginning programmers a lot: "Where do I start?"

00:01:44.869 There are so many different ways to approach computing today. A common recommendation is web development, since everybody has a browser on their computer, and anyone can write some HTML and JavaScript.

00:02:01.160 That's a great starting place, but man, taking a step past that into servers, HTTP, and other complexities can be daunting for a beginner trying to learn the basic structure of programming.

00:02:23.110 It's even worse when it comes to mobile. You might feel inclined to create something for the phone you spend all your time staring at, but the challenges multiply with IDEs, statically typed languages, and more.

00:02:36.230 So today, I want to propose a radical idea—perhaps a bit too radical. There is another place we can write computer programs that run on our desktops.

00:02:55.360 The immediacy of feedback we get from running programs on our desktops is quite valuable. If you've ever tried GUI programming on the desktop, you know that many frameworks can be complex and cumbersome.

00:03:09.400 This is not to pick on Java; I've seen equally complex code in C++ and C#. Even some Ruby libraries that bind low-level GUI pieces can be quite hard to read and write.

00:03:22.910 This brings us to Shoes, a GUI toolkit for Ruby. It's essentially a Domain Specific Language (DSL) designed to make it pleasant and easy to write GUI applications that run on Windows, Mac, and Linux.

00:03:40.480 It's cross-platform because we want everyone with any sort of computer to be able to write these programs. To get the current version of Shoes, you'll need JRuby.

00:03:57.260 You can use your Ruby manager of choice to install it, then simply run "gem install shoes." Currently, it's still in a pre-release state. After that, you can say "shoes" and point it at a Ruby file with a Shoes application.

00:04:09.640 Let’s take a look at what Shoes applications actually look like and compare them to the older GUI programming examples. Here's the minimal Shoes application.

00:04:20.630 You say "shoes app" to start the application and give it a block. We make heavy use of the block construct in Ruby, which runs whatever is inside, creating your application. Right now, it's empty, but this is a Shoes application.

00:04:41.170 I can run this code live for you, and that's what it looks like—an empty window. I don't know about the rest of you, but I feel like that's a chicken moment: two lines of code to get a window!

00:04:54.889 Empty windows are nice, but they won't keep someone entertained for long, so we want to put something into that window. One of the basic elements in GUI applications is text.

00:05:13.200 Shoes provides various helpers to let you show text at different sizes, and there are styling controls we can look at later. For now, if we run this application, we'll see three pieces of text—one in title size, another in tagline size, and one in paragraph size.

00:05:30.780 But putting text into a window will only entertain users for so long; eventually, they will want to interact with their program.

00:05:42.440 This is where Shoes beautifully uses Ruby's block construct. Instead of setting up anonymous functions and doing complicated setups, you just call the button method, give it the button text, and use the block to specify what happens when the button gets clicked.

00:06:07.100 Shoes also provides an alert method to bring up an alert box. Let's see this in action. Here’s our click button. I click it, and when we do, we see the alert. Now that's excellent!

00:06:20.630 Eventually, you want input from the outside world, which is where the basic form elements come into play. In Shoes, we use the EditLine for a single-line text box. We assign that to a variable, and we can use that input later inside our block.

00:06:44.000 When we click this button, it alerts us with the text we put into that box. Let's say something. When we click it, we get the expected alert.

00:07:03.420 This sort of setup usually requires a lot of wiring in other GUI frameworks, but Shoes keeps it simple. If you're building an application, you’ll eventually care about how things are laid out.

00:07:29.990 While you can position elements explicitly by pixel value, Shoes provides stacks and flows to control how elements are laid out. Stacks arrange elements vertically, while flows arrange them horizontally.

00:07:49.640 If we have enough room in the window, the elements will display all the way across. However, if we resize the window, the elements will adjust and move down accordingly.

00:08:14.150 This presents a natural flow, similar to how HTML behaves, without needing to write complicated div tags or CSS styles.

00:08:31.500 Shoes is also driven by many styling properties. You can access these properties easily using Ruby's hash syntax. You can set the font, color, size—many elements have well-documented properties.

00:08:47.300 These properties will continue to improve with better documentation before the final release.

00:09:05.000 Those features are lovely, but I have found that doing programming with my kids using Shoes is really fruitful. Text boxes, buttons, and similar features are fun, but many kids enjoy drawing and creating pictures on the screen.

00:09:20.100 Shoes has basic support for drawing shapes with simple methods. You can create rectangles, ovals, stars, and more, specifying fill color for the shapes.

00:09:37.500 My daughter has spent countless hours choosing colors for her shapes in Shoes programs. She often enjoys the drawing aspect even more than programming itself.

00:09:54.700 This application can illustrate how shapes can overlap, and the order in which they are drawn affects how they are displayed. It's a great way for kids to learn procedural thinking.

00:10:06.640 One of my favorite contributions to open-source comes from a project my daughter and I worked on together. She helped figure out the shapes to put this together as an exercise in decomposing the drawing into parts.

00:10:30.700 This chicken picture is for my daughter Cora, who unfortunately is not on the live stream today. However, she'll get to see the video later.

00:10:44.260 That concludes a brief tour of the essential features in the Shoes DSL. There’s much more to explore, including ways to create widgets, animations, and other form elements.

00:11:01.390 This is one of my favorite examples. The simple act of drawing ovals with some opacity creates a fascinating effect. Remarkably, this entire visual can be produced with just six or seven lines of Shoes code.

00:11:22.610 Games are also a massive motivator. Many sophisticated Shoes samples are games. For example, we have a tic-tac-toe program, though I might not be great at it.

00:11:36.740 Another favorite of mine, which I rigorously test while working on, is Tetris. Yet, I often find myself getting sidetracked and playing the game instead of conducting tests.

00:11:55.950 There are ample possibilities with the basic features we've discussed, but another remarkable aspect of Shoes is its packaging capabilities.

00:12:08.260 For a beginner, getting your program into someone else's hands can be challenging. However, Shoes provides a streamlined way to package applications.

00:12:26.070 With the Shoes gem, you can use the "package" command and specify whether it’s a Mac, Windows, or Linux app. Point it at your Shoes application file, and it will generate the appropriate application bundle.

00:12:45.300 This cross-platform support is significant. You can create a Windows version while using a Mac; you don’t need to compile on the specific operating system.

00:12:56.809 The resulting packages are compressed files—either .tar.gz or .zip, depending on the operating system. For example, here's one generated for Mac that looks just like an application.

00:13:13.350 Making the Mac version polished is a significant achievement, but there's still work to do for Windows and Linux to make them as native as we’d like.

00:13:27.380 At the heart of Shoes is the simple DSL and the packaging system, which makes it easy to share your work.

00:13:45.070 Part of my interest in Shoes also stems from its history. It was originally created by the talented Wai ‘the lucky stiff.’ How many of you have heard of him?

00:14:02.060 I'm glad to see a mix of awareness. For those unfamiliar, he was a notable figure within the Ruby community who eventually vanished. It’s worth discussing his contributions.

00:14:16.389 One of his major projects was Hackety Hack, a programming environment designed for kids to start GUI programming. Hackety Hack was built with Shoes to enable users to run Shoes programs.

00:14:34.790 Unfortunately, Wai disappeared in 2009, deleting his website and code. Though some of his projects had copies preserved, many fell into disrepair.

00:14:53.260 Many folks assumed that Shoes would die with him, but something interesting happened; Shoes remained alive. People loved the DSL and the simplicity it offered.

00:15:11.300 After Wai's disappearance, several attempts were made to maintain the project. Green Shoes rewrote the GUI using GTK, Blue Shoes did the same with QT, and another version was created on the JVM.

00:15:29.660 Other versions emerged, including those using HTML and JavaScript, CoffeeScript, and more, as the community worked to replicate Shoes' functionality in a more maintainable way.

00:15:47.860 Eventually, the Shoes community consolidated into the Shoes4 project. Rewrites can be perilous, but this one was vital for creating a future-proof solution.

00:16:09.500 Part of that was ensuring cross-platform support. Java emerged as a suitable option due to its built-in features for creating applications that work across Mac, Windows, and Linux.

00:16:27.150 With JRuby, these capabilities became highly accessible for us. This allowed Shoes4 to build on a robust cross-platform UI system while remaining entirely in Ruby.

00:16:45.599 I'm excited to share that Shoes4 started in 2012 and only recently released its first candidate version!

00:17:01.879 It's been a long time coming, and I'm thrilled! Please install JRuby, file reports on our issues, and help us hit a full release by the new year. Exciting times ahead for Shoes.

00:17:16.700 As this project was progressing, many folks from the Shoes community tried to maintain Wise's original code, but they had difficulties compiling it.

00:17:31.689 Yet people loved Shoes, and the Shoes3 team kept it alive and stable, introducing new features while remaining predominantly in C.

00:17:47.710 Shoes4, in contrast, offers a more manageable development environment. It's important to mention that it can run on Raspberry Pi, as it’s based on MRI.

00:18:04.690 Both Shoes3 and Shoes4 are viable codebases that continue to offer this wonderful DSL that we all admire.

00:18:20.679 Let's briefly discuss Shoes4's structure; it functions similarly to Rails, where multiple gems reside in a single repository. The primary gem, called Shoes, mainly serves as a meta gem.

00:18:35.540 It installs dependencies and provides executable files, while the core mechanics exist in two packages: Shoes Core and Shoes SWT. This separation is intentional.

00:18:50.600 Shoes4’s architectural goal was to establish a clear distinction between the DSL (the user interface) and the underlying GUI code. This design aids the community in potentially creating other rendering methods.

00:19:08.080 Thanks to prior efforts, there exists an SWT gem that wraps low-level Java primitives nicely. We’re grateful for that foundation.

00:19:21.570 Packaging support has its dedicated gem called ShoesPackage, built on Warbler—enabling us to create a single Java JAR file of our Ruby code.

00:19:38.080 However, while Warbler generates a JAR file, it doesn't offer the appearance of native applications on various operating systems.

00:19:52.690 To address this, Shoes features another project called Furoshiki, which manages OS-specific packaging, meaning it can convert a JAR file into a Mac application, for example.

00:20:12.300 Additionally, our manual is separated into its own gem, which enables us to share content efficiently between our website and interactive manuals.

00:20:27.480 We certainly have much to discuss regarding Shoes, but I also want to encourage you all to contribute back. The Ruby community offers countless benefits, providing easy access to software that would have been unimaginable a decade ago.

00:20:45.450 If you have the opportunity, consider getting involved with these projects. It’s an enjoyable way to learn new skills and improve your coding ability.

00:21:01.700 Shoes is an excellent candidate for engagement. We have a 'newcomer-friendly' tag on our issues, making it easier for those looking to contribute.

00:21:14.309 If you primarily write Rails or web applications, working with desktop GUI software will offer a new perspective. Finally, I'm excited to announce we have shoes stickers for the new release.

00:21:29.179 We have a new logo design, and I have stickers featuring the classic Shoes logo for anyone nostalgic. Please come see me if you'd like one.

00:21:47.360 Thank you!

00:22:11.000 It could run on any Ruby version. The DSL interacts through a specific namespace, with all JVM-specific elements behind the scenes.

00:22:26.100 Discussing Shoes3, it's unlikely they will implement this method due to substantial investments in how native code interacts.

00:22:42.300 However, we have talked about sharing some spec suites and testing across projects. We just rejoined under the same organization, so moving forward is feasible.

00:22:56.830 The question regarding Shoes4 downloading dependencies is affirmative. It attempts to utilize a locally installed JVM.

00:23:11.860 If it cannot find one, we do have a version for use locally in the package. As for native libraries, Ruby-related libraries are supported within the package.

00:23:27.780 However, native libraries connected via FFI might not be fully integrated. That’s a pertinent question.

00:23:43.890 Regarding Shoes and Electron, I can't detail much on Electron's functionality as I haven’t engaged in its development. Shoes is more opinionated; it's simpler for those getting started.

00:24:00.050 Should you require a precise layout, Shoes may not be the ideal choice, but it's a Ruby framework that caters to new learners, making it accessible.

00:24:16.530 As for whether the presentation was made using Shoes, indeed, this session utilizes Wingtips, a presentation library built on Shoes.

00:24:34.120 While it runs as a Shoes application, it allows for flexibility in code execution across Ruby files.

00:24:49.610 The question asked is whether we have developed screen capture functionality. I think it could work well with native OS elements.

00:25:04.830 We haven't developed a method for easy screen captures yet, but it’s something that would be beneficial.

00:25:23.540 The question pertains to whether Shoes is utilized in any learning curriculums. I'm not aware of any extensive educational frameworks, only tutorials derived from Hackety Hack.

00:25:39.720 If anyone is informed about learning resources, please do reach out to me. I think we are almost out of time.

00:25:52.560 Thank you very much for your attention!

RubyConf 2017