Overview of Opal-IRB features

Forrest Chang

fkchang2000@yahoo.com

Reason for the talk

What is opal-irb?

  • https://github.com/fkchang/opal-irb
  • An in browser REPL (read eval print loop)
  • Aims to be the opal equivalent of Ruby's irb (interactive ruby), and pry
  • A tool in which you can play with Ruby any time you have access to a browser

3 Sections

  1. What opal-irb has in common with irb
  2. How opal-irb differs from irb
  3. Features unique to opal-irb

1) In Common with irb

Terminal Emulation (of sorts)

  • irb - terminal formatting
  • opal-irb, via a jqconsole fork, supports some ANSI formatting code

Example 

puts "\033[31mRed Text"

ANSI colors In browser

History up down history

  • Like irb, opal-irb stores a history of previous statements.
  • Navigate this history with the up/down arrows
  • or use the "GNU readline commands".

GNU readline commands (emacs subset)

  • A subset of the gnu readline manipulation is supported.
  • Will likely add more support over time.
  • The currently supported bindings are:
Up/Down Arrow and ctrl-p/ctrl-n: Navigate through history
ctrl-a:                          Beginning of line
ctrl-e:                          End of line
ctrl-b:                          Back 1 character
ctrl-f:                          Forward 1 character
ctrl-d:                          Delete 1 character
ctrl-k:                          Kill to the end of the line
alt-b:                           Back 1 word
alt-f:                           Forward 1 word
alt-d:                           Delete 1 word

Autocomplete

  • A work-in-progress
  • Same tab completion model that irb does. It looks like this:
opal> S<tab>
STDERR          STDIN           STDOUT          ScriptError     Set
SignalException StandardError   StopIteration   String          StringIO
StringScanner   Struct          Symbol          SyntaxError     SystemCallError
SystemExit

opal> ST<tab>
STDERR STDIN  STDOUT

opal> STDI<tab>

opal> STDIN

Live Autocomplete demo

Multi Line Input

  • You can type multiple lines until your entry is complete.
  • Incomplete lines shown with leading periods:
Welcome to Opal 0.7.1
type help for assistance
opal> class Foo
...   def bar
...     :bar
...     end
...     end
 => "bar"
opal>

2) Different than irb

Last value returned - irb

In irb the last value returned is stored in _ variable: 

2.2.1 :001 > 2 * 3
 => 6
2.2.1 :002 > puts _
6
 => nil
2.2.1 :003 >

Opal-irb

  • Last value is stored as $_.
  • Departs due to technical reasons
  • Would like to make it the same
opal> 2 * 3
 => 6
opal> puts $_
6
 => nil
opal>

Help command

irb

Help in irb allows you to lookup documentation for methods via ri and rdoc docs. 

2.0.0-p247 :001 > help

Enter the method name you want to look up.
You can use tab to autocomplete.
Enter a blank line to exit.

>>

Opal-irb

  • Opal-irb's help shows how to operate opal-irb.
  • Help for method lookup to be done in a different fashion.

Current help command output

opal> help
help:                            This text
$_                               last value returned is stored in this global
history:                         Shows history
irb_link_for history_num:        Create a link for the code in the history
ctrl-c:                          Abort prompt
ctrl-m:                          Pop up multi-line editor
ctrl-Enter:                      Submit code in multi-line editor
ctrl-l:                          Creates a link with the code you have on the current line/lines

EDITOR FUNCTIONALITY
Up/Down Arrow and ctrl-p/ctrl-n: Navigate through history
ctrl-a:                          Beginning of line
ctrl-e:                          End of line
ctrl-b:                          Back 1 character
ctrl-f:                          Forward 1 character
ctrl-d:                          Delete 1 character
ctrl-k:                          Kill to the end of the line
alt-b:                           Back 1 word
alt-f:                           Forward 1 word
alt-d:                           Delete 1 word
 => nil

3) Beyond irb

There are number of things that opal-irb does that irb does not:

"Live gist", create a link w/code

  • Create a link with ctl-l (l for link),
  • Link will be displayed above the line in question.
  • Scroll through history, hit ctl-l to give history for that line

Live gist

  • Like a gist, it's shareable bit of code.
  • Unlike a gist, it's "live code"
  • Live gist can be shared in any real app that has opal-irb embedded.
  • Already used this in a production codebase to duplicate a bug condition for a coworker to debug.
  • All embedded opal-irb's on this prensentation are all done via "live gist."
  • For example, the red text printing example eariler

Enhanced History

History Command (like shells have, bash, etc.)

  • You can type history at the prompt to get a listing of your history.
  • Shows listing of the code you've typed in including line numbers.
opal> history
1: class Foo
  def bar
    :bar
  end
end
2: f = Foo.new
3: f.bar
4: history
 => nil
opal>

Link for History

  • Alternate to navigating through history and typing ctrl-l
  • Use irb_link_for command with the history number
  • Different from jsbin, jsfiddle, etc.
  • Experiment and have several "live gists"
  • Matches repl-based experimentation.
irb_link_for <history_num>

Multiline edit

  • irb's multi-line edit can be cumbersome if you make a mistake
  • I've made many
  • Need to ctrl-c and start over
  • opal-irb has multi-line editor support.
  • Invoke with ctrl-m (m for the multi-line editor)
  • Pops up editor window will pop up with the code on the prompt.
  • Has syntax highlighting
  • Auto indenting
  • WIP autocomplete functionality

More tips

  • Editor can be used with all code in the history
  • Navigate to the desired code in your history and hit ctl-m.
  • Run the code by hitting the run it button, or the ctrl-Enter short cut.
  • Close the window with either the close icon, or hit escape.

Live demo of Multiline edit

Requiring code at run time

  • opal-irb intended to be able to explore things at run-time
  • 2 commands to support this

require_remote

  • Part of opal-parser
  • require_remote allows you require a remote ruby file.
require_remote <url_to_ruby_file>"

As an example, I'll require the raw form of this gist, which prints out "require_remote is cool" 10 times.

require_remote In browser

require_js (asynchronous require)

  • require_js requires javascript with a URL.
  • Asynchronous
  • Ok when typed in by hand, is usually fine, the file
  • If not hand typed, say via live-gist, you'll need to put some sort of delay.

A Raphael.js based example.

  • does a require_js of the raphael.js lib
  • Adds a reanimate button (via Opal-browser's DOM DSL)
  • delays via a Timeout and creates an animation and bind reanimation code to the reanimate button

require_js Raphael.js example

require_js_sync (synchronous require)

  • Synchronous calls are atypical in javascript
  • Chrome says this is deprecated
  • Still might be useful

Same raphael example, but without the delay

require_js_sync Raphael.js

Say, say, say, what you want…

  • I use the say command in OSX a lot
  • Lets me know when a long running process is done
  • Implemented for opal-irb, may make a standalone gem

say example in the browser

Examples

Homebrew console example

  • My 1st attempt, port of a coffescript repl with hand written terminal code
  • not as full features as the jq-console example

Homebrew console live

http://fkchang.github.io/opal-irb/index-homebrew.html

jq-console Example

  • This uses (a fork of) jq-console, for improved console support.
  • Most development has been on a jq-console based opal-irb
  • I might revisit a jq-console port to remove the jquery dependency in opal-irb

jq-console Live

http://fkchang.github.io/opal-irb/index-jq.html

Embedded console example

  • How opal-irb might be embedded in an app
  • Has some nominal DOM elements for maniuplation
  • Button to show opal-irb
  • Opal-irb supports 2 ways to display a hidden opal-irb:
  • hot key
  • click event on a DOM element
  • Both are documented in the README

Embedded Console live

embedded iframe does not render right in safari, use chrome

http://fkchang.github.io/opal-irb/index-embeddable.html

Embedded in the opal-playground

  • Opal-irb has been embedded into my fork of the opal-playground.
  • Opal-irb is available in the RESULTS section by hitting the blue "Show Irb" button.
  • Sometimes repl is what you need

Opal-Playground live

http://fkchang.github.io/opal-playground/

Videos and more

  • Video preview of a prototype of opal-inspector 2 years back
  • Showing features previously only supported in Smalltalk and Lisp machines.
  • Intend on beefing it up

Done for now

Thanks!