Opal-hot-reloader

12
OPAL-HOT-RELOADER FORREST CHANG [email protected]

Transcript of Opal-hot-reloader

Page 1: Opal-hot-reloader

OPAL-HOT-RELOADERFORREST CHANG

[email protected]

Page 2: Opal-hot-reloader

HOT RELOADINGAnyone heard of it?

Page 3: Opal-hot-reloader

FRONT END WEB DEVELOPMENTincrementally make small changesfaster you can see changes, the faster you can develop

Page 4: Opal-hot-reloader

WITHOUT HOT RELOADINGMake the change in your codeRefresh the page in your browserRe-add the data and push all of the same buttons, type etc.

Page 5: Opal-hot-reloader

HOW ABOUT LIVE REFRESH?Refreshing loads everythingNew code, but loses stateStarting from scratch can be life sucking

Page 6: Opal-hot-reloader

WHERE YOU MIGHT'VE HEARD OF LIVE RELOADINGReact Hot Loader

Need to use stores (typically Redux) to preserve stateWebpack hot module reloader

Page 7: Opal-hot-reloader

MODERN WEB DEVHot loading for opalReact.rb Opal version of react.js

Page 8: Opal-hot-reloader

OPAL-HOT-RELOADER

Modern web development for OpalReact.rb support built inCode and css reloading, Rails asset pipeline coming soonIntend on making it even easier to use

https://github.com/fkchang/opal-hot-reloader

Page 9: Opal-hot-reloader

DEMOWithout Hot ReloadingWith Hot Reloading

Page 10: Opal-hot-reloader

VIDEOSimilar demo to live demo, before css reloading was implemented

opal- hot-reloader quick demo

https://www.youtube.com/watch?v=NQbzL7fNOks

Page 11: Opal-hot-reloader

CONCLUSIONAll the benefits of leading edge front end Web dev w/o the pain ofJavascriptJoys of Ruby via Opal, no JS fatigue

Page 12: Opal-hot-reloader

QUESTIONS?