javascript - remote - ruby on rails ajax example

Rails inline Javascript y mejores prácticas

Question

Soy un poco nuevo en el uso de Rails, y una aplicación en la que estoy trabajando está progresando bien; sin embargo, estoy mirando el HTML generado y noté cosas como ...

<script type="text/javascript">
//<![CDATA[
Droppables.add(...);
//]]>
</script>

Rociado alrededor del HTML, que por supuesto coincide con los lugares donde uso:

<%= drop_receiving_element ... %>

Lo que me pregunto es ... ¿hay una mejor manera de hacer esto o hacerlo más limpio? Algunas de estas etiquetas de script provienen de parciales, por lo que colocarlas en la parte inferior de la página no ayuda en esta situación.

Otra opción puede ser presionar todos estos ''bloques de etiquetas'' en una matriz y luego escribirlos en el archivo application.rhtml , pero todavía está un poco desordenado ...

Answer 1

Bueno, si realmente quieres utilizar las mejores prácticas ... No uses javascript en línea. Mantenga su HTML, CSS y Javascript limpios y separados entre sí. Idealmente, el archivo html debería ser utilizable sin CSS y javascript.

La forma más limpia, imo, es simplemente crear su aplicación utilizando html / css simple, y mejorarla con javascript discreto para proporcionar una mejor experiencia de usuario.

Un patrón para esto es incluir todos sus archivos JS en la parte inferior de su página, y comenzar a ejecutar su código con funcionalidades como onDomReady.

En base a los comentarios, me gustaría agregar algunas opciones posibles para que comiences:

• JQuery
• YUI
• Prototipo

Answer 2

Esto me molestó por un tiempo y finalmente surgió con un enfoque de dos frentes.

Si está desarrollando una aplicación web para un dominio cerrado, donde el rendimiento del motor de búsqueda y JavaScript no son un problema, simplemente sea pragmático y deje que los ayudantes de JavaScript de Rails hagan lo suyo.

Si está desarrollando para la web en general, haga lo que Tomh sugirió y codifique en html / css simple y luego mejore onDomReady.

Si aún desea utilizar los ayudantes de Rails como button_to_remote que usan javascript en línea, codifique el controlador de carga de su página para enviar una solicitud de Ajax al servidor. a continuación, puede usar page.replace / page.replace_html para reemplazar sus elementos de página normales con el código devuelto por los helpers.

Answer 3

También recomendaría ir con el enfoque Javascript discreto y usar jQuery .

Para obtener un excelente tutorial introductorio sobre cómo hacer eso con Rails, eche un vistazo a este screencast jQuery + Rails de Ryan Bates .

Si desea seguir usando ayudantes con jQuery, eche un vistazo a jRails , pero si lo hace, seguirá violando la discreta premisa de Javascript.

Answer 4

La mejor práctica es eliminar todos los javascript en línea. Sin embargo, hay 3 casos que he encontrado en los que necesitas javascript en línea:

1. Para resolver los errores de imagen

Si una etiqueta de imagen hace referencia a una ruta de imagen que no existe, la única forma de evitar que aparezca el error de imagen (incluso en el inspector web) es hacer esto:

<img src="/i/dont/exist.png" onerror="$(this).attr("src", "/i/do/exist.png")" />

Lo siguiente no funciona porque el evento onerror se ejecuta antes de que incluso tenga tiempo de tomar la imagen con jQuery:

$("img").error(function() {
  $(this).attr("src", "/i/do/exist.png")
});

El código siguiente tampoco funciona porque el evento onerror no burbujea:

$("img").live("error", function() {
  $(this).attr("src", "/i/do/exist.png");
});

Entonces debes usar javascript en línea para eso.

2. Para representar plantillas de JavaScript a medida que la página carga

Si espera hasta $(document).ready para dibujar su feed de contenido en uno de los elementos de contenedor vacíos en su dom, el usuario verá el espacio en blanco por una fracción de segundo. Es por eso que cuando su página de Twitter se carga por primera vez, el feed está en blanco por un instante. Incluso si solo coloca un archivo de script externo en la parte inferior del dom, y allí agrega los elementos html generados dinámicamente a su página sin siquiera usar $(document).ready , aún es demasiado tarde. Debe agregar los nodos dinámicos inmediatamente después de agregar el elemento contenedor:

<script>App.bootstrap({some: "json"});</script>
<nav id=''navigation''></nav>
<header id=''header''></header>
<section id=''content''>
  // dynamic content here
</section>
<script>App.renderContent();</script>
<aside id=''sidebar''>
  // dynamically toggle which one is selected with javascript
  <nav>
    <h3>Search By Category</h3>
    <ol>
      <li>
        <a href="/category-a">Category A</a>
      </li>
      <li>
        <a href="/category-b">Category B</a>
      </li>
    </ol>
  </nav>
</aside>
<script>App.renderSidebar();</script>
<footer id=''footer''></footer>

3. Estás iniciando tu aplicación con JSON

Si está utilizando plantillas JSON + javascript, es una buena idea iniciar el primer conjunto de datos en el cuerpo de la respuesta incluyéndolo en línea en la página (también en el ejemplo anterior de dom). Eso lo hace para que no necesite una solicitud ajax adicional para representar el contenido.

Todo lo demás debe hacerse con JavaScript discreto

Rails tiene una gran cantidad de ayudantes de Javascript, y afortunadamente en Rails 3 la mayoría (¿todo?) Es discreto; ahora están usando el atributo de data- y un archivo externo rails.js . Sin embargo, muchas de las gemas que son parte-ruby part-javascript tienden a escribir métodos auxiliares para agregar JavaScript complejo en línea:

• https://github.com/rubaidh/google_analytics
• https://github.com/scrubber/jquery_grid_for_rails
• https://github.com/sandipransing/rails_tiny_mce
• https://github.com/phronos/rails_datatables

Eso es útil, pero creo que tener un README claro que describa cómo agregar el javascript a su application.js es aún más útil. El javascript externo hace que sea mucho más fácil personalizar / extender la funcionalidad más adelante, le da mucho más control sobre el sistema y minimiza la duplicación en sus páginas html (por lo que el cuerpo de la respuesta es más pequeño y el navegador puede caché externo archivos javascript). A menos que necesites manejar imágenes faltantes, renderizado instantáneo o arrancar un json, puedes poner todo lo demás en archivos javascript externos y nunca tener que usar Rails javascript / ajax helpers.

Answer 5

A veces, JavaScript en línea es útil para vistas críticas y rápidas (por ejemplo, ciertas páginas de aterrizaje) o pequeños fragmentos (por ejemplo, inicialización de SDK de Facebook, scripts de inicialización de Analytics / Kissmetrics, etc.) donde el uso de bibliotecas externas no puede acelerar la carga de la página. Para esos casos, recomiendo usar un _facebook.js.erb parcial dentro de los diseños, y definir un ayudante:

module ApplicationHelper
  def facebook_tag
    content_tag :script, render(partial: ''layouts/facebook.js'')
  end
end

A continuación, cree el archivo _facebook.js.erb e incluya el JavaScript en línea dentro de application.html.erb utilizando el helper definido:

<%= facebook_tag %>

Para cualquier otro caso, como los parciales, menciona que JavaScript en línea, recomiendo usar JavaScript discreto como sugieren otras respuestas.