Flowics: flui v39

Link al documento completo

Motivación inicial

Motivación inicial

  • ¿Se usa?
  • ¿Tiene valor?
  • ¿Es responsabilidad de flui?
  • ¿El componente hace más de lo que debería?

Desarrollos del PR

Desarrollos del PR

  • Nuevo target de compilación: ES6.
  • Reducción de deps en bundle.
  • Reemplazo de HoCs por hooks.
  • Nuevo HoC de internacionalización.

Desarrollos del PR

Reducción de deps en bundle

  • No todas las deps están escritas en ES6. Es muy probable que ni siquiera la mitad.
     
  • Todas ofrecen un archivo index en el root de la dep para facilitar el consumo de lo que ofrecen.
     
  • Problema: se arrastra todo por, tal vez, una función.
     
  • Solución: consumir los módulos específicos.
// packages/flui/src/DatePicker/DateRangePicker.tsx











- import 'react-dates/initialize';
+ import 'react-dates/lib/initialize.js';

- import {
-   FocusedInputShape,
-   DayPickerRangeControllerShape,
-   DayPickerRangeController,
- } from 'react-dates';
+ import DayPickerRangeController from 'react-dates/lib/components/DayPickerRangeController.js';
+ type FocusedInputShape = import('react-dates').FocusedInputShape;
+ type DayPickerRangeControllerShape = import('react-dates').DayPickerRangeControllerShape;
+ type DayPickerRangeController = import('react-dates').DayPickerRangeController;

Desarrollos del PR

Nuevo HoC de Internacionalización

  • Es un Wrapper de react-intl/IntlProvider.
     
  • Muestra un loader personalizable durante la carga de las traducciones.
     
  • Usa el nuevo hook useIntlData.

Desarrollos del PR

useIntlData

  • Necesita sí o sí de configuración específica de webpack.
     
  • Limita las i18n de cada dep a español, inglés y portugués. Aplica a react-intl, moment, intl (polyfill de window.Intl).
     
  • Carga archivos específicos, al igual que se hizo con react-dates.
     
  • NUEVO: permite cambiar de idioma dinámicamente.

Hooks'n 𝒇(𝒙) Components

Hooks'n 𝒇(𝒙) Components

  • Nueva API de facto para React: las nuevas funcionalidades están implementadas con hooks en mente.
     
  • Reduce código de bundle.
     
  • Migración lenta y de la mano de refactors.
     
  • Composición a través de una API descriptiva.
     
  • Evidencia bugs que con las clases son más difíciles de detectar.

¿Qué depara el futuro?

  • Componentes a refactorizar:

  • Generalización, reimplementación y refactorización:

  • Métricas y optimización:

  • ESModules y target:

    • Relacionado a JS-Commons como proyecto: DEV-12772.

Made with Slides.com