Introdução a Vue.js

Nessa guerra de novos frameworks javaScript, Vue.js aparece como mais um player promissor, com a promessa de um framework versátil, testável e performático. Sua adoção vem crescendo dia-a-dia. Mas essa não é a principal killer point da plataforma. Ele promete ser um framework progressivo, não utilizar um único monolitico, as modulos podem ser adicionados de acordo com sua necessidade, ou seja, podemos partir de aplicações simples até complexas aplicações adicionando os módulos Vuex(redux) e Vue-router.

Uma grande diferença do Vue é sua organização os componentes agrupam HTML, CSS e JS em um mesmo arquivo, definido como separação por interesse.

Um outro ponto para muitos uma vantagem que o framework não tem nenhuma empresa proprietário, como React(Facebook) and Angular(Google). O Vue é 100% opensource.

Se você possui conhecimento básico em  HTML, CSS e JS Vue é uma boa pedida, algumas empresas estão adotando a plataforma é aprender um novo framework antes do grande hype é um diferencial. Agora vamos ao que interessa, vou mostrar alguns recursos básicos do Vue.js.

Temos a opção de utilizar vue-cli, mas para esse exemplo vamos trabalhar com a CDN.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Adicionamos a Vue ao nosso HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Vue</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
  	var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

Acabamos de criar o nosso primeiro app Vue.js, ele é bem simples mas já podemos ver algumas caracteristicas importantes. Dentro da div app temos um elemento com chave duplas esse é o padrão utilizado pelo Vue para indentificar as partes dinâmicas de nosso código, lembrando que esse trecho ficará conectado com nossa aplicação qualquer alteração desse valor será refletida em nosso DOM.

Após a chamada de nossa CDN temos o nosso código JavaScript, criamos um nova instância com os seguintes atributos, Qual elementos nossa aplicação irá apontar com “el”, qual os dados de nossa aplicação com “data” e assim nossa aplicação é inicializada.

Condicionais e loops

v-if

O atributo v-if é uma condicional “if” ela funciona como um toogle, se o nosso valor for true o conteúdo dentro da tag será exibido. Como podemos ver no exemplo acima, a variável ‘can_i_see_it’ e ‘can_i_see_it_2’ são vinculado a dois elementos só o primeiro span será exibido porque seu valor é true.  Notem quando utilizamos um atributo vue não precisamos utilizar as chaves duplas.

v-else

Temos a possibilidade de trabalhar com else utilizando a propriedade v-else, se não atribuirmos nenhum valor a propriedade funciona como um else normal podemos trabalhar com uma situação “else if” passando uma outra condicional. outro detalhe para esse exemplo dentro de data eu passo um objeto “question” com dois atributos(title and are_you_ready). Por exemplo para acessa o atributo title dentro do objeto question utilizamos {{question.title}}.

Trabalhando com Inputs

No exemplo acima temos um input vinculado com uma propriedade message através do atributo v-model que cria uma conexão two-way data binding.  Se testarmos o resultado a cada alteração do input será refletido na template tag {{message}}.

Para esse post temos nosso último exemplo:

Utilizamos o último exemplo e adicionamos um botão e vinculamos um método addMessage através to atributo v-on:click em nossa instancia Vue adicionamos um novo atributo methods e passamos os métodos que nossa aplicação irá possuir, nesse caso a cada click do botão salvar adicionamos o conteúdo do campo message a um array.

Com isso temos só um pouco que o framework pode fazer por nós, como nos exemplos acima não utilizei nenhum gerenciador de tarefas ou gerenciamento de bundle, mas podemos utilizar o vue-cli para ter um markup de uma aplicação.

A documentação do Vue é bem completa e está totalmente traduzida para português você pode conferir no link abaixo:

https://br.vuejs.org/v2/guide/index.html

Anúncios

Observe a orientação do device com JavaScript

Com Javascript podemos observar a orientação do device, também é possível realizar este tratamento com CSS, mas isso fica restrito a questões visuais, caso queria realizar algum tratamento lógico em nossa aplicação podemos utilizar JavaScript. Temos “N” possibilidades de acompanhar a orientação do device, nesse post vou mostrar duas maneiras bem simples, a primeira observando o evento ‘orientationchange’, para isso adicionamos um listener em em nossa janela com o seguinte código:

 window.addEventListener('orientationchange', function(){
   	// faça alguma coisa
   });

O código acima acompanha quando a orientação do device muda, mas como sabemos que o usuário está em landscape ou portrait, para isso pegamos a orientação do device, com window.orientation essa propriedade retorna a rotação do device:

window.addEventListener('orientationchange', function(){
   	switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape');
        break; 
      default:
        alert('portrait');
        break; 
    }
   });

Com as informações sobre a rotação do device sabemos que 90 ou -90 o device está em landscape e diferente disso portrait. No código acima foi disparado somente um alert, mas poderíamos chamar alguma outra função, editar uma classe de um elemento ou adicionar uma conteúdo específico para o usuário.

A segunda opção seria com matchMedia ela faz parte da Web API Interface com ela podemos validar media queries por exemplo:

if (window.matchMedia("(min-width: 360px)").matches) {
  /* O view port tem pelo menos 360px de largura */
} else {
  /* o view port tem menos de 360px de largura */
}

Podemos validar qualquer media query no CSS3 temos uma regra para  verificar a orientação vamos utilizar ela para pegar  o orientação do nosso device:

function handleOrientationChange(mediaQuerie) {
  	if (mediaQuerie.matches) {
    		alert("portrait")
  	} else {
    		alert("landscape")
  	}
}

/* Criamos uma variável para armazenar a media querie */
var mediaQuerie = window.matchMedia("(orientation: portrait)");

/* Adicionamos um listenr para acompanhar a mudança de orientação */
mediaQuerie.addListener(handleOrientationChange);

Temos ai duas opções para verificar a orientação do device.

Trabalhando gestos com Hammer.js

Hammer é uma biblioteca JavaScript que dispara eventos para os gestos realizados em suas aplicações com HTML+JS. O Hammer.js é simples de usar, como muitas bibliotecas ele usa o esquema “jQuery-like”.

Para utilizar a biblioteca de gestos precisamos dos seguintes passos, carregar a biblioteca do Hammer disponível no link: http://eightmedia.github.io/hammer.js/, além de encontrar o fonte lá você vai encontrar exemplos de como usar a biblioteca. Com os arquivos importados agora vamos ao código, inicialmente selecionamos o elemento o qual vamos “ouvir” os gestos e depois especificamos o gesto que vamos acompanhar.

Exemplo:

var element = document.getElementById('box');
var hammertime = Hammer(element).on("swipe", function(event) {
        	alert('swipe!');
    	});

No código acima temos um exemplo que acompanha o movimento de swipe, quando realizado ele dispara um alert. E o que podemos fazer com isso? Slide de fotos, invocar menus, ações em jogos, mudança de conteúdo. Podemos notar que no código acima recebemos um evento na função chamada pelo Hammer, vamos usar o “console.log” para inspecionar esse item e o resultado será o seguinte:Captura de Tela 2014-01-03 às 16.16.03

Ele retorna um objeto com uma sério de propriedades, no final da lista temos algumas propriedades importantes, type(tipo do evento), timeStamp, target(onde foi realizado o evento), srcElement(O elemento responsável por chamar o evento) e  gesture um objeto que capta as infos sobre o “toque” realizado pelo usuário, esse item vamos detalhar a seguir:

Captura de Tela 2014-01-03 às 16.16.26

No objeto gesture temos como pegar a angulação que foi realizado o toque, a velocidade x e y, escala, distância, rotação e direção do toque. É muito informação que pode ser trabalhada

Agora vamos a um evento mais prático:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hammer Tutorial</title>
    </head>
    <body>
        <div id="box">
        	<nav id="menu" class="hide">
        		<ul>
        			<li><a href="#">item 1</a></li>
        			<li><a href="#">item 2</a></li>
        			<li><a href="#">item 3</a></li>
        			<li><a href="#">item 4</a></li>
        		</ul>
        	</nav>
        </div>

        <script type="text/javascript" src="js/hammer.min.js"></script>
        <script type="text/javascript">
        	var element = document.getElementById('box');
			var menu = document.getElementById("menu");

        	Hammer(element).on("swipe", function(event) {
        		//verificamos qual o valor da propriedade direction caso "right"
        		// ele adiciona o class ao menu active
        		// caso o valor do direction for "left" ele adiciona o class "left"
        		if(event.gesture.direction == "right"){
        			menu.className = "active";	
        		}else if(event.gesture.direction == "left"){
        			menu.className = "hide";
        		}
    		});
        </script>
    </body>
</html>

No exemplo acima em nosso elemento com id box, adicionamos uma tag nav com id menu esse item que vamos exibir e esconder. No código JavaScript no final do nosso arquivo verificamos no objeto gesture qual o valor do direction, caso “right” adicionamos o class active, caso contrario adicionamos o class “hide” a transição nos fazemos com CSS3 o código eu mostro a seguir:

#box {
	padding: 0;
	margin: 10%;
	width: 80%;
	height: 300px;
	background-color: green;
	display: block;
	position: relative;
	overflow: hidden;
}

#menu {
	width: 200px;
	height: 100%;
	background-color: yellow;
	margin: 0;
	position:absolute;
	transition:  left 300ms linear;
}

#menu.hide{
	left: -250px;
}

#menu.active{
	left:0;
}

Um exemplo simples mas muito usado em muitas aplicações. O exemplo completo desse tutorial você pode conferir no GitHub: https://github.com/fellyph/Tutorial-bbUI/tree/master/hammer/www