Como começar a desenvolver um aplicativo





Bom dia amigos!



Eu realmente não gosto de fazer autopromoção, mas em uma situação onde uma equipe é formada por uma pessoa, goste ou não, você tem que desenvolver e promover o produto você mesmo.



Qualquer pessoa que esteja procurando por onde começar a desenvolver um aplicativo da web está bem ciente do Boilerplate HTML5 ( site oficial , repositório) De acordo com os desenvolvedores, é "o modelo de front-end mais popular da web". Você não pode discutir com o mais popular, mas você pode fazer isso com modernidade (atendendo às realidades modernas de desenvolvimento web). E isso não é surpreendente: o projeto foi criado há cerca de 6 anos. Muita coisa mudou nos últimos 6 anos. Ao mesmo tempo, pelo que eu posso dizer, nenhuma mudança fundamental foi feita no projeto (var é usado para declarar variáveis, há a possibilidade de adicionar plug-ins jQuery, etc.), exceto, talvez, site.webmanifest, que é inútil sem um service worker (e é melhor usar .json).



Proponho uma espécie de alternativa - um modelo HTML moderno para iniciantes ( site oficial , repositório ).



O projeto inclui o seguinte:



  • index.html com todas as tags meta e link necessárias (general, microsoft, facebook, twitter, apple (ios), android, dados estruturados: schema.org e json-ld)
  • exemplos de uso de tags HTML5 e propriedades CSS3
  • exemplos de uso de módulos CSS e JavaScript
  • trabalhador de serviço offline primeiro
  • manifest.json completo
  • servidor express.js com todos os cabeçalhos de segurança possíveis (útil ao implantar um aplicativo no heroku ou um serviço semelhante que suporte node.js)
  • arquivo netlify.toml com cabeçalhos semelhantes e conexão preliminar dos recursos usados ​​pela página (útil ao implantar um aplicativo para netlify)
  • robots.txt simples
  • sitemap.xml simples
  • minimal browserconfig.xml
  • max .gitignore
  • página de erro 404 do criativo
  • exemplo de construção de um projeto usando webpack
  • como um experimento - um exemplo de projeto AMP (uma nova tecnologia do Google para sites que priorizam dispositivos móveis)


Index.html e server.js (netlify.toml) são, obviamente, o valor principal. Esses arquivos possuem links para a documentação oficial (fonte da verdade). O service worker e o manifesto tornam o aplicativo progressivo. Isso significa que o aplicativo pode ser instalado no telefone e no computador e se comporta como os nativos. Ao armazenar em cache os recursos usados ​​pelo aplicativo, ele funciona offline (na ausência de uma conexão de rede).



Para melhorar a experiência de desenvolvimento, as seguintes ferramentas foram desenvolvidas adicionalmente:





Aqui estão os resultados do teste (o déficit se deve ao uso de recursos de terceiros, como google analytics e métricas Yandex):



Lighthouse







WebPageTest







SecurityHeaders







AMP







Preste atenção também em meu aplicativo principal, que desenvolvo da melhor maneira possível - muito JavaScript (talvez o nome não seja bastante bem-sucedido, mas reflete totalmente a essência do aplicativo). A propósito, o modelo especificado foi usado durante seu desenvolvimento.



Qualquer formulário de feedback, tanto aqui quanto no GitHub, seria bem-vindo.



Obrigado pela atenção e um bom começo de semana de trabalho.



All Articles