{"componentChunkName":"component---src-templates-blog-post-js","path":"/o-que-voce-precisa-saber-antes-de-criar-seu-projeto-front-end/","result":{"data":{"markdownRemark":{"fields":{"slug":"/o-que-voce-precisa-saber-antes-de-criar-seu-projeto-front-end/"},"frontmatter":{"titulo":"O que você precisa saber antes de criar seu projeto no front-end","data":"28/09/2021","tag":"ReactJs","image":{"childImageSharp":{"fluid":{"src":"/static/505929a1b50f2253fb0d9eec0d67ebc9/46604/AntesCriarProjectFront.png","base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABVElEQVQ4y61Uu07DMBT1x1SwgURVkthO0iZtQkJbQVmp1AFokRgQTLDDBuyIhQkx8BtIbPwAfxLpcOPGwaGwOdLRudf2PfcRJwyWH/by+gabYJttHzbB/F4Om2Ai3IFNKEEelE6qFni9mS7tYMkatU8sK+i1klm5IaoD3K9sYm4e9BPCYEW4Q9wJs0YipsVUVXEOLhLFdbUk5g724Cb7KkhUwR7xhEeYeL1mhbp3zgeQ8ym8sznkYroULgOjIVrXD2hd3cHtjyEpgdPNkW2H+Dqc4fN4gYO2QIdeiGy0LEkgHyG4P4cYjg3BXaxf3GDt8hZePFKCXjdDz4vwMTvC+8kpMh7DMSusRcsZ9vOfWVYtcxLgVJXZmkucUruZEyq7McMVUe0bAqZdi1Iih/D3DPXADf+/ayNM+1dS+1/KxpaETbDHp2fYBLP+PyyKAjZhv0Lbgt9NRcs3fOUF1gAAAABJRU5ErkJggg==","aspectRatio":1,"srcSet":"/static/505929a1b50f2253fb0d9eec0d67ebc9/7e7e9/AntesCriarProjectFront.png 225w,\n/static/505929a1b50f2253fb0d9eec0d67ebc9/62b1f/AntesCriarProjectFront.png 450w,\n/static/505929a1b50f2253fb0d9eec0d67ebc9/46604/AntesCriarProjectFront.png 500w","sizes":"(max-width: 500px) 100vw, 500px"}}}},"html":"<p>Hoje eu vou te falar o que você precisa saber para criar seu projeto no front-end, com isso você vai aprender a criar sistemas mais escaláveis, criar um software saudável a longo prazo, padronizar processos com alguns passos fáceis. </p>\n<p>Caso você goste de consumir conteúdo em vídeo, se inscreva no canal que falo exatamente sobre isso: </p>\n<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/vZASLXluAOU' frameborder='0' allowfullscreen></iframe></div>\n<p><img src=\"https://media.giphy.com/media/13Nc3xlO1kGg3S/giphy.gif?cid=790b76118d13be12b5f092ecdef5874b1f61d1079af41e53&#x26;rid=giphy.gif&#x26;ct=g\" alt=\"https://media.giphy.com/media/13Nc3xlO1kGg3S/giphy.gif?cid=790b76118d13be12b5f092ecdef5874b1f61d1079af41e53&#x26;rid=giphy.gif&#x26;ct=g\"></p>\n<p>Antigamente, algumas empresas nem pensava nisso, principalmente no front-end, por isso que existem tantos softwares legados e mal arquitetados.</p>\n<h2>O que é design/projetar um sistema?</h2>\n<p>Processo de projetar os elementos de um sistema, arquitetura, módulos, fluxos, como o sistema vai ser executado, o principal objetivo é fornecer dados e informações detalhadas suficientes sobre o sistema e seus elementos de sistema para permitir a implementação consistente com entidades arquitetônicas conforme definido em modelos e visualizações da arquitetura do sistema.</p>\n<h2>Primeiro passo ?</h2>\n<p>Em primeiro lugar, precisamos entender o problema.</p>\n<ul>\n<li>Quantos usuários?</li>\n<li>Como são esses usuários? (idade, como que eles trabalham), se na sua empresa tiver um ui/ux ele provavelmente vai te trazer esses dados prontos</li>\n<li>Precisamos oferecer suporte a dispositivos móveis?</li>\n<li>Suporte offline?</li>\n<li>Internacionalização?</li>\n<li>Acessibilidade?</li>\n<li>Alvos do navegador?</li>\n<li>Listar o que não deve fazer</li>\n<li>Qual é o fluxo de dados (API) / fluxo do usuário, onde o usuário clicará e o que acontecerá.</li>\n<li>SEO é uma preocupação? Sim (SSR) ou então Single Page Application (SPA) é bom o suficiente?</li>\n</ul>\n<p>Depois de respondido todas as perguntas, você já vai ter clareza de como o sistema vai funcionar, o tipo de usuário e como o usuário vai utilizar o sistema. Isso e muito importante ok?</p>\n<h2>Elementos do sistema</h2>\n<ul>\n<li><strong>Arquitetura</strong>:</li>\n</ul>\n<p>Definir a estrutura, o comportamento, podemos usar fluxogramas para representar e ilustrar a arquitetura. Use e abuse de softwares como <a href=\"http://drwa.io/\">drwa.io</a>, <a href=\"https://whimsical.com/\">whimsical</a>, <a href=\"https://www.lucidchart.com/pages/pt\">Lucidchart</a>.</p>\n<ul>\n<li><strong>Módulos</strong>:</li>\n</ul>\n<p>São componentes que tratam de uma tarefa específica em um sistema. Uma combinação dos módulos constitui o sistema. Então, por exemplo, módulo que quase todos os sistemas hoje existem que são de clients, sales, provavelmente no sistema que você utiliza tem milhares de módulos.</p>\n<ul>\n<li><strong>Componentes</strong>:</li>\n</ul>\n<p>Função específica ou grupo de funções relacionadas.</p>\n<ul>\n<li><strong>Interfaces</strong>:</li>\n</ul>\n<p>É o limite compartilhado através do qual os componentes de um sistema trocam informações e se relacionam.</p>\n<ul>\n<li><strong>Dados</strong>:</li>\n</ul>\n<p>Fluxo de informações e dados e o seu gerenciamento.</p>\n<h2>Suposições sobre o produto</h2>\n<ul>\n<li>Suponha quantas interações ocorrem em um dia, vai ter um volume de dados muito grande?</li>\n<li>Qual a resposta media da api?</li>\n</ul>\n<h2>Velocidade / desempenho</h2>\n<p>No seu projeto do front-end e necessário pensar também no gargalo da sua aplicação, você quer um sistema com suavidade e velocidade certo? (todo mundo deseja isso hehehe)</p>\n<p>Se for pensar em suavidade, vamos pensar em:</p>\n<ul>\n<li>Voltar instantâneo (pilha de páginas / cache de API)</li>\n<li>Avance instantâneo</li>\n<li>Animação ou transição?</li>\n</ul>\n<p>Como a gente pode ainda mais simplificar a vida do usuário? Por que o usuário gosta de coisas automáticas, salvar um dado no banco de dados e ser redirecionado para a tela de listagem, em vez dele salvar depois de salvo clicar no botão voltar, coisas simples que fazem total diferença na usabilidade do seu software.</p>\n<p>Agora falando em velocidade alguns pontos podem ser considerados como:</p>\n<ul>\n<li>Pré-carga / pré-busca,</li>\n<li>Divisão de código ou carregamento de esqueleto, dependendo da onde o seu usuário está uma certa parte do sistema não é carregado, ou e carregado conforme ele utiliza o sistema</li>\n<li>Cache / CDN para recursos estáticos</li>\n<li>Trabalhador de serviço (offline) para armazenamento em cache</li>\n<li>Rolagem infinita, já pensou como e feito no facebook?</li>\n<li>SSR / feed de dados iniciais (melhora o primeiro acesso significativa)</li>\n</ul>\n<h3>Imagens</h3>\n<p>Mas a gente também não pode esquecer de um item muito importante no mundo front-end que são as imagens!</p>\n<p>Imagens no front-end impacta na velocidade diretamente então e muito importante pensar nelas e qual método vai ser utilizado no seu sistema.</p>\n<p>Os métodos mais famosos são</p>\n<ul>\n<li>Compress, comprime a imagem</li>\n<li>Lazy Load traduzindo a pontapé é carregamento preguiçoso e uma forma de você adiar o carregamento, então o conteúdo da sua pagina vai carregar primeiro e logo em sequência carrega a imagem</li>\n<li>Progressive images quando a imagem fica com blurry</li>\n<li>Usar SVG para icons que e mais rápido</li>\n<li>Caching / HTTP2 (Browser cache, CDN cache)</li>\n</ul>\n<p>Agora partindo para os dados e a API:</p>\n<ul>\n<li>Você pode utilizar modelo convencia hoje que e o REST</li>\n<li>WebSockets para chats</li>\n<li>GraphQL fornece uma descrição completa e compreensível dos dados em sua API, dá aos clientes o poder de pedir exatamente o que precisam</li>\n</ul>\n<h3>Futuro</h3>\n<p>Por fim não menos importante e o FUTURO e os TODOS</p>\n<ul>\n<li>Ideias de melhorias</li>\n<li>Coisas que podem melhorar, por que programar e assim, você coda hoje e daqui a alguns meses você já pensa no refactor</li>\n</ul>\n<p>E importante mencionar que para criar um projeto novo você precisar colocar a mão na massa, fazer muitos estudos, entender o sistema de forma geral, precisa de muito foco e dedicação como tudo na vida. Acredito que consegui falar boa parte do assunto de hoje, espero que você tenha gostado do conteúdo de hoje!</p>\n<p>Obrigada! Até a próxima. </p>\n<p><img src=\"https://media.giphy.com/media/1ccd9l2mnpOQz96MZM/giphy.gif?cid=790b7611d4735075cf4e1a6895216ec88faac5562efa2ce9&#x26;rid=giphy.gif&#x26;ct=g\" alt=\"https://media.giphy.com/media/1ccd9l2mnpOQz96MZM/giphy.gif?cid=790b7611d4735075cf4e1a6895216ec88faac5562efa2ce9&#x26;rid=giphy.gif&#x26;ct=g\"></p>","timeToRead":4}},"pageContext":{"slug":"/o-que-voce-precisa-saber-antes-de-criar-seu-projeto-front-end/","previousPost":null,"nextPost":{"fields":{"slug":"/-testar-hooks-pode-ser-mais-facil-que-se-pensa/"},"frontmatter":{"templateKey":"blog-post","data":"28 de Abril de 2021","tag":"ReactJs","titulo":"Testar os hooks pode ser mais fácil do que você pensa.","locale":"pt"},"timeToRead":6},"locale":"pt"}}}