El estado de Angular

Rate this content
Bookmark

En esta presentación, analizaremos el estado actual de Angular y su infraestructura de herramientas. Discutiremos qué características habilitaron la última versión de nuestro motor de renderizado Ivy y cómo puedes aprovecharlas hoy.


En el camino, veremos el trabajo que hicimos para garantizar un tamaño de paquete pequeño y una ejecución rápida. En la segunda parte de la charla, nos centraremos en las herramientas que Angular proporciona para ayudarte a entregar aplicaciones de manera rápida y eficiente.

FAQ

El CDK en Angular, conocido como Component Development Kit, es una base sobre la cual se pueden desarrollar componentes de interfaz de usuario, permitiendo personalizar y extender los componentes mínimos que proporciona para adaptarlos a necesidades específicas.

Angular facilita las migraciones mediante el uso de la herramienta Angular CLI, que incluye el comando ng update. Este comando permite actualizar automáticamente la configuración y el código fuente a la última versión de Angular, integrándose incluso en procesos de CI para actualizaciones automáticas.

Angular proporciona un stack de desarrollo integrado que incluye herramientas para la creación de interfaces de usuario, una experiencia optimizada de carga de aplicaciones, y un proceso de desarrollo predecible con lanzamientos programados cada seis meses.

Angular adopta un enfoque de compilación para la internacionalización, permitiendo compilar la aplicación con marcadores de internacionalización que se reemplazan por traducciones específicas. Esto elimina la sobrecarga en tiempo de ejecución y optimiza el rendimiento de inicio.

Angular utiliza TypeScript para verificar tipos y detectar errores en tiempo de compilación. Además, el equipo de Angular trabaja en constante colaboración con desarrolladores y empresas para recoger feedback y mejorar el framework, asegurando que las aplicaciones sean robustas y eficientes.

Angular lanza nuevas versiones mayores cada seis meses, siguiendo un cronograma de lanzamiento predecible. Esto ayuda a los desarrolladores a planificar las actualizaciones y asegura un proceso de desarrollo continuo y controlado.

Angular Universal es una tecnología que permite la pre-renderización del lado del servidor de aplicaciones Angular, mejorando el tiempo de carga inicial y el SEO al servir HTML estático mientras se carga el JavaScript necesario en el fondo.

Minko Gechev
Minko Gechev
36 min
18 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla proporciona una visión general de Angular y su conjunto de desarrollo, incluido el Component Development Kit (CDK) y los componentes de interfaz de usuario. Se discute el equilibrio entre sistemas estáticos y dinámicos y los beneficios de usar TypeScript. La charla también destaca la evolución de Angular, las actualizaciones de la versión 10 y la implementación de aplicaciones Angular Universal. Se menciona la facilidad de actualizar Angular y la incorporación de componentes web. También se discute el futuro de los frameworks, las contribuciones externas y las configuraciones de monorepo.

Available in English: The State of Angular

1. Introducción a Angular y su Stack de Desarrollo

Short description:

Hola a todos. Mi nombre es Mikhail Gechev. Soy un ingeniero en el equipo de Angular en Google. Hoy quiero compartir el estado actual de Angular y en qué ha estado trabajando nuestro equipo en Google. Proporcionamos una API ergonómica para desarrollar componentes y una interfaz de línea de comandos para generar aplicaciones Angular. También tenemos el equipo de Componentes de Angular trabajando en el Component Development Kit (CDK) y componentes de interfaz de usuario basados en la especificación de Material. Nuestro stack de desarrollo integrado ha sido probado en miles de aplicaciones web en Google, asegurando que los cambios y migraciones sean suaves y predecibles.

Mi nombre es Mikhail Gechev. Soy un ingeniero en el equipo de Angular en Google.

Hoy en esta presentación, quiero compartir con ustedes cuál es el estado actual de Angular. Sé que este es un evento general de JavaScript, más que una conferencia específica de Angular, por eso quería compartir algunas palabras sobre en qué ha estado trabajando nuestro equipo en Google.

Obviamente, estamos construyendo un framework, ¿verdad? Proporcionamos una API ergonómica para que puedas desarrollar componentes. Al componer tus componentes juntos, puedes desarrollar una interfaz de usuario web. A partir de ahí, tenemos un equipo de herramientas de Angular que es responsable de construir la interfaz de línea de comandos de Angular. El CLI de Angular te permite generar rápidamente aplicaciones Angular y también construir para producción, optimizando los activos al máximo para que tus usuarios obtengan los paquetes de JavaScript más pequeños posibles, así como una experiencia de carga optimizada en el inicio. El equipo de CLI de Angular también trabaja en la experiencia de migración. Así que de una versión a otra, queremos que tu experiencia de migración sea lo más suave posible. En general, apuntamos a que Angular sea siempre actualizado. O simplemente ejecutando ngupdate, puedes obtener la última versión de Angular y incluso integrarlo como parte de tu proceso de CI, obteniendo actualizaciones automáticas, solicitudes de extracción, ¿por qué no? Algunas personas de KOM lo están haciendo.

Por otro lado, también tenemos el equipo de Componentes de Angular. El equipo de componentes está trabajando en el CDK, que es el Component Development Kit. El CDK proporciona una base para el desarrollo de componentes de interfaz de usuario. Por ejemplo, utilizando esta base, puedes estilizar la cantidad mínima de componentes que proporcionamos allí para tus propios propósitos, así como utilizar las herramientas que estamos construyendo para aplicaciones accesibles de Angular. El equipo de componentes también está trabajando en componentes de interfaz de usuario de Angular basados en la especificación de Material. Así que si tienes una aplicación Angular que sigue esta especificación, puedes tomar directamente estos widgets y ponerlos en tu aplicación y todo funcionará sin problemas.

Además de eso, también tenemos un pipeline de internacionalización. Tenemos un servicio de idioma, enrutador, animaciones, y así sucesivamente. En general, proporcionamos este stack de desarrollo integrado para la interfaz de usuario web. Y creo que lo más único de esto es que ha sido probado en batalla en más de 2,000 aplicaciones web en Google. Estas aplicaciones web van desde un pequeño panel interno, por ejemplo, hasta aplicaciones empresariales grandes como la Consola de Google Cloud. Tiene millones de líneas de TypeScript y Angular en su interior. Nosotros, como ingenieros del equipo de Angular, no solo somos responsables de implementar correcciones de errores y nuevas características, como hacer cosas divertidas, sino que también somos responsables de asegurarnos de que todas estas 2,000 aplicaciones funcionen correctamente con Angular. Así que si introducimos un cambio en GitHub que rompe algo, se supone que debemos ir allí y solucionarlo. Esto nos ayuda a asegurarnos de que estamos al tanto de todos los cambios que están ocurriendo y asegurarnos de que no van a tener ningún efecto impredecible en tus aplicaciones. De esta manera, también al realizar cambios a gran escala, imagina que cambiamos una API pública, necesitamos asegurarnos de que funcione bien en Google Cloud, que tiene varios millones de líneas de código. Necesitamos implementar una migración automatizada, que es simplemente una transformación de código que hemos implementado en un par de cientos de líneas de código que toma todo este código de búsqueda de Google y lo migra al último cambio de API.

2. Actualizaciones y Motivaciones de Angular

Short description:

Podemos hacer que el código fuente esté disponible externamente a través del comando ng-update para mantener tu proyecto actualizado. La versión 10.0 RC de Angular está disponible, marcando otro hito. Lanzamos nuevas versiones principales cada seis meses para mantener un cronograma predecible. La actualización puede introducir cambios menores incompatibles hacia atrás y problemas de tipos. Nos esforzamos por encontrar un equilibrio entre la previsibilidad y la flexibilidad, entendiendo el compromiso entre las restricciones y la adaptabilidad.

Podemos tomar este código fuente y hacerlo disponible externamente, y eso es lo que hacemos como parte del comando ng-update que mantendrá tu proyecto actualizado en diferentes versiones de Angular. No solo actualizará tu configuración, sino también tu código fuente.

Ahora, dado que todos estamos en la misma página, quiero hablar más sobre en qué hemos estado trabajando últimamente. La buena noticia es que la versión 10.0 RC de Angular está disponible. Dependiendo de cuándo estés viendo este video, tal vez la versión 10.0 aún no esté disponible. Es posible que estés considerando que esta es otra reescritura de Angular. Espero que con la explicación anterior te haya tranquilizado y seas consciente de que no estamos reescribiendo el framework con frecuencia. Esto se debe principalmente a que no es necesario y también tendríamos que migrar todos estos 2000 proyectos internos. Eso es mucho trabajo.

La versión 10.0 simplemente significa que hemos alcanzado otro hito. En general, lanzamos nuevas versiones principales de Angular cada seis meses. Lo hacemos por varias razones diferentes. Primero, queremos asegurarnos de tener un cronograma de lanzamiento predecible y que todos ustedes estén al tanto de cuándo exactamente llegará la próxima versión. Sabes que esta versión puede introducir algunos cambios menores incompatibles hacia atrás. Por supuesto, nos encargaremos de ellos principalmente cuando ejecutes ng-updates, pero imagina que también actualizamos la versión del compilador de TypeScript. Esto significa que es posible que tengas algunos problemas de tipos que debas solucionar por tu cuenta. Por supuesto, estos problemas de tipos solo harán que tu aplicación sea más estricta y, a partir de ahí, podrás obtener algunas sugerencias del compilador de TypeScript y detectar errores de antemano, pero aún así, esto es algo en lo que querrías planificar adicionalmente.

Ahora, permíteme dedicar un tiempo a hablar sobre algunas de nuestras motivaciones para avanzar con Angular. Creo firmemente que si comprendes los fundamentos teóricos de todo esto, estarás mejor alineado con nuestra hoja de ruta para Angular en general. Quiero hablar sobre la previsibilidad versus la flexibilidad. Obviamente, queremos tener ambas, ¿verdad? Queremos tener un sistema previsible que también sea muy flexible, pero esto a menudo no funciona muy bien, porque los sistemas previsibles tienen algunas restricciones. Para que un sistema sea previsible, debe seguir algunas restricciones predefinidas en las que sabemos que podemos confiar. Pero, al mismo tiempo, si queremos que un sistema sea flexible, debemos ignorar algunas de estas restricciones. Por eso llamo a esto el compromiso entre previsibilidad y flexibilidad. Como estoy bastante emocionado con los lenguajes de programación en general, por lo general, en ciencias de la computación, las personas se refieren a este compromiso como estático versus dinámico. Probablemente hayas oído hablar de la escritura estática versus la escritura dinámica. O la escritura fuerte versus la escritura débil. En este caso particular, como fuerte versus estático, estos son conceptos ortogonales. Así que pensemos en estático y dinámico por un segundo. Si intentamos ubicar diferentes lenguajes de programación populares en este eje, veremos algo como esto.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
JSNation 2022JSNation 2022
20 min
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
Top Content
¿Qué haces cuando eres un framework que ha sobrevivido e innovado en dos Olas de Framework de JavaScript, y ves la nueva ola creciendo en la distancia? Innovas. En esta charla, exploramos el panorama del Framework de JavaScript, y algunas de las principales características competitivas que hemos visto. Exploraremos lo que Angular está introduciendo hoy y hacia dónde nos dirigimos en el futuro.
Momento Angular
JSNation 2023JSNation 2023
22 min
Momento Angular
En esta charla aprenderás todo sobre el renacimiento que Angular ha estado experimentando. Primero, analizaremos cómo el framework adoptó la reactividad detallada con señales para mejorar su rendimiento en tiempo de ejecución por órdenes de magnitud.
Luego nos sumergiremos en la aplicación de un enfoque similar de carga de código detallada para hacer que todo se cargue más rápido. Al final, aprenderás sobre las herramientas que puedes aprovechar para implementar todo esto en tus aplicaciones.
Pruebas unitarias en aplicaciones Angular
TestJS Summit 2022TestJS Summit 2022
24 min
Pruebas unitarias en aplicaciones Angular
Angular ofrece muchas cosas de serie, incluyendo diversas funcionalidades relacionadas con las pruebas. Esta presentación demostrará cómo podemos aprovechar los sólidos fundamentos de las pruebas unitarias de Angular y aplicar ciertos patrones que facilitan las pruebas. Los temas tratados incluyen: dobles de prueba, patrón de prueba de módulo, arneses, "recetas" sobre cómo probar algunos casos comunes y más.
Renacimiento de Angular
JSNation 2024JSNation 2024
29 min
Renacimiento de Angular
Durante los últimos 18 meses, Angular ha estado experimentando un gran impulso al que la comunidad se ha referido como el "Renacimiento de Angular".En esta charla veremos cómo se manifiesta en mejoras en la experiencia de desarrollo, rendimiento, documentación y una apariencia mejorada.
¿Qué dice Angular? 🦊
JSNation Live 2020JSNation Live 2020
8 min
¿Qué dice Angular? 🦊
Estamos muy acostumbrados a generar resultados visuales con código, pero a menudo nos sorprende escuchar que también podemos crear música de la misma manera. ¿No lo sabías? No estás solo. Aunque la idea de programar música es más antigua que todos nosotros, este concepto aún es bastante desconocido para muchos desarrolladores. ¡Pero no por mucho tiempo! Vamos a arrojar algo de luz sobre la programación musical en nuestras aplicaciones web diarias utilizando Angular.

Workshops on related topic

Comienza con AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Comienza con AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
Comienza con AG Grid Angular Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición de la comunidad de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado y personalizado una cuadrícula de datos AG Grid Angular.
Contenido:- comenzando e instalando AG Grid- configurando ordenamiento, filtrado, paginación- cargando datos en la cuadrícula- la API de la cuadrícula- agregar tus propios componentes a la cuadrícula para representación y edición- capacidades de la edición de la comunidad gratuita de AG Grid
Microfrontends con Module Federation y Angular
JSNation Live 2021JSNation Live 2021
113 min
Microfrontends con Module Federation y Angular
Workshop
Manfred Steyer
Manfred Steyer
Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección.
En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos.
Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos.
Prerrequisitos:Debes tener algo de experiencia con Angular.
Poniéndose cómodo con Angular y UI
JSNation Live 2021JSNation Live 2021
149 min
Poniéndose cómodo con Angular y UI
Workshop
Alyssa Nicoll
Alyssa Nicoll
Un masterclass tanto para principiantes en UI como en Angular. Vamos a descargar la aplicación Tour of Heroes (escrita por John Papa y encontrada en la documentación de Angular) y darle una mejora en la interfaz de usuario. Todo lo que necesitarás es una computadora portátil y tu conjunto de datos favorito (el mío, por supuesto, serán ponis).