Want create site? Find Free WordPress Themes and plugins.

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:

Pontos Fortes Pontos Fracos
Performance (3.5x mais rapido que Angular 1.x) Pouca documentação
Fácil de Testar Encontrar recursos ou tirar dúvidas pode ser difícil
É um Framework (Tudo que você precisa para desenvolver está aqui)
ES2015 Ready (Você já pode usar novas funcionalidades da linguagem javascript)

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:

Pontos Fortes Pontos Fracos
Performance Flux pode ser um paradigma bem difícil de se lidar em um primeiro momento
Simplicidade Algumas pessoas não curtem o JSX
Componentização de interfaces
É uma biblioteca leve e simples (pegue as coisas que se encaixam no seu projeto)
ES2015 Ready (Você já pode usar novas funcionalidades da linguagem javascript)

 

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 ReactJs


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.

 

Rafael Cruz

É desenvolvedor .NET há mais de 12 anos, certificado Microsoft desde de 2006, instrutor oficial Microsoft há 5 anos, Pós Graduado em Engenharia de Software pela UFRJ, suas certificações são Microsoft Certified Trainer, Microsoft Certified Solution Developer (Web, Application Lifecycle Management), Microsoft Certified Professional Developer, Microsoft Certified Tecnology Specialist.
Atualmente trabalha como arquiteto de sistema, escreve artigos no .NET Coders e no seu blog rafaelcruz.azurewebsites.net para compartilhar experiências na área de desenvolvimento Web, Aplicativos Móveis e Cloud Solutions.

Twitter LinkedIn 

Did you find apk for android? You can find new Free Android Games and apps.

Comentários

comentarios