Angular 2 x React Js

Fala Galera,

Hoje venho falar sobre as duas sensações do momento o Angular 2.0 e o ReactJS.

Não venho falar sobre quem é o melhor para se usar no desenvolvimento Front-End e sim fazer vocês tomarem a melhor decisão sobre qual utilizar em um determinado projeto.

Comparando Banana com Laranja

Sim, estamos comparando banana com laranja. Angular é um Framework e o React é uma biblioteca. O Angular foi feito para resolver diversos tipos de problemas dentro do desenvolvimento Front-End. Já o React foi feito para resolver somente um problema, o problema de interface.

Por que usar Angular 2.0.

Por diversos motivos devemos olhar com carinho sobre o Angular 2.0.  O Angular 2.0 está passando por diversas mudanças desde a sua versão inicial. O desenvolvimento em Angular 2.0 enfatiza a remoção de complexidade em seu código e cria um novo conceito de como se programar em Angular 2.0. Foram removidos controladores, módulos e escopos, conceitos que faziam parte da versão 1.x. O que resta é uma estrutura que usa recursos do ES2015 ao máximo e faz com que as decisões de implementações se tornem mais fácil também diminuindo a sua curva de aprendizado.

Além do foco de tornar as coisas mais simples há outras coisas boas que essa versão traz:

Por que usar React

React é uma biblioteca leve e simples de se usar. Na verdade, as pessoas tende a comparar o React como um framework porém ele não é, ele é uma biblioteca que foi desenvolvida para resolver um único problema no qual ele faz muito bem, renderizar componentes de interfaces. No entanto, o cenário mais comum é usá-lo com uma arquitetura Flux.

O React foi criado pelo pessoal do Facebook para resolver seu problema de interface de usuário, porém acabou dando tão certo que eles resolveram disponibilizar para a comunidade.

O React usa o novo JSX para você desenvolver seus componente, o React é incrivelmente rápido na renderização dos componente e do DOM já que por trás ele usa uma biblioteca chamada Virtual DOM. A curva de aprendizado do React não é tão grande, o grande problema é você se acostumar com o JSX. O React também está totalmente preparado para o ES2015 o que o torna ainda mais interessante.

Além do foco de construir componentes podemos destacar:

Vamos ao exemplo:

Primeiro vamos ao exemplo de um aplicação To-do em Angular 2.0

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser'

@Component({
  selector: 'display',
  template: `<h1>{{title}}</h1>
    <ul>
        <li *ngFor='#task of tasks'>
            {{ task.task }} <a href='#' (click)='delete(task.id)'>Excluir</a>
        </li>
    </ul>
    <input #task type='text' placeholder='nova tarefa' />
    <button (click)='addTask(task)'>Add</button>            
    `
})
export class TaskComponent {
    title = 'Minhas Tasks'
    tasks = [
        {id: 1, task: "Levar o cachorro na rua"},
        {id: 2, task: "Comprar comida"},
    ];
    
    addTask(text:HTMLInputElement) {
        
        var id= this.tasks.length + 1;
        
        var task = {
            id: id,
            task: text.value  
        };

        this.tasks.push(task);
        text.value = "";
        
    };
    
    delete(taskId:number){
        var newItens = this.tasks.filter(function(el){
            return taskId != el.id;  
        });
        
        this.tasks = newItens;         
    }
}

bootstrap(TaskComponent);

Vamos agora ao exemplo de uma aplicação To-do em React

var TaskList = React.createClass({
           createItem: function(item){
               return (
                   <li key={item.id}>{item.task} <a href='#' onClick={this.props.delete.bind(null, item)}>Excluir</a></li>
               );
           },
           render: function(){
               return (
                   <div>
                       <h1>Minhas Tasks</h1>
                       <ul>
                           {this.props.data.task.map(this.createItem)}
                       </ul>                            
                   </div>                  
               );
           }
       });
       
       var TaskApp = React.createClass({
           getInitialState:function(){
               var data = [
                   {id: 1, task: "Levar o cachorro na rua"},
                   {id: 2, task: "Comprar comida"},
               ];
               
               return { task: data }
           },
           delete: function(itemToDelete){
               
               var newItems = _.reject(this.state.task, function(item){
                   return itemToDelete == item
               });
               
               this.setState({task:newItems});
           },
           handleChange: function(e) {
               this.setState({text: e.target.value});
           },
           handleSubmit: function(e) {
              e.preventDefault();
              
              var newTask = { id : this.state.task.length + 1, task: this.state.text};
              this.state.task.push(newTask);
              this.setState({task:this.state.task});                
              this.state.text = "";
           },
           render: function(){
               return (
                   <div>
                       <TaskList data={this.state} delete={this.delete} />
                       <form onSubmit={this.handleSubmit}>
                           <input onChange={this.handleChange} value={this.state.text} />
                           <button>Add</button>
                       </form>
                   </div>
               );
           }
       });
       
       
       ReactDOM.render(
           <TaskApp />,
           document.getElementById('content')
       );

 

Conclusão:

Na minha opinião, não existe vencedores nem perdedores, o melhor Framework/Biblioteca é aquele que se encaixa melhor no seu projeto, cada framework ou biblioteca tem as suas particularidades e seus defeitos.

Com o Angular as vezes você pode estar querendo matar uma formiga usando uma bomba atômica porém com o React você pode precisar de coisas que simplesmente ele não faz e o Angular faz muito bem como por exemplo a parte de rota e a parte de teste, ou seja, pense no que seu projeto precisa naquele momento e escolha o Framework/Biblioteca que se encaixa melhor nos requisitos do projeto.

Não deixe de comentar!

Abs e até a próxima.