Marcos de JavaScript para crear aplicaciones de una sola página [cerrado]

101

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


Mis requisitos son los siguientes:

  • Capa de datos RESTful (como ember-data)
  • MV * -estructura
  • Rutas dinámicas
  • Prueba-soporte
  • Codificación por convención
  • Soporte SEO
  • Compatibilidad con el historial del navegador
  • Buena documentación (API)
  • Listo para producción
  • Comunidad viva

Columna vertebral

La aplicación actual está usando backbone.js. En general, backbone.jses un buen proyecto, pero me faltan estructuras bien definidas que determinen dónde 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 estoy buscando ahora un marco, que ya defina todo esto.

Ascua

Miré ember.jslos últimos días. El enfoque me parece muy prometedor. Pero, lamentablemente, el código cambia casi a diario. Por lo tanto, 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.jstambién es un marco muy extendido, 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 parecen tortuosas. Para aclarar esto: esta es solo mi impresión personal y podría estar basada en conocimientos faltantes.

Batman y meteorito

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

Knockout , CanJS y Spine

No profundicé en estos tres candidatos. Quizás este sea mi próximo paso.


Entonces mis preguntas ahora:

  • ¿Me estoy perdiendo algún buen marco de 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 una excelente publicación de blog de Steven Anderson (desarrollador principal 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 y rápido para las SPA, la mayoría de ellas ya están desactualizadas.

Christopher Will
fuente
Consulte el marco de SPA basado en knockout que acabo de abrir: knockout-spa github.com/onlyurei/knockout-spa
onlyurei

Respuestas:

81

Recientemente tuve que decidirme por un marco de SPA de JavaScript en un proyecto también.

  • 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 funcionan las plantillas.

  • Columna vertebral

    Backbone fue el primer framework que analizamos seriamente. No estoy seguro de entender por qué cree que no tiene "estructuras bien definidas". Backbone es bastante claro sobre cómo dividir el código Modelo y Vista. ¿Quizás quieres decir que no hay ningú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 encuadernación del modelo es importante para usted y está utilizando Rails, debería ser muy sencillo hacerlo. Por desgracia, los servicios web para mi aplicación en realidad no coinciden, y tuve que escribir mis propias .syncy .parsemétodos para todo. La separación del código Model y View fue agradable, pero como tendríamos que escribir todos nuestros enlaces desde cero, no valió la pena.

  • Knockear

    Knockout es como el Yin al Yang de Backbone. Donde Backbone se centra en el modelo, Knockout es un marco MVVM y se centra en la vista. Tiene observableenvoltorios para las propiedades de los objetos de JavaScript y usa un data-bindatributo para vincular las 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. (... más otros, como se discutirá más adelante ...) Si le gusta el enlace de vista de Knockout y los enlaces de modelo de Backbone, también hay KnockBack que combina ambos marcos.

  • Angular

    Observé esto después de Knockout; desafortunadamente, todos parecíamos bastante felices con la forma en que Knockout veía el enlace. Parecía mucho más complejo y difícil de conseguir 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 como me he encontrado con varias personas a las que realmente les gusta el marco, tal vez lo miré demasiado tarde para este proyecto.

  • Batman , 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, enfocarnos en el enlace de vistas era más importante. También terminamos usando RequireJS para modularización, crossroads y Hasher para manejar el enrutamiento y el historial, Jasmine para las pruebas, así como JQuery , Twitter Bootstrap y Underscore.js (y probablemente más bibliotecas que estoy olvidando en este momento).

    El desarrollo de aplicaciones de JavaScript se parece más al ecosistema de Java que al ecosistema de Rails. Rails proporciona un núcleo sólido de cosas que vas a usar para cada aplicación (marco de Rails), y la comunidad proporciona 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 comunicarse con la base de datos. Y luego puede usar Ant o Maven o Gradle para construirlo. Y elija Tomcat o Jetty o 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 EL marco para usar.

Nate
fuente
Muchas gracias por su detallada respuesta. Algunas preguntas sobre knockout.js: 1) ¿Proporciona algún tipo de capa de datos para mantener sincronizado el modelo en el frontend / backend? 2) ¿Cómo es el soporte para incluir una plantilla en otra (probablemente junto con requireJS)? 3) ¿Es fácil poner todos los archivos (modelos, vistas, controladores, ayudantes, etc.) por separado y en diferentes carpetas? Además de estas preguntas, establecí su respuesta como aceptada, ya que proporcionó mucha información.
Christopher Will
@ChristopherWill ¡Gracias! 1.) Al igual que Backbone lo deja en sus manos para el enlace de vista, Knockout lo deja en sus manos para REST-> Modelo de enlace. 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
2.) Depende de lo que quieras decir: Knockout tiene un enlace de datos incorporado que te permite tomar una colección del modelo, enlazar a una etiqueta de lista o etiqueta de tabla y para cada una renderizar una plantilla específica. Para cosas a gran escala, como cómo construye sus vistas generales y las intercambia, eso sigue siendo algo manual (al menos cómo lo estoy haciendo, todavía estoy aprendiendo) - RequireJS con el complemento de texto hace que sea un poco más fácil hacer esto, pero aún tiene que especificar la lógica e intercambiar divs; solo hago esto en los métodos que responden a mis rutas. Sin embargo, es posible que puedas conectar eventos de Knockout para hacer esto.
Nate
3.) RequireJS es lo que le permite hacer esto.
Nate
Gracias Nate. Creo que le daré una oportunidad a KnockBack ... suena un poco prometedor. Y, por supuesto, también con las bibliotecas mencionadas (requireJS, crossroads, etc.)
Christopher Will
8

Ha pasado un año desde que comenzamos el desarrollo de 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 el framework 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 la producción, cree todos sus javascript y plantillas en un solo .js pequeño, minificado
  3. construir clases con herencia. establecedores de propiedades, muchas herramientas de función.
  4. mecanismo pub / sub (temas nombrados en dojo)
  5. una gran cantidad de controles de interfaz de usuario, desde el control de formularios 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 las acciones del mouse / teclado.
  7. una herramienta de consulta (como JQuery) llamada NodeList con todas las funciones 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 sondeo AJAX, una solución de manejo de errores y una solución universal de carga y notificaciones. lo hicimos muy fácilmente usando estructuras y convenciones de marco de dojo. si no quiere hacer eso, quizás tenga que usar otro marco para esta parte.

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

Unicornista
fuente
¡Hola! ¿Usas Dojo ahora? ¿Tienes un blog sobre Dojo?
Dunaevsky Maxim
¡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 Dojo 2.0, pero por ahora puede ser mejor usar otras opciones. tenemos React / Angular en la parte superior de la lista.
Unicornista