[LRUG] Best practices for javascript in Rails apps

[Alex Reis]

Hi Tim,

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.

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.

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.

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)

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.

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.

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.

Would be happy to discuss in private or assist you in applying the ideas to
a piece of your own JS code.

Cheers,

Alex


On Wed, Jul 17, 2013 at 2:31 PM, Aanand Prasad <aanand.prasad at gmail.com>wrote:

>  I've found Knockout.js<http://knockoutjs.com/documentation/introduction.html>to be a great just-the-bindings-please library, as long as you're fine with
> its <span data-bind="text: variableName"/> 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.
>
> 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. browserify<http://browserify.org/>,
> require.js <http://requirejs.org/> and Square's ES6 module transpiler<http://square.github.io/es6-module-transpiler/> are
> all relevant.
>
>
>  On Wednesday, 17 July 2013 at 13:13, Tim Cowlishaw wrote:
>
> Hi all,
>
> I've just finished working on the first rails app I've started from
> scratch in ages, and, took the opportunity to apply some of the ideas
> from Matt Wynne's Hexagonal Rails talk and Avdi Grimm's Objects on
> Rails book, in the process.
>
> I've been really happy with the result - I've been able to make
> changes with more confidence, and ship new features faster than I have
> taking a more rails-y approach to application architecture, and my
> test coverage is vastly better.
>
> Whoever, there's a rather nasty skeleton in the
> "app/assets/javascript" closet in my app, as, while I'm aware of the
> proliferation of javascript testing frameworks and tools, and
> libraries for doing client-side models, data-binding, etc, I'm really
> not sure how best to structure my javascript code in order to take
> advantage of them (apart from throwing out the idea of server
> generated views entirely, and writing a thick-client js app which
> talks to an API, which I'm not keen on, as I'm a boring old
> stick-in-the-mud who likes things on the web to have proper URLs)
>
> Therefore, has anyone got any tips or tricks for writing maintainable,
> testable, well-factored javascript as part of a rails application
> which has reasonably complex client-side behaviour, but isn't a
> one-page app? Links to talks / blogposts / example codebases also
> gratefully appreciated!
>
> Cheers,
>
> Tim
> _______________________________________________
> Chat mailing list
> Chat at lists.lrug.org
> http://lists.lrug.org/listinfo.cgi/chat-lrug.org
>
>
>
> _______________________________________________
> Chat mailing list
> Chat at lists.lrug.org
> http://lists.lrug.org/listinfo.cgi/chat-lrug.org
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lrug.org/pipermail/chat-lrug.org/attachments/20130717/86c7ed78/attachment.html>