AngularJS y KnockoutJS son bibliotecas de JavaScript que ayudan a crear interacciones de interfaz de usuario web ricas y receptivas. KnockoutJS es una biblioteca que conecta partes de la interfaz de usuario a un modelo de datos mediante enlaces declarativos. Lo mismo se puede decir sobre AngularJS, que es de donde proviene la confusión. La diferencia fundamental entre las dos soluciones es que AngularJS gestiona toda la aplicación y define pautas sobre cómo debe estructurarse el código de la aplicación, mientras que con KnockoutJS la estructura de la aplicación depende totalmente de usted.
Repasemos alguna terminología relevante:
Biblioteca : una colección de funciones utilizadas para escribir aplicaciones web. Su código está a cargo y hace referencia a la biblioteca cuando es necesario.
- ¿Es buena idea node.js para la aplicación saas?
- ¿Cómo debo prepararme para una entrevista de desarrollador de pila completa?
- Cómo crear una página básica de inicio de sesión y registro en HTML
- Al descargar una copia de los datos (de Google), ¿cómo la usa o abre un archivo JSON?
- ¿Dónde está el mejor curso web para PHP?
Marco : una implementación particular de una aplicación web, donde el código completa los detalles. El marco está a cargo y hace referencia a su código cuando necesita algo específico de la aplicación.
Comparemos características similares y revisemos en qué se diferencian.
El enlace de datos
El enlace de datos es el proceso de establecer una conexión entre la interfaz de usuario de la aplicación y la lógica de negocios. Si la configuración y las notificaciones se configuran correctamente, los datos reflejan los cambios realizados en la interfaz de usuario. Esto también significa que cuando se modifican los datos, la interfaz de usuario representará ese cambio.
Echemos un vistazo al proceso de enlace de datos para ambas bibliotecas. Asumiremos que nuestro modelo de datos subyacente es:
Para realizar un enlace bidireccional con KnockoutJS, debemos reemplazar las propiedades del modelo con un contenedor ko.observable:
Veamos cómo declarar y aplicar enlaces en HTML usando las dos tecnologías:
Angular:
Analicemos las diferencias. En la sintaxis HTML para Knockout, todo se hace utilizando el atributo de enlace de datos y el tipo de enlace apropiado; sin embargo, la necesidad de especificar todas las propiedades como observables requiere un esfuerzo adicional. Las asignaciones deben realizarse al cargar datos JSON del servidor para convertir las propiedades en observables. Hay un complemento de mapeo que se puede usar para facilitar esto, pero es su responsabilidad administrar el mapeo al recuperar datos y al enviarlos de vuelta al servidor.
La sintaxis angular para generar valores es mucho más simple y compacta. Hace que sea más fácil de leer y componer. La principal diferencia es la metodología vinculante. Donde Knockout se une al modelo provisto, Angular se une al objeto especial $ scope .
Además, Knockout solo puede aplicar enlaces una vez. Si intenta aplicar enlaces nuevamente, arrojará un error. En Angular, sin embargo, los ámbitos se pueden anidar. Este enfoque hace que las vistas angulares y los controladores sean independientes y reutilizables, y como resultado, se pueden probar de forma independiente. A continuación se muestra un ejemplo de este enfoque anidado:
Templar
Ambas bibliotecas admiten plantillas. Esto ayuda a dividir el código en piezas pequeñas y fáciles de mantener.
Knockear:
Angular:
Angular es superior porque permite almacenar plantillas en archivos HTML externos y cargarlas dinámicamente. Esto da como resultado una mejor organización y mantenimiento del código de la plantilla. Todo lo que tenemos que hacer es proporcionar la URL de la plantilla:
Extensibilidad
Con ambas tecnologías, no está limitado a la funcionalidad incorporada. Angular le permite ampliar el vocabulario HTML de su aplicación. El entorno resultante es extraordinariamente expresivo, legible y rápido de desarrollar. Angular utiliza un concepto de Directivas que le permite adjuntar un comportamiento específico a los elementos DOM o transformarlo:
Se puede implementar una funcionalidad equivalente en Knockout escribiendo enlaces personalizados.
Ambas bibliotecas vienen con enlaces y directivas incorporadas, y aunque estos ejemplos son muy básicos, muestran cómo cada biblioteca puede ampliarse para ser más sofisticada.
Observación Variable
Knockout utiliza el patrón Observable para rastrear cambios y notificar a los suscriptores registrados.
Debido a que Angular funciona con objetos simples, observa variables utilizando una técnica de verificación sucia. Cada vez que se evalúa una expresión, compara los valores del objeto actual con los valores del objeto anterior.
Otras características
Sería justo decir que Knockout solo se puede comparar con un subconjunto de características angulares. Angular es un marco más extenso e incluye las siguientes características adicionales:
- Módulos : un módulo es un contenedor para un conjunto de componentes. Esos componentes pueden ser controladores, servicios, filtros, directivas, etc. Desde la perspectiva de .NET o Java, un módulo es más como un espacio de nombres. Le permite empaquetar código en componentes reutilizables. Los módulos pueden hacer referencia a otros módulos. Sirven como bloques de construcción de aplicaciones.
- Servicios : se puede utilizar un servicio para organizar y compartir código en su aplicación. Cada servicio es un singleton, y todos los componentes hacen referencia a una única instancia de servicio. Angular contiene una serie de servicios integrados que incluyen: $ http – utilizado para hacer solicitudes AJAX a los servidores remotos $ q – implementación prometida / diferida inspirada en el servicio Q $ log de Kris Kowal – registro. Por defecto escribe en la consola del navegador si está presente
- Inyección de dependencia : el subsistema de inyector angular se encarga de crear componentes, resolver sus dependencias y proporcionarlos a otros componentes según se solicite.
- Ámbitos : organizados en una estructura jerárquica que imita la estructura DOM de la aplicación, los Ámbitos pueden observar expresiones y propagar eventos:
Por ejemplo, el servicio de inicio de sesión puede transmitir un evento de inicio de sesión cuando el usuario inicia sesiónLuego, los componentes que deben actuar en función de este evento simplemente se suscriben al evento:
- Filtros : un filtro formatea el valor de una expresión para mostrar al usuario. Se pueden usar en plantillas de vista, controladores o servicios. Es fácil definir su propio filtro. Los filtros se pueden aplicar a expresiones en plantillas de vista utilizando la siguiente sintaxis:
- Validación de formulario : el formulario y los controles proporcionan servicios de validación, de modo que el usuario puede ser notificado de una entrada no válida.
- Internacionalización y localización
Cuando se trabaja con Knockout, esta funcionalidad no está disponible en la biblioteca principal, pero se puede agregar utilizando bibliotecas externas o lógica personalizada.
Enrutamiento
El enrutamiento es una gran característica que permite la gestión de los estados de las aplicaciones. y navegación hacia atrás / adelante del historial del navegador. Knockout no admite enrutamiento.
AngularUI Router es un marco de enrutamiento para AngularJS, que le permite organizar las partes de su interfaz en una máquina de estado. A diferencia del servicio $ route en el módulo Angular ngRoute, que está organizado en torno a las rutas URL, UI-Router está organizado en torno a los estados.
Los estados están vinculados a vistas con nombre, anidadas y paralelas que le permiten administrar las interfaces de su aplicación con facilidad. Además, los estados se pueden anidar entre sí.
A continuación se muestra una configuración de enrutamiento angular de muestra:
Pruebas
Angular se escribe teniendo en cuenta la capacidad de prueba, pero aún requiere un esfuerzo adicional para integrar un marco de prueba.
Protractor es un marco de prueba de extremo a extremo popular para aplicaciones AngularJS. Protractor es un programa Node.js creado sobre WebDriverJS. El transportador ejecuta pruebas contra su aplicación que se ejecuta en un navegador real, interactuando con ella como lo haría un usuario.
Las aplicaciones Knockout se pueden probar utilizando metodologías similares, sin embargo, Knockout no da como resultado un código comprobable.
Soporte de navegador
KnockoutJS:
- Mozilla Firefox (versiones 3.5 – actual)
- Google Chrome (actual)
- Microsoft Internet Explorer (versiones 6 – 11)
- Apple Safari para Mac OS (actual)
- Apple Safari para iOS (versiones 6-8)
- Opera (versión actual)
AngularJS
- Safari, Chrome, Firefox, Opera, IE9 y navegadores móviles (Android, Chrome Mobile, iOS Safari)
- Las versiones 1.2 y posteriores de AngularJS no son compatibles con Internet Explorer versiones 6 o 7
- Las versiones 1.3 y posteriores de AngularJS eliminan la compatibilidad con Internet Explorer 8
AngularJS 2.0 incluirá capacidades de la especificación de JavaScript ECMAScript 6, incluida una sintaxis mejorada para clases, un sistema de carga modular para código y anotaciones para describir declarativamente el propósito de una clase.
Documentación
La documentación de eliminación para la sintaxis de enlace de datos es extensa. Los métodos de utilidad proporcionados por la biblioteca casi no existen.
La documentación angular está muy bien organizada y tiene toneladas de información, incluidos ejemplos interactivos. La curva de aprendizaje es más pronunciada para Angular, ya que la biblioteca es mucho más conceptual y más amplia en su aplicación.
Ecosistema
Angular parece ser más ampliamente adoptado con una base de usuarios más amplia. La siguiente tabla muestra algunas estadísticas interesantes del ecosistema:
GitHub Stars
Knockout: 5,587
Angular: 30.567
Horquillas GitHub
Knockout: 925
Angular: 11,617
Preguntas de StackOverflow
Knockout: 12,126
Angular: 60,119
Resumen
Knockout tiene una barrera de entrada baja, pero también es más difícil de administrar cuando crece la base del código y la complejidad. No es fácil construir la infraestructura necesaria correctamente, y las malas decisiones tomadas en la estructuración del código pueden costar mucho en el futuro.
La capacidad de Angular para unirse directamente a objetos simples, estructura modular y pautas estrictas de desarrollo previenen muchos problemas desde el principio y proporcionan una base arquitectónica sólida para la aplicación.
Piénselo de esta manera: Knockout se usa principalmente para controlar la representación de la interfaz de usuario en aplicaciones de menor complejidad, mientras que Angular es un marco de JavaScript que es mucho más adecuado para aplicaciones empresariales grandes y complejas. Proporciona no solo enlaces de interfaz de usuario, sino también mejores prácticas para la estructura, el desarrollo y las pruebas de la aplicación.
Fuente: Angular vs. Knockout: similitudes y diferencias fundamentales
