Frameworks de JavaScript para crear aplicaciones de una sola página [closed]

10 minutos de lectura

avatar de usuario
cristobal voluntad

Mi objetivo es migrar una aplicación web existente a un RESTful aplicación de una sola página (SPA). Actualmente, estoy evaluando varios marcos de aplicaciones web Javascript.


Mis requisitos son los siguientes:

  • Capa de datos RESTful (como ember-data)
  • Estructura MV*
  • Rutas dinámicas
  • Testeo-soporte
  • Codificación por convención
  • Soporte SEO
  • Navegador-Historial-Soporte
  • Buena documentación (API-)
  • Listo para producción
  • comunidad viva

Columna vertebral

La aplicación actual está usando backbone.js. General, backbone.js es un buen proyecto, pero me faltan estructuras bien definidas que determinen dónde debe suceder lo que debe suceder y cómo deben implementarse las cosas. Trabajar en un equipo más grande con desarrolladores cambiantes conduce a algún tipo de código no estructurado, difícil de mantener y difícil de entender. Es por eso que ahora estoy buscando un marco, que ya defina todo esto.

Ascua

miré en ember.js los últimos días. El enfoque me parece muy prometedor. Pero, desafortunadamente, el código cambia casi a diario. Entonces, no lo llamaré listo para producción. Y, desafortunadamente, no podemos esperar a que sea la versión 1.0. Pero realmente me gusta la idea detrás de este marco.

Angular

Angular.js es un marco ampliamente difundido también, mantenido por Google. Pero no pude familiarizarme con angular. Para mí, la estructura parece poco clara, faltan explicaciones de las responsabilidades generales de cada parte del marco y las implementaciones se sienten tortuosas. Solo para aclarar esto: esta es solo mi impresión personal y podría estar basada en conocimiento faltante.

hombre murciélago y Meteorito

Como entendí, ambos marcos también necesitan una parte del servidor. Y dado que solo queremos un backend RESTful, no importa el idioma, la técnica o el software, esto no es lo que queremos. Además, la API de backend ya existe (RoR).

Knockear, CanJS y Columna vertebral

No profundicé más en estos tres candidatos. Tal vez este sea mi siguiente paso.


Así que mis preguntas ahora:

  • ¿Me estoy perdiendo algún buen marco SPA?
  • ¿Qué marco sugeriría/recomendaría?
  • ¿Evitarías alguno de los marcos mencionados?
  • ¿Cuál es su experiencia en aplicaciones de SP más grandes?

PD: Me gustaría recomendar un gran entrada de blog de Steven Anderson (desarrollador central de Knockout.js) sobre la conferencia “Throne of JS” (de 2012) y los marcos de JavaScript en general.

PD: Sí, sé que ya hay algunas preguntas sobre SO. Pero dado que el desarrollo es tan rápido para los SPA, la mayoría de ellos ya están desactualizados.

avatar de usuario
Nate

Recientemente también tuve que decidir sobre un marco SPA de JavaScript en un proyecto.

  • Ascua

    Miré a Ember desde el principio y tuve pensamientos similares a los tuyos al respecto: me gustó mucho, pero sentí que aún era demasiado pronto para usarlo… aproximadamente la mitad de los tutoriales que leí no funcionaron con la versión actual porque algo había ocurrido recientemente. cambiado en cómo funciona la plantilla.

  • Columna vertebral

    Backbone fue el primer framework que analizamos seriamente. No estoy seguro de entender por qué crees que no tiene “estructuras bien definidas”. Backbone es bastante claro acerca de cómo dividir el modelo y el código de vista. ¿Quizás quiere decir que no hay algún tipo de plantilla de aplicación? De todos modos, Backbone parece realmente centrado en la parte de enlace de modelo/REST, pero en realidad no prescribe nada para el enlace de vista. Si la vinculación de modelos es importante para usted y está utilizando Rails, debería ser muy fácil hacerlo. Desafortunadamente, los servicios web de mi aplicación realmente no coincidían y tuve que escribir los míos propios. .sync y .parse métodos para todo. La separación del código del modelo y de la vista estuvo bien, pero como tendríamos que escribir todos nuestros enlaces desde cero, no valía la pena.

  • Knockear

    Knockout es como el Yin del Yang de Backbone. Donde Backbone se enfoca en el modelo, Knockout es un marco MVVM y se enfoca en la vista. Tiene observable envoltorios para las propiedades de los objetos de JavaScript y utiliza un data-bind atributo para vincular propiedades a su HTML. Al final optamos por Knockout ya que el enlace de vista era principalmente lo que necesitábamos para nuestra aplicación. (…además de otros, como se explica más adelante…) Si te gustan las vinculaciones de vistas de Knockout y las vinculaciones de modelos de Backbone, también hay KnockBack que combina ambos marcos.

  • Angular

    Miré esto después de Knockout; desafortunadamente, todos parecíamos bastante contentos con la forma en que Knockout veía el enlace. Parecía mucho más complejo y difícil de entender que Knockout. Y utiliza un montón de atributos HTML personalizados para hacer enlaces, que no estoy seguro de que me gusten… Puedo echar otro vistazo a Angular más tarde, porque me he encontrado con varias personas a las que realmente les gusta el marco, tal vez nosotros Lo miré demasiado tarde para este proyecto.

  • hombre murciélago, Meteorito, CanJS, Columna vertebral

    Realmente no miré demasiado de cerca a ninguno de estos. Aunque sé que Spine es un marco similar a Backbone con objetos Controller explícitos y está escrito en CoffeeScript.

  • Epílogo

    Como mencioné, terminamos usando Knockout porque, para nuestro proyecto, era más importante centrarse en el enlace de vista. También terminamos usando RequerirJS para la modularización, cruce y Picador para manejar el enrutamiento y el historial, Jazmín para la prueba, así como JQuery, Twitter Bootstrapy Subrayado.js (y probablemente más bibliotecas que estoy olvidando en este momento).

    El desarrollo de aplicaciones Javascript se parece más al ecosistema Java que al ecosistema Rails. Rails proporciona un núcleo sólido de cosas que usará para cada aplicación (marco de Rails), y la comunidad ofrece muchas personalizaciones además de eso (gemas). Java proporciona… un lenguaje. Y luego puede elegir Java EE o Spring o Play o Struts o Tapestry. Y elija JDBC o Hibernate o TopLink o Ibatis para hablar con la base de datos. Y luego puedes usar Ant o Maven o Gradle para construirlo. Y elija Tomcat, Jetty, JBoss o WebLogin para ejecutarlo. Por lo tanto, hay más énfasis en elegir lo que necesita y lo que funciona en conjunto que en elegir LA marco a utilizar.

  • Muchas gracias por su respuesta detallada. Algunas preguntas sobre knockout.js: 1) ¿Proporciona algún tipo de capa de datos para mantener el modelo en frontend/backend sincronizado? 2) ¿Cómo es el soporte para incluir una plantilla en otra (probablemente junto con requireJS)? 3) ¿Es fácil colocar todos los archivos (modelos, vistas, controladores, asistentes, etc.) por separado y en carpetas diferentes? Además de estas preguntas, establecí su respuesta como aceptada, ya que proporcionó mucha información.

    – Christopher Will

    15 de enero de 2013 a las 14:16


  • @ChristopherWill ¡Gracias! 1.) Al igual que Backbone le deja a usted la vinculación de la vista, Knockout le deja a usted la vinculación de REST->Model. Hay algunos ejemplos en la documentación: knockoutjs.com/documentation/json-data.html o puede usar KnockBack para combinar la población REST->Model de Backbone.

    – Nate

    15/01/2013 a las 14:30

  • 2.) Depende de lo que quiera decir: Knockout tiene un enlace de datos incorporado que le permite tomar una colección del modelo, vincularla a una etiqueta de lista o una etiqueta de tabla y para cada uno representar una plantilla específica. Para cosas a gran escala, como cómo crea sus vistas generales y las intercambia, eso todavía es algo manual (al menos cómo lo estoy haciendo, todavía aprendiendo) – RequireJS con el complemento de texto hace que sea un poco más fácil hacer esto, pero aún debe especificar la lógica e intercambiar divs; solo hago esto en los métodos que responden a mis rutas. Sin embargo, es posible que pueda conectar eventos Knockout para hacer esto.

    – Nate

    15 de enero de 2013 a las 14:40

  • 3.) RequireJS es lo que te permite hacer esto.

    – Nate

    15 de enero de 2013 a las 14:40

  • gracias Creo que le daré una oportunidad a KnockBack… suena bastante prometedor. Y, por supuesto, también con las bibliotecas mencionadas (requireJS, crossroads, etc.)

    – Christopher Will

    15 de enero de 2013 a las 15:29

Ha pasado un año desde que comenzamos a desarrollar nuestro proyecto de servicios en la nube con numerosos SPA, por lo que fue una gran decisión qué marco de JavaScript usar para nuestra interfaz de usuario para satisfacer nuestras necesidades de arquitectura RESTful. y después de muchas investigaciones terminamos usando marco dojo .

Características principales que te encantarán:

  1. comunidad educada y un equipo que ideó un patrón de diseño perfecto. grandes convenciones y arquitectura modular/orientada a objetos. con actitudes de programación CrossBrowser 🙂
  2. Estructura MV*. cree widgets de interfaz de usuario con plantillas .htm externas y, para producción, cree todos sus javascript y plantillas en un único, minificado y pequeño .js
  3. construir clases con herencia. Establecedores de propiedades, muchas herramientas de funciones.
  4. mecanismo pub/sub (temas con nombre en el dojo)
  5. una gran cantidad de controles de interfaz de usuario, desde control de formulario de validación, cuadros de diálogo/información sobre herramientas hasta una solución de cuadrícula de datos y gráficos altamente personalizable (pero liviana) con muchas funciones.
  6. un buen sistema de prueba unitaria llamado DOH. también tiene un robot para reproducir acciones de mouse/teclado.
  7. una herramienta de consulta (como JQuery) llamada NodeList con todas las características de jquery e incluso muchos de sus complementos.
  8. y la parte buena pero no tan completa. tiene un módulo JsonRest para usar con sus servicios REST. Es una herramienta útil pero carece de muchas funciones.

Para superar estos problemas, desarrollamos un sondeador AJAX, manejo de errores y una solución universal de carga y notificaciones. lo hicimos muy fácilmente usando las convenciones y estructuras del framework dojo. si no quiere hacer eso, tal vez tenga que usar otro marco para esta parte.

Al observar excelentes SPA en la web, descubrirá que todos están personalizados y utilizan múltiples marcos. pero nuestra experiencia con Dojo solo fue fantástica. y por lo tanto le sugiero que no piense en ningún otro marco ya que todos ellos están incompletos para un SPA. pero en última instancia, también tiene otra opción (que no recomiendo y no tengo información detallada). vaya con un marco JAVA que sea capaz de construir SPA, generando automáticamente UI y javascript.

  • ¡Hola! ¿Usas Dojo ahora? ¿Tienes un blog sobre Dojo?

    -Dunaevsky Maxim

    20 de junio de 2016 a las 10:38

  • ¡Hola! Sí, todavía lo usamos para el mismo producto y lo mantenemos. nuestro marco interno está escrito en la parte superior del dojo, y lo estamos agregando todos los días … no, no tengo un blog para eso. si vas a empezar con él, hoy en día se considera una herramienta antigua. Todavía están trabajando en el Dojo 2.0, pero por ahora puede ser mejor usar otras opciones. tenemos React/Angular en la parte superior de la lista.

    – Unicornista

    21 de junio de 2016 a las 12:59


¿Ha sido útil esta solución?