Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ruby GUI Apps Beautiful inside AND outside

00be30bbebde5e0700777fb98cfe41e0?s=47 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

00be30bbebde5e0700777fb98cfe41e0?s=128

Josep Egea

January 28, 2021
Tweet

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