Angular: un viaje de una de las herramientas frontales más populares en el mercado laboral actual

Como todos sabemos, Angular es la palabra más discutida en el mundo del desarrollo frontend. Ha ganado mucha popularidad en estos años. Angular se convierte en una elección de muchos desarrolladores frontend y yo también soy uno de ellos.

En este artículo, destacaré cuándo llegó angular y qué tan rápido se convirtió en un mercado. Cada seis meses, el equipo de Angular viene con la nueva versión de angular, lo que lo hace más poderoso con nuevas funciones. Debo agradecer al equipo angular por sus maravillosos esfuerzos.

Bueno, ahora puede que te emocione cómo evolucionó, qué nuevas funciones se agregaron en diferentes versiones. Ahora, la espera terminó. ¡Empecemos!

Antes de seguir adelante, me gustaría que mis lectores sepan que 'Angular 8' es la última versión que lanzó nuestro talentoso equipo angular.

Nacimiento del héroe (AngularJS) - 2010

En 2010 tuvo lugar el nacimiento del héroe del mercado actual. Se conocía como 'AngularJS'.

AngularJS es un marco de Javascript desarrollado por Google. Se utiliza para realizar aplicaciones de una sola página (SPA). ¡Espere! Espero que sepas qué es SPA. Si no es así, pregúntele a Google y luego regrese, ya que este es uno de los hermosos enfoques que usa angular, pero aquí hay una breve introducción de SPA (aquellos que saben, pueden omitir):

La aplicación SPA o Single Page es una aplicación en la que todo se descarga de una vez. Todo el código necesario se descarga de una vez. A diferencia de la aplicación de varias páginas, no tiene que solicitar una página web al servidor por cada visita y carga la página. En SPA, el archivo index.html se descarga una vez con todo el contenido y luego, por cada cambio de URL, la página web existente carga dinámicamente el contenido exigente. Este enfoque brinda una mejor experiencia de usuario al cambiar entre diferentes páginas y le da la sensación de la aplicación.

Eso es todo sobre SPA. Espero que les dé una breve descripción. Pasemos al tema original.

AngularJS permite a los desarrolladores desarrollar aplicaciones web más rápido. Utiliza una representación del lado del cliente, una técnica en la que el cliente (navegador) se encarga de la representación del contenido. Bueno, no entraré en detalles sobre cuáles son los pros y los contras de esta técnica, pero la principal preocupación de esta técnica es el SEO. Esta representación que utiliza angular es pobre en SEO. ¡Espere! No creas que angular es malo. Hay un diálogo de Bollywood muy popular: "Imagen abhi baki hai mere dost (Todavía queda la película, amigo mío)". Creo que este diálogo se adapta a la situación actual. Discutiré por qué dije esto.

Ahora, deberíamos centrarnos en las características de AngularJS. Aquí están algunas :

1) Enlace de datos  : sincronización automática entre el modelo y la vista.

2) Sistema de inyección de dependencia  : un patrón de diseño en el que el sistema proporciona los objetos dependientes cuando crea el objeto.

3) alcance  : que se encarga del controlador y la vista.

4) Servicios  : para compartir información entre diferentes partes de la aplicación.

5) Directivas  : le da superpoder al HTML. Por ejemplo, ng-model, ng-app.

6) Controladores  : corazón de la aplicación donde reside la lógica.

7) Plantilla  : vista que brinda información usando nuestro controlador y modelo.

Esta lista es larga. No entraré en detalles sobre angularJS, pero en angularJS, los controladores son el corazón de la aplicación. Bueno, angularJS vino con muchas características para desarrollar una aplicación web poderosa, pero falló en algún momento, como un gran tamaño de paquete, problemas de rendimiento, problemas de SEO, problemas de mantenimiento del código, pero eso no significa que sea un fracaso total. Vinculación de datos, conceptos de inyección de dependencia son el éxito de angular. Por lo tanto, podemos decir que es mitad fracaso y mitad éxito.

La imperfección en AngularJS hizo que el equipo angular reescribiera todo el marco desde cero. Un cambio tan grande en la nueva versión de cualquier marco / biblioteca nunca se encontró en el mercado. La nueva versión de angular es totalmente diferente de AngularJS. ¿En qué es diferente? Entendamos sumergiéndonos en nuestro próximo subtema.

Angular 2–2016

La versión posterior de AngularJS llegó al mercado en 2016, luego, ya no se conocía como AngularJS. Tiene un nombre 'Angular'. La versión Angular 1.x se conoce como AngularJS. La versión posterior a la 2.x se conoce como Angular. Cuando encontré estas dos palabras en mi viaje de desarrollo web. Literalmente pensé que estos son dos marcos diferentes y después de una investigación llegué a saber que angular es una versión actualizada de angularJS. Espero que mis lectores no lo hayan entendido mal.

Angular 2 entró en el mercado con cambios drásticos. El mayor cambio fue la introducción de TypeScript. TypeScript es un superconjunto de javascript con características adicionales como sigue los conceptos de Vaya, fuertemente tipados. Los programadores que vienen del mundo orientado a objetos lo encuentran más familiar a diferencia de javascript.

Los componentes son el corazón del mundo angular 2+. Angular introdujo varios paquetes para lograr funcionalidades básicas e importantes, como paquete de enrutamiento para definir rutas fácilmente, paquete http para obtener datos del servidor, paquete de animación para animaciones, etc.

Angular 2 también proporciona un concepto de directiva como AngularJS. Las directivas otorgan superpoderes a nuestro HTML como * ngFor, * ngIf (directiva estructural) hace que nuestro html sea dinámico, mientras que las directivas de atributos como ngModel (para enlace de datos bidireccional), ngStyle se encarga de la apariencia y el comportamiento de nuestro DOM.

Otra característica que no cambia en angular es que también usa el sistema DI. Al igual que angularJS, el sistema DI suministra los objetos dependientes (dependencias) al componente.

¡Espere! Me olvidé de contarles acerca de la maravillosa mano amiga que proporciona angular que es angular-cli. Es una gran ayuda que nos ayuda a desarrollar nuestra aplicación más rápido, como para generar componentes, simplemente use 'ng gc nombre-componente' ('g' es generate y 'c' es componente). Esta es otra característica interesante agregada en angular.

Este no es el fin. Te dije que la mayor desventaja de angularjs es que es pobre en SEO y recuerda ese famoso diálogo que dije. Comprenderá en unos minutos por qué lo usé.

Son las mayores desventajas que angularJS es pobre en SEO. Cuando ve la fuente de la página, puede ver que no hay nada (no Html) que haga que los rastreadores piensen que el sitio web es inútil, es decir, sin información. Es muy doloroso cuando su sitio web quiere que los rastreadores de Google los indexen y los hagan llegar a la cima en la búsqueda de Google, pero no pudieron lograrlo. El equipo de Angular se encargó de ello e introdujo angular universal que se encarga del SEO de su sitio web angular. Utiliza la representación del lado del servidor que a su vez resuelve el problema de SEO.

Estas son las características con las que el angular 2 llegó al mercado.

Angular 4 - marzo de 2017

Después de leer el subtema, te preguntarás por qué no Angular 3. Esta es una pregunta común que puede surgir en la mente de cualquiera. ¡No se preocupe! Te lo haré saber. La razón por la que no angular 3 fue por el paquete del enrutador. El paquete del enrutador angular ya se distribuyó como v3. Para evitar confusiones, el equipo de angular lanzó la versión angular 4. Creo que ahora mis lectores pueden comprender las características de angular 4.

Angular 4 vino con correcciones de errores y otras nuevas características y mejoras. La mayor mejora que se hizo fue en el tamaño del paquete. Redujeron el tamaño del paquete en un 60%, lo que a su vez hizo que la aplicación fuera más liviana y, por lo tanto, el tiempo de carga de la aplicación disminuyó.

La otra cosa que se hizo fue en el paquete de animación. Sacaron la función de animación en un paquete separado: @ angular / animaciones.

Otra mejora fue la directiva estructural. * ngIf vino con otra parte en esta versión.

Esta es la breve introducción de las características de angular 4.

Angular 5 - noviembre de 2017

Después de seis meses, el equipo de angular vino con otra nueva versión, es decir, angular 5. Esta versión de angular 5 nuevamente vino con muchas características nuevas, mejoras y correcciones de errores.

Ya que la principal preocupación de todos los sitios web es un tiempo de carga más rápido. Angular se encargó de ello también en esta versión. Para mejorar más el rendimiento de la aplicación, introdujeron el optimizador de compilación, una herramienta que se introdujo para hacer paquetes de tamaño pequeño. Utiliza la técnica de agitación de árboles para eliminar el código muerto de la aplicación.

También se realizaron mejoras en el compilador que agilizan la reconstrucción de la aplicación.

Otra característica que se introdujo fue la clave de transferencia de estado (TransferStateKey, que es parte del paquete de plataforma / navegador). ¡Bien! ¿Podrías pensar qué es? ¿Cuándo usar? Puede aprovechar la belleza de esta función en su aplicación si está utilizando SSR. Sí, si ha implementado SSR, debe utilizar la función de clave de transferencia de estado. La razón por la que dije esto es porque cuando está usando SSR y su aplicación está haciendo cualquier solicitud HTTP (que es bastante común), esta solicitud se invocará dos veces, es decir, una en el servidor y otra en el navegador. Esto causa un problema de parpadeo (he pasado por este problema de parpadeo en mi aplicación porque la solicitud HTTP se invocaba dos veces). Gracias a la función clave de transferencia de estado. Esta característica hace que el navegador utilice la respuesta de la solicitud HTTP que se recibe en el servidor.Utiliza la respuesta que el servidor obtiene de la solicitud HTTP. Como sugiere su nombre, el servidor transfiere el estado de respuesta con html al navegador. Por lo tanto, se puede evitar el acierto dos veces de la solicitud HTTP.

Otra mejora que se hizo fue en el paquete de cliente http. En esta versión, HTTPClientModule vino con mejoras como usar este módulo, los desarrolladores no tienen que analizar la respuesta usando un mapa. El paso de análisis ya no es necesario. Supongamos que si hay una respuesta de tipo que no es JSON, entonces puede especificar esa respuesta usando responseType en su solicitud HTTP.

Todo esto se trata de la característica de angular 5. Ahora ha llegado el momento de pasar a la versión angular 6. Después de otros seis meses, el angular 6 llegó al mercado con más potencia.

Angular 6 - Mayo de 2018

En mayo de 2018, justo después de seis meses, el equipo de angular lanzó otra versión de angular: angular 6. Esta versión también vino con muchas características nuevas. Enumeraré algunos de ellos.

En esta versión, la CLI angular se actualizó. Se introdujeron nuevos comandos como ng update. Para actualizar las dependencias de su proyecto angular a la última, puede usarlo. Por ejemplo:

ng update @ angular / core

La otra mejora que se hizo fue en la biblioteca RxJS llamada RxJS6. Los dos cambios importantes fueron:

  1. RxJS6 introdujo una nueva estructura interna de paquetes.
  2. Uso de operadores.

La nueva estructura interna de paquetes implica cambios en la forma de importar paquetes. En lugar de la importación relacionada, podemos usar una importación única en esto. Por ejemplo :

importar {Observable} de 'rxjs / Observable'; importar {Asunto} de 'rxjs / Asunto'; importar 'rxjs / add / operator / map';

Ahora, con rxjs6:

importar {Observable, Subject} de 'rxjs'; importar {mapa} de 'rxjs / operadores';

El uso de los operadores también se cambia en angular 6. Por ejemplo:

Versión antigua:

importar 'rxjs / add / operator / map'; this.http.get (url) .map ((respuesta) => respuesta.json)

Nueva versión:

importar {mapa} de 'rxjs / operadores'; this.http.get (url) .pipe (mapa ((datos) => datos * 2)

Espero que haya recibido los cambios que se realizan en la biblioteca RxJS.

Otro cambio es: angular-cli.json se reemplaza con angular.json. Este archivo define la configuración del proyecto como estilos, scripts, pruebas, proceso de construcción, etc. En angular.json, se agregan más opciones de configuración, como se puede realizar la configuración de múltiples proyectos.

Las otras mejoras son: ahora está disponible en lugar de. Hay un cambio en la forma de hacer que los servicios estén disponibles para su uso como en la versión anterior, si queremos que el servicio esté disponible en toda la aplicación o en un componente específico, tenemos que proporcionarlo en la matriz del proveedor, pero en esta versión, en el archivo de servicio. son los metadatos 'provideIn' que están disponibles para él. Allí puede especificar la disponibilidad de servicios. De forma predeterminada, hace que el servicio esté disponible en el nivel raíz.

Otra belleza que se agrega es un paquete de 'elemento angular'. Este paquete permite a los desarrolladores usar su componente angular en otro entorno (entorno no angular) como Vue.js. Es otra característica interesante que te hace usar tu componente angular en otro entorno

Se trata de las características de angular 6 que aprendí. Ahora, la característica de la última versión que discutiré es: Angular 7

Angular 7 - Octubre 2018

En octubre de 2018, salió al mercado otra versión con más belleza.

Las características que se agregaron fueron avisos de CLI, desplazamiento virtual, arrastrar y soltar y, nuevamente, la reducción del tamaño del paquete. En las indicaciones de la CLI, angular-cli le pregunta sobre opciones como cuando crea una nueva aplicación usando ng new application-name. CLI le pregunta si desea agregar un archivo de enrutamiento o no, y así sucesivamente. También hay una propiedad de presupuesto agregada en angular.json en la que puede especificar su valor de tamaño de presupuesto máximo y mínimo.

Todo esto tiene que ver con la característica de angular 7. Sé que no he mencionado todas las demás características de angular 7 porque no he entrado en esas características. Por lo tanto, no me siento cómodo hablando de ellas. También sabemos que se lanza la versión Angular 8, pero debido a la misma razón de no entrar en las características de angular 8, no he escrito al respecto.

Nota para mis lectores: es posible que haya dejado muchas características, pero hice todo lo posible para escribir sobre las características de las diferentes versiones en breve (no es posible enumerar todas las características, pero probé las características que leí en mi viaje) pero Me encantaría que mis lectores pudieran comentar sobre las características que encontraron en su viaje de aprendizaje.

Gracias por leer.