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
   

   View Slide

2. KICK OFF!!
   

   View Slide

3. THANKS FOR COMING!!!
   Thanks to members of Madrid.rb
   Thanks to people from outside of Madrid!
   Thanks to our Sponsors! We ❤ you!
   

   View Slide

4. WHO'S JOSEP
   Software developer & Entrepreneur
   jes@josepegea.com
   https://www.josepegea.com
   https://github.com/josepegea
   

   View Slide

5. ABOUT PLATFORM161
   Right now working with Platform161.com
   And, yes! We're hiring!
   https://platform161.com
   

   View Slide

6. ABOUT TODAY
   

   View Slide

7. THIS IS NOT
   Professional desktop app development with Ruby
   (At least, what I'm going to show is far from professional grade quality)
   

   View Slide

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!
   

   View Slide

9. IN THE BEGINNING…
   

   View Slide

10. MY FIRST COMPUTER
    Credits: CPCBox - RetroVM - https://www.retrovm.com/
    

    View Slide

11. SOME GUYS HAD BIGGER TOYS
    Alan Kay, creator of Smalltalk, at Xerox Parc
    

    View Slide

12. SOME ARE STILL PLAYING TODAY!
    Dan Ingalls, co-creator of Smalltalk, with a restored Xerox Alto
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. HOW DID THEY BECOME SO PRODUCTIVE?
    

    View Slide

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
    

    View Slide

17. THE WORLD AFTERWARDS
    

    View Slide

18. APPLE AND MICROSOFT POPULARIZED GUIS
    

    View Slide

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.
    

    View Slide

20. AND PROGRAMMING GUIS WAS HARD!
    Credits: Charles Petzold - http://www.charlespetzold.com/blog/2014/12/The-Infamous-Windows-Hello-World-Program.html
    

    View Slide

21. LATER, STEVE JOBS TRIED AGAIN
    The NeXT had a great GUI built on top of Objective-C,
    which was modelled after Smalltalk
    

    View Slide

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!!
    

    View Slide

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
    

    View Slide

24. GUIS IN RUBY
    

    View Slide

25. ENTER RUBY
    Purely OOP, in the Smalltalk style
    Very good Standard Library
    Interpreted: Really fast feedback loop
    But…. No GUI ☹
    

    View Slide

26. A GUI, AT LAST!
    Ruby got TK, too, in 1999
    Credits: https://magazine.rubyist.net/articles/0003/0003-RubyTkMovement.html
    

    View Slide

27. OTHER GUIS FOR RUBY
    With time, we got other GUIs
    GTK
    QT
    wxWindows
    libUI
    Others (Swing with JRuby, RubyMotion, …)
    

    View Slide

28. HOW GOOD IS TK?
    Pros Cons
    Powerful widgets Not native (but close)
    Multiplatform Not too OOP
    High level A little verbose
    

    View Slide

29. PLAY TIME!!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. CAN WE BUILD SOMETHING USEFUL?
    Let's try to get back to mathematical functions!
    

    View Slide

34. CAN WE MAKE THE CODE LESS VERBOSE?
    

    View Slide

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
    

    View Slide

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')
    

    View Slide

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
    

    View Slide

38. INTRODUCING tk_component
    https://github.com/josepegea/tk_component
    

    View Slide

39. DIFFERENT CODE, SAME RESULTS ¯\_(
    ツ)_/¯
    

    View Slide

40. AND WHAT ABOUT THE COMPONENTS?
    It's good to build GUIs with markup-like syntax
    Now, could be create reusable GUI blocks?
    

    View Slide

41. COMPOSED WIDGETS IN ACTION!!
    

    View Slide

42. IS THAT ALL?
    

    View Slide

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!!
    

    View Slide

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
    

    View Slide

45. CAN WE DO THE SAME FOR RUBY?
    We just gave a GUI to Ruby
    Can we give Ruby to our GUIs?
    

    View Slide

46. ENTER tk_inspect
    https://github.com/josepegea/tk_inspect
    

    View Slide

47. MMMMM… LOOKS FAMILIAR?
    

    View Slide

48. WELL, GETTING THERE…
    But we might be missing something…
    

    View Slide

49. WHAT ABOUT NOW?
    

    View Slide

50. OK COOL, BUT, WHAT'S IN IT FOR ME?
    

    View Slide

51. WHAT ABOUT BETTER DEBUGGING?
    Pry is a fantastic debugger
    But, sometimes, the terminal is a bit rough
    Maybe a GUI could help…
    

    View Slide

52. OR, A GUI FOR RAILS CONSOLE?
    

    View Slide

53. VOILA!
    

    View Slide

54. JUST THE BEGINNING
    

    View Slide

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?
    

    View Slide

56. COME AND PLAY!
    https://github.com/josepegea/tk_component
    https://github.com/josepegea/tk_inspect
    https://github.com/josepegea/tk_inspect_rails
    

    View Slide

57. RECAP
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

60. BIG THANKS!!
    Hope you had some fun!!
    |
    jes@josepegea.com www.josepegea.com
    

    View Slide