<div dir="ltr"><div>Hi Tim,</div><div><br></div>Personally, I've found that using CoffeeScript and Backbone's Views or Spine.js Controllers to wrap up the bits of javascript that go with a given Rails view/partial is a nice way to keep everything nice and tidy.<div>
<br></div><div>I construct the View/Controller in in-line JS (go ahead, say eeew, but it makes more sense to me than a separate JS file just to bootstrap a controller) normally passing in a DOM element that the rails view created.</div>
<div><br></div><div>I'll wire up my event handlers using the events array like you'd do in a normal view, which is way tidier than all the logic that ends up in your onload stuff in a .js file.</div><div><br></div>
<div>If I need any special data, I'll either stick it into the DOM inside the rails view using data-foo="bar" style attributes for lightweight things, or create a JSON array using again in-line JS in the rails view/partial containing the data the JS needs (usually as a Backbone collection or load it up inside a Spine model, but you don't have to if you don't want it)</div>
<div><br></div><div>One of the great advantages of having some structure in there is you can extract common bits to a set of classes you reuse and mix and match. If views always behave a certain way (i.e. render a template based on an array, or iterate over a collection creating subviews, or validating forms) you can inherit them all from a class that implements that and save boilerplate as welll as reducing copy-paste.</div>
<div><br></div><div>On a rails project, I see little reason not to use Sprockets to bring in your dependencies. I usually use one .js file requiring the small bits needed for it per "area" of the application. You'll have to add them to the asset pre compilation list though. Don't require everything into application.js, you'll load lots of bloat as your app grows.</div>
<div><br></div><div>Sounds rather simplistic, but works for me. It makes JS lots more pleasant to work with, and keeps my rails views JS-free all the while not creating a huge mess of random .js files or a single big one with everything under the sun in it.</div>
<div><br></div><div>Would be happy to discuss in private or assist you in applying the ideas to a piece of your own JS code.</div><div><br></div><div>Cheers,</div><div><br></div><div>Alex</div>
<div class="gmail_extra"><br><br><div class="gmail_quote">On Wed, Jul 17, 2013 at 2:31 PM, Aanand Prasad <span dir="ltr"><<a href="mailto:aanand.prasad@gmail.com" target="_blank">aanand.prasad@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div>
I've found <a href="http://knockoutjs.com/documentation/introduction.html" target="_blank">Knockout.js</a> to be a great just-the-bindings-please library, as long as you're fine with its <font face="Courier New"><span data-bind="text: variableName"/></font> style. It strikes me that it'd make a good fit for a mostly server-side app: populate your HTML with data *and* binding attributes, and then hijack it with Knockout as and when you need to update stuff.
</div><div><br></div><div>I'm an advocate of putting your JS in modules and explicitly importing them, but I don't know what the current best tool for that is. <a href="http://browserify.org/" target="_blank">browserify</a>, <a href="http://requirejs.org/" target="_blank">require.js</a> and Square's <a href="http://square.github.io/es6-module-transpiler/" target="_blank">ES6 module transpiler</a> are all relevant.</div>
<div><div><div><br></div><div><br></div>
<div></div>
<p style="color:#a0a0a8">On Wednesday, 17 July 2013 at 13:13, Tim Cowlishaw wrote:</p>
<blockquote type="cite" style="border-left-style:solid;border-width:1px;margin-left:0px;padding-left:10px">
<span><div><div><div>Hi all,</div><div><br></div><div>I've just finished working on the first rails app I've started from</div><div>scratch in ages, and, took the opportunity to apply some of the ideas</div>
<div>from Matt Wynne's Hexagonal Rails talk and Avdi Grimm's Objects on</div><div>Rails book, in the process.</div><div><br></div><div>I've been really happy with the result - I've been able to make</div>
<div>
changes with more confidence, and ship new features faster than I have</div><div>taking a more rails-y approach to application architecture, and my</div><div>test coverage is vastly better.</div><div><br></div><div>Whoever, there's a rather nasty skeleton in the</div>
<div>"app/assets/javascript" closet in my app, as, while I'm aware of the</div><div>proliferation of javascript testing frameworks and tools, and</div><div>libraries for doing client-side models, data-binding, etc, I'm really</div>
<div>not sure how best to structure my javascript code in order to take</div><div>advantage of them (apart from throwing out the idea of server</div><div>generated views entirely, and writing a thick-client js app which</div>
<div>talks to an API, which I'm not keen on, as I'm a boring old</div><div>stick-in-the-mud who likes things on the web to have proper URLs)</div><div><br></div><div>Therefore, has anyone got any tips or tricks for writing maintainable,</div>
<div>testable, well-factored javascript as part of a rails application</div><div>which has reasonably complex client-side behaviour, but isn't a</div><div>one-page app? Links to talks / blogposts / example codebases also</div>
<div>gratefully appreciated!</div><div><br></div><div>Cheers,</div><div><br></div><div>Tim</div><div>_______________________________________________</div><div>Chat mailing list</div><div><a href="mailto:Chat@lists.lrug.org" target="_blank">Chat@lists.lrug.org</a></div>
<div><a href="http://lists.lrug.org/listinfo.cgi/chat-lrug.org" target="_blank">http://lists.lrug.org/listinfo.cgi/chat-lrug.org</a></div></div></div></span>
</blockquote>
<div>
<br>
</div>
</div></div><br>_______________________________________________<br>
Chat mailing list<br>
<a href="mailto:Chat@lists.lrug.org" target="_blank">Chat@lists.lrug.org</a><br>
<a href="http://lists.lrug.org/listinfo.cgi/chat-lrug.org" target="_blank">http://lists.lrug.org/listinfo.cgi/chat-lrug.org</a><br>
<br></blockquote></div><br></div></div>