Advantage of exporting run function as entry point? about reagent

[mike-thompson-day8]

Normally, you'd ask this question in the clojurescript google group. It isn't reagent specific.

Before discussing which of the two is better, note that there is a third variation: don't wrap the render-component in a function. Just have this code at the bottom of your core.cljs:

(reagent/render-component [todo-app] (.-body js/document))

Now, there's no longer any need to call run. When the javascript is loaded, the render-component will execute.

So now to answer your question about calling the kickoff function: most of the time this is a matter of personal taste, but there is one case where you MUST use an onload variation. That's when you are using :optimizations :none (in the cljsbuild section, within project.clj).

In that case, the HTML would need to include a goog.require:

<script type="text/javascript" src="target/client.js"></script>
<script type="text/javascript">
  goog.require('todomvc");      ;;  <---- triggers a cascade of  <script> to be added to the page
  todomvc.run();                 ;;  fails because the code is not loaded yet  (<scripts>  are still loading async)
</script>

To work around this failure, you have to wait for the whole page to load before you call run(). Perhaps you cheat like this:

<script type="text/javascript" src="target/client.js"></script>
<script type="text/javascript">
  goog.require('todomvc");      ;;  <---- triggers a cascade of  <script> to be added to the page
  function run()  {
      todomvc.run();  
  }
  window.addEventListener('load', run);      ;; you can't reference todomvc.run directly, because the code isn't laoded.
</script>

Or use the approach in chord where the onload is burried in the code.

Personally, I like to see the kickoff function called in the HTML.

[Frozenlock]

I consider using directly

(reagent/render-component [todo-app] (.-body js/document))

to be quite dangerous, unless you know for sure that you'll always render to the body.

I myself like to render into inner DIVs, which means that I must call the rendering function after the DIVs themselves are loaded. This is most easily done with the onload function.

Using todomvc.run(); has the advantage of giving you more control. Because of the way cljs works, you might end up with a single js file for multiple webpage. By calling the functions individually, you can decide which ones are going to be executed on a given page.

In summary:

• Single page app: use onload;
• Multiple webpage: use todomvc.run() for precise control;

[stig]

Thank you very much, both. @mike-thompson-day8 You're right; I should have asked this on a ClojureScript forum instead. I've not seen this approach anywhere else though.