|
| 1 | +# Tools |
| 2 | + |
| 3 | +## Hyper-console |
| 4 | + |
| 5 | +Hyper-Console will open a new popup window, that is running an IRB style read-eval loop. The console window will compile what ever ruby code you type, and if it compiles, will send it to your main window for execution. The result (or error message) plus any console output will be displayed in the console window. |
| 6 | + |
| 7 | +## Hyper-spec |
| 8 | + |
| 9 | +With Hyper-Spec you can run isomorphic specs for all your Hyperloop code using RSpec. Everything runs as standard RSpec test specs. |
| 10 | + |
| 11 | +Hyperloop wants to make the server-client divide as transparent to the developer as practical. Given this, it makes sense that the testing should also be done with as little concern for client versus server. |
| 12 | + |
| 13 | +Hyper-spec allows you to directly use tools like FactoryGirl (or Hyperloop Operations) to setup some test data, then run a spec to make sure that a component correctly displays, or modifies that data. You can use Timecop to manipulate time and keep in sync between the server and client. This makes testing easier and more realistic without writing a lot of redundant code. |
| 14 | + |
| 15 | +## Hyper-trace |
| 16 | + |
| 17 | +Method tracing and conditional break points for Opal and Hyperloop debug. |
| 18 | + |
| 19 | +Typically you are going to use this in Capybara or Opal-RSpec examples that you are debugging. |
| 20 | + |
| 21 | +Hyper-trace adds a hypertrace method to all classes that you will use to switch on tracing and break points. |
| 22 | + |
| 23 | +## Opal Hot Reloader |
| 24 | + |
| 25 | +Opal Hot Reloader is for pure programmer joy (not having to reload the page to compile your source) and the Opal Console is incredibly useful to test how Ruby code compiles to JavaScript. |
| 26 | + |
| 27 | +Opal Hot Reloader is going to just dynamically (via a websocket connection) chunks of code in the page almost instaneously. |
| 28 | + |
| 29 | +## Debugging tips |
| 30 | + |
| 31 | +Tips, good practice will help you debugging your Hyperloop application. |
| 32 | + |
| 33 | +### JavaScript Console |
| 34 | + |
| 35 | +At any time during program execution you can breakout into the JavaScript console by simply adding a line of back-ticked JavaScript to your ruby code: |
| 36 | + |
| 37 | +`debugger;` |
| 38 | + |
| 39 | +If you have source maps turned on you will then be able to see your ruby code (and the compiled JavaScript code) and set browser breakpoints, examine values and continue execution. See Opal Source Maps if you are not seeing source maps. |
| 40 | + |
| 41 | +You can also inspect ruby objects from the JavaScript console. |
| 42 | + |
| 43 | +Here are some tips: https://dev.mikamai.com/2014/11/19/3-tricks-to-debug-opal-code-from-your-browser/ |
| 44 | + |
| 45 | +### Puts is your friend |
| 46 | + |
| 47 | +Anywhere in your HyperReact code you can simply puts any_value which will display the contents of the value in the browser console. This can help you understand React program flow as well as how data changes over time. |
| 48 | + |
| 49 | +```ruby |
| 50 | +class Thing < Hyperloop::Component |
| 51 | + param initial_mode: 12 |
| 52 | + |
| 53 | + before_mount do |
| 54 | + state.mode! params.initial_mode |
| 55 | + puts "before_mount params.initial_mode=#{params.initial_mode}" |
| 56 | + end |
| 57 | + |
| 58 | + after_mount do |
| 59 | + @timer = every(60) { force_update! } |
| 60 | + puts "after_mount params.initial_mode=#{params.initial_mode}" |
| 61 | + end |
| 62 | + |
| 63 | + render do |
| 64 | + div(class: :time) do |
| 65 | + puts "render params.initial_mode=#{params.initial_mode}" |
| 66 | + puts "render state.mode=#{state.mode}" |
| 67 | + ... |
| 68 | + end.on(:change) do |e| |
| 69 | + state.mode!(e.target.value.to_i) |
| 70 | + puts "on:change e.target.value.to_i=#{e.target.value.to_i}" |
| 71 | + puts "on:change (too high) state.mode=#{state.mode}" if state.mode > 100 |
| 72 | + end |
| 73 | + end |
| 74 | + end |
| 75 | +end |
| 76 | +``` |
0 commit comments