O futuro dos WebApps com

2.0

Wilson Mendes

@willmendesneto

#NOT

Wilson Mendes

@willmendesneto

#developer

#opensource

#GDE AngularJS

#codetime

https://github.com/willmendesneto/social-share 

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

http://willmendesneto.github.io/angular-snake/#/

Rotas

NG-Router x UI-Router

https://medium.com/angularjs-meetup-south-london/angular-just-another- introduction-to-ngnewrouter-vs-ui-router-72bfcb228017

++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://bower.io/

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