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.

This talk has been presented at JSNation Live 2020, check out the latest edition of this JavaScript Conference.

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
19 min
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.
Momento Angular
JSNation 2023JSNation 2023
22 min
Momento Angular
Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.
Pruebas unitarias en aplicaciones Angular
TestJS Summit 2022TestJS Summit 2022
24 min
Pruebas unitarias en aplicaciones Angular
This talk explores unit testing in Angular applications, covering topics such as testing front-end applications, specifics of testing Angular, best practices, and educational resources. It discusses the anatomy of a unit test in both Jasmine and Jest, the setup and initial tests in Angular, testing user interaction and event handlers, testing rendered output and change detection, and unit testing parent components with child components. It also highlights best practices like using test doubles, testing components with dependency injection, and considerations for unit testing. Code coverage is emphasized as a metric that doesn't guarantee bug-free code.
Renacimiento de Angular
JSNation 2024JSNation 2024
29 min
Renacimiento de Angular
Angular and React have similar models of reactivity, with the framework optimizing change detection. Angular introduced signals for optimizing change detection in real-world applications, resulting in improved performance. Deferrable views in Angular allow for lazy loading and significant speed improvements. The island architecture in Angular enables independent component islands without needing hydration. Angular is working on features like partial iteration and zoneless, and aims to support developers in delivering web apps with confidence.
¿Qué dice Angular? 🦊
JSNation Live 2020JSNation Live 2020
8 min
¿Qué dice Angular? 🦊
Today's Talk is about using Angular, Web Audio API, and ToneJS to create custom sounds and instruments in a web application. The speaker demonstrates how to create an audio context, connect sources, and add filters to modify the sounds. They explore different elements in the ToneJS library, such as synthesizers, parts, noise, and audio tracks, to enhance the user experience. The Talk also showcases instruments that play cat and dog samples according to the pitch. Overall, it highlights the possibilities of using these technologies to create unique and interactive audio experiences in web applications.

Workshops on related topic

Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
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).