The document discusses Opal-Hot-Reloader, a tool for hot reloading in Opal applications that allows developers to see changes immediately without refreshing the browser. It provides benefits like React Hot Loader and Webpack hot module reloading for Opal applications built with React.rb, enabling code and CSS reloading as well as preserving state between reloads for a better development experience.

1. OPAL-HOT-RELOADER
FORREST CHANG
FKCHANG2000@YAHOO.COM

2. HOT RELOADING
Anyone heard of it?

3. FRONT END WEB DEVELOPMENT
incrementally make small changes
faster you can see changes, the faster you can develop

4. WITHOUT HOT RELOADING
Make the change in your code
Refresh the page in your browser
Re-add the data and push all of the same buttons, type etc.

5. HOW ABOUT LIVE REFRESH?
Refreshing loads everything
New code, but loses state
Starting from scratch can be life sucking

6. WHERE YOU MIGHT'VE HEARD OF LIVE RELOADING
React Hot Loader
Need to use stores (typically Redux) to preserve state
Webpack hot module reloader

7. MODERN WEB DEV
Hot loading for opal
React.rb Opal version of react.js

8. OPAL-HOT-RELOADER
Modern web development for Opal
React.rb support built in
Code and css reloading, Rails asset pipeline coming soon
Intend on making it even easier to use
https://github.com/fkchang/opal-hot-reloader

9. DEMO
Without Hot Reloading
With Hot Reloading

10. VIDEO
Similar demo to live demo, before css reloading was implemented
opal- hot-reloader quick demo
https://www.youtube.com/watch?v=NQbzL7fNOks

11. CONCLUSION
All the benefits of leading edge front end Web dev w/o the pain of
Javascript
Joys of Ruby via Opal, no JS fatigue

12. QUESTIONS?