Ruby GUI Apps Beautiful inside AND outside

We all love the beauty of Ruby. It's powerful, flexible and expressive. But most Ruby applications are doomed to run on server farms, powering APIs and generating HTML or log messages as their only visible output.

This doesn't have to be this way. Ruby can have GUIs and GUIs can have Ruby.

In this talk we'll have some fun writing desktop GUI Apps using Ruby. And will experience how the end result is much more than the sum of the parts.

Join us and share the joy!

Presented at https://madridrb.com on January 2021

Transcript

1. RUBY GUI APPS BEAUTIFUL INSIDE AND OUTSIDE JOSEP EGEA jes@josepegea.com
2. KICK OFF!!
3. THANKS FOR COMING!!! Thanks to members of Madrid.rb Thanks to people from outside of Madrid! Thanks to our Sponsors! We ❤ you!
4. WHO'S JOSEP Software developer & Entrepreneur jes@josepegea.com https://www.josepegea.com https://github.com/josepegea
5. ABOUT PLATFORM161 Right now working with Platform161.com And, yes! We're hiring! https://platform161.com
6. ABOUT TODAY
7. THIS IS NOT Professional desktop app development with Ruby (At least, what I'm going to show is far from professional grade quality)
8. EXPECTED TAKEWAYS You learn new ways to play with GUIs You fall in love (again) with Ruby You look beyond Rails, the Web and servers Maybe (only maybe) you learn something useful for your day-to-day work And, above all, you have some fun along the way!
9. IN THE BEGINNING…
10. MY FIRST COMPUTER Credits: CPCBox - RetroVM - https://www.retrovm.com/
11. SOME GUYS HAD BIGGER TOYS Alan Kay, creator of Smalltalk, at Xerox Parc
12. SOME ARE STILL PLAYING TODAY! Dan Ingalls, co-creator of Smalltalk, with a restored Xerox Alto
13. HOW DID THIS TOY LOOK LIKE? Smalltalk 78 running on a JS emulator Credits: Smalltalk Zoo - https://smalltalkzoo.thechm.org/HOPL-St78.html?base
14. WHAT DID THESE GUYS END UP BUILDING? The GUI, OOP, tablets and much more!! Credits: PARC - https://www.parc.com/about-parc/parc-history
15. HOW DID THEY BECOME SO PRODUCTIVE?
16. DID IT WORK? Alan Kay Our programs were 10x less ef cient than those of our colleagues from other teams, but our rate of innovation was 10x faster
17. THE WORLD AFTERWARDS
18. APPLE AND MICROSOFT POPULARIZED GUIS
19. BUT THEY FORGOT ABOUT OOP Steve Jobs about his visit to Xerox PARC One of the things they showed me was Object Oriented Programming. They showed me that but I didn’t even see it. I was so blinded by the rst thing they showed me, which was the GUI.
20. AND PROGRAMMING GUIS WAS HARD! Credits: Charles Petzold - http://www.charlespetzold.com/blog/2014/12/The-Infamous-Windows-Hello-World-Program.html
21. LATER, STEVE JOBS TRIED AGAIN The NeXT had a great GUI built on top of Objective-C, which was modelled after Smalltalk
22. AND TCL/TK MADE GUIS EASIER TO BUILD TCL was introduced around 1988 TK was added around 1990 It wasn't OOP, but it made GUIs easy Perl and Python got access to TK, too!!
23. SO, THE WORLD AFTER SMALLTALK OOP GUI for Users GUI for Devs Smalltalk Great Great Great Mac/Windows/X-Window No/Poor Good Hard NeXT Very Good Great Approachable-ish TCL/TK No Decent Very approachable
24. GUIS IN RUBY
25. ENTER RUBY Purely OOP, in the Smalltalk style Very good Standard Library Interpreted: Really fast feedback loop But…. No GUI ☹
26. A GUI, AT LAST! Ruby got TK, too, in 1999 Credits: https://magazine.rubyist.net/articles/0003/0003-RubyTkMovement.html
27. OTHER GUIS FOR RUBY With time, we got other GUIs GTK QT wxWindows libUI Others (Swing with JRuby, RubyMotion, …)
28. HOW GOOD IS TK? Pros Cons Powerful widgets Not native (but close) Multiplatform Not too OOP High level A little verbose
29. PLAY TIME!!
30. LET'S BUILD SOMETHING IN PLAIN RUBY TK Some resources Stack Over ow is your friend! When searching it helps to use "tkinter" Python will remind you of Ruby's beauty! Credits: Credits: TkDocs TutorialsPoint Ruby Tk Guide TkDocs - https://tkdocs.com TutorialsPoint - Ruby Tk Guide - https://www.tutorialspoint.com/ruby/rubytkguide.htm
31. SO, LET'S SAY HELLO WORLD Credits: Not too shabby!! require 'tk' require 'tkextlib/tile' root = TkRoot.new() button = Tk::Tile::TButton.new(root) {text "Hello World"}.grid Tk.mainloop() TkDocs - https://tkdocs.com
32. SOMETHING MORE ELABORATE? Credits: require 'tk' require 'tkextlib/tile' root = TkRoot.new {title "Feet to Meters"} content = Tk::Tile::Frame.new(root) {padding "3 3 12 12"}.grid( : TkGrid.columnconfigure root, 0, :weight => 1; TkGrid.rowconfigure $feet = TkVariable.new; $meters = TkVariable.new f = Tk::Tile::Entry.new(content) {width 7; textvariable $feet}.gr Tk::Tile::Label.new(content) {textvariable $meters}.grid( :column Tk::Tile::Button.new(content) {text 'Calculate'; command {calculat Tk::Tile::Label.new(content) {text 'feet'}.grid( :column => 3, :ro Tk::Tile::Label.new(content) {text 'is equivalent to'}.grid( :colu Tk::Tile::Label.new(content) {text 'meters'}.grid( :column => 3, TkDocs - https://tkdocs.com/tutorial/ rstexample.html
33. CAN WE BUILD SOMETHING USEFUL? Let's try to get back to mathematical functions!
34. CAN WE MAKE THE CODE LESS VERBOSE?
35. WEB DEVELOPMENT HAS SPOILED US A BIT… Nowadays, we're used to markup and components Could we use something similar with Tk? = simple_form_for :login, method: :post do |f| .panel.panel-primary .panel-heading %h1 the login form .panel-body = f.input :email = f.input :password = f.input :remember_me, as: :boolean, label: false .panel-footer = f.submit "Login", class: "btn btn-primary" = link_to 'Forgot Password?', new_password_reset_path
36. INSTEAD OF content = Tk::Tile::Frame.new(root) left_bar = Tk::Tile::Frame.new(content) Tk::Tile::Label.new(left_bar) { text 'Function:' } $function = TkVariable.new("Math.sin(x)") function_t = Tk::Tile::Entry.new(left_bar) { textvariable: $funct $canvas = TkCanvas.new(content) { width 200; height 200 } $canvas.bind("MouseWheel", mousewheel, '%D') $canvas.bind("B1-Motion", mouse_drag, '%x %y') $canvas.bind("B1-ButtonRelease", mouse_up, '%x %y')
37. COULD WE HAVE… root.hframe do |f| f.vframe do |vf| vf.label(text: "Function: ") vf.entry(value: "Math.sin(x)", on_change: :update ) end f.canvas(width: 200, height: 200) do |cv| cv.on_mouse_wheel ->(e) { mousewheel(e) } cv.on_mouse_drag ->(e) { mouse_drag(e) }, button: 1 cv.on_mouse_up ->(e) { mouse_up(e) }, button: 1 end end
38. INTRODUCING tk_component https://github.com/josepegea/tk_component
39. DIFFERENT CODE, SAME RESULTS ¯\_( ツ)_/¯
40. AND WHAT ABOUT THE COMPONENTS? It's good to build GUIs with markup-like syntax Now, could be create reusable GUI blocks?
41. COMPOSED WIDGETS IN ACTION!!
42. IS THAT ALL?
43. WHAT CAN WE USE THIS FOR? Today most UIs run on a browser What's the point of a GUI in Ruby? Well, there are things that cannot run in a browser (like anything that needs to touch les) But, the main point would be… Ruby itself!!
44. WHAT WAS SO GREAT ABOUT SMALLTALK IN THE 70'S GUI and objects empowered each other Objects created the GUI GUI manipulated the objects
45. CAN WE DO THE SAME FOR RUBY? We just gave a GUI to Ruby Can we give Ruby to our GUIs?
46. ENTER tk_inspect https://github.com/josepegea/tk_inspect
47. MMMMM… LOOKS FAMILIAR?
48. WELL, GETTING THERE… But we might be missing something…
49. WHAT ABOUT NOW?
50. OK COOL, BUT, WHAT'S IN IT FOR ME?
51. WHAT ABOUT BETTER DEBUGGING? Pry is a fantastic debugger But, sometimes, the terminal is a bit rough Maybe a GUI could help…
52. OR, A GUI FOR RAILS CONSOLE?
53. VOILA!
54. JUST THE BEGINNING
55. SO FAR, THESE ARE JUST TOYS I started wanting to build GUIs in Ruby But Ruby entices you to play, so I built toys! So far, it's work in progress (fun in progress?) Do you want to play, too?
56. COME AND PLAY! https://github.com/josepegea/tk_component https://github.com/josepegea/tk_inspect https://github.com/josepegea/tk_inspect_rails
57. RECAP
58. WHAT WE LEARNED… We owe a lot to the guys at PARC of 60-90s GUI's are not "just for users" OOP and GUI's supercharge each other You, too, can bene t from Ruby GUIs!
59. REFERENCES TkComponent, TkInspect and TkInspectRails Documentation for Tk with Ruby Emulators used in this talk Xerox PARC Heros in Action https://github.com/josepegea/tk_component https://github.com/josepegea/tk_inspect https://github.com/josepegea/tk_inspect_rails TkDocs TutorialsPoint Ruby Tk Guide CPCBox - RetroVM Smalltalk Zoo Dan Ingalls live demoing Smalltalk Alan Kay: The Power of Simplicity
60. BIG THANKS!! Hope you had some fun!! | jes@josepegea.com www.josepegea.com