En Meta, Reaccionar y Reaccionar nativo son más que simples herramientas; son parte integral de nuestro crecimiento e innovación de productos. Con más de cinco mil personas en Meta creando productos y experiencias con React cada mes, estas tecnologías son fundamentales para nuestra civilización de ingeniería y nuestra capacidad para construir y cursar rápidamente productos de ingreso calidad. En esta publicación, profundizaremos en las experiencias de crecimiento de algunos de los equipos de productos que aprovecharon React y React Native para entregar proyectos interesantes presentados en Meta Connect 2024.
Instagram y Facebook para Meta Quest
En Connect, Mark Zuckerberg compartió que hemos reconstruido Instagram y Facebook para ingenuidad mixta (MR) en Meta Quest. Nuestro objetivo era sobrellevar nuestras experiencias sociales emblemáticas a los auriculares Meta Quest, permitiendo a las personas ponerse al día con sus amigos y ver Historias y Reels, al mismo tiempo que mostramos nuevas posibilidades habilitadas solo a través de MR.
Crear las aplicaciones sociales de Meta desde cero en MR requirió que nuestros equipos aprovecharan cuidadosamente las capacidades de la plataforma ofrecidas por Meta Quest y al mismo tiempo mantuvieran un unificado de calidad tremendamente stop. los equipos Primero tuvo que osar cómo construirlas: reutilizar las aplicaciones de Android existentes, escribir una nueva aplicación nativa de Android o usar React Native para construir desde cero. Queríamos ofrecer una experiencia de héroe que se viera y se sintiera como en casa en Meta Quest, aprovechando los tipos de entrada adicionales, los gestos y la viejo superficie visual. En división de simplemente portar nuestras aplicaciones sociales móviles, elegimos React Native porque permitió a nuestros equipos iterar y construir rápidamente con capacidades de animación sólidas, excelente rendimiento y una plataforma compartida que impulsa la mayoría de las aplicaciones del sistema 2D Meta Quest.
En Instagram, React Native permitió a nuestros equipos crear animaciones ricas e interacciones novedosas que encarnan el profundo enfoque de la marca en la calidad y el placer. Para esta nueva aplicación, introdujimos transiciones fluidas de publicaciones de video desde el feed a una audiencia de pantalla completa, al banda de los comentarios, sin perder un solo fotograma. Habilitamos la posibilidad de deslizar pilas de fotos con el joystick del compensador o pellizcando las manos. Incluso introdujimos una animación de desplazamiento única sobre nociones interactivos que sigue suavemente los movimientos del compensador.
Al crear Facebook para Meta Quest, nuestros equipos aprovecharon el código sazonado y la infraestructura que respalda nuestra Experiencia de escritorio de Facebook.com. Aprovechamos las tecnologías de código compartido para reutilizar algunas de las funciones más complejas y sólidas de Facebook.com, como informativo y comentarios. Algunas de estas tecnologías de código compartido incluyen nuestros proyectos Meta de código destapado como EstiloX y Reaccionar DOM fiel. Al compartir código, nuestros equipos podrían asignar menos tiempo a la dialéctica empresarial repetitiva y centrarse más en adicionar interacciones y experiencias específicas de Meta Quest.
Aplicación móvil Meta Horizonte
Este año además lanzó la nueva aplicación móvil Meta Horizon – una nueva apariencia y un nuevo nombre. Ampliamos la aplicación para que sea más obvio socializar y expresarse tanto adentro como fuera del auricular. Agregamos una pestaña dedicada para personalizar fácilmente tu altibajo y expresar tu estado de actitud, directamente desde tu teléfono. Las personas además pueden presentarse Horizon Worlds y completar misiones desde la aplicación para desbloquear estilos de altibajo, nociones y emoticones exclusivos.
Incluso hemos seguido mejorando el rendimiento de la aplicación. En Meta, nuestros equipos suelen considerar Facebook Marketplace como punto de relato de rendimiento de React Native. Sin secuestro, la aplicación Meta Horizon es una aplicación independiente con React Native en la ruta de inicialización del inicio en frío de la aplicación, en comparación con la aplicación de Facebook que inicializa React Native cuando recepción su primera superficie de React Native y no al iniciar la aplicación. Los resultados de rendimiento que nuestros equipos obtuvieron con React Native superaron nuestras expectativas originales y están a la par con las aplicaciones sociales móviles de Meta.
Nuestro equipo de Meta Horizon trabajó en estrecha colaboración con nuestro equipo de React para perfilar nuestra aplicación y encontrar oportunidades de perfeccionamiento utilizando Android Systrace, React DevTools y el nuevo Reaccionar herramientas de crecimiento nativas. La perfeccionamiento más impactante que hicieron nuestros equipos fue iniciar consultas de red ayer. En división de iniciar solicitudes de red cuando se representó un componente de la superficie del producto, nuestros equipos movieron esa búsqueda de red para que comenzara cuando se hizo clic en el brote de navegación de la superficie preparatorio.
Tienda Meta Horizonte
Incluso anunciamos que Meta Horizon Store ya está abierta para que todos los desarrolladores publiquen aplicaciones. incluyendo aplicaciones 2D. Para respaldar este cambio, realizamos cambios importantes en Horizon Store; cambios en nuestra navegación para tolerar muchas más categorías, una mejor clasificación y categorización de aplicaciones y una nueva sección de «Acercamiento anticipado».
Meta Horizon Store incluye las superficies que te permiten descubrir y comprar aplicaciones y juegos para Meta Quest, así como explorar mundos a los que puedes recorrer en Horizon. Transmitido que tenemos un equipo centralizado que mantiene la Tienda en cuatro plataformas (Android, iOS, Horizon OS, Web) y necesitamos paridad de funciones en estas interfaces, el equipo se ha beneficiario enormemente de poder usar React y React Native, aunque son principalmente implementaciones separadas en la hogaño. Estas tecnologías han permitido al equipo implementar nuevas funciones y experimentos mucho más rápido con un equipo más pequeño.
Al igual que las nuevas aplicaciones de Instagram y Facebook, y todo lo demás que utiliza React en Meta, nuestros equipos utilizan la última tecnología de React, como el compilador React y la nueva edificio nativa de React. El equipo de React se asoció con varios equipos durante los últimos primaveras para desarrollar infraestructura y capacidades que permitan compartir código entre plataformas, que el equipo de Meta Horizon Store ha comenzado a disfrutar. Por ejemplo, la infraestructura de navegación y enrutamiento de Meta Horizon Store era originalmente congruo diferente entre plataformas. El equipo ahora está reutilizando el enrutador interno de Meta para aplicaciones React que fue creado originalmente para Facebook.com que ahora además funciona con React Native. Incluso convertimos Meta Horizon Store en la web de usar CSS puro a usar EstiloXque en combinación con Reaccionar DOM fielles ha permitido reutilizar la sección Spotlight de Meta Horizon Store en la web y en ingenuidad mixta. Esto nos permitió tolerar más rápidamente la representación de texto internacionalizado y el modo claro/impreciso para pancartas, y aceleró futuras mejoras para nuestro equipo de comercialización.
Editor metaespacial
Anunciamos el SDK metaespacial y Meta Spatial Editor para permitir a los desarrolladores móviles crear experiencias inmersivas para Meta Horizon OS utilizando lenguajes, bibliotecas y herramientas familiares de Android, anejo con capacidades únicas de Meta Quest, como física, MR y 3D. Crear excelentes experiencias 3D siempre requiere poder visualizar y editar tus escenas directamente. Meta Spatial Editor es una nueva aplicación de escritorio que le permite importar, organizar y mudar sus activos en composiciones visuales y exportarlos, utilizando el unificado glTF, a Meta Spatial SDK.
Nuestros equipos crearon la aplicación con Reaccionar nativo para escritoriobrindando a los usuarios aplicaciones nativas de Windows y macOS y brindando a nuestros equipos la increíble experiencia de desarrollador de React. Uno de los factores esencia en la audacia de los equipos de utilizar React Native para escritorio en división de otras soluciones de escritorio basadas en web es que React Native permite al equipo utilizar integraciones nativas cuando sea necesario. La suceso 3D principal de la aplicación funciona con un motor de renderizado 3D personalizado, que requiere una integración personalizada de componentes nativos de React Native. Los paneles React Native en suceso permiten a los usuarios modificar todo tipo de propiedades que luego se comunican con el renderizador 3D a través de C++, lo que nos permite desempolvar la interfaz de favorecido a 60 fps.
El equipo de Meta Spatial Editor tenía muchos ingenieros que principalmente tenían experiencia en C++ y estaban acostumbrados a construir con Qt. Estos miembros del equipo inicialmente se mostraron escépticos con respecto a JavaScript, pero terminaron amando la experiencia de desarrollador proporcionada por React Native, como Fast Refresh. Los desarrolladores web dan por sentado que los cambios de código se pueden ver al respetar el archivo, pero sigue siendo extremadamente poco popular para los ingenieros nativos. Esta experiencia de desarrollador permitió a nuestros equipos construir mucho más rápidamente con React Native.
Así es como Meta construye React
Hace más de una plazo, Meta introdujo React en la industria a través del código destapado. Nuestro equipo de React en Meta está muy orgulloso de estas experiencias que se anunciaron en Meta Connect 2024. Estos productos muestran el poder, la efusión y la flexibilidad de lo que es posible con React: interacciones encantadoras, integraciones profundamente complejas y Interfaces increíblemente receptivas. Y, por supuesto, todos se renderizan de forma nativa en sus respectivas plataformas para cumplir con las expectativas de los usuarios.
Durante la última plazo, el equipo de React se ha asociado profundamente con entreambos equipos de Meta, así como con miembros de la comunidad de código destapado para permitir este tipo de experiencias de productos y desarrolladores. Los ingenieros de Meta utilizan React en todas las plataformas donde ofrecemos interfaces de favorecido: web, dispositivos móviles, computadoras de escritorio y nuevas plataformas como MR. Cada vez que el equipo de React agregó soporte para una nueva plataforma, el equipo invirtió en comprender profundamente los modismos y las expectativas de las experiencias de los usuarios en esa plataforma, para luego adaptar y optimizar React en consecuencia. Hemos descubierto constantemente que mejorar React para una plataforma además beneficia a otras, un enfoque que los equipos de React describieron en sus Visión de muchas plataformas.
Este patrón ha continuado a medida que los equipos ampliaron el soporte a las limitaciones y oportunidades de los dispositivos de ingenuidad mixta. Nuestros equipos han mejorado la capacidad de respuesta de las aplicaciones y el inicio, han mejorado la eficiencia para achicar el consumo de fila y han tomado medidas importantes para permitir el uso compartido de código entre plataformas web y nativas, con personalizaciones específicas de la plataforma. Estos logros han beneficiario constantemente a nuestras aplicaciones en otras plataformas, con mejoras en la experiencia del favorecido en productos como Facebook.com y Facebook Marketplace.
Nuestros ingenieros invierten en estas mejoras sabiendo que beneficiarán no solo a los productos creados por Meta, sino a todos los productos React del mundo. Meta continúa compartiendo estas mejoras con la comunidad de código destapado cada vez que hemos manada confianza en que son lo suficientemente estables para una admisión más amplia. Anteriormente hemos compartido algunas de estas mejoras con la comunidad de código destapado, incluyendo Reaccionar compilador, Reaccionar 19Reaccionar nativo Nueva Construcción, EstiloX, Reaccionar DOM fiely mejoras de rendimiento a Hermes. ¡Estas innovaciones y más están actualmente en crecimiento, y nuestros equipos esperan compartirlas con la comunidad de código destapado en el futuro!
Cosas más extrañas™/© Netflix. Usado con permiso.