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

Vagas Front-end em SP junho – 2017

1 – Desenvolvedor .Front-end Pleno e Sênior – Bela Vista)

Local de Trabalho: Bela Vista
Horário: De segunda a sexta-feira 09h00 até 18h00
Regime de contratação: PJ – Projeto Indeterminado
Tempo de projeto: Indeterminado
Requisitos: Sólidos conhecimentos em AngularJS, NodeJS e com experiência em desenvolvimento de softwares com interfaces complexas, não apenas interações com aplicações e web, trabalhar com SASS e GIT.

2 – Desenvolvedor Front-end Sênior

Local de Trabalho: Morumbi
Horário: De segunda a sexta-feira
Regime de contratação: PJ – Projeto Indeterminado
Tempo de projeto: Indeterminado
Requisitos: Conhecimento avançado de conceitos de aplicações responsivas, arquitetura de componentes em CSS; Noções de UX para definir padrões para sistemas web internos e externos; Dominar tecnologias da web (HTML5 + CSS3); Desejável conhecimento em semântica, usabilidade e acessibilidade, Experiência com desenvolvimento de aplicações WEB de Front end, Exemplos de outras tecnologias necessárias: JavaScript, jQuery, Ajax, Bootstrap, Angular, HTML5, CSS3, Photoshop, Illustrator, Design Mobile; Conhecimento em controle de versão SVN e/ou Git; Facilidade para aprender novas tecnologias.

3 – Desenvolvedor Front-end Sênior

Local de Trabalho: Pinheiros
Horário: De segunda a sexta-feira
Regime de contratação: CLT + Vale refeição ou Alimentação, Seguro de Vida Sulamerica, Vale Transporte, Seguro Saude Sulamerica – para funcionarios não tem desconto, caso inclua algum dependente arca com o valor integral dos mesmos.
Tempo de projeto: Indeterminado
Requisitos: Conhecimento avançado de conceitos de aplicações responsivas, arquitetura de componentes em CSS; Noções de UX para definir padrões para sistemas web internos e externos; Dominar tecnologias da web (HTML5 + CSS3); Desejável conhecimento em semântica, usabilidade e acessibilidade, Experiência com desenvolvimento de aplicações WEB de Front end, Exemplos de outras tecnologias necessárias: JavaScript, jQuery, Ajax, Bootstrap, Angular, HTML5, CSS3, Photoshop, Illustrator, Design Mobile; Conhecimento em controle de versão SVN e/ou Git; Facilidade para aprender novas tecnologias.

4 – Desenvolvedor Front-end Sênior

Local de Trabalho: Faria Lima
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – indeterminado
Requisitos: Experiência em desenvolvimento de aplicações web utilizando JavaScript e jQuery. Experiência na criação de páginas responsivas, web e mobile. CSS Avançado e CSS3 Experiência em suporte a browsers antigos (graceful degradation), Conhecimentos de Regex Domínio de protocolo (HTTP, HTTPS, cross domain).

5 – Desenvolvedor Front-end Sênior

Local de Trabalho: Campo Belo
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – indeterminado
Requisitos:  Experiência com CSS, HTML e Javascript, – CSS, HTML, JavaScript, Jquery e AJAX.
Trabalho em Equipe e vontade de compartilhar conhecimento entre integrantes da Equipe é fundamental.
Analisar e discutir junto ao arquiteto de informação sobre as demandas para desenvolvimento.
Participar de reuniões no cliente, junto ao gestor e equipe técnica, quando necessário.

6 – Desenvolvedor Front-end Sênior

Local de Trabalho: Alphaville
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – Indeterminado
Requisitos: Sólidos conhecimentos em HTML, Css, Javascript e frameworks de mercado (jquery, angular).
Preferencialmente HTML 5, Angular 2,Typescript,Angular.

7 – Desenvolvedor Front-end Sênior

Local de Trabalho: Alphaville
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – Indeterminado
Requisitos: Conhecimento avançado em Node.js, javascript, HTML, CSS.
EXPERIENCIA COMPROVADA EM MAGENTO, Conhecimento básico em alguma linguagem de programação (Java, .Net, PHP, etc).

8 – Desenvolvedor Front-end Sênior

Local de Trabalho: Alphaville
Horário: De Segunda a Sexta-feira
Regime de Contratação: PJ – Indeterminado
Requisitos: Conhecimento intermediário ou avançado em HTML, CSS, Node.JS javascript; Conhecimento básico em alguma linguagem de programação (java, .net, php, etc).

Interessados, por favor, sinalizar a numeração da oportunidade, encaminhar CV com pretensão salarial para : heloisa.moraes[a]5a.com.br

Eventos com React

Quando trabalhamos com JavaScript clássico temos N formas de trabalhar com eventos, adicionando atributos no nosso elemento html, definindo o atributo no JavaScript ou adicionando um listener, direto no elemento HMTL seria da seguinte forma:

<button onclick="doSomething">

Este método trás muitos problemas, por exemplo, manutenção e gerenciamento de eventos.

Outro formato adicionando um listener:

<button id="me">Oi</button>

    <script>
      document.getElementById('me').addEventListener('click', function(){
        alert('hello')
      })
    </script>

Isto funciona bem, mas você precisa ter uma organização no seu código, caso contrario ficará difícil de debugar seu código, nem todos os browser suportam este recurso sempre precisamos quer fallback para esta situação.

React tenta deixar o gerenciamento de eventos mais consistente. Todo evento retorna um SyntheticEvent, ele tem uma série de atributos:

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

Outra questão importante ele centralização do target, quem nunca teve problemas com targets dos eventos e precisou controlar um evento de click com stopPropagation() ou preventDefault(). O SyntheticEvent trabalha com o conceito de pooled, o objeto é limpo após o callback for invocado, por uma questão de performance.

Eventos suportados pelo React:

  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus Events
  • Mouse Events
  • Selection Events
  • Touch Events
  • UI Events
  • Wheel Events
  • Media Events
  • Image Events
  • Animation Events
  • Transition Events

Antes de trabalhar com Eventos e Componentes precisamos entender é a questão de Props e State, basicamente props temos os valores quando o componente é construído e state são os dados que a interface mantém durante a execução do aplicativo.

let ButtonComponent = React.createClass({
  getInitialState: function() {
    return {
      active: true,
    };
  },

  _toggle: function(event) {
    this.setState({
      active: (this.state.active)? false: true
    });
  },

  render: function() {
    return React.DOM.button({
        onClick: this._toggle
    }, "" + this.state.active)
  }
});

ReactDOM.render(
  React.createElement(ButtonComponent, {}),
  document.getElementById('events')
);

No exemplo acima crio um componente botão onde ele simplesmente faz o toggle de um atributo, poderia ser qualquer outro atributo ou interagir com outro elemento. O evento nos acionamos quando passamos o render do nosso componente neste caso onClick, poderíamos passar mais de um evento.

Lembrando todos os exemplos estão no meu github: https://github.com/fellyph/react-tutorial

Stateless vs Stateful

Continuando a série sobre ReactJS. Vamos falar sobre um dos princípios básicos sobre estado(state). Os dois últimos posts, por exemplos, criamos componentes estáticos(ou stateless), mas atualmente boa parte das aplicações precisam ter algum tipo de interação com o usuário.

As informações precisam ser alteradas em tempo real. Uma das base do React é um conceito de estado, cada componente utilizado tem uma estado próprio quando estado muda o React reconstrói a UI sem o dev fazer nenhuma requisição para alterar o DOM.

Tudo que precisamos fazer é especificar onde os dados terão o estado “alterável”. Para isso utilizamos uma função this.setState() para manter os dados atualizados. Quando ele é chamando, Qualquer informação alterada no componente ele chama o método render() para atualizar a tela.

Criando o primeiro componente Stateful

Até o momento temos apenas um component Stateless, precisamos transforma-lo em um elemento Stateful. Vamos dar uma olhada neste exemplo:

var TextAreaCounter = React.createClass({
  propTypes: {
    text: React.PropTypes.string
  },
  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        defaultValue: this.props.text
      }),
      React.DOM.h3(null, this.props.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {text:"bob"}), document.getElementById('state')
);

No exemplo acima, nosso componente possuí uma textarea e um título que mostra o tamanho do nosso texto e ele ainda está stateless. Ele precisa do método ReactDOM.render, para atualizar as informações quando o usuário edita o valor da caixa de texto. Para isso precisamos manter os dados(estado) e saber quando eles serão alterados, vamos ver o exemplo atualizado:

var TextAreaCounter = React.createClass({
  propTypes: {
    text: React.PropTypes.string
  },

  getInitialState: function() {
    return {
      text: this.props.text,
    };
  },

  _textChange: function(ev) {
    this.setState({
      text: ev.target.value
    })
  },

  render: function() {
    return React.DOM.div(null,
      React.DOM.textarea({
        value: this.state.text,
        onChange: this._textChange
      }),
      React.DOM.h3(null, this.state.text.length)
    );
  }
});

ReactDOM.render(
  React.createElement(TextAreaCounter, {text:"bob"}), document.getElementById('state')
);

Primeiro passo é chamar o método getInitialState() ele é responsável por salvar o estado inicial do elemento, após adicionarmos o método getInitialState precisamos definir as ações que iremos tomar quando nosso componente sofre alguma alteração no seu estado, nesse caso adicionamos uma função “_textChange” ela simplesmente atualizar o estado do elemento com setState, quando ele for alterado.

No último bloco do nosso componente dois pontos importantes, agora no value do nosso textarea e do nosso h3 não acessamos os props do nosso componente e sim o estado “React.DOM.textarea({ value: this.state.text, …” e “React.DOM.h3(null, this.state.text.length)” outro ponto importante adicionamos um evento onChange para disparar a método _textChange.

Agora quando alteramos nosso componente ele atualiza os dados. Então o objetivo é fazer posts curtos com mais frequência, todos os tutoriais de react estão no meu git: https://github.com/fellyph/react-tutorial

WordCamp Europa

No final de junho entre os dias 24 e 26 acontece o WordCamp Europa o principal WordCamp na região com mais de 2 mil participantes esse ano o evento acontece em Viena capital da Áustria. Esse será o meu segundo WordCamp na europa já que meu primeiro foi em Londres logo nos primeiros meses que cheguei aqui.

Foi legal ver outras comunidades e notar que a comunidade brasileira é bem forte e com um alto nível técnico comparada as palestras que eu vi. A única diferença que eu ví no WordCamp Londres é o números de empresas que investem no evento. Isso deixa mais fácil você montar uma super estrutura com: legendas em tempo real, quatro auditórios, buffet ultra organizado com opções vegana, happy hour. Mas esse detalhe me da mais orgulho porque conseguimos fazer WordCamps de qualidade em diferentes estados.

Mas vamos falar o que interessa, logo quando cheguei fiquei de olho nos WordCamps selecionei alguns que poderia participar, fiz um levantamento sobre custo, grade e país que queria muito visitar. Não sei se todo mundo sabe mas estou passando por uma fase de estudante/mochileiro então meus recursos são limitados. Não posso sair viajando toda a europa então a escolha tem que ser feita a dedo.

É claro que o principal evento não poderia ficar de fora dessa lista. Primeira barreira foi a inscrição, estamos falando do principal evento  da Europa, ou seja, as inscrições acabaram em segundos. Entrei em contato com a organização, contei toda a história que sempre participo e palestro em WordCamps, ajudei na organização do WordCamp São Paulo por 3 anos e gostaria muito participar. A resposta foi melhor que esperava fui convidado para participar como voluntário.

Agora é só aguardar e fazer as malas, já foram passadas as primeiras instruções precisamos chegar um dias antes para alinhar as informações nada diferente que fazemos no Brasil, a única diferença é a quantidade de participantes de diferentes países.

O WordCamp Europa serão 3 dias de muito conhecimento com palestras divididas nos seguintes temas comunidade, desenvolvimento, negócios, design e conteúdo. Nos dias 24 e 25 serão o dia dedicado a palestras no dia 26 é o contributor Day, um dia reservado para contribuição com a plataforma.

palestrantens-wordcamp-europa

Agenda Completa aqui: https://2016.europe.wordcamp.org/schedule/

Quer acompanhar o evento? Ainda restam vagas para assistir o LiveStreaming:https://2016.europe.wordcamp.org/tickets/

Vou postar coisas no meu twitter(@fellyph) e snapchat(fellyphc) no dia do evento só acompanhar lá.