Momento Angular

Rate this content
Bookmark

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.

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

FAQ

Angular Ivy es una importante refactorización del framework Angular que se completó en 2021. Permitió realizar muchas mejoras y generó un gran impulso en el desarrollo y la eficiencia del framework.

Recientemente, Angular ha introducido un nuevo modelo de reactividad que utiliza señales para una reactividad más precisa. Este modelo es 100% compatible con versiones anteriores e interoperable con el modelo de reactividad actual.

Angular ha trabajado en mejorar la eficiencia del framework, incluyendo la optimización de la carga de aplicaciones y la reducción del Largest Contentful Paint y Cumulative Layout Shift. También se está trabajando en mejorar el rendimiento en el manejo de declaraciones condicionales y bucles en las plantillas.

Angular.js fue el framework original desarrollado por el mismo equipo de Google, que luego fue discontinuado y reemplazado por Angular. Angular es una reescritura de Angular.js y sigue el versionado semántico, lanzando nuevas versiones principales dos veces al año.

ngUpdate es una función de la CLI de Angular que transforma automáticamente el código de los desarrolladores donde encuentra APIs obsoletas, ayudando a mantener las aplicaciones actualizadas con las últimas versiones de Angular de manera eficiente.

La carga lenta declarativa en Angular permite a los desarrolladores especificar qué partes de sus plantillas desean cargar de manera lenta. El framework gestionará la carga de estos segmentos de plantilla, junto con todas sus dependencias transitivas, en un paquete separado, optimizando el rendimiento y los tiempos de carga.

Minko Gechev
Minko Gechev
22 min
01 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Angular ha experimentado un crecimiento significativo y es el segundo framework más popular después de React. La última versión de Angular, llamada Angular Ivy, pasó por una importante refactorización en 2021. El modelo de reactividad de Angular se ha mejorado con la introducción de señales, que permiten una mejor integración con RxJS y admiten patrones de reactividad avanzados. Angular ha realizado optimizaciones para mejorar el rendimiento, incluyendo mejoras en la velocidad de carga y carga diferida. El equipo de Angular reconoce las innovaciones en otros frameworks y destaca el impacto de la introducción de TypeScript en el éxito del proyecto.
Available in English: Angular Momentum

1. Introducción a Angular

Short description:

Hola a todos. Mi nombre es Miko Getriev. Soy el líder de productos para Angular en Google. En esta charla, voy a compartir todo lo que ha estado sucediendo en Angular durante el último año y medio. La comunidad de Angular ha llamado a esto el impulso de Angular. Angular ha crecido casi siete veces en los últimos cinco años y es el segundo framework más popular después de React.

Hola a todos. Mi nombre es Miko Getriev. Soy el líder de productos para Angular en Google. Desafortunadamente, no pude unirme a ustedes en persona la semana pasada en Ámsterdam porque tuve COVID. Pero en esta charla, todavía voy a compartir con ustedes todo lo que ha estado sucediendo en Angular durante el último año y medio. De hecho, el framework ha experimentado muchos avances. La comunidad de Angular ha llamado a esto el impulso de Angular. También me doy cuenta de que la mayoría de las personas en Just Nation no son desarrolladores de Angular. Hay muchos frameworks por ahí. Y me doy cuenta de que cada framework y cada comunidad tiene su propia narrativa. Por eso les pido que intenten ser lo más imparciales posible y déjenme contarles todo lo que ha estado sucediendo en Angular. Si tienen alguna pregunta, por favor déjenlas en los comentarios a continuación o contáctenme en Twitter en mgedgiv. En los últimos aproximadamente cinco años, Angular ha crecido casi siete veces. Esas son todas las estadísticas del registro público de nodos. Dado que la mayoría de los desarrolladores de Angular confían en registros privados, el número proyectado es mucho mayor. Y el estado de JavaScript mostró que Angular es el segundo framework más popular en la encuesta, justo después de React, y la encuesta de Stack Overflow confirmó estos datos.

2. Adopción y Popularidad de Angular

Short description:

Pero incluso si Angular es ampliamente adoptado, ¿significa eso que está siendo desarrollado activamente? Al observar el repositorio de Angular en GitHub, el proyecto ha recibido más de 16,000 solicitudes de extracción en los últimos cinco años. El factor de `coolness` de cada tecnología en la comunidad de JavaScript disminuye a la mitad por cada mes que ha existido. ¿Es Angular `cool`? Honestamente, no tengo idea. Todavía considero que Rick Astley es `cool`. El framework pasó por una importante refactorización, que completamos en 2021. Se llamó Angular Ivy.

Muy bien. Pero incluso si Angular es ampliamente adoptado, ¿significa eso que está siendo desarrollado activamente? Bueno, al observar el repositorio de Angular en GitHub, el proyecto ha recibido más de 16,000 solicitudes de extracción en los últimos cinco años. Si no usas Angular a diario, es posible que aún no estés completamente convencido. Y la respuesta a tus sentimientos probablemente esté oculta detrás de este logotipo. Que se parece sospechosamente al logotipo de Angular. ¿Pero lo es? Esta es una de las razones por las que existe tal malentendido sobre la adopción y popularidad del framework Angular. Pero hablaremos más sobre esto en un momento.

Entonces, antes de eso, basándonos en todas estas encuestas y tendencias públicas, parece que Angular está funcionando bastante bien. Pero todos sabemos que el ecosistema de JavaScript se mueve muy rápido. Desde que creamos Angular, el número de frameworks se ha duplicado o triplicado. Este crecimiento del espacio es genial. Porque todos aportan nuevas ideas. Lo que lleva a la innovación. Pero también, bueno, hay una perspectiva distorsionada. El factor de `coolness` de cada tecnología en la comunidad de JavaScript disminuye a la mitad por cada mes que ha existido. Entonces, supongo que hay una pregunta. ¿Es Angular `cool`? Honestamente, no tengo idea. Definitivamente no me considero la autoridad para determinar si algo es `cool` o no. Todavía considero que Rick Astley es `cool`. Y también, entre 2014 y 2021, antes de cambiar de roles en Google, tuve una racha casi perfecta en GitHub durante estos 7 años. Como pueden ver, estaba de fiesta muy duro en la universidad, emocionándome pensando en algoritmos y estructuras de data, y aprovechaba cada oportunidad para escribir código. ¿Sabes cuando vas a un lugar nuevo, mucha gente se toma selfies, ¿verdad? Bueno, porque quería capturar diferentes experiencias y asegurarme de tomar fotos desde diferentes lugares que visité, creé un `post-commit hook` para Git, que tomaba una selfie mía junto con un mensaje de confirmación muy sentimental cada vez que subía código y lo hasheaba. Bueno, claramente no puedo decir si Angular es `cool` o no. Hacerlo `cool` también está fuera de mi control y también fuera del control de nuestro equipo. Pero hay algunas cosas que podemos hacer. Podemos asegurarnos de que Angular sea eficiente, potente y estable. El framework pasó por una importante refactorización, que completamos en 2021. Esto nos permitió hacer muchas mejoras y generar un gran impulso. Muchos de ustedes pueden

Available in other languages:

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

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Workshops on related topic

Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
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.
Deja que la IA sea tu Documentación
JSNation 2024JSNation 2024
69 min
Deja que la IA sea tu Documentación
Workshop
Jesse Hall
Jesse Hall
Únete a nuestro masterclass dinámico para crear un portal de documentación impulsado por IA. Aprende a integrar ChatGPT de OpenAI con Next.js 14, Tailwind CSS y tecnología de vanguardia para ofrecer soluciones de código e resúmenes instantáneos. Esta sesión práctica te equipará con el conocimiento para revolucionar la forma en que los usuarios interactúan con la documentación, convirtiendo las búsquedas tediosas en descubrimientos eficientes e inteligentes.
Aspectos destacados:
- Experiencia práctica en la creación de un sitio de documentación impulsado por IA.- Comprensión de la integración de la IA en las experiencias de usuario.- Habilidades prácticas con las últimas tecnologías de desarrollo web.- Estrategias para implementar y mantener recursos de documentación inteligente.
Tabla de contenidos:- Introducción a la IA en la documentación- Configuración del entorno- Construcción de la estructura de documentación- Integración de ChatGPT para documentación interactiva