El conjunto react-boilerplate recientemente, el 26 de junio de
2018 , se actualizó a la versión 3.6.0. Esta asamblea ya tiene más de tres años, pero, destacando notablemente en el contexto de muchos
otros (más de 18 mil estrellas GitHub), casi nunca se vio en Habré. ¿Cuál es su característica? En resumen: ¡el ensamblaje ofrece al desarrollador "todo a la vez"!
Primero sobre triste
Primero, un poco sobre cosas tristes. El valor de las compilaciones iniciales para proyectos de reacción es enorme. Como sabes, React en sí es solo una biblioteca que implementa el nivel de presentación, y para crear una aplicación completa, necesitarás usar muchas otras bibliotecas, ya que el ecosistema React ofrece muchas de ellas. Por esta razón, la configuración del proyecto React es un problema grave, cuya solución es extremadamente difícil de encontrar para un desarrollador individual. El propio Dan Abramov entiende perfectamente esto, afirmando: "La configuración no debe obstaculizar el comienzo ". Y ofrece una solución: Crear React App . En este ensamblaje inicial, que ganó considerable popularidad (más de 51 mil estrellas GitHub), los autores trataron de proteger al desarrollador de problemas de configuración tanto como sea posible, ocultando la configuración predeterminada, reduciendo el conjunto de módulos al mínimo, brindando la posibilidad de generación automática de componentes, creando así una sensación de simplicidad y facilidad de desarrollo de una aplicación de reacción. Además, ellos, basados en el mismo mensaje, ofrecen su lista de ensambles recomendados. El enfoque probablemente sea bueno para atraer a los recién llegados, pero se agota rápidamente con sus limitaciones y problemas de configuración, problemas de aplicación de los mejores módulos, las mejores prácticas aún deben abordarse. ¿ Y qué hay de , por ejemplo, un desarrollador que está desarrollando su primer proyecto de reacción?
Hay una salida
El ensamblaje reaccionar-caldera es un enfoque alternativo para resolver el problema y ofrece "todo a la vez". Este es un conjunto de módulos reconocidos como estándar de facto y probados en el trabajo, un conjunto en el que se aplican las mejores prácticas en la organización del proyecto, que incluyen tener en cuenta la escalabilidad y el rendimiento, se introducen tecnologías que ayudan al programador a desarrollar y depurar rápidamente el código.
Los desarrolladores de ensamblajes lo posicionan como "escalable primero" altamente escalable (una vez que la aplicación descargada funciona sin conexión), teniendo en cuenta la experiencia de los mejores desarrolladores, orientada a un alto rendimiento y construida de acuerdo con la "mejor práctica", fuerte, "lista para producción", base probada en batalla para desarrollar aplicaciones de reacción.
Bibliotecas Aplicables
Más información sobre los módulos utilizados:
- React, v16.4 (Fiber) : una implementación progresiva del algoritmo React clave que aumenta la productividad en el desarrollo de tareas tales como animación, organización de elementos en la página y movimiento de elementos;
- React Router , v4.3: un enrutador de facto para aplicaciones de reacción que permite crear aplicaciones con URL amigables para los motores de búsqueda;
- Redux , v4: una biblioteca que proporciona un flujo de datos estrictamente unidireccional, que hace que la lógica de la aplicación sea más predecible y más fácil de entender;
- Redux Saga , v0.16: una biblioteca diseñada para simplificar y mejorar la ejecución de los efectos secundarios (es decir, acciones como operaciones asincrónicas como cargar datos, etc.) en aplicaciones React / Redux;
- Vuelva a seleccionar , v3: una biblioteca que le permite evitar el rediseño y el recuento innecesarios de los datos recibidos, lo que, a su vez, acelera la aplicación React / Redux;
- ImmutableJS , v4: una biblioteca que facilita el trabajo con datos inmutables en aplicaciones React / Redux;
- Componentes con estilo , v3.3: una biblioteca que le permite deshacerse de las clases CSS como una etapa intermedia entre un componente y sus estilos;
- React Loadable, v5.4: una biblioteca que le permite implementar un enfoque orientado a componentes para la separación de código e implementar la carga tardía;
- Jest v23.1, Enzyme v3.3: bibliotecas para probar aplicaciones de reacción.
Escalabilidad y rendimiento
El ensamblaje ha implementado consistentemente los principios de soporte para la escalabilidad y el aumento de la productividad, detallados por el desarrollador del ensamblaje Max Stoiber en su conferencia "Aplicaciones Scaling ReactJS" y Dan Abramov en la conferencia "Componentes de presentación y componentes del contenedor" .
En particular, estos principios incluyen:
- separación de componentes en presentación y contenedores;
- colocación de código según el principio de un componente: una carpeta;
- el uso de herramientas modernas (componentes con estilo, módulos CSS) para resolver problemas de herencia CSS en grandes proyectos;
- Aplicación Redux / Saga para racionalizar el flujo de datos, simplificando las operaciones asincrónicas.
Codificación, depuración, prueba
El ensamblaje ofrece amplias oportunidades para ayudar al programador a escribir y depurar código:
- JavaScript de próxima generación (plantillas en minúsculas, reestructuración de objetos, sintaxis JSX, etc.);
- generación rápida de componentes / contenedores / rutas con sus selectores, sagas, reductores y pruebas a través de la línea de comando;
- "Intercambio en caliente" de los módulos, lo que permite sin demora ver los resultados de los cambios realizados en el código de la aplicación;
- uso del complemento Webpack Dll , que mejora el tiempo de inicio de la aplicación en el servidor en un 40% y durante la "recarga en caliente" de los módulos;
- usando AppVeyor y TravisCI (los archivos de instalación se incluyen por defecto), lo que le permite ejecutar automáticamente pruebas de aplicaciones en Windows y Unix;
- análisis de código estático: ESLint , Prettier y stylelint verifican y formatean automáticamente el código en su editor (se requiere configuración , se adjuntan archivos de configuración e instrucciones );
- colocación en Heroku , servicios en la nube de AWS S3 : (se requiere configuración, instrucciones incluidas).
Línea de comando
El ensamblado proporciona, como ya se mencionó, un conjunto de comandos para la línea de comandos, en el que se implementan muchas características necesarias para el desarrollador, que incluyen:
- inicialización de un nuevo proyecto con 100% de cobertura de prueba;
- iniciar la aplicación en el servidor del desarrollador;
- generación de componentes, contenedores con sus selectores, sagas, reductores y pruebas;
- generación de la versión de "producción" del código del proyecto;
- prueba de proyectos;
- depuración remota, que permite utilizar el servicio Ngrok para proporcionar acceso seguro al servidor local desde Internet;
- linting
- gestión de traducción (agregar idiomas, extraer mensajes a archivos J18 i18n);
- La creación de perfiles, aunque mencionada entre los méritos de la línea de comandos de construcción, desafortunadamente no se encuentra.
¿Hay algo superfluo?
Si decide que no necesita algunos módulos, puede eliminarlos y el ensamblaje lo ayudará con sus instrucciones ( aquí y aquí ).
¿Crees que falta algo?
Características adicionales proporcionadas por el ensamblaje:
- "Sin conexión primero", lo que significa que una vez que la aplicación descargada funciona sin conexión, incluso en navegadores antiguos;
- "Aplicación web nativa" significa que, tras visitas repetidas a la aplicación, el usuario recibirá una invitación para agregar un ícono a la pantalla de inicio y la aplicación se puede usar exactamente como una aplicación "nativa" (pero sin restricciones impuestas por las tiendas de aplicaciones);
- soporte para la optimización de motores de búsqueda (gestión de etiquetas de encabezado de página) para motores de búsqueda que admiten indexación de contenido JavaScript;
- Carga rápida de fuentes web, que elimina el retraso de visualización de la página asociado con el retraso de carga de fuentes;
- optimización de imágenes a través del cargador de imágenes de Webpack.
La documentación
El ensamblaje está bien documentado y, por ejemplo, incluso contiene una sección sobre la resolución de posibles problemas .
Actualizaciones, Errores
El proyecto se actualiza regularmente, respondiendo rápidamente a los cambios en sus módulos constituyentes (última actualización 26/06/2018), resuelve problemas activamente: por ejemplo, el 11/08/2018, se resolvieron 1367 y 9 problemas están en proceso de resolución.
¿Y qué?
Por lo tanto, el ensamblaje ofrece un excelente ejemplo de la configuración completa del proyecto React, crea condiciones para que el programador acelere la escritura y depuración de código, ofrece ejemplos de la implementación de las mejores prácticas utilizadas en el desarrollo de aplicaciones altamente escalables y productivas.
Y finalmente , un mensaje del autor de la asamblea Maximilian Stoiber y su equipo:
"Si necesita una base sólida y probada en la batalla para construir su próximo superalimento, y tiene algo de experiencia con React, ¡esto es perfecto para usted!"