Lightning Talk: Teste unitário no Front-end. Tá na hora de perder o medo!

Lightning Talk - Teste unitário em Front-end

Você já parou pra pensar por que quase ninguém faz teste unitário no Front-end? Testar não é algo simples nem no desenvolvimento de software, no desenvolvimento web então…existem algumas barreiras que podem deixar qualquer um tenso sobre testes.

O que é teste unitário?

Talvez seja a primeira vez que você ouve falar nisso. Fique tranquilo! Vamos contextualizar o que são testes unitários.

Imagine um enorme quebra-cabeças. Esse é o sistema, visto de um modo geral. Ele foi criado a partir da união de peças menores que se encaixam, correto? Pois bem, o teste unitário nada mais é do que o teste de cada peça separadamente. Isso significa mais organização e segurança de que mudanças serão identificadas antes de quebrar o resto da aplicação. Leia mais

Lightning Talk – Information Security: How to translate it into code

Vamos para o primeiro Lightning Talk totalmente em inglês divulgado no Blog DB1! Essa palestra de apenas 10 minutos tratou do tema Segurança da Informação, e de que formas podemos proteger dados mesmo não sendo um Técnico de Segurança da Informação. Você vai descobrir:

O que é Segurança da Informação?

Muito se fala sobre proteção de dados, mas já se perguntou que dados são esses? Como saber se um dado precisa de segurança?

No desenvolvimento de software, a segurança deve ser pensada em todas as etapas. Confira os incidentes mais recentes de segurança da informação, descubra o que é a OWASP e como ela pode te guiar para um desenvolvimento sem brechas para ataques.

Essas e outras respostas, você verá no Lightning Talk de Emerson Castilho e Marcelo Benesciutti. Assista abaixo para entender.

Confira tudo em menos de 15 minutos

Saiba mais sobre a OWASP aqui. Se você ficou interessado em Cornucópia, temos um artigo completo cobre o jogo.

Não se esqueça de compartilhar para que mais pessoas possam desenvolver aplicações com segurança!

Por que utilizamos Single Page Applications – SPA?

Atualmente é comum nos depararmos com projetos desenvolvidos em vue, react, angular, ou construídos sobre o modelo de SPA, mas você já se perguntou o por quê? Para responder melhor essa pergunta, vamos entender melhor como as coisas funcionam:

MPA – Multiple Page Application

Modelo convencional de construção de software front-end.

via GIPHY

Sempre que abrimos uma página na internet as informações apresentadas na tela são carregadas de algum lugar, seja uma imagem, um vídeo, ou um json. Tudo vem de algum lugar, tudo chega ao usuário através de uma request. Se você quiser visualizar o impacto que isso gera, entre em um site qualquer, abra o devtools do seu navegador (tecla F12 geralmente), vá até a guia Network e atualize a página. Cada item presente nessa seção é uma request que foi processada e solicitada pelo browser.

Agora imagine que sua aplicação precisa exibir a informação do usuário logado em todas as páginas. A página é acessada, a solicitação é disparada, o banco de dados é consultado, o resultado é formatado e então exibido para o usuário. Após isso ele navega para outra página, e o fluxo descrito acima é executado novamente, e novamente para cada página que for carregada.

E por que isso é ruim?

Vou te responder com duas outras perguntas:

  1. Você está acessando um software pelo 3G/4G do seu celular. Você prefere que os dados sejam recarregados a cada nova operação que você faz, consumindo tempo e dados do seu pacote, ou que sejam carregados uma vez e recarregados apenas se necessário?
  2. Você publicou um software na nuvem, e o mesmo possui um limite de 30gb de transferência de dados mensal. Você prefere gastar esses 30gb da melhor maneira possível, ou gradativamente com flood de informações repetidas?

Basicamente processamento é dinheiro, tanto no servidor, quanto no lado do cliente.

E como melhorar isso?
Construindo uma aplicação baseada em Single Page Application.

Single Page Application

via GIPHY

Mais e se minha aplicação tiver mais de uma página?

Calma, não é bem assim que funciona. Single page application quer dizer que o browser vai renderizar o core da aplicação apenas uma vez, todas as outras informações serão carregadas por demanda, de acordo com a necessidade do usuário.

Além de gerar menos custos para renderizar a página, o modelo SPA ainda oferece uma melhor experiência para o usuário pois o mesmo não terá que ver a página recarregando completamente inúmeras vezes. Também podemos adotar estratégias de caching, como service workers (futuramente farei uma postagem abordando esse assunto), para otimizar ainda mais a performance da aplicação.

Ainda é possível compilar a mesma aplicação para Desktop ou Mobile utilizando ferramentas como Electron ou Cordova, tendo então uma aplicação multiplataforma com um único código fonte.

Quando falamos de front-end, naturalmente falamos de javascript, e criar uma aplicação num modelo SPA é o melhor custo benefício. Existem excelentes frameworks SPA, como por exemplo: VueJs, React e Angular. E é muito mais fácil desenvolver uma aplicação utilizando tais frameworks.

Mas tome cuidado, SPA não é bala de prata.
Não é uma solução que resolve qualquer problema.

via GIPHY

Existem alguns pontos que você deve tomar cuidado:

Como o conteúdo da aplicação é carregado por demanda, isso quer dizer que tudo é carregado em tempo de execução, as famosas requests ajax. E qual o problema disso? Motores de busca captam apenas as informações de conteúdos estáticos, carregados pelo server side. Ou seja, se sua aplicação necessita de SEO, sugiro que esteja preparado para trabalhar com SPA SSR (Server Side Rendering*), ou trabalhar com MVC / MPA, depende muito do seu conhecimento e do tamanho do projeto.

Existem também aplicações “híbridas”. É comum encontrar e-commerces que tratam toda a parte de produto como MPA, e a parte de carrinho, cadastro e checkout como SPA. Isso é uma forma comum de resolver tanto problema de recarga de informações, quanto o de usabilidade.

*SSR: É aquilo que é carregado previamente, antes de chegar até o navegador. Se você abrir um site e ir até o menu Exibir > Código Fonte, geralmente CTRL + U no seu navegador, o conteúdo que você verá nesse momento será aquilo que foi carregado pelo servidor, e é esse o código que os motores de busca enxergam.

Mais então quando usar SPA, e quando não usar?

via GIPHY

Comece avaliando o conhecimento tecnológico da sua equipe, pois o melhor modelo para construir um software é aquele que sua equipe domina, e não o que está mais no hype. Porém, é sempre legal conhecer coisas novas, e a curva de aprendizado de SPA e seus frameworks é relativamente baixa. Seu projeto tem tempo para aprendizado? Se sim, pense em começar com SPA, se não, siga pelo seguro.

Meu projeto é pequeno, tudo bem eu utilizar MPA? Sim, e não. Primeiro que um projeto pequeno pode rapidamente crescer e tornar-se um grande projeto, e segundo que ainda que seja pequeno em números de funcionalidades, pode ser grande em fluxo e tráfego de acessos. Devido a esses fatos acredito que o tamanho do projeto não deva interferir nessa decisão, e sim o que é o projeto. Isso vai te ajudar a decidir se é melhor utilizar SPA ou MPA.

“Meu projeto precisa de um certo foco em SEO, é possível utilizar SPA nestes casos?” Sim! Existem várias abordagens para tornar uma aplicação SPA SEO Friendly, como SSR e pré renders. Porém lembre-se, enquanto SPA precisa de tempo e esforço para configurar SSR e então suportar SEO, MPA já possui este recurso “nativo”.

E como começar a trabalhar com SPA?

Quando se fala em SPA, o primeiro ponto que precisamos entender é: JavaScript. Tudo passa a tratar-se de javascript, é ele quem vai controlar suas rotas, fazer suas requests, trabalhar os seus dados e sua aplicação vai passar a ter mais poder e autonomia.

Embora SPA tenha suas desvantagens, existem muitas razões para querer usar. Não é à toa que é o modelo de aplicações front-end mais utilizado da atualidade. E o legal é que como trata-se de javascript, a comunidade por trás disso é gigantesca. Existem inúmeros frameworks destinados a trabalhar com SPA, porém atualmente destacam-se três: VueJs, React e Angular. A curva de aprendizado desses frameworks varia de acordo com seu conhecimento em JavaScript (ES5) e EcmaScript 6, entre eles eu particularmente recomendo o VueJs por possuir a menor curva de aprendizado e por outros motivos que irei abordar em outro post aqui para o Blog da DB1.

E ai, deu pra entender os pontos fortes e fracos do SPA?

Vou ficando por aqui, até a próxima!

Leia mais

As Pragas do Teste de Software – Parte 2

Na primeira parte do artigo sobre as pragas do teste de software, abordamos sobre as pragas da repetitividade, da amnésia e do tédio. Caso não tenha lido, pode acompanhar a leitura aqui.

Já nessa segunda parte, iremos falar sobre mais algumas pragas: 

  • A praga da casa nova (The Plague of Homelessness) 
  • A praga da cegueira (The Plague of Blindness)

A praga da casa nova (The Plague of Homelessness)

Essa praga se inicia com uma pequena definição, são dois grupos distintos que encontram bugs com frequência: os testadores e os usuários, que acabam se deparando com os erros quase que na maioria das vezes sem querer. Isso acontece com a combinação da interação da aplicação com usuários reais, utilizando dados reais e em um ambiente real.  Leia mais

Software parametrizável ou personalizável, qual a melhor estratégia para desenvolvimento?

É muito comum que empresas sofram as consequências de um legado de decisões tomadas sem considerar os impactos. Para qualquer empresa que desenvolva software, decidir quando e como deve-se modificar o sistema é um trabalho que exige responsabilidade, pois muitas vezes os reveses de ter que sustentar tal código custam mais do que escrevê-lo. 

São diversas as estratégias que podem ser adotadas para desenvolver soluções sistêmicas. Por exemplo: desenvolver de forma unitária e escalável “software de caixinha”; com componentes acopláveis; parametrizável, com opções de ligar ou desligar rotinas; personalizável, que permita codificar soluções em cima de um core base; etc. Vale lembrar que cada uma delas tem suas vantagens e desvantagens, pois tudo depende do problema que se pretende resolver. 

Escolhendo a melhor estratégia de desenvolvimento para cada perfil de empresa 

A estratégia adotada na concepção de uma solução sistêmica pode mudar muito dependendo de qual objetivo se pretende alcançar. Um fator importante é: para quem está sendo desenvolvido? Ou seja, qual o perfil do seu público-alvo? 

Para ser mais específico, tomaremos como base uma solução ERP (sistema integrado de gestão). Assim podemos imaginar situações práticas e definir cenários hipotéticos para cada perfil de empresa. 

Dependendo do movimento operacional,  estratégia e capacidade financeira, as empresas podem: querer melhorar seus processos, apenas sistematizar processos que já estão bem definidos, estar focadas em melhorar seus resultados, dentre muitos outros objetivos. Vamos entender três perfis de empresas e que tipo de solução pode ser mais adequada.   Leia mais

As Pragas do Teste de Software – Parte 1

Segundo James A. Whittaker, existem as chamadas “Pragas do Teste de Software”, que resumem problemas vividos no cotidiano de testers. Algumas delas são: 

  • A praga da repetitividade (The plague of Repetitiveness) 
  • A praga do tédio (The Plague of Boredom) 
  • A praga da amnésia (The Plague of Amnesia) 
  • A praga da casa nova (The Plague of Homelessness) 
  • A praga da cegueira (The Plague of Blindness)

Hoje, falaremos um pouco sobre as 5 pragas acima. Em breve, teremos aqui uma parte 2 com as outras duas Pragas do Teste de Software. Vamos lá? Leia mais

Principais comandos de Docker: Usando containers no desenvolvimento de software

Ao desenvolver uma aplicação, torná-la acessível para colegas de equipe e para o cliente pode se tornar um desafio. Afinal, na sua máquina funciona, mas e no Sistema Operacional de quem precisa testar? Pois é, para resolver comportamentos inesperados que geram gargalos no projeto, surgiu o conceito de Container e o Docker.

O que são Containers?

Containers compartilham de um mesmo Sistema Operacional, diferente das tradicionais VM’s (Virtual Machines, ou Máquinas Virtuais) que necessitam de enormes capacidades de disco e memória para rodar diversos SO’s. Um container isola recursos e permite uma comunicação mais fácil entre diferentes containers. Assim, basta que o outro usuário tenha o Docker instalado para acessar sua aplicação em seu container.

Saiba mais sobre o surgimento do conceito de Container, além de DockerFile e Docker Compose nesse artigo de Larissa Roder.

Principais comandos de Docker: Ciclo de Capacitação gratuito!

Quer entender mais sobre o Docker e aprender a começar?  O desenvolvedor Pedro Mázala apresentou um Ciclo de Capacitação em formato de vídeos para explicar:

  • Os problemas enfrentados sem utilizar containers
  • O diferenciar de criar aplicações containerizadas
  • As desvantagens de Virtual Machines
  • Como funcionam Containers na prática
  • O uso de imagens
  • Como personalizar sua imagem
  • Como aplicar Docker em produção
  • Os principais comandos de Docker

Leia mais

Home Office funciona?

Que a internet vem quebrando barreiras, todo mundo já sabe. Mas será que ela já quebrou as barreiras do escritório?

Basta ver a quantidade de vagas disponíveis para perceber que a demanda por bons profissionais, na área de T.I., é grande. Ainda que cursos (universitários ou não) estejam cada vez mais acessíveis, as empresas estão ávidas por bons profissionais. Eu gosto de enfatizar o “bons”, porque para falar bem a verdade, existe sim uma certa disponibilidade. Mas poucos são os realmente bons.

Qual o perfil do profissional para Home Office?

 

via GIPHY

Já falei antes sobre as qualidades de um bom desenvolvedor. E além dos requisitos básicos de um desenvolvedor (o mínimo para você ser contratado), é preciso um pouco mais. O bom profissional é proativo, comunicativo, responsável e comprometido.

Essa qualidades, no meu ponto de vista, são imprescindíveis para quem anseia por trabalhar Home Office. Em casa não haverá um patrão dizendo a todo momento o que você tem de fazer. Aliás, este comportamento não é aceitável nem mesmo no escritório. Leia mais

Prazos: Missão impossível…ou não

Quem nunca recebeu uma tarefa e disse para si mesmo “É IMPOSSÍVEL!”? Atire a primeira pedra (uma de cada vez…rsrs)!

Sabe aquela tarefa que você disse “sim”, mas para si mesmo você disse “não”? Que para não receber o olhar de rejeição de seu patrão, chefe, gerente, supervisor, colega, amigo e etc., você acaba aceitando aquela solicitação, mas pensando consigo mesmo: “não vai dar pé, não tem como essa tarefa ser realizada”.

Essa situação pode acontecer quando uma tarefa é muito difícil, ou quando existe um prazo apertadíssimo. O pior é que a qualidade do serviço acaba comprometida nessas missões impossíveis.

Não existe uma forma infalível, uma fórmula mágica (caso exista, infelizmente não temos acesso ao livro de feitiços e não recebemos a mente da Hermione), mas tudo bem. Hoje vou compartilhar com vocês algumas dicas para resolver essas situações difíceis com base na minha experiência. Leia mais

Criando onboarding com UICollectionView e Storyboard

Sabe aquelas telas de boas-vindas que vemos quando abrimos um app pela primeira vez? Este processo é feito para familiarizar o usuário com o app e suas funções. É uma oportunidade para apresentar as principais funcionalidades ou diferenciais do app, novidades de uma versão, ou tentar convencer usuários a se registrarem no serviço.

Neste tutorial irei ensinar como criar um onboarding no iOS usando UICollectionView e Storyboard. Os controllers das views serão escritos em Swift 4. Se quiser baixar o projeto completo, siga este link para o GitHub.

Storyboard

Acho legal usar o storyboard pra desenhar as views porque economiza muito tempo e linhas de código, fora a vantagem de poder ver todo o fluxo de telas da aplicação de uma vez!

Por isso, vamos criar um novo projeto, abrir o storyboard, remover a View Controller padrão e colocar em seu lugar uma Collection View Controller. Com a ajuda do Document Outline, selecione a Collection View que está dentro da Collection View Controller. Queremos alterar algumas propriedades para que ela se comporte como um onboarding com scroll horizontal:

Criando um projeto com storyboard Leia mais