preactCalculator
1.0.0
Eu construí este aplicativo como parte de um desafio de codificação para uma posição de desenvolvedor de front -end com uma startup no centro de Austin. Este aplicativo é uma calculadora simples usando o PreACT, CSS-Grid e Flexbox.
Início rápido
conceitos de design
tecnologia usada
Processo de teste e construção
Para testar ou visualizar este aplicativo em sua máquina local, clone este repositório. Navegue até o seu repositório recém -clonado e execute os seguintes comandos:
yarnOu alternativamente para o usuário do NPM:
npm installEm seguida, corra:
yarn startOu alternativamente para usuários da NPM:
npm startNavegue para http: // localhost: 8080/e divirta -se!
Nenhuma especificação de design foi fornecida para esse desafio. Recebi -me livre reinado ao design como quisesse. Tendo em mente o trabalho pelo qual eu estava me candidatando, optei por atender meu produto ao cliente. Como tal, o esquema de cores, a paleta e até o favicon são intencionalmente semelhantes à sua página inicial. (A idéia é que o cliente já tenha exibido uma preferência por esse esquema de design, pois escolheu exatamente o mesmo design para o site de produção. Ele também mostra atenção aos detalhes.)
Aqui estão fotos para comparação.
Site original 
Aplicativo da calculadora 
Eu usei esse desafio de codificação como uma oportunidade de brincar com a nova grade nativa CSS (algo que pretendo fazer por um tempo). A grade do CSS é incrível, mas aparentemente é quase impossível passar as propriedades da área da grade como adereços.
Eu também usei o Flexbox para centralizar o conteúdo e os elementos. Sou um grande fã do Flexbox e prefiro fortemente a outras soluções de grade de terceiros ou usando carros alegóricos para posicionamento do elemento.
Este aplicativo também é provavelmente a primeira vez que tive um caso de uso justificável para o recurso Calc ()! Estou usando calc () para definir a altura da página principal igual a 100VH menos a altura da barra de cabeçalho e um deslocamento inferior para garantir que os elementos não se sobreponham.
Durante todo o processo de design, tentei aderir a alguns princípios básicos de design da interface do usuário, conforme descrito aqui https://medium.com/@erikdkennedy/7-Rules-for-creating-gorgeous-ui-part-1-559d4e805cda
Este aplicativo usa:
Grade nativa do CSS
Flexbox
Preact
PREACT-ROUTER
Preact cli
Mocha
Chai
Eslint
A grade nativa do CSS é bastante impressionante, embora o suporte ao navegador possa estar faltando em navegadores mais antigos. Aparentemente, é incrivelmente difícil passar os estilos CSS como adereços para outros componentes aninhados. Especialmente quando cada componente infantil requer um atributo de posição exclusivo para trabalhar com a grade nativa do CSS. Avaliando os adereços do tipo string em uma referência para falhas de estilo de classe CSS. Mesmo ao usar exemplos diretamente da documentação do PREACT. O CSS-Grid não aceita strings como argumentos da área de grade. Meu programa não pode discernir entre uma referência CSS VAR e uma referência JS.
O Flexbox é incrível e possui melhor suporte ao navegador que a grade nativa do CSS. Não é mais necessário dizer sobre isso.
O PREACT é uma tecnologia interessante. Eu gosto que é leve, também gosto de sua funcionalidade rápida e que é uma combinação quase perfeita para reagir, mas com uma licença do MIT. Sinto que algumas das ferramentas de construção estão ausentes quando comparadas ao ecossistema React.
Pré-Router neste aplicativo é apenas uma configuração minimalista. Não lidei com isso o suficiente para falar sobre isso em profundidade.
A configuração da PREACT CLI falha fora da caixa, tanto na falta de um comando de teste quanto em uma configuração ESLint mal configurada (ou código escrito por eles que viola suas próprias regras de validação). Falta a configuração de teste e eu tive que configurar o meu (mais sobre isso mais tarde). Para qualquer sistema de compilação, o uso do karma é quase obrigatório do que eu recreio. O comando de construção deles também falha.
Eu uso mocha e chai para minha configuração de suíte de teste. É um clássico testado no momento.
Eslint foi incluído fora da caixa (falhando, será coberto com mais detalhes posteriormente).
Toda a lógica do aplicativo contida no componente da calculadora. Todos os outros são componentes puros/funcionais. Se eu precisasse criar um aplicativo mais complexo, o MOBX ou o Redux estariam em ordem.
Mobx ou Redux também teriam ajudado no teste de função. Inicialmente, tentei dissipar a lógica do componente, mas é difícil preservar o contexto de 'isso' em relação à lógica que modifica o estado. Portanto, optei por escrever a lógica diretamente no componente. A importação de métodos que requerem a conscientização do estado de um arquivo separado sem um contexto de estado complica desnecessariamente as coisas (é um exagero, pois temos apenas alguns métodos neste aplicativo).
Sobre o tópico de estado, o JavaScript Eval () não aceitará um operando sem cordas. Ele vai lidar com números inteiros muito bem, mas desligar um operando e, portanto, ajudá -lo a Deus, sua aplicação está condenada! Estou lidando com todos os dados críticos de cálculo no estado como uma string para garantir que isso não aconteça.
Em uma nota aleatória, este aplicativo é executado no host localhost, pontua com curiosidades mais altas na avaliação da caixa de luz em todas as 4 categorias de PWA, desempenho, acessibilidade e práticas recomendadas quando comparadas ao site de produção atual dos clientes.
Tentei manter dependências adicionais no mínimo durante o desenvolvimento de aplicativos.
O conjunto de testes pode ser executado com yarn test ou npm test . O conjunto de testes assume uma instalação global de mocha em sua máquina.
A própria biblioteca preact tem questões abertas relacionadas a testes = preactjs/prekt#658, sua solução alternativa é usar uma biblioteca pouco conhecida chamada https://github.com/developit/preact-jsx-chai/, infelizmente, que a biblioteca não parecia trabalhar para mim.
A configuração de teste é uma dor. As configurações de Babel estão ocultas por Preact-Cil. Não é possível acessar a configuração. Obtendo "Importação inesperada de token, mesmo quando coloco o arquivo de teste no mesmo dir que o próprio componente". Os testes terão que esperar. Feito novamente, eu teria que implementar outra alternativa para permitir o teste de função separado.
Sobre o tema dos testes, aqui está uma tonelada de questões relacionadas a ele:
Preactjs/PréCT-Compat#233
Preactjs/Preact#146
https://gist.github.com/robertknight/88e9d10cff9269c55d453e5fb8364f47 (Infelizmente, a falta de configuração e configuração intuitivas do webpack ainda leva à falha com esse método)
Preactjs/Preact#658 (edição aberta, configuração de teste de pré -reagt difícil é um problema conhecido sem solução atual.)
Preactjs/PreAct#560 (toca em como o Preact é opinativo e requer o karma como outra dependência.)
https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf (foi o que eu tentei primeiro. Não há sorte com isso.)
https://preactjs.com/guide/unit-testing-with-enzyme (sua documentação é literalmente uma seção. e não oferece nenhuma alternativa à sua configuração exata do karma.)
E no linhagem, o ESLint falha fora da caixa. Eu recuo usando 4 espaços. O plug -in padrão do ESLint PreACT é definido como guias, o que está fazendo com que os erros sejam lançados. Independentemente disso, a configuração de teste é executada e está em vigor para plugar e reproduzir qualquer configuração de configuração ESLINT. Eu seria capaz de reconfigurar instantaneamente essa configuração para corresponder a todos os requisitos específicos do cliente.
