RUBY GUI APPS BEAUTIFUL INSIDE AND OUTSIDE JOSEP EGEA jes@josepegea.com

KICK OFF!!

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

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

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

ABOUT TODAY

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

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!

IN THE BEGINNING…

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

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

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

HOW DID THIS TOY LOOK LIKE? Smalltalk 78 running on a JS emulator Credits: Smalltalk Zoo - https://smalltalkzoo.thechm.org/HOPL-St78.html?base

WHAT DID THESE GUYS END UP BUILDING? The GUI, OOP, tablets and much more!! Credits: PARC - https://www.parc.com/about-parc/parc-history

HOW DID THEY BECOME SO PRODUCTIVE?

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

THE WORLD AFTERWARDS

APPLE AND MICROSOFT POPULARIZED GUIS

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.

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

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

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

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

GUIS IN RUBY

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

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

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

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

PLAY TIME!!

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

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

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

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

CAN WE MAKE THE CODE LESS VERBOSE?

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

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

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

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

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

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

COMPOSED WIDGETS IN ACTION!!

IS THAT ALL?

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

WHAT WAS SO GREAT ABOUT SMALLTALK IN THE 70'S GUI and objects empowered each other Objects created the GUI GUI manipulated the objects

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

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

MMMMM… LOOKS FAMILIAR?

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

WHAT ABOUT NOW?

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

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

OR, A GUI FOR RAILS CONSOLE?

VOILA!

JUST THE BEGINNING

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?

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

RECAP

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!

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

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