Qué es Angular y cómo se construyó

ALV crecio mucho este joven D: https://www.youtube.com/watch?v=pizgd1wM-LI

🙏 Si tuviera que construir un framework para frontend priorizando que sea muy robusto por encima de que sea super “fácil”, definitivamente Angular sería mi mayor inspiración.

State of JavaScript 2020

RESUMEN

En el 2009 un grupo de amigos Desarrolladores inventaron una herramienta para que personas que no sabian programar pero si HTML pudieran hacer aplicaciones, esto no tuvo exito. Despues uno de ellos fue a trabajar a Google Feedback. Pero para esto necesitaron 17k lineas de codigo en frontend, usando un Google Web Toolkit, pero por esto apostaron que podian hacerlo en 2 semanas, pero logro hacerlo en 3 y con 1.5k lineas de codigo, y asi nacio Angular JS, que se volvio Open Source y patrocinado por google. Es como REACT pero FB depende totalmente de este, pero Google no depende de angular. Google solo lo patrocina.

Entre 2012 y 2014 Angular era bastante popular pero con el paso del tiempo empezo su decaida, y anunciaron que lo iban a hacer desde 0 y empezar a usar componente, pero los que iban a usar a angular no sabian que iba a pasar porque no iba a tener compatibilidad.

Es dificil convinar angualar con alguna libreria o algo que no se haya hecho especificamente para angular.

Angular tiene un sistema para crear componentes que se llaman Engine Modulos o Modulos de angular, que agrupan componentes y servicios a un mismo fin o a un mismo dominio. Los componentes son la logica y la interfaz de usuario para cada pedazo de la aplicacion.

Los componentes tienen dos partes, las logicas y las partes de UI, esto lo haremos con una clase en TS. Lo definimos con algo parecido a HTML.

Los servicios son agrupaciones de codigo. Agrupaciones de logica que podemos usar en varios componentes por toda la aplicaion. Esto lo inyectamos a los componentes que usamos Inyeccion de dependencias.

Angular tiene a Angular Ivy que se encarga de renderizar los componentes en angular con Incremental DOM. Como React usa JSX, Angular tiene su variacion de HTML que no es puro. Lo que hace Angular Ivy es convertir este HTML en un JS para renderizar los componentes en el DOM.

Angular explica que crear una copia de todo el DOM es innecesario, con el Incremental DOM cada componente se convierte en Instrucciones y estas hacen que se ejecute y renderice y actualice el componente, en ningun momento crea copia del DOM y ahorra memoria.

En angular 9 reescribieron el motor completamente. Antes habia que compilar muchas veces cada que cambiabamos componentes. Con Angular Ivy cambio la forma en la que se describe para que los componentes solo se afecten asi mismos y no a los demas.

Ruta de Frontend con Angular

https://platzi.com/desarrollo-angular/

En el 2020 Svelte tomó la delantera y quedo en 1er lugar en lo que a librerias y frameworks de JS significa. Si quieren echarle un vistazo aqui esta: https://svelte.dev

Emocionado por aprender Angular 😁

Me la estoy pasando bomba con este curso

Historia

• Por el 2009, dos amigos querían hacer una herramienta para que las personas que no supieran programar pero si HTML pudieran hacer app web. No tuvo existo.
• Mirko se fue a Google. Ahí hace un Google Feedback, una app para enviar feedback.
• Para ello necesitaron 17 mil líneas de código en el frontend y usando Google web tocker para trabajar con Ajax en 6 meses.
• Mirko aposto a su jefe que podría hacer a Google feedback desde cero y en 2 semanas.
• Pero no lo logró, lo hizo en 3 semanas y con 1500 líneas. Así nace Angular.js
• En el 2010 se vuelve open source patrocinado por Google. (Google no depende de angular, Facebook si de react)
• Entre 2012 y 2014 era muy popular. Poder conectar el HTML de un input para conectarlo a un archivo de JS para reaccionar con los usuarios.
• Angular empieza a quedarse atrás de otros Frameworks y el equipo tomo una decisión. Anunciaron la reescritura de angular desde cero. Cambiar totalmente la arquitectura y no sería compatible con la versión anterior. Como se usaba para app grandes, se añadiría por ejemplo componentes.
• Resulta la nueva versión usaba TypeScript, a los 3 meses de angular 2 anunciaron el 4.
• Ahora sale una nueva versión cada 6 meses pero ya no rompe el código.
• Angular tiene todo lo que necesitas en el frontend

Como construyeron Angular

• Angular crea componentes mediante los engi moduls o módulos de angular. Son contenedores con componentes y servicios que responden a un mismo fin.
• Los componentes son la interfaz usuario y la lógica para cada pedazo de app.
• Para crear un componente haremos una clase en TypeScript con los métodos necesario para la lógica de nuestro componente.
• En un archivo aparte que parece HTML vamos a definir las etiquetas que iran en nuestro componente.
• Los sevicios son agrupaciones de lógica que se necesitan en varios componentes por toda la app. Esos servicios son inyectados a nuestro componente mediante inyección de dependencias. Podemos hacer esto gracias al uso de TypeScript / POO

Angular tiene angular Ivy como react tiene a virtual dom

• Este logra la renderización utilizando la estrategia incremental DOM.
• Angular tiene su propio “HTML” como react tiene JXS.
• Angular Ivy transforma este “HTML” e instrucciones de JS para renderizar en el DOM.
• Angular dice que es innecesario crear un dom virtual. Con el incremental DOM, cada componente se convierte en ciertas instrucciones y estas instrucciones se ejecutan para renderizar el componente y actualizarlo.

Porque Google (Angular) usa Incremental DOM?

El objetivo de Google al usar Incremental DOM en vez de Virtual DOM es para que el performance no disminuya y en cambio, aumente en dispositivos móviles, ya que estos tienen menor potencia al momento de renderizar el DOM.
.
Entre sus ventajas están el hecho de que es mas rápido el renderizado, (ya que no pasa por el Virtual DOM y compara al viejo y al nuevo DOM), además de que ahorra espacio en memoria, al no tener que estar haciendo copias del DOM.
.
Entre sus desventajas, la principal es que puede llegar a ser difícil debuggear al momento de que ocurra un error
.
Desde mi punto de vista, me gusta mas este enfoque de hacer la renderización rapida y el ahorro de la memoria. Siento que es lo correcto para mejorar el performace, principalmente en webapps muy grandes

Aqui la documentacion oficial de Angular para que le hechen un ojo:
https://angular.io/docs

11.-¿Qué es Angular y cómo se construyó?

En 2009 un equipo de programadores querían crear una herramienta para personas que no sabían programar pero que si sabían HTML pudieran hacer web apps, pero no tuvieron éxito 😦.

Tiempo después uno de ellos se fue a trabajar en Google Feedback que a simple vista se veía sencillo pero para construirlo se necesitaron 17k líneas de código solo en el Frontend usando incluso Google Web Toolkit un framework de Google que se suponía debía reducir la complejidad del código, es por esto que le apostó a su jefe que lo podía hacer desde 0 y más sencillo en dos semanas (spoiler: se tardó 3 y solo usó 1500 líneas), así nació Angular JS.

En el 2010 Angular se hizo Open Source y patrocinado por Google.

Cabe recalcar que FB si depende de React, Google no depende realmente de Angular.

2012-2014 ya era muy popular. BackBone.

Angular se empezó a quedar atrás con respecto a otros Frameworks y el equipo de Angular decidió reescribirlo desde 0 y cambiar completamente su arquitectura. Iban a empezar a usar componentes.

Angular usaba TypeScript en lugar de JS.

¿Cómo funciona?

Angular tiene un sistema para crear componentes llamado Engine Module o módulos de Angular, son contenedores que agrupan componentes y servicios que responden a un mismo dominio (a una misma parte de nuestra aplicación) pero no necesariamente partes físicas, si no a las funcionalidades o procesos que hace nuestra aplicación.

Los componentes son la lógica y la interfaz de usuario para cada parte de nuestra aplicación. Para crear un componente tenemos que crear una clase en Type Script con los métodos que necesitemos para la lógica de nuestro componente, además, en un archivo aparte que parece HTML, pero que no es HTML vamos a definir exactamente los componentes y etiquetas que van a ir en nuestro componente.

Los servicios son agrupaciones de código, de lógica que no necesitamos solo en un componente, sino que los podemos usar en varios componentes por toda la aplicación; Estos servicios se los inyectamos a nuestros componentes usando inyección de dependencias.

Incremental DOM y Angular Ivy vs Virtual DOM.

Angular Ivy se encarga de renderizar nuestros componentes en Angular usando una estrategia llamada Incremental DOM.

Así como React usa Jsx, Angular también tiene su propia sintaxis de HTML para escribir la UI de nuestras aplicaciones, no es HTML puro, tiene variaciones para que podamos iterar en una lista o usar condicionales, lo que hace Angular Ivy es transformar este “HTML” en instrucciones de JS para renderizar nuestros componentes en el DOM.

Con el Incremental DOM lo que hacemos es que cada componente se convierte en ciertas instrucciones en código JS y estas instrucciones son las que se ejecutan para renderizar el componente y actualizarlo cuando hay una interacción de los usuarios, en ningún momento se hace una copia del DOM y esto nos ahorra mucha memoria.

En Angular 9 reescribieron por completo el motor de render y ahí aparece Angular Ivy, antes la compilación de cada componente se transformaba en un engine factory, que es una función donde se guardaba la descripción del DOM en el que se debía transformar cada componente y el segundo es una función que se llamaba cada que el estado cambiaba para actualizar nuestro componente. Antes se tenía que compilar muchas veces.

😮 Es súper muy interesante cómo los desarrolladores/as hemos realizado cosas en Angular en los últimos años. Pese a que es el framework preferido en sitios web corporativos, el aprecio por trabajar con Angular ya no es el mismo que antes 😢.

Una comparación del último StateOfJS:

Satisfacción al usar Angular

Cayendo a pesar de sus mejoras recientes.

Uso de Angular:

Casi el mismo desde el 2018, pero no incrementando su uso.

Da un poco de miedo lo complejo que suena Angular,
Pero suena super potente

Da miedo tanto cambio tan brusco

Ahora que se NestJShe captado al momento la idea de Injección de Dependencias en Angular… lo que aprendemos en un lado lo transferimos a otro.

Angular is Love!!!

Falta un curso de rxjs

Que relajo la historia de angular, al parecer ni ellos sabían que iba a pasar

la mala reputación de angular se debe en mayor parte por los desarrolladores junior o desarrolladores con 2 años de experiencia que les gusta criticar y creen que php está muerto

Increible lo que estoy aprendiendo con estos ejemplos!!

Mi amigo que le gusta Angular y lo usua, de seguro esta clase le va a encantar 🌟 .

Recuerdo que mi primer encuentro fue con angularjs en la pagina w3school y de repente veo disque angular 2 y cuando empiezo a ver angular 2 veo que es totalmente diferente a los lee estaba aprendiendo, eso hizo que me desencantara de ese lenguaje tan “enredado”, hoy en dia ya he empleado proyectos en angular

Para mi esos cambios de versiones de angular tan grandes, fueron los motivos por lo que no me motivaba a aprenderlo y termine llendome a React y Vue.

Que hace Incremental DOM

Que es el virtual DOM de React

Esta muy interesante este tema de los frameworks de JavaScript pero esta clase se sintio muy extensa en el sentido de ir tomando apuntes con tantos conceptos nuevos que se fueron hablando por lo demás hasta el momento este curso esta siendo bastante interesante

angular será odiado pero da de comer a varios :'v y muchos lo amamos

¿Hay alguno que sea más recomendado que otro?
Me refiero a entre Angular y React.

No es por desmotivar, pero nadie nunca remplazara al profesor Leonidas Esteban 😕

zzz