sábado, 8 de abril de 2017

Fontes de estudo de Regex

Busca em textos é uma tarefa rotineira, não somente para a programação. Pode ser para buscar conteúdo para encontrar uma informação relevante, validar alguma entrada de dados ou filtrar informação a ser processada por um software. Para todas as tarefas o Regular Expression (Regex) pode ajudar e há bons cursos para aprendizagem:

Curso de Regex no CodeSchool (Parte Introdutória é gratuita)
https://www.codeschool.com/courses/breaking-the-ice-with-regular-expressions

Curso de Regex com algumas aulas gratuitas:
https://www.lynda.com/Regular-Expressions-tutorials/Using-Regular-Expressions/85870-2.html

Tutorial de Regex com introdução e vários exercícios que podem ser praticados no próprio navegador:
http://regextutorials.com/

Ferramenta para testar expressões Regex:
http://www.regexpal.com/

Tabela com algumas expressões:
https://www.cheatography.com/davechild/cheat-sheets/regular-expressions/

Exercícios para treinar Regex:
https://www.hackerrank.com/domains/regex/re-introduction


Algumas anotações sobre alguns recursos

Repetição

Permite definir repetir a busca do caractere anteriormente informado
  • + = encontra uma ou mais repetições do caractere anterior
  • * = encontra zero ou mais repetições do caractere anterior
  • ? = o caractere anterior se torna opcional
  • {min,max} retorna o número de repetições definidos
    • {3,} encontra no mínimo 3 caracteres
    • {,2} encontra no máximo 2 caracteres
    • {4,5} encontra de 4 a 5

Symbol Set (Grupo de símbolos)

Define um conjunto de caracteres a serem considerados na busca
  • /[a-z]/ = considerada qualquer caractere de a até z
  • /[a-zA-Z]/ = considerada qualquer caractere de a até z ou de A até Z, a ordem de caractere aqui não faz diferença
  • /[a-z]/i = acha a mesma coisa do anterior. o i é um modificador para informar que é case insensitive

Exclusão

  • ^ = Para definir uma exceção de caractere
  • /[^abc]/ = encontra qualquer caracter exceto abc

Pré definidos

\s = acha espaço, tab, nova linha
\w = mesma coisa de letras e números /[a-zA-Z0-9]
\d = mesma coisa de /[0-9]/
\D = qualquer coisa diferente /[0-9]/

Posição

Encontra considerando posição do texto
  • ^ = começo de linha
  • $ = término de linha

Agrupar Pesquisas
  • () cria um grupo que pode ser usado depois
  • \1,\2 repete a busca do grupo já citado
  • (?=CARACTER) busca que olha o próximo caracter sem adiciona-lo na seleção
  • Para usar o grupo do regex para substituição, basta usar $1 para aproveitar o grupo
    (?:expressão) Para ignorar o grupo para reutilização ou substituição

quinta-feira, 23 de março de 2017

Hospedagem com o Firebase

O Firebase é uma opção bastante simples de se utilizar, especialmente se você estiver montando MVP ou quer disponibilizar um teste rápido na Web. Com a ideia de ser serverless (facilitar a vida do desenvolvedor em não criar um backend), simplifica-se o desenvolvimento de cenários sem necessidades de recursos além de armazenamento por exemplo.

Toda as funcionalidades da hospedagem estão listadas em Firebase Hosting:

  • Atendimento em uma conexão segura (SSL configurado por padrão, o que já atende em protótipos de Progressive Web Apps)
  • Entrega rápida de conteúdo (por usar SSD e CDN parar entrega ao usuário)
  • Implementação rápida com o uso de  Linha de comando
  • Reversões com um clique, mantendo históricos de atualizações
  • Versão de entrada gratuita, independente de tempo. Para ver mais detalhes veja em Firebase Princing.
  • Importante: Hospedagem limitada a conteúdo estático. Ou seja, nada de rodar sua aplicação web com Node.Js por exemplo

Linha de comando

Os comando do Firebase CLI podem ser conhecidos em Referência da Firebase CLI

Instalando o Firebase CLI:

  1. É necessário ter o Node.Js instalado
  2. Instalar o módulo : npm install -g firebase-tools

Um resumo para colocar um site em produção seria:

  1. firebase init (Cria a aplicação, com perguntas em passo a passa)
    1. Por padrão, a aplicação acessa o um subdiretório public
  2. firebase serve (Inicia um servidor local web, para testar a aplicação)
  3. firebase deploy (Para publicar a aplicação)
    1. É possível utilizar o argumento –only para orientar a configuração direcionada a hosting, database e storage

O Firebase ainda oferece serviços para Armazenamento e Base de Dados.

É simples e não é bala de prata! Se sua aplicação precisa de escalar conheça quem começou com o MVP no Firebase e teve dificuldades depois. Veja o post Reasons Not To Use Firebase e uma boa resposta da pergunta When is Firebase not a good choice? no Quora para entender até quando utilizar o Firebase.

domingo, 19 de março de 2017

Introdução ao Progressive Web Apps

Há uma forte corrente questionando que a utilização de apps em mais cenários que deveria, e uma página web seria mais produtiva. Um bom exemplo é ter que baixar um app para pagar um estacionamento de um shopping que você pode não mais voltar a usar.

A web tem amadurecido no conceito de Progressive Web Apps (PWA), que tem por ideia adicionar funcionalidades de app a uma página web, progressivamente, a medida que o usuário usa o aplicativo. A Udacity disponibilizou o curso Intro to Progressive Web Apps (Web Apps for the Next Billion Users) que ajudou nas informações deste post. A apresentação Progressive web apps with polymer tem números interessantes sobre as característas em criar o PWA.

Por que pensar no Progressive Web Apps?

No caso de estudo o Flipkart(maior e-commerce da Índia), ao combinar o app nativo com sua versão Flipkart Lite, versão em Progressive Web Apps, eles tiveram os seguintes benefícios (Conforme estudo de caso “Flipkart triples time-on-site with Progressive Web App” publicado neste link):

  1. aumento de 70% nas conversões
  2. tempo do usuário no flipkar lite x experiência anterior do Mobile, 3,5 minutos x 70 segundos
  3. 3x mais tempo no site
  4. aumento de 40% no reengajamento
  5. 3x menos uso de dados

Mas o que permite o Web Progressive Web trazer tanto benefício?

Os navegadores estão evoluindo para permitir o uso das funcionalidades abaixo.

Service Worker

  1. Age como um proxy no lado cliente, o que permite fazer cache de arquivos localmente;
  2. Tem uma série de eventos para poder, por exemplo, atualizar o cache;
  3. Pode receber Push Messages, mesmo com o site fechado pelo usuário;

Web App Manifest File

  1. Permite definir como seu Web App aparece para o usuário, podendo fazer um ícone ser instalado pelo usuário no Mobile. Quando isso acontece o site abre em full screen, como um app nativo

Repensar a arquitetura do Site

Não basta utilizar o novo browser, mas deve desenvolver o site de maneira diferente.

  1. Desenvolver como arquitetura de app, com o application shell – que é parecido com o código que se gera para um app nativo. Separa-se o que são os componentes essenciais para o seu app executar offline (Html, Javascript e CSS) do que é dado e muda frequentemente e ainda assim pode ser salvo localmente para acesso offline. Com isso se tem características que há no aplicativo nativo (sem a necessidade de uma loja):
    1. Carregamento instantâneo
    2. Atualizações regulares
  2. Armazenamento offline, que é possível ser feito de três maneiras
    1. Local Storage (Não indicada a utilização)
      1. Vantagens : amplamente implementado em navegadores
      2. Desvantagens: sua api é síncrona e bloqueia a execução do programa, não é transacional (duas escritas no mesmo momento pode perder algo importante)
    2. Cache Storage
      1. Vantagens: fácil de usar, assíncrono e rápido
      2. Desvantagens: não transacional, não utilizado em vários navegadores atualmente
    3. IndexedDB
      1. Vantagens:  rápido, permite armazenar dados complexos, assíncrono e transacional e implementado em vários navegadores
      2. Desvantagem: api feia, que requer muita configuração (Há bibliotecas para amenizar desta forma como o Mozilla localForage e o lovefield do google)

Com a separação de app shell dos dados, a ideia é fazer um http request para os dados, o que faz a primeira leitura ficar um pouco mais lenta. Para amenizar este problema a ideia é injetar os dados, não no html, mas num arquivo separado, que é o app.js. Dessa forma é garantido que haverá a montagem do app e depois é possível de atualizar pelo http request.

É importante lembrar que navegadores não prometem guardar os dados para sempre e por isso é importante enviar os dados críticos para a nuvem assim que possível (se houver dados do usuário que você não deseja perder). Outra vantagem de utilizar o sincronismo com a nuvem é que o usuário logar de outro dispositivo, os dados estarão disponíveis.

Para ver um exemplo de um aplicativo utilizando esta arquitetura, veja o Weather PWA. Não esqueça de abrir o console e ver os logs definidos pelo aplicativo, depois de carregar a primeira vez, adicionar outras cidades para ver a previsão do tempo e finalmente trabalhar offline e ainda assim ver as últimas informações

image

 

Outras referências

Introdução aos Progressive web Apps por Matheus Lima no imasters

Progressive web apps with polymer no SlideShare

Progressive web apps presentation using Reveal.js