preactCalculator
1.0.0
Construí esta aplicación como parte de un desafío de codificación para una publicación de desarrollador frontend con una startup en el centro de Austin. Esta aplicación es una calculadora simple que usa Preact, CSS-Grid y Flexbox.
comienzo rápido
conceptos de diseño
tecnología utilizada
Proceso de prueba y construcción
Para probar o ver esta aplicación en su máquina local, clone este repositorio. Navegue a su repositorio recién clonado y ejecute los siguientes comandos:
yarnO alternativamente para el usuario de NPM:
npm installLuego corre:
yarn startO alternativamente para usuarios de NPM:
npm startNavegue a http: // localhost: 8080/¡y diviértete!
No se proporcionaron especificaciones de diseño para este desafío. Me dieron un reinado gratuito para diseñar como quisiera. Teniendo en cuenta el trabajo para el que estaba solicitando, opté por atender mi producto al cliente. Como tal, el esquema de color, la paleta e incluso Favicon son intencionalmente similares a su página de inicio. (La idea es que el cliente ya ha mostrado una preferencia por este esquema de diseño, ya que ha elegido exactamente el mismo diseño para su sitio web de producción. También muestra atención a los detalles).
Aquí hay fotos para la comparación.
Sitio web original 
Aplicación de calculadora 
Usé este desafío de codificación como una oportunidad para jugar con la nueva cuadrícula CSS nativa (algo que he tenido la intención de hacer por un tiempo). La cuadrícula CSS es sorprendente, pero aparentemente es casi imposible pasar las propiedades del área de la red como accesorios.
También usé FlexBox para centrar el contenido y los elementos. Soy un gran admirador de FlexBox y lo prefiero encarecidamente sobre otras soluciones de cuadrícula de terceros o usando flotadores para el posicionamiento de elementos.
¡Esta aplicación también es probablemente la primera vez que tengo un caso de uso justificable para la función Calc ()! Estoy usando Calc () para establecer la altura de la página principal igual a 100 VH menos la altura de la barra de encabezado y un desplazamiento inferior para garantizar que los elementos no se superpongan.
A lo largo del proceso de diseño, intenté adherirme a algunos principios básicos de diseño de la interfaz de usuario como se describe aquí https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
Esta aplicación usa:
Cuadrícula nativa de CSS
Flexbox
Preaccionar
Enrutador preactante
Preactar CLI
Moca
Chai
Eslint
La cuadrícula nativa de CSS es bastante impresionante, aunque el soporte de los navegadores puede faltar en navegadores más antiguos. Aparentemente es increíblemente difícil pasar los estilos CSS como accesorios para otros componentes anidados. Especialmente cuando cada componente infantil requiere un atributo de posición único para trabajar con la red nativa de CSS. La evaluación de los accesorios de tipo de cadena en una referencia para el estilo de clase CSS falla. Incluso cuando se usa ejemplos directamente de la documentación de preactación. CSS-Grid no acepta cadenas como argumentos del área de la red. Mi programa no puede discernir entre una referencia CSS VAR y una referencia JS.
Flexbox es increíble y tiene un mejor soporte de navegador que la cuadrícula nativa de CSS. No es necesario decir más al respecto.
Preact es una tecnología interesante. Me gusta que sea liviano, también me gusta su funcionalidad rápida y que es una combinación casi perfecta para React pero con una licencia MIT. Siento que faltan algunas de las herramientas de compilación para TI en comparación con el ecosistema React.
PreAct-Router en esta aplicación es solo una configuración minimalista. No lo he tratado lo suficiente como para hablar sobre eso en profundidad.
La configuración de Preact CLI falla fuera del cuadro tanto en su falta de un comando de prueba como en una configuración de Eslint mal configurada (o código escrito por ellos que viola sus propias reglas de validación). Falta la configuración de las pruebas y tuve que configurar la mía (más sobre esto más adelante). Para cualquier configuración del sistema de compilación, el uso de karma es casi obligatorio de lo que dedico. Su comando de compilación también falla.
Uso moca y chai para la configuración de mi suite de prueba. Es un clásico probado en el tiempo.
Eslint se incluyó fuera de la caja (falla, se cubrirá con más detalle más adelante).
Toda la lógica de aplicación contenida en el componente de la calculadora. Todos los demás son componentes puros/funcionales. Si hubiera necesitado construir una aplicación más compleja, Mobx o Redux habría estado en orden.
Mobx o Redux también habrían ayudado con las pruebas de funciones. Inicialmente intenté desacoplar la lógica del componente, pero es difícil preservar el contexto de 'esto' con respecto a la lógica que modifica el estado. Por lo tanto, opté por escribir la lógica en el componente directamente. La importación de métodos que requieren conciencia del estado de un archivo separado sin un contexto de estado complican innecesariamente las cosas (de todos modos es exagerado, ya que solo tenemos unos pocos métodos en esta aplicación).
Sobre el tema del estado, el JavaScript Eval () no aceptará un operando que no sea de cadena. Manejará los enteros muy bien, pero incorporará un operando y, por lo tanto, te ayudará a Dios, ¡tu aplicación está condenada! Estoy manejando todos los datos críticos de cálculo en el estado como una cadena para garantizar que esto no suceda.
En una nota aleatoria, esta aplicación se extiende desde localhost con un puntaje más alto en la evaluación de la caja de luz en las 4 categorías de PWA, rendimiento, accesibilidad y mejores prácticas en comparación con el sitio web de producción actual de los clientes.
Intenté mantener dependencias adicionales como mínimo durante el desarrollo de la aplicación.
El conjunto de pruebas se puede ejecutar con yarn test o npm test . La suite de prueba asume una instalación global de moca en su máquina.
La biblioteca PREACT en sí tiene problemas abiertos relacionados con Testing = PREACTJS/PREACT#658 Su solución es usar una biblioteca poco conocida llamada https://github.com/developit/peact-jsx-chai/ Desafortunadamente, esa biblioteca no parecía funcionar para mí.
La configuración de prueba es un dolor. Las configuraciones de Babel están ocultas por Preact-Cil. No se puede acceder a la configuración. Obtener "token inesperado 'importar' incluso cuando coloco el archivo de prueba en el mismo directorio que el componente mismo". Las pruebas tendrán que esperar. Hecho nuevamente, tendría que implementar otra alternativa para permitir pruebas de funciones separadas.
Sobre el tema de las pruebas, aquí hay un montón de problemas relacionados con él:
preactjs/PREACT-COMPAT#233
preactjs/preact#146
https://gist.github.com/robertknight/88e9d10cff9269c55d453e5fb8364f47 (lamentablemente, la falta de configuración y configuración intuitiva de Weback aún conduce a la falla con este método)
PreactJS/Preact#658 (problema abierto, la configuración de prueba de preactación difícil es un problema conocido sin solución actual).
Preactjs/Preact#560 (toca cómo el preact es obstinado y requiere el karma como otra dependencia).
https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf (esto fue lo que intenté primero. No hay suerte con ese tampoco).
https://preactjs.com/guide/unit-testing-with-enzyme (su documentación es literalmente una sección. Y no ofrece una alternativa a su configuración exacta del karma).
Y en la pelusa, el Eslint falla fuera de la caja. Me envío usando 4 espacios. El complemento predeterminado de ESLint Preact se establece en las pestañas que están causando errores. De todos modos, la configuración de prueba se ejecuta y está en su lugar para enchufar y jugar cualquier configuración de configuración de Eslint. Podría volver a configurar instantáneamente esta configuración para que coincida con los requisitos específicos del cliente.
