$30 off During Our Annual Pro Sale. View Details »

Ruby GUI Apps Beautiful inside AND outside

Josep Egea
January 28, 2021

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

Josep Egea

January 28, 2021
Tweet

More Decks by Josep Egea

Other Decks in Technology

Transcript

  1. RUBY GUI APPS
    BEAUTIFUL INSIDE AND OUTSIDE
    JOSEP EGEA
    [email protected]

    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
    [email protected]
    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!!
    |
    [email protected] www.josepegea.com

    View Slide