Krypton Solid

Por qué debería considerar React Native para su aplicación móvil – Smashing Magazine

Por qué debería considerar React Native para su aplicación móvil – Smashing Magazine

Como muchos otros, al principio era escéptico de Facebook e Instagram Reaccionar. Las demostraciones iniciales de la extensión del lenguaje JavaScript de React, JSX, incomodaron a muchos desarrolladores. Durante años habíamos trabajado para separar HTML y JavaScript, pero React parecía combinarlos. Muchos también cuestionaron la necesidad de otra biblioteca del lado del cliente en un océano lleno de ellas.

Resulta que React ha demostrado ser un gran éxito, tanto en mis propios proyectos como en muchos otros en la web, incluidas grandes empresas como Netflix. Y ahora con Reaccionar nativo, el marco se ha llevado a dispositivos móviles. React Native es una excelente opción para crear aplicaciones iOS y Android de alto rendimiento que se sientan como en casa en sus respectivas plataformas, todo mientras se basa en cualquier experiencia de desarrollo web anterior.

Otras lecturas en SmashingMag

Este artículo explicará por qué creo que debería considerar el uso de React Native, proporcionando una descripción general del marco y lo que creo que son sus mejores características.

Descripción general de React

Descrito por sus creadores como «Una biblioteca de JavaScript para crear interfaces de usuario», React se centra en la parte de visualización de su aplicación. En términos más concretos, esto significa que al escribir una aplicación React Native, su código de vista consistirá en escribir componentes React, que son pequeños fragmentos de código que describen cómo debería verse una parte de su aplicación en función de algún conjunto de datos de entrada. Veamos un pequeño componente de ejemplo que se puede usar para mostrar un botón simple. (Estoy omitiendo estilos en aras de la claridad).


const Button = React.createClass({
    propTypes: {
        onPress: React.PropTypes.func.isRequired,
        text: React.PropTypes.string.isRequired,
    },

    render() {
        return (
            <TouchableOpacity onPress={this.props.onPress} style={...}>
                <Text style={...}>{this.props.text}</Text>
            </TouchableOpacity>
        );
    }
});

Esto Button El componente tiene dos piezas de datos de entrada: onPress, que es una función de devolución de llamada para cuando se presiona el botón; y text, que es la cadena que se mostrará dentro del botón. La estructura similar a XML que ve devuelta por el render La función se llama JSX, que es un azúcar sintáctico para las llamadas a funciones de React. Y TouchableOpacity y Text son componentes existentes que se incluyen con React Native. Ahora que esto Button Se ha creado el componente, se puede usar muchas veces en toda la aplicación, con un comportamiento y estilo consistentes.

Si bien este es un ejemplo simple, demuestra cómo se construye una aplicación React, pieza por pieza. Continuando de esta manera, puede crear componentes que representen capas crecientes de abstracción. Por ejemplo, puede crear un ButtonGroup componente que contiene varios botones conectados. Y además de eso, puede escribir componentes que representen pantallas completas. Incluso a medida que su aplicación se vuelve significativamente más grande, los componentes siguen siendo comprensibles y de tamaño manejable en cada nivel.

Verdaderamente nativo

La mayoría de las aplicaciones móviles creadas con JavaScript Córdoba, o un marco construido sobre él, como el popular Iónico o Sencha Touch. Con Cordova, tiene la capacidad de realizar llamadas a API nativas, pero la mayor parte de su aplicación será HTML y JavaScript dentro de WebView. Si bien puede aproximarse a los componentes nativos, y ciertamente es posible crear una excelente interfaz de usuario con HTML y JS, ninguna aplicación de Cordova igualará la apariencia de una aplicación nativa real. Las pequeñas cosas, como la aceleración del desplazamiento, el comportamiento del teclado y la navegación, se suman y pueden crear experiencias frustrantes para sus clientes cuando no se comportan como se esperaba.

Aunque todavía escribe JavaScript con React Native, los componentes que defina terminarán renderizándose como widgets de plataforma nativa. Si está familiarizado con React para la web, se sentirá como en casa. Y si ha escrito aplicaciones en Java u Objective-C, reconocerá inmediatamente muchos de los componentes de React Native.

La mejor característica de React cuando se lanzó originalmente para la web era hacer que la capa de vista de su aplicación fuera una pura salida de estado. Como desarrollador, esto significa que en lugar de realizar cambios imperativos en los componentes de la vista (por ejemplo, alterar programáticamente el texto o el color de un botón llamando a una función en él), simplemente define cómo debe verse su vista en función de los datos de entrada, y React realiza los cambios de forma inteligente cuando cambia el estado.

Este cambio de mentalidad puede simplificar drásticamente la creación de interfaces de usuario. Todos hemos usado aplicaciones en las que la interfaz de usuario entra en un estado extraño no deseado después de tomar una ruta que el desarrollador no esperaba. Con React, errores como este son mucho más fáciles de rastrear. No tiene que pensar tanto en la ruta del usuario a través del sistema, sino que se concentra en asegurarse de que sus declaraciones de vista puedan manejar todas las formas posibles para el estado de su aplicación. Este es un problema mucho más fácil de resolver y de probar. También es más fácil de entender por la computadora, por lo que las mejoras en el análisis estático y los sistemas de tipos solo harán que estos errores sean más fáciles de encontrar.

Las definiciones de componentes de React Native se ven y se comportan de manera muy similar a React para componentes web, pero apuntan a widgets de UI nativos en lugar de HTML. Entonces, en lugar de usar un <div>, usarías un <View> (que en iOS se renderiza a un nativo UIViewy en Android android.view). Cuando cambien los datos de sus componentes, React Native calculará lo que debe modificarse en su vista y realizará las llamadas necesarias a los widgets de IU nativos que se muestren.

¡Y es rápido! JavaScript no es tan rápido como puede ser el código nativo, pero para la mayoría de las tareas, JavaScript y React Native son más que capaces de mantener su aplicación funcionando a 60 cuadros por segundo. Bajo el capó, su código JavaScript se ejecuta en su propio hilo, separado del hilo principal de la interfaz de usuario. Entonces, incluso cuando su aplicación ejecuta una lógica compleja, su interfaz de usuario aún puede animarse o desplazarse sin problemas a 60 fps, siempre que la interfaz de usuario no esté bloqueada por el hilo JS.

Muchos marcos de software prometen que le permitirán crear una gran aplicación para Android e iOS, pero el producto con frecuencia termina en algún lugar intermedio sin sentirse realmente nativo de ninguno de ellos. Al adoptar las plataformas nativas y al mismo tiempo permitir que su aplicación comparta la mayor parte de su base de código entre plataformas, React Native permite a los desarrolladores crear aplicaciones nativas increíbles que les encantarán a sus clientes, sin el aumento en el presupuesto que podría implicar la construcción de dos aplicaciones separadas.

Facilidad de aprendizaje

Una de las mayores fortalezas de React es lo legible que es, incluso para aquellos que no están familiarizados con él. Muchos marcos requieren que aprenda una larga lista de conceptos que solo son útiles dentro de ese marco, ignorando los fundamentos del lenguaje. React hace todo lo posible para hacer lo contrario. Como ejemplo, considere la diferencia entre representar una parte de una lista de amigos en React Native vs Ionic (AngularJS).

Con Ionic, usas el ngRepeat directiva. Digamos que tenemos una serie de amigos, cada uno de los cuales contiene los siguientes campos: nombre, apellido e is_online. Pero solo queremos mostrárselos a aquellos amigos que están actualmente en línea. Aquí está nuestro controlador:


function FriendCtrl($scope) {
    $scope.friends = [
        {
            first_name: 'John',
            last_name: 'Doe',
            is_online: true,
        },
        {
            first_name: 'Jane',
            last_name: 'Doe',
            is_online: true,
        },
        {
            first_name: 'Foo',
            last_name: 'Bar',
            is_online: false,
        }
    ];
}

Y aquí está nuestra opinión:


<div ng-controller="FriendCtrl">
    <ul>
        <li ng-repeat="friend in friends | filter:{is_online:true}">
            {{friend.last_name}}, {{friend.first_name}}
        </li>
    </ul>
</div>

Si no está familiarizado con Ionic / AngularJS, este fragmento de código plantea algunas preguntas inmediatas. Que es $scope? Para que sirve la sintaxis filter? ¿Y cómo agregaría un comportamiento adicional, como ordenar la lista de amigos?

Con React Native, hace uso de su conocimiento existente de los fundamentos del lenguaje, utilizando el filtrar y mapa funciones.


const DemoComponent = React.createClass({
    render() {
        const friends = [
            {
                first_name: 'John',
                last_name: 'Doe',
                is_online: true,
            },
            {
                first_name: 'Jane',
                last_name: 'Doe',
                is_online: true,
            },
            {
                first_name: 'Foo',
                last_name: 'Bar',
                is_online: false,
            }
        ];

        return (
            <View>
                {friends
                    .filter(f => f.is_online)
                    .map(f => <View>{f.last_name}, {f.first_name}</View>)}
            </View>
        );
    }
});

Si bien el fragmento de React Native todavía plantea algunas preguntas (¿Qué React.createClass ¿hacer? Que es render?), el hecho de que la mayor parte del código aquí sea solo JavaScript normal significa que será más comprensible y fácil de mantener para los recién llegados.

Como desarrollador experimentado, el uso de funciones de lenguaje estándar que ya conoce le ahorrará tiempo y hará que su código sea más comprensible para otros desarrolladores. Pero igualmente importante, si tiene menos experiencia con JavaScript, React sirve como una excelente herramienta de enseñanza. Si aún no ha aprendido a usar el mapa o el filtro, aprender React también le enseñará eso. Aprender ngRepeat solo te enseña ngRepeat.

Y eso es antes de considerar el desarrollo móvil multiplataforma. Si bien habrá algunas piezas de código específico de la plataforma en un proyecto de React Native que se dirija tanto a iOS como a Android, la mayoría se compartirá y todo será comprensible para un desarrollador de JavaScript.

Ecosistema vibrante

Dado que la mayoría de su código React Native es simplemente JavaScript, obtiene los beneficios de todos los avances en el lenguaje y su ecosistema. En lugar de esperar a que los desarrolladores de su marco implementen todas las funciones de manipulación de matrices que desea, ¿por qué no simplemente usar lodash? Para manipular o mostrar fechas y horas, solo use Moment.js. Y todos esos increíbles nuevos Funciones del idioma ES6 has estado esperando para probar? React no solo es un gran ajuste, sino que también se fomenta su uso.

Gracias a sus vistas declarativas, ciertas bibliotecas son particularmente adecuadas para su uso con React Native. Uno que sería negligente no mencionar es redux. Descrito como un «contenedor de estado predecible», redux es una biblioteca impresionante para manipular el estado de su aplicación. Redux es altamente comprobable y fomenta la escritura de pequeñas funciones que sean explícitas sobre los datos que cambian. Una vez que los cambios de estado se escriben de esta manera, su aplicación puede aprovechar funciones poderosas, como global deshacer rehacer y recarga en caliente.

Experiencia de desarrollador

Los desarrolladores felices son desarrolladores productivos y React Native tiene un excelente entorno de desarrollo. En lugar de esperar repetidamente a que su código se compile y su aplicación se reinicie mientras realiza pequeñas ediciones, los cambios en una base de código React Native se realizan en su aplicación en ejecución sin la necesidad de reiniciar (ver una demostración de eso aquí).

Y si ha escrito JavaScript antes, probablemente ya esté familiarizado con las herramientas para desarrolladores de Chrome. Al ejecutar React Native en modo de desarrollo, puede adjuntarlo a su navegador Chrome de escritorio, por lo que estará como en casa con sus herramientas de depuración y creación de perfiles. La conexión a Chrome funciona en el simulador o conectado a un dispositivo físico.

Para crear el diseño de su aplicación, React Native usa caja flexible. Si bien cada motor de diseño tiene su propia curva de aprendizaje, ventajas y desventajas, el soporte de React Native para flexbox significa que puede usar exactamente el mismo código de diseño para Android, iOS y la web, en lugar de aprender tres motores diferentes.

¡Y más allá!

Las aplicaciones React Native consisten en su totalidad, o casi, en JavaScript. Si deja que su mente divague, esto abre un mundo de oportunidades.

Compartir código

Ya hemos discutido cómo React Native puede compartir código entre Android e iOS, pero ¿qué pasa con la web? Cualquier cosa en un proyecto de React que no se vincule directamente a una plataforma nativa ya se puede compartir. Piense en una aplicación que pueda renderizarse en el servidor, en un navegador web o en Android o iOS, todo impulsado por una base de código compartida. Aunque todavía no hemos llegado a ese punto, la comunidad está trabajando en ello. Mantenga un ojo en el react-native-web proyecto.

Actualizaciones en vivo

Cualquiera que haya enviado una aplicación iOS ha experimentado la frustración de esperar la aprobación de la App Store. Con React Native, es posible realizar actualizaciones en vivo de su aplicación sin pasar por la App Store, al igual que para una aplicación web. Dado que la mayor parte de su aplicación será JavaScript, puede obtener actualizaciones sobre la marcha a través de la red. Ya existen servicios para ayudar con esto como AppHub, o puede construirlo usted mismo. Siempre que su aplicación sepa qué versión se está ejecutando y sepa cómo buscar en el servidor una versión más reciente, puede publicar actualizaciones en su aplicación cuando lo desee. Los tiempos prolongados de aprobación de aplicaciones no son un problema en Android, pero aún puede usar actualizaciones en vivo como una forma de garantizar que sus clientes tengan instalada la última y mejor versión de su aplicación.

Conclusión

Entre la facilidad de desarrollo, la calidad de las aplicaciones creadas con él y la riqueza de la plataforma y el ecosistema, me divertí mucho aprendiendo y construyendo con React Native. Si desea obtener más información, consulte los enlaces a continuación.

Recursos

Deja un comentario