Blog - Página 13 de 20

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:

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?
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!

Compartilhe:

Continue lendo

As Pragas do Teste de Software – Parte 2

Não pode ler agora? Ouça esse conteúdo durante suas atividades:

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.

Compartilhe:

Continue lendo

As Pragas do Teste de Software – Parte 1

Não pode ler agora? Ouça esse conteúdo durante suas atividades:

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á?

Compartilhe:

Continue lendo

Principais comandos de Docker: Usando containers no desenvolvimento de software

06/09/2018
Comunicação DB1
Code Journey, Desenvolvimento, IT Services
0 Comments

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

Compartilhe:

Continue lendo

Home Office funciona?

04/09/2018
Francisco Thiago de Almeida
Ambiente de trabalho, Carreira, My Journey
0 Comments

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.

Compartilhe:

Continue lendo

prazos apertados, calendário no notebook, estatísticas

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

Não pode ler agora? Ouça esse conteúdo durante suas atividades:

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.

Compartilhe:

Continue lendo

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:

Compartilhe:

Continue lendo

Transcreva sua voz de forma nativa com Javascript – Web Speech API

Atualmente a transcrição de textos é algo comum para os usuários de smartphones. A SIRI, o Google Now e a Cortana popularizaram essa prática. Mas na Web isso não é tão comum assim. As grandes empresas de tecnologia hoje nos oferecem API’s para esse serviço, mas não é algo muito barato e nem tão trivial assim integrar com as gigantes.

Mas e se os browsers nos fornecessem essa API de forma nativa, para que pudéssemos transcrever tudo o que o usuário fala em texto apenas com uma permissão simples e HTTPS? Muito mais fácil, certo?

Essa é a ideia da especificação da W3C para a Web Speech API, para que o browser nos forneça esse serviço de forma nativa e muito simples. Então, veremos logo abaixo como podemos implementar essa API em nosso dia a dia para facilitar a vida do usuário e aumentar muito a acessibilidade das nossas aplicações.

Compartilhe:

Continue lendo

O que é mindfulness, com a psicóloga do método friends Jaqueline Bordin

Mindfulness: é possível encontrar a paz no meio do caos?

Caos! Muitas pessoas percebem a vida adulta como um caos: estudar, trabalhar, cuidar da casa, cuidar dos filhos, cuidar do relacionamento e pagar “boletos”. A nossa vida é realmente agitada, o caos produz muito estresse e o estresse atrapalha nosso desempenho social, profissional e nossa saúde física e emocional.

Talvez você esteja pensando: “Tudo isso eu já sei, mas eu vou fazer o quê? Preciso trabalhar para pagar os tais boletos!”. Uma das estratégias indicadas pela ciência para que possamos lidar com o estresse e ter uma vida mais plena e feliz é praticar MINDFULNESS (Atenção Plena).

O que é Mindfulness e como praticar

Mindfulness nada mais é do que prestar atenção no seu presente, nas suas reações corporais, ou seja, em você. Por meio de meditações simples você pode treinar esse estado de atenção. Dentre essas meditações simples e rápidas está a meditação de um minuto:

Compartilhe:

Continue lendo

Por que empatia é tão importante para a vida profissional?

Não pode ler agora? Ouça esse conteúdo durante suas atividades:

É muito comum pensar que no ambiente profissional é mais importante ser racional e lógico, evitando assim mostrar as emoções. Porém, hoje vim falar sobre a empatia, uma habilidade que necessita deixar as emoções aparecerem para se conectar às outras pessoas, e como isso pode ser positivo para a sua equipe, para o cliente, o ambiente de trabalho e para você mesmo.

De acordo com o dicionário Michaelis, empatia é:
Habilidade de imaginar-se no lugar de outra pessoa;
Compreensão dos sentimentos, desejos, ideias e ações de outrem;
Qualquer ato de envolvimento emocional em relação a uma pessoa, a um grupo e a uma cultura;
Capacidade de interpretar padrões não verbais de comunicação;
Sentimento que objetos externos provocam em uma pessoa.

Segundo a neurociência, dentro do cérebro humano existem os neurônios espelhos. Esses neurônios espelham movimentos e emoções, é a parte do seu cérebro que fica mais ativa quando você está observando alguém fazendo qualquer coisa. 

Para você entender melhor como isso funciona, vou citar um caso real. Na década de 1980, a norte americana Patricia Moore revolucionou o design dos eletrodomésticos depois de viver a rotina de uma senhora octagenária. Durante 3 anos (1979 a 1982), Patricia se vestiu como uma senhora de 85 anos. A personagem usava bandagens enroladas para mantê-la encurvada, talas nos braços e nas pernas para dificultar a flexibilidade, e calçados desiguais que a obrigada andar de maneira trôpega. Mas por que ela fez isso? A motivação de Patricia era entender o mundo pela visão de pessoas idosas, para saber quais eram os obstáculos reais da vida delas. A partir dessa experiência, ela desenhou eletrodomésticos mais acessíveis e desenvolveu uma série de produtos que beneficiaram todas os públicos, incluindo, é claro, senhoras de 80 anos.

O exemplo de Patricia Moore nos dias de hoje é um tanto quanto radical, pensando nos recursos que temos em mãos e toda a tecnologia existente. Mas a essência do experimento, o objetivo de “viver na pele” de outra pessoa, se não é passando pela mesma experiência, é por meio da empatia. 

Compartilhe:

Continue lendo