O futuro dos WebApps com

2.0

Wilson Mendes

@willmendesneto

#NOT

Wilson Mendes

@willmendesneto

#developer

 

#opensource

 

#GDE AngularJS

#codetime

Era uma vez...

Marco inicial: 2009 

 

Primeiro produto: Double Click

Conceitos

Programação: imperativa x declarativa

        <h2>Twitter search</h2>
        <form >
          <input type="text" ng-model="vm.searchTerm" />
          <input type="button" ng-click="vm.search()" value="Search" />
        </form>
        
        <table>
          <thead>
            <tr>
              <th>Tweet</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="tweet in vm.tweets.results">
              <td>{{ tweet.tweet }}</td>
            </tr>
          </tbody>
        </table>

++1600

Projetos

 

Issues

 

Pull Requests

vem da

Comunidade

50%

Javascript Everywhere

Chrome Devtools

 

Mobile

 

Internet of Things

 

Games

#codetime

Rotas

NG-Router x UI-Router

++Facilidades

Internacionalização

 

Formulários

 

Animações

 

Transições

Diretivas

Componentizar aplicações tornou-se algo simples


        ...
        <chart type="area" value"{{basicAreaChart}}" height="400">
        </chart>
        
        ...
        

<chart></chart>

<chart></chart>

NÃO QUER COMEÇAR DO ZERO?

MACGYVER

 

ANGULAR-UI

 

ANGULARSTRAP

 

NGTASTY

;)

KEEPR

++MODULARIZAÇÃO

angular.modules();

Modularizar é a alma do negócio

 

Como compartilhar nossos módulos?

http://ngmodules.org/

https://www.npmjs.com/

Aprendemos que projetos grandes se preocupam com seus usuários

NÃO ESCONDEMOS O PROBLEMA

Updates?
Sem
Problemas

https://docs.angularjs.org/guide/migration

ONDE PODEMOS MELHORAR?

Projetos grandes precisam de organização

John Papa + Todd Motto

AngularJS Style Guide

E QUANTO AOS TESTES?

Diz que teste é algo fácil, mas onde

encontro:

 

Boas práticas?

Exemplos?

Dicas?

Will Mendes + Ciro Nunes

AngularJS Testing Recipes

#WHAT ??

!==

Performance

Injeção de dependência

Facilidade para alterar comportamentos do binding

Sintaxe "Angular like"

 

Novos desafios

Novas possibilidades

2.0

Muitas pessoas curtiram as novidades

Muitas pessoas não responderam muito bem a novidade...

Muitas melhorias estão por vir com a nova versão

MANIPULAÇÃO DE DOM

Sem nenhuma dependência externa

* jQuery / jQlite / etc

ROTAS NO ANGULAR 2.0

New router

 

Correção de bugs

 

Nested routes

        



        import {Location, RouteConfig, RouterLink, Router} from 'angular2/router';
        
        @RouteConfig([
          { path: '/',       redirectTo: '/home' },
          { path: '/home',   as: 'home',   component: Home },
          { path: '/login',  as: 'login',  component: Login },
          { path: '/signup', as: 'signup', component: Signup }
        ]);

TWO WAY DATA BINDING 2.0

Melhorias no algoritmo

 

DOM Virtual? Não utilizamos

 

WebWorkers para renderização

DIRECTIVES 2.0

Agora a brincadeira começa a ficar séria

 

Web Components

 

Shadow DOM spec

        import {Component, View, For} from 'angular2/angular2';
        
        @Component({
          selector: 'shopping-catalog',
          properties: {
            items: 'items',
            cart: 'cart'
          }
        })
        @View({
          templateUrl: 'catalog.html',
          directives: [For]
        })
        
        export class Catalog {
          items: List<Object>;
        }

CRIANDO DIRETIVAS

    <main class="store-content">
        <ul class="store-itens">
          <li class="store-item" *for="#item of items">
              <material-catalog-item [name]="item.name"
                                      [price]="item.price"
                                      [photo]="item.photo"
                                      [description]="item.description">
                <a (click)="cart.addItem(item)" class="md-button">add</a>
              </material-catalog-item>
          </li>
        </ul>
    </main>

DIRETIVAS - TEMPLATE


    <!-- variáveis locais -->
    <li class="store-item" *for="#item of items">
    
    <!-- propriedades-->
    <p [description]="item.description"></p>
    
    <!-- eventos -->
    <a (click)="cart.addItem(item)" class="md-button">add</a>

TEMPLATE ENGINE

        import {Catalog} from 'catalog';
        import {Cart} from 'cart';
        
        @Component({
          selector: 'shopping-app'
        })
        
        @View({
          templateUrl: 'app.html',
          directives: [Catalog, Cart]
        })
        

COMBINANDO DIRETIVAS

$scope is dead

$scope is the glue

 

this is the glue

 

++Javascript like



    export class Cart {
      items: List<Object>;
    
      constructor() {
        this.items = [];
      }
    
      addItem(newItem) {
        var existentItems = this.items.filter(function(item) {
          return item.id === newItem.id
        });
    
        if (existentItems.length) {
          existentItems[0].quantity += 1
        } else {
          newItem.quantity = 1;
          this.items.unshift(newItem);
        }
      }
    
      checkout() {
        this.items = [];
      }
    
    }
    

IMMUTABLE DATA

Estado não pode ser alterado após criação

 

Thread safe (sem alterações)

 

Bom para se usar como chave hash

NG IMMUTABLE DATA

Estrutura de dados imutáveis e observers por padrão

 

++ performance

++render

* Typescript

Em alguns momentos o Javascript pode se tornar o vilão

* Não é obrigatório

#codetime

1.4

1.5

1.6

1.7

1.8

1.9

2.0

EVOLUÇÃO NATURAL

https://angular.io/

#obrigado

Wilson Mendes

@willmendesneto

O futuro dos WebApps com AngularJS 2

By willmendesneto

O futuro dos WebApps com AngularJS 2

AngularJS é um framework javascript construído e mantido pelo grupo de engenheiros do Google, ele usa o HTML como uma "template engine" aliado a conceitos de Orientação a Objetos, testes, dentre outros, no intuito de fornecer uma solução completa para o client-side de sua aplicação. Além disso tem total compatibilidade com as bibliotecas javascript mais utilizadas, como jQuery. é um novo conceito para desenvolvimento de web apps client-site. Entenda as novidades que estão por vir com o AngularJS 2.0, as novas definições, facilidades, novos desafios e entenda o motivo do AngularJS ser um framework excelente para todos os momentos.

  • 1,247
Loading comments...

More from willmendesneto