Arquitectura y Funcionamiento de Angular: Componentes y Servicios

Curso de Frameworks y Librerías de JavaScript

Contenido del curso

Fundamentos del Desarrollo Web Profesional

Contexto y funcionamiento de los Frameworks JavaScript

Estilos con CSS, preprocesadores y CSS-in-JS

Cómo escalar sitios o aplicaciones web

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:53

Arquitectura y Funcionamiento de Angular: Componentes y Servicios

Curso de Frameworks y Librerías de JavaScript

Clase 11 de 28

Clase 11 / 28

Comentarios (41)41 comentarios

Juan Castro

Profesor

Hace 6 años

:pray: 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.

Adriel Francesco Pezo Vizcarra

Hace 4 años

Hay que ir recolectando programadores para el proyecto

Cristian David Casallas Velandia

Hace 4 años

Lo último que necesitamos es otro framework de JS JAJAJA

Jimmy Buriticá Londoño

Hace 6 años

++State of JavaScript 2020++

Miguel Angel Reyes Moreno

Hace 6 años

Pobre Angular, se fue a penúltimo lugar. Veamos si el odio es justificado jajaj.

Juan Esteban Galvis

Hace 6 años

Como dice Juan David es un odio injustificado, de pronto su ventaja de tener todo ya implementado es al mismo tiempo su principal problema jaja Ahí es donde triunfa Vue por ejemplo que es un framework progresivo (vas metiendo cosas a medida que las necesitas).

Joel Eduardo Sánchez Herrera

Hace 5 años

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.

Jimmy Buriticá Londoño

Hace 6 años

Ruta de Frontend con Angular

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

Miguel Peláez

Hace 5 años

En esta estoy

Luis Enrique Hernández Mosqueda

Hace 5 años

Me la estoy pasando bomba con este curso

Vanessa Arias Arias

Hace 5 años

Total !!

HERMES DE JESUS CASTELLANO MATA

Hace 5 años

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

Juan Castro

Profesor

Hace 5 años

Yep! Por eso mismo incluimos a Svelte dentro del curso. :D

Juan Antonio García Sánchez

Hace 5 años

Emocionado por aprender Angular 😁

Victor Alfredo Matzar Say

Hace 5 años

Lo comparto!

Max Andy Diaz Neyra

Hace 5 años

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.

Ricardo Mazuera

Hace 5 años

Gracias por el resumen.

Víctor Isaac Arias García

Hace 5 años

Muchas gracias por el resumen esta clase tiene bastante contenido resumido en casi 12 minutos en especial si es un tema que jamas habias visto se vuelve abrumador tomar apuntes

Mateo Montoya

Hace 4 años

Irving Juárez

Hace 5 años

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

Antonio Luis Fernandez Dromundo

Hace 5 años

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

Reinaldo Mendoza

Hace 5 años

Da miedo tanto cambio tan brusco

Juan Pablo Jimenez

Hace 5 años

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.

Marcelo Arias

Profesor

Hace 5 años

😮 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.

Omar Gabriel Aguilar Moscoso

Hace 5 años

añee

Stiven Jiménez

Hace 5 años

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

Juan Daniel Zuluaga Serna

Hace 5 años

Hola. Se puede utilizar TypeScript en el Backend?

José Ángel Navarro Almendárez

Hace 5 años

Si, por ejemplo NestJS

Juan Daniel Zuluaga Serna

Hace 5 años

Muchas gracias. Me fue de gran ayuda tu comentario. Voy ahora por NestJS

julissa berd

Hace 6 años

Juan David , hay mas cursos presentados por ti? no encuentro como buscar en el sitio por nombre de profesor

Ismael Grimaldo Vega

Hace 6 años

https://platzi.com/teachers/juandc/

Juan Felipe Ángel Martínez Bernal

Hace 6 años

Hola jberd2021!

Si escribes el nombre del profesor en la barra de búsqueda te mostrara los respectivos cursos.

Saludos.

Luis Jose Altamirano

Hace 5 años

Una duda, Angular es un framework utilizado para la web impulsado por Google, pero no tambien Flutter es un framework multiplataforma que incluye la Web y tambien es impulsado por Google. Acaso no compiten entre ellos?

Sura Naileth Cedeño Lopez

Team Platzi

Hace 5 años

Hola Luis :wave: Muy buena pregunta. Flutter y Angular son diferentes de sus conceptos básicos y marco. Si bien Flutter aún está en desarrollo, Angular ya ha tenido un gran impacto en su base de usuarios. En términos de estabilidad, Angular seguramente tiene un borde superior sobre Flutter actualmente. Pero dada la condición de que Flutter está trabajando drásticamente para mejorar su estabilidad, se pondrá al día con Angular en poco tiempo.

Tanto Flutter como Angular son propiedad de Google y utilizan diferentes componentes al crear aplicaciones. Flutter usa componentes como la plataforma Dart, el motor Flutter, la biblioteca Foundation, mientras que Angular usa el enlace de datos, los componentes de tipo y los componentes de servicio para la compilación de su aplicación. Con una base de usuarios tan amplia, Flutter y Angular se han convertido en los componentes básicos de las aplicaciones en Android, iOS y otros sistemas operativos.

Luis Berenguer

Hace 5 años

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.

Luis Abdel Rangel Castro

Hace 5 años

Angular is Love!!!

Recursos

¿Cuál es la historia detrás de Angular?

La narrativa del desarrollo de Angular es un relato vibrante y caótico lleno de emociones contrastantes. Todo comenzó en 2009, cuando los desarrolladores Misko Hevery y Adam Abrons idearon una herramienta que permitiría a aquellos con conocimientos de HTML pero sin experiencia en programación crear aplicaciones web. Su objetivo era un "super HTML", una idea innovadora que, desafortunadamente, no alcanzó el éxito deseado.

Misko rápidamente se unió a Google para desarrollar Google Feedback. A pesar de las 17,000 líneas de código que requirió el frontend de la herramienta, lo que parecía un desafío insuperable se convirtió en la chispa que iniciaría la creación de AngularJS. Misko logró reconstruir Google Feedback desde cero en solo tres semanas y con solo 1,500 líneas de código. AngularJS nacía en 2010 bajo el patrocinio de Google y su potencial rápidamente comenzó a brillar.

¿Cómo surgió la controversia en la evolución de Angular?

AngularJS rápidamente ganó popularidad, destacándose sobre otros frameworks como Backbone. Se convirtió en una herramienta esencial para muchos desarrolladores, gracias a su capacidad para conectar el HTML con el código JavaScript de manera fluida. Sin embargo, no todo fue un camino recto hacia el éxito. Con el tiempo, AngularJS comenzó a rezagarse en comparación con otros frameworks emergentes.

El equipo detrás de Angular tomó una decisión arriesgada: reescribir Angular desde cero cambiando completamente su arquitectura y rompiendo la compatibilidad con versiones anteriores, lo que causó pánico y confusión en la comunidad. Un año después, se presentó una versión previa de Angular que aprovechaba TypeScript en lugar de JavaScript. Esto, junto con el lanzamiento de Angular 4, aumentó la confusión pero, a largo plazo, ayudó a estabilizar el camino del framework para adaptarse a proyectos más grandes y complejos.

¿Cómo ha evolucionado Angular hasta hoy?

Aunque Angular enfrentó momentos de incertidumbre y rechazo en la comunidad, se ha consolidado como un framework robusto y bien diseñado que simplifica el desarrollo de aplicaciones web. Hoy en día, Angular ofrece actualizaciones semestrales que no rompen el código existente y proporciona herramientas integrales necesarias para el desarrollo de frontend, como routing y formularios.

Además, el enfoque de Angular en la arquitectura de componentes usando ngModules y la inyección de dependencias aprovecha las capacidades de TypeScript para mejorar la eficiencia del desarrollo. Los componentes en Angular incluyen tanto la lógica como la interfaz de usuario, lo cual facilita la estructuración y la organización del código.

¿Qué es Angular Ivy y cómo mejora el rendimiento?

Angular Ivy, introducido a partir de la versión 9 de Angular, supuso una reingeniería significativa en su motor de renderizado. En lugar de crear y mantener una copia completa del DOM en memoria como lo hace el Virtual DOM utilizado por React, Angular Ivy utiliza un Incremental DOM que ahorra recursos al transformar sus componentes directamente en instrucciones de JavaScript. Este enfoque permite actualizaciones más eficientes sin la acumulación de memoria, optimizando el rendimiento del renderizado de componentes.

La mejora de Angular Ivy respecto a compilaciones previas radica en prevenir recompilaciones innecesarias cuando se hacen cambios dentro de componentes internos, lo cual agiliza el desarrollo y mantiene la consistencia del código sin sacrificar rendimiento.

¿Cómo organizar tu aprendizaje con Angular?

Explorar Angular puede ser un camino desafiante pero altamente recompensante. Para profundizar en sus funcionalidades y potencial, se recomienda complementar el estudio con cursos especializados en plataformas educativas como Platzi. Estos recursos te guiarán a través de sus secretos y te equiparán con las habilidades necesarias para sacar el máximo provecho del framework. La evolución constante de Angular asegura que siempre hay algo nuevo que aprender, manteniéndote al tanto de las mejores prácticas y actualizaciones más recientes.

Resumen

¿Cuál es la historia detrás de Angular?

¿Cómo surgió la controversia en la evolución de Angular?

¿Cómo ha evolucionado Angular hasta hoy?

¿Qué es Angular Ivy y cómo mejora el rendimiento?

¿Cómo organizar tu aprendizaje con Angular?

Fundamentos del Desarrollo Web Profesional

Frameworks y Librerías de JavaScript para Aplicaciones Web

Creación y Composición de Componentes en Desarrollo Web

Transformación de Páginas Web a Componentes Reutilizables

Reactividad y Estrategias de Renderizado en JavaScript

Diferencias entre Librerías y Frameworks en Desarrollo Web

Empaquetadores y herramientas esenciales para desarrollo frontend JS

Contexto y funcionamiento de los Frameworks JavaScript

Desarrollo de Aplicaciones con React.js: Componentes y Hooks

Ciclo de vida de componentes en ReactJS

Desarrollo de Aplicación RIA en Code Sandbox

Estado y Eventos en React para Aplicaciones Interactivas

Arquitectura y Funcionamiento de Angular: Componentes y Servicios

Demo de Aplicación Angular para Gestión de Películas

Vue.js: Características y Ventajas frente a Otros Frameworks

Creación de un Demo con Vue.js desde HTML Básico

Desarrollo de sitios web con Svelte: optimización y rendimiento

Creación de Aplicaciones con Svelte: Primeros Pasos Prácticos

Estilos con CSS, preprocesadores y CSS-in-JS

CSS en JS: Integración y Ventajas en Aplicaciones React

Estilos en Angular con CSS: Aplicación de Películas

Componentes en Vue.js y Preprocesadores CSS

Estilos avanzados con SASS en View Components

"Uso de Styled Components para Estilos Dinámicos en React"

Estilos Dinámicos con Theme Provider y Style Components

Variables CSS y Emotion en Svelte: Mejora tus Componentes

Cómo escalar sitios o aplicaciones web

Escalamiento de Aplicaciones Web: SPA, SSR y Generadores Estáticos

Desarrollo de Aplicaciones con Next.js: Rutas y Renderizado Dinámico

Organización de Proyectos en React: Contenedores y Presentacionales

Elección de Frameworks y Librerías JavaScript para Proyectos Web

Desarrollo Frontend: Próximos Pasos y Evaluación Final

Arquitectura y Funcionamiento de Angular: Componentes y Servicios

Progreso del curso

Fundamentos del Desarrollo Web Profesional

Contexto y funcionamiento de los Frameworks JavaScript

Estilos con CSS, preprocesadores y CSS-in-JS

Cómo escalar sitios o aplicaciones web

Recursos

Recursos