Categoria: 🖥 Desenvolvimento

Categorias
🖥 Desenvolvimento

Packages excelentes do Laravel para desenvolvimento Back-End

O Laravel é um framework PHP, excelente para criar aplicações tanto simples quanto robustas, voltado para o Back-End. Porém o Front-End pode ser implementado tanto separadamente com APIs, quanto dentro do projeto, usando diversos tipos de frameworks (vue, react, bootstrap, …).

Com o Laravel é possível criar desde projetos básicos e simples, até robustos e complexos, contando com uma vasta comunidade de desenvolvedores e uma imensa rede de packages disponíveis. Os packages PHP disponíveis, ficam localizados no Packagist, que atualmente é o principal repositório do Composer. Ele agrega pacotes PHP públicos instaláveis ​​com o Composer.

Abaixo será listado algumas das bibliotecas mais relevantes para usar dentro de um projeto Laravel:

Laravel Breeze

O Laravel Breeze é uma implementação simples de todos os recursos de autenticação do Laravel, incluindo login, cadastro, redefinição de senha, verificação de e-mail e confirmação de senha. Além disso, inclui uma página simples de Profile onde o usuário pode atualizar seu nome, endereço de e-mail e senha.

A camada de visualização padrão do Laravel Breeze é composta de modelos Blade, simples e estilizados com Tailwind CSS, mas também podendo ser estruturado usando Vue ou React e Inertia. O Breeze fornece um excelente ponto de partida para iniciar um novo projeto Laravel.

Laravel Sail

O Laravel Sail é uma interface de linha de comando leve para interagir com o ambiente de desenvolvimento Docker padrão do Laravel. O Sail fornece um excelente ponto de partida para criar um aplicativo Laravel usando PHP, MySQL e Redis sem exigir experiência anterior com o Docker.

Permitindo uma visualização inicial do seu projeto muito mais rápido e fácil sem a necessidade de instalar diversos programas, um para cada tipo de tecnologia que irá utilizar dentro do projeto, aglomerando tudo dentro de containers Docker.

Laravel Telescope

O Laravel Telescope é uma ferramenta maravilhosa para o seu ambiente de desenvolvimento local. O Telescope fornece informações sobre as requisições que chegam ao seu projeto, exceções, entradas de log, consultas de banco de dados, jobs em fila, e-mails, notificações, operações de cache, tarefas agendadas ​​e muito mais.

Permitindo um gerenciamento muito maior de todos os erros e ações ocorridos dentro da sua aplicação local em laravel e tudo isso dentro de uma interface muito direta.

Laravel Horizon

O Laravel Horizon fornece um belo painel e configuração orientada por código para suas filas Redis alimentadas pelo Laravel. O Horizon permite que você monitore facilmente as principais métricas de seu sistema de filas, como taxa de transferência de trabalho, tempo de execução e falhas que ocorreram em filas.

Laravel Dusk

O Laravel Dusk fornece uma API para automação de testes fácil de utilizar. Por padrão, o Dusk não exige que você instale o JDK ou o Selenium em seu computador local. Em vez disso, o Dusk usa uma instalação autônoma do ChromeDriver. No entanto, você é livre para utilizar qualquer outro driver compatível com o Selenium que desejar, caso já esteja mais familiarizado.

Conclusão

Lembre-se que existem inúmeros packages para se utilizar dentro do Laravel, mas aqui foram listados apenas alguns deles, caso tenha algum outro que seja incrível e muito útil para o dia-a-dia dos Devs, comente aqui.

()
Categorias
🖥 Desenvolvimento

Criando um Custom Hook utilizando o Intersection Observer API

Imagine se deparar com o seguinte problema: Você deve carregar uma imagem para o usuário somente quando ele ver o componente na tela. Uma das coisas mais complexas no desenvolvimento web é saber exatamente quando um elemento aparece pelo usuário.

Primeiramente pensei em fazer cálculos com o scroll event, porém isso poderia facilmente trazer problemas de performance para a aplicação. Então, fiz como todo bom desenvolvedor, passei horas pesquisando possíveis soluções e encontrei uma de implementação bem simples, sem necessidade de trazer libs para o projeto, o Intersection Observer API.

Como o Intersection Observer API funciona ?


O Intersection Observer API é uma API do browser, de forma resumida, ela observa um elemento alvo e informa quando há a interseção desse elemento alvo com um outro elemento ou o com viewport. Em outras palavras, com essa API é possível saber quando o elemento aparece para o usuário. Para mais detalhes da API aqui está a documentação dela.



Essa API espera dois parâmetros, um callback e um objeto, com as opções para a API observar o elemento. Essas opções são o root, rootMargin e threshold.  

root: O elemento que é utilizado como viewport para o elemento alvo, se passado root com “null” o próprio viewport é utilizado.

rootMargin: Margin em volta do root. Pode ser usado como um CSS convencional de margin, por exemplo “10px 15px 10px 15px”. Esse valor serve para aumentar ou diminuir um espaço nos lados do elemento root antes de começar a calcular a intersecção. Por padrão é zero.

threshold: Um valor que pode variar entre 0 e 1, que indica a porcentagem e visibilidade que o componente deve aparecer para disparar o callback. Por exemplo, se o valor é 0.5, o elemento deve estar 50% visível para o callback ser disparado. Também é possível passar um array de valores para que em cada valor o callback seja executado.

Como usar isso em um custom hook ?

A ideia do custom hook que iremos criar é retornar uma referência para ser usada no elemento alvo e um booleano em que informa se o elemento alvo está visível recebendo como parâmetro as opções do nosso Intersection Observer API.


Para a referência utilizamos o hook useRef, e com o hook useState teremos o estado do elemento visível ou não, que alterado pelo nosso callback do Intersection Observer API. O próximo passo é criar o nosso callback, utilizamos o useCallback para que ele seja sempre a mesma função mesmo o componente que utilizar o custom hook tenha um re-render.

Bom, já temos nossas options e o callback, agora de fato vamos utilizar o Intersection Observer API e deixar no hook completo.

 
O useRef também serve para armazenar dados para serem inalterados ao houver um re-render. Ou seja, caso haja um re-render o valor da ref ainda será o da primeira renderização. Assim, na linha 45 criamos uma referência para o observer. Entre a linha 67, criamos uma instância de IntersectionObserver com nosso o callback e as options. Na linha 71, vemos se a referência do elemento está sendo utilizada para ser observada. Caso houver um re-render, a linha 65 serve para desativar nosso observer, que será o mesmo do primeiro render.

()
Categorias
🖥 Desenvolvimento

Bibliotecas incríveis do React para desenvolvimento Front-End

Não há dúvida de que o React é o framework front-end mais popular atualmente.

Novas aplicações web são criadas usando o React ou seus frameworks, como NextJS e Gatsby. O sucesso de qualquer framework não depende apenas do seu desempenho, mas também das bibliotecas de terceiros que o suportam.

Existem muitas bibliotecas JavaScript e React. Elas suportam gerenciadores de pacotes como npm, yarn e pnpm. 

Hoje, vou listar algumas das bibliotecas mais relevantes para usar com React no front-end.

Vamos começar.

React Router

React Router é uma das bibliotecas mais instaladas para o React. Há cerca de 8 milhões de instalações por semana. Essa biblioteca fornece uma facilidade de roteamento para o React e agora se tornou um recurso central do React.

Redux

Redux é uma popular biblioteca JavaScript de código aberto usada para gerenciar o estado de aplicações web. É um contêiner de estado previsível para aplicativos JavaScript. Isso ajuda a gerenciar o estado de um aplicativo de maneira mais organizada e centralizada, tornando mais fácil depurar e manter.

Chakra UI

Chakra UI é a minha biblioteca preferida para obter componentes React personalizáveis. Ele usa um sistema de tema flexível baseado na biblioteca Styled System, que permite criar estilos consistentes e reutilizáveis para seus componentes.

Características relevantes do Chakra UI

  • Fácil de usar
  • Muitos componentes
  • Facilmente personalizável de acordo com a UI
  • Pode ajudar a construir a parte frontal em muito menos tempo
  • Ele também tem excelente documentação e uma comunidade ativa, o que torna fácil começar e encontrar ajuda quando necessário.

Axios

Axios é uma biblioteca JavaScript popular usada para fazer solicitações HTTP a partir de navegadores da web ou Node.js. Esta biblioteca não é restrita ao frontend, mas estende sua capacidade para o meu backend também. 

Com o Axios, é fácil definir cabeçalhos, parâmetros de consulta e dados de solicitação. Ele também suporta vários mecanismos de autenticação, como autenticação básica, autenticação de token e OAuth2.

React Helmet

React Helmet é uma biblioteca de código aberto popular para o React que fornece uma maneira simples de gerenciar a seção head das suas páginas web. SEO é uma parte crucial de um site, além do desenvolvimento web.

Adicionar informações relevantes a ele aumentará a classificação do SEO.

Com o React Helmet, é possível alterar dinamicamente o conteúdo do cabeçalho, incluindo o título, meta tags, folhas de estilo e scripts.

React Testing Library

A React Testing Library é uma biblioteca de teste open-source para aplicativos React que se concentra em testar o comportamento do usuário em vez de detalhes de implementação.

É projetada para incentivar os desenvolvedores a escrever testes que sejam mais legíveis, mantíveis e resistentes a mudanças.

A React Testing Library é uma biblioteca poderosa e flexível que pode ajudá-lo a escrever testes mais eficazes.

Seu foco no teste do comportamento do usuário em vez de detalhes de implementação, juntamente com suas ferramentas de teste de acessibilidade e diretrizes de teste, tornam-na uma escolha popular para desenvolvedores que desejam melhorar a qualidade e confiabilidade de seu código.

Framer Motion

Quando se trata de adicionar animação a componentes React, o Framer Motion é minha primeira escolha. Ele ajuda a criar animações impressionantes e fluidas para suas aplicações web. Dá muito controle à animação.

Uma das principais características do Framer Motion é seu suporte para variantes. As variantes são estados de animação reutilizáveis que definem um conjunto de propriedades e valores para um componente.

Conclusão

O React é uma biblioteca JavaScript poderosa e popular para a criação de interfaces de usuário dinâmicas e interativas. 

No entanto, para aprimorar seu desenvolvimento React, é importante considerar o uso de outras bibliotecas, como o React Helmet, a React Testing Library e o Framer Motion. 

Essas bibliotecas fornecem recursos poderosos que podem simplificar tarefas comuns e melhorar a funcionalidade de seus aplicativos. 

Lembre-se de que há outras bibliotecas importantes que você pode usar para melhorar ainda mais sua experiência de desenvolvimento React.

Comente abaixo se você tiver alguma outra biblioteca em mente. ()

Categorias
🏢 Outsourcing de TI 📈 Mercado de TI 🖥 Desenvolvimento

4 passos para construir um time tech de alta performance

Um dos maiores desafios das empresas na atualidade é conseguir montar times próprios de tecnologia de alta performance para atuação no mercado. Por se tratar de uma área bastante aquecida – especialmente após a pandemia – e com grandes índices de rotatividade, essa tarefa não costuma ser algo simples no dia a dia das organizações. 

Diante disso, tendo em vista que uma boa equipe de TI pode ser a chave para promover a transformação digital em sua empresa, que tal conferir agora 4 passos para construir times tech de alta performance? Vamos lá:

Passo 1: Conheça bem seu produto e saiba quais são as principais necessidades dos usuários 

Antes de dar início a qualquer projeto, você precisa ter em mente quais são as reais necessidades do projeto em si. Ou seja, o primeiro passo de como montar uma equipe de TI de alta performance é conhecer bem o produto que a sua empresa oferece e, principalmente, quais as necessidades dos usuários são solucionadas a partir dele. A partir desse momento, você terá muito mais clareza sobre quais serão os profissionais necessários para executar o trabalho e assim dar início à busca por um time especializado. 

Passo 2: Seja transparente a respeito dos objetivos e metas de trabalho 

A transparência é um dos aspectos mais importantes na hora de montar qualquer equipe, ainda mais se tratando de um time de TI de alta performance. Por isso, é fundamental esclarecer para os profissionais exatamente qual é o escopo do projeto, quais são os objetivos e metas que devem ser alcançados e também quais serão as responsabilidades de cada função estabelecida. Isso irá evitar possíveis mal-entendidos que acabam gerando insatisfação e, consequentemente, diminuem tanto a produtividade quanto a qualidade das entregas do projeto.

Passo 3: Atente-se ao fit cultural entre profissionais e empresa 

Ter habilidades técnicas é extremamente importante, mas isso não significa que a cultura organizacional não deve ser priorizada. O que isso quer dizer? Antes mesmo de contratar, é fundamental saber se o profissional em questão compartilha dos mesmos valores da empresa. É esse fit cultural que vai auxiliar na adaptação dessa pessoa à rotina de trabalho, evitando assim que haja desmotivação em relação ao ambiente e ao escopo do projeto traçado – que podem inclusive implicar em desligamento da empresa.

Passo 4: Invista em um time especializado e multidisciplinar

Investir em um time especialista e multidisciplinar significa contratar pessoas com diferentes habilidades dentro da área de tech. Neste caso, vale ressaltar que por “habilidades” entende-se tanto hard skills como soft skills. Isso porque o objetivo aqui é trazer pessoas que tenham competências diferentes e ao mesmo tempo relevantes para cada área do projeto. A partir de diversas experiências profissionais, cada um pode trazer novos aprendizados e pontos de vista que só vão fortalecer ainda mais o time e a empresa como um todo. 

Dica extra: Você sabe como é o perfil de um profissional tech de alta performance?

Como mencionado anteriormente, é importante analisar as hard skills e as soft skills antes mesmo da contratação. Essas são habilidades que irão resultar em times de alta performance, pois são elas que fortalecem a equipe e dão mais expertise às ações. 

Hard skills são as habilidades técnicas, relacionadas aos conhecimentos especializados que cada profissional construiu ao longo da carreira. Veja alguns exemplos na área de tecnologia:

  • Pessoas desenvolvedoras (DEVs): Esses são os profissionais de TI que possuem conhecimento em linguagens e códigos da área de tecnologia. Normalmente atuam com Front-end, Back-end, Full Stack, Mobile, DevOps, entre outros.
  • UX/UI Designer: São os profissionais responsáveis por conectar as particularidades do sistema desenvolvido no projeto com a experiência do usuário. Ou seja, fornecem melhor usabilidade ou utilidade para os consumidores finais. 
  • Product Owner (PO): Esses profissionais são quem acompanha toda a jornada do cliente até o sucesso, dando também um suporte estratégico no desenvolvimento de maneira geral. O intuito é saber priorizar quais são as demandas mais importantes para o projeto.
  • Scrum Master: Desempenham o papel de líderes do projeto, auxiliando também o PO a estabelecer as prioridades do momento, além de auxiliar o time tech a entregar todo o valor necessário. É quem se responsabiliza por unir todas as pontas e garantir que o Scrum está sendo aplicado.

Já as soft skills são as habilidades que vão além do lado técnico e estão conectadas com as competências humanas de cada profissional. Essas são as habilidades necessárias para um bom relacionamento não somente entre o time, mas também entre o time e os demais stakeholders. Confira algumas delas:

  • Colaboração: Saber como trabalhar em equipe é essencial para times techs de alta performance pois, quase sempre, as áreas irão necessitar de auxílio umas das outras para concluir com sucesso alguma tarefa ao longo da rotina de trabalho.
  • Pensamento crítico: Essa competência ajuda a solucionar problemas complexos a partir do raciocínio lógico. Com o pensamento crítico, os profissionais têm mais clareza de onde colocar seus esforços e qual a melhor maneira de atacar os pontos primordiais do projeto.
  • Criatividade: Para construir soluções inovadoras, a criatividade é uma competência muito valiosa. Essa habilidade representa a capacidade de pensar além do óbvio e propor novos caminhos para situações ainda não experimentadas, o que dá mais possibilidades para o projeto.
  • Inteligência emocional: Essa representa a capacidade de entender seus sentimentos, controlar e expressar bem as suas emoções. Tem muito a ver com a comunicação assertiva e a forma como o profissional interage com as demais pessoas do time, impactando diretamente na relação entre os pares e líderes. 

Agora que você já sabe como construir um time tech de alta performance, que tal começar a contratar? 

A eNe Soluções ajuda você a implementar um modelo de trabalho ágil com times tech completos e de acordo com a necessidade do seu projeto. Nós criamos, construímos e desenvolvemos soluções digitais com base nos três pilares: a experiência do usuário, os objetivos do negócio do cliente e o desenvolvimento da programação ideal com as melhores tecnologias para atingir os resultados.

()