JavaScript Evolution and Updates

Rate this content
Bookmark

Dado que JavaScript lanza nuevas características cada año, podrías perderte algunas de las actualizaciones interesantes de objetos integrados como Array e Intl. Exploraremos nuevos métodos y objetos como Array.fromAsync() e Intl.Segmenter, y te mostraremos cómo navegar el soporte del navegador para nuevas características para que puedas eliminar bibliotecas externas o pasos de transpilación. 

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

Mariko Kosaka
Mariko Kosaka
27 min
18 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hola, soy Mariko del equipo de Chrome Developer Relations. Vamos a sumergirnos en la charla, mejorando JavaScript. Me senté y aprendí JavaScript. Me senté y aprendí ES6 de nuevo. TC39 ha publicado una nueva versión de la especificación de JavaScript cada año. Quiero centrarme en las partes de JavaScript que han recibido actualizaciones recientemente. Así que ArrayFlat crea un nuevo array aplanado. También puedes pasar un argumento de profundidad para aplanar arrays anidados. Otro método, copyToReserve, crea una copia invertida de un array. También está copy to sort, que crea una copia ordenada de un array. Otro método útil es array to spliced, que te permite eliminar y agregar elementos a un array copiado. Por último, el método array at devuelve un elemento en un índice dado. Array at acepta números negativos para la búsqueda en orden inverso. Find last itera en orden inverso y devuelve el elemento o índice. Copy to change the value at a given index with a function. Object group by permite agrupar y crear un nuevo objeto por tipo. JavaScript intl permite la segmentación de palabras en diferentes idiomas, mejorando la legibilidad. También incluye características como formato de tipo de datos, formato de números y reglas plurales para resultados basados en la localidad. Mantenerse al día con las características web es un desafío debido a la investigación que consume tiempo y los posibles errores en la implementación. Baseline proporciona información clara sobre las características de la plataforma web compatibles con los principales navegadores, asegurando compatibilidad sin problemas. Baseline proporciona dos niveles de soporte: recién disponible y ampliamente disponible. Al alinear tu proyecto con Baseline, puedes evitar con confianza problemas de compatibilidad del navegador. Puedes usar Baseline para mantenerte al día con lo nuevo en la web instalando el widget de Baseline. Se han lanzado sitios web y paneles como feature explorer y web starters.dev. La hoja de ruta del proyecto incluye herramientas para desarrolladores e integración de Baseline en linters y acciones. Consulta la página de insights del archivo RAM para obtener datos de usuario basados en los años de Baseline. Estamos planeando más herramientas para el próximo año, incluyendo linting e integración de IA.

1. Introducción: Aprendiendo JavaScript y ES6

Short description:

Hola, soy Mariko del equipo de Chrome Developer Relations. Vamos a sumergirnos en la charla, mejorando JavaScript. Me senté y aprendí JavaScript. Me senté y aprendí ES6 de nuevo. TC39 ha publicado una nueva versión de la especificación de JavaScript cada año. Quiero centrarme en las partes de JavaScript que han recibido actualizaciones recientemente.

Hola, soy Mariko, soy del equipo de Chrome Developer Relations. Mi handle es kosamari en casi todas partes, aunque no he publicado... No sé a dónde ir con todas las cosas sociales. Puedes encontrarme en Blue Sky, pero no he publicado contenido técnico.

Vamos a sumergirnos en la charla, mejorando JavaScript. Puedo recordar dos momentos distintos en mi carrera profesional donde me senté y aprendí JavaScript. Comencé mi carrera más en el lado del desarrollo de negocios y gestión de productos, pero luego decidí aprender a programar. Así que en ese momento me senté, aprendí JavaScript básico, y en ese entonces fue jQuery lo que aprendí para más o menos armar un poco de una aplicación de front end.

Y eso, unos años después, eventualmente me consiguió un trabajo escribiendo código. Y en este equipo al que me uní, un día estaba hablando con ingenieros senior, y en una tarde, como nosotros, creo que hicimos como algún lanzamiento o algo, todos estaban como en un ambiente relajado, y luego él me dice esta cosa llamada, va a haber un nuevo JavaScript, y se llama ES6. Y en esa sesión, me contó todo sobre que habrá dos formas más de definir variables, habrá clase en JavaScript, ooh, miedo, función sola y set y map y todas las cosas nuevas que vienen.

Así que entonces, en ese momento, necesitaba sentarme y aprender ES6 de nuevo. Y si estabas por ahí en ese entonces, recuerdas, si vas a una conferencia de JavaScript como esta, garantizado que hay al menos una sesión sobre aprender cosas nuevas en ES6. Así que todos estaban enfocándose en esta nueva versión de JavaScript y aprendiéndola. Y poco después, se introdujeron más herramientas en mi flujo de trabajo de desarrollo, como Babel, para preprocesar. Y esa herramienta hizo crecer el ecosistema, quiero decir, el ecosistema de JavaScript existía antes de ES6, pero siento que aceleró la adición de más cosas en el proceso de construcción y se volvió realmente confuso. Pero estábamos escribiendo código que se preprocesa para ser ejecutado en el navegador, y preguntas como, ¿dónde podemos escribir ES6 directamente y ejecutarlo en el navegador, esa conversación sucede.

Y además de eso, TC39, el cuerpo estándar para JavaScript o ECMAScript, decidió que el ciclo de lanzamiento de estos en adelante va a ser anual. Así que ES6 es en realidad ES2015, y desde entonces, cada año, TC39 ha publicado una nueva versión de la especificación de JavaScript. Y podría decir grandes actualizaciones, como, creo que BigInt se agregó en 2020, pero para ser honesto, porque estos vienen cada año y se agregan pocas cosas, se agregan pocas cosas, se agregan pocas cosas, dejé de prestar atención. No es como la energía que gasto cuando aprendo ES6 que cada año me siento y aprendo sobre cosas nuevas. Se me escaparon las cosas. Así que hoy quiero centrarme en las partes de JavaScript que han recibido actualizaciones recientemente, pero podrías perderte eso. Y propuse esta charla cuando propuse centrarme en Array e Intel, porque en ese momento estaba viendo cosas interesantes que quería compartir con todos. Pero luego agregué algunas cosas más que son realmente útiles para ti. Así que no es solo Array e Intel. Pero como prometí, comencemos con Array. Y como se señaló, podrías conocer esta función, podrías no conocer esta función. El punto es hacer un punto de que hay cosas nuevas en JavaScript. Así que vamos a repasarlo rápidamente.

2. New Array Methods

Short description:

Entonces, ArrayFlat crea un nuevo array aplanado. También puedes pasar un argumento de profundidad para aplanar arrays anidados. Otro método, copyToReserve, crea una copia invertida de un array. También está copy to sort, que crea una copia ordenada de un array. Otro método útil es array to spliced, que te permite eliminar y agregar elementos a un array copiado. Por último, el método array at devuelve un elemento en un índice dado.

Entonces, ArrayFlat, este es el orden de las cosas nuevas, crea un nuevo array aplanado. Así que tienes un array original que está anidado, como este, el App también array anidado, y llamas a flat en esta función, y obtienes flatArray. Es así de simple. También puedes pasar una profundidad como argumento en este método. Así que tienes un array múltiplemente anidado. Puedes decir, quiero solo aplanarlo por nivel 2. Puedes hacer eso también.

Otro es copyToReserve. Así que este método crea una copia de un array que está invertido. Así que tienes un array original, y luego lo llamas toReversed, entonces obtienes un nuevo array copiado que está invertido. Nuevamente, copiado. Así que el método reverse ya existe, pero toReversed crea una copia. Así que en este punto, si consultas el log del array original, entonces aún obtienes el array no invertido array. De hecho, para algo algo, el copy to do something método, hay algunos de ellos. Así que copy to sort, para ordenarlo, es uno nuevo. Así que tienes un montón de números en el array, llamas a to sort it, entonces obtienes una copia del array. Por supuesto, porque es JavaScript, uno después de eso es 100, no 20. Pero al igual que el método sort, también puedes pasar una función de callback para verificar eso y obtener un array correctamente ordenado.

Otro es array to spliced. Así que obtienes un array original, y pasas tres argumentos, donde debería ocurrir el splice y cuántos elementos eliminar y qué nuevos elementos agregar. Así que en este caso, quiero decir índice uno, donde está la cereza, no quiero eliminar nada, pero quiero agregar una manzana roja a este array, y obtienes un array copiado. Nuevamente, sin modificar el array original. Obtienes un array copiado con uno nuevo agregado a él. Y por supuesto, no necesitas agregar nada, al igual que splice, solo puedes dar un índice y números para eliminar. En este caso, índice uno, punto de cereza, quiero eliminar dos elementos, así que cereza y limones son eliminados, y luego el nuevo array, quiero decir, el array copiado es devuelto.

Así que otro que es muy simple pero muy útil es el método array at. Esto devuelve el elemento en el índice dado. Así que tienes un array original y dices array at un índice. Así que entonces obtienes cereza allí. Ahora, podrías estar pensando, ¿no es lo mismo que simplemente usar la notación de corchetes? Sí, es lo mismo en este punto.

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

Cómo localizar y personalizar contenido con Sanity.io y Next.js
React Advanced 2021React Advanced 2021
8 min
Cómo localizar y personalizar contenido con Sanity.io y Next.js
Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.
End-to-end i18n
React Advanced 2021React Advanced 2021
26 min
End-to-end i18n
Thanks for joining my talk on end-to-end internationalization. I'll walk you through internationalizing a React app, covering translated strings, currency and date formatting, translator management, and injecting translated strings back into the app. The constants used throughout the app define localization settings and translations. The React Intel library is used for managing translations, and custom functions are created for consistent date and number formatting. The translation process involves extracting strings, using tools like PO Edit, and compiling the translated strings into JSON files for the React app.
Construyendo aplicaciones JS con internacionalización (i18n) en mente
JSNation 2022JSNation 2022
21 min
Construyendo aplicaciones JS con internacionalización (i18n) en mente
This Talk discusses building JavaScript apps with internationalization in mind, addressing issues such as handling different name formats, using Unicode for compatibility, character encoding bugs, localization and translation solutions, testing in different languages, accommodating translated text in layouts, cultural considerations, and the importance of enabling different languages for users. The speaker also mentions various open source tools for internationalization. The Talk concludes with a reminder to avoid assumptions and embrace diversity in the World Wide Web.
Codificación de emojis, Unicode e internacionalización
JSNation Live 2020JSNation Live 2020
34 min
Codificación de emojis, Unicode e internacionalización
This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.
Internacionalizando React
React Summit Remote Edition 2021React Summit Remote Edition 2021
29 min
Internacionalizando React
The Talk discusses the challenges of adding and maintaining new languages in a React application and suggests ways to make the process easier. It defines internationalization as the process of architecting an application for localization and explains that localization involves adapting the content and experience for a specific locale. The speaker recommends using libraries for internationalization and provides resources for learning more about the topic. The Talk also addresses edge cases and difficulties with multiple dialects or languages, translation processes, and right-to-left CSS libraries.
Localización para casos de uso del mundo real: Aprendizajes clave de la incorporación de marcas globales
React Summit 2022React Summit 2022
8 min
Localización para casos de uso del mundo real: Aprendizajes clave de la incorporación de marcas globales
I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.

Workshops on related topic

Localizando tu sitio web de Remix
React Summit 2023React Summit 2023
154 min
Localizando tu sitio web de Remix
WorkshopFree
Harshil Agrawal
Harshil Agrawal
El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful.
Tabla de contenidos:- Introducción a la localización- Introducción a Contentful- Localización en Contentful- Introducción a Remix- Configuración de un nuevo proyecto de Remix- Renderización de contenido en el sitio web- Implementación de la localización en el sitio web de Remix- Recapitulación- Próximos pasos