Engenho &amp; Engenhocas

Para ler

Arquitectura por camadas em aplicações ASP.NET Core

Para ler

Numa arquitectura por camadas, os blocos (Controller, View e Model) da framework ASP.NET MVC fazem parte da camada de apresentação.

No entanto, hoje em dia as aplicações web são construidas com AngularJS ou ReactJS do lado do cliente e ASP.NET Core (Web API) do lado do servidor. O que é, então, a camada de apresentação neste tipo de arquitectura?

Esta arquitectura tem as seguintes camadas:

Apresentação
Serviço
Lógica de Negócio/Núcleo da aplicação
Acesso a dados/Persistência

Camada de apresentação

Esta camada compreende as componentes, templates e modelos de AngularJS definidos na aplicação AngularJS. Estes são os artefactos da camada de apresentação.

Camada de Serviço

No âmbito de uma arquitectura por camadas, o serviço funciona como um wrapper da aplicação e disponibiliza as funcionalidades através de uma API com a qual a UI pode interagir. Esta camada vem fazer a ponte entre a camada de apresentação e a camada de negócio. Trata-se de serviços lógicos.

Portanto, a camada de serviço está repartida por duas componentes físicas: o cliente (os serviços HTTP do AngularJS) e o servidor (os controllers do ASP.NET Core). Os serviços do AngularJS e os controllers do ASP.NET Core são bastante coesos. Os métodos destes serviços comunicam directamente com os endpoints dos controllers do ASP.NET Core. Ex: MyService.getDataList().


app.service('MyService', function () {
  this.getDataList = function () {
    //...
   $.ajax({
       type : 'POST',
   //...
  };
});

Camada da lógica de negócio

Os controllers do ASP.NET Core usam as interfaces com o(s) repositório(s), as classes de domínio e os serviços. Estes são os artefactos da camada de negócio.

É aqui que está o núcleo da aplicação, independente quer da framework de apresentação quer da framework de persistência.

A implementação dos repositórios é da responsabilidade da camada de acesso a dados.

Os serviços são responsáveis pela orquestração. Exemplo:

PhotoService.AddPhoto()


//...
// Save file
var uploadsPath = Path.Combine(host.WebRoot, "uploads");
if (!Directory.Exists(uploadsPath))
    Directory.CreateDirectory(uploadsPath);
 
var fileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
var filePath = Path.Combine(uploadsPath, fileName);
 
using (var stream = new FileStream(filePath, FileMode.Create))
{  
    file.Copyto(stream);
}
 
// Add a record to the repository
var photo = new Photo { FileName = fileName };
photoRepository.Add(photo);
unitOfWork.Complete();

Isto é separação de conceitos. E temos a Clean Architecture do Uncle Bob.

Camada de acesso a dados

Esta camada é responsável pela persistência. É aqui que temos as frameworks O/RM (no caso da Entity Framework, o DbContext pertence a esta camada) e a implementação das software patterns Unit Of Work e Repository.

Ver aqui vídeo com a implementação das software patterns Repository e Unit Of Work usando a Entity Framework.

Relacionados:
A POPULARIDADE DO ANGULARJS
.NET CORE E ASP.NET 5 (COM TUTORIAL)
ANGULARJS: SERVICE VS FACTORY

fonte: Programming with Mosh

Do Angular 1 para o Angular 2

Para ler

Razões para actualizar

Renderização do lado do servidor

O Angular 2 está dividido em duas partes, uma camada de aplicação e uma camada de renderização, o que permite executar Angular noutros ambientes além de navegadores web.

Templates mais robustas

Há uma nova sintaxe analisável estaticamente, há directrizes que desaparecem e há melhor integração com componentes web e outros elementos.

Melhor desempenho

Detecção de alterações mais rápida, pré-compilação das templates e o bootstrap mais rápido são algumas das melhorias que fazem a framework mais rápida.

O que muda

Componentes

Tudo é uma componente, até a própria aplicação.

Inputs/Outputs

Propriedades e eventos dos elementos

Content Projection

Trata-se da nova transclusão, mas mais alinhado com o padrão das componentes web.

Dependency Injection

Cada componente tem o seu injector.

Outras coisas vão mudar no Angular 2 como routing, forms e a camada Http.

Actualização para Angular 2

Este processo compreende duas fases: preparação e actualização.

Preparação

Considera a estrutura da aplicação, as ferramentas ou a actualização da linguagem.

Actualização

Executar ambas as frameworks lado a lado. É aqui que entra em acção o ngUpgrade para tornar as componentes das versões 1 e 2 interoperáveis.

Actualizar com ngUpgrade

Este módulo actua como um adaptador, o que abstrai a existêcnia de duas frameworks a correr em simultâneo. Quatro coisas têm de interoperar.

Dependency Injection

Componentes de Angular 1 a usar serviços do Angular 2 e vice-versa

Component Nesting

Componentes de Angular 2 a usar directivas de Angular 1 e vice-versa.

Content Projection

Componentes Angular 1 transcluem componentes Angular 2 e vice-versa.

Change Detection

Intercalação entre Scope Digest (A1) e Change Detectors (A2)

Exemplo aplicado a bootstrap

import {UpgradeAdapter} from 'angular2/upgrade';

var adapter = new UpgradeAdapter();
var app = angular.module('myApp', []);

adapter.bootstrap(document.body, ['myApp']);

Todo o processo detalhado e em actualização no artigo original por Pascal Precht.

fonte: thoughtram Blog

Angular 2 & TypeScript

Para ler

Pré-requisitos

Instalação AngularJS 2
Instalação TypeScript

Código AngularJS 2

Componentes

As componentes são os blocos principais para construção de uma app em AngularJs 2:

AngularJS 1	AngularJS 2
App.js	Componente de topo
Directiva	Componente
Controller e view	Componente
Directiva com controller	Componente

Implementação de uma componente

app.ts


import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';

class Hero {
  id: number;
  name: string;
}

@Component({
    selector: 'my-app',
    template: '<div>
 <label>name: </label>
 <input [(ng-model)]="hero.name" placeholder="name">
        </div>',
    directives: [FORM_DIRECTIVES]
})

class LittleComponent {
    public title = 'Tour of Heroes';
    public hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
}

bootstrap(LittleComponent);

Para definir uma componente AngularJS 2 é necessário criar uma classe (TypeScript) e decorá-la (TypeScript) com a anotação @Component. A classe contém a lógica enquanto a anotação define a componente AngularJS 2.

Selector

Indica como a componente vai ser activada no HTML

<my-app></my-app>

Template

O HTML que vai ser inserido na componente. Pode ser URL;

Directives

Array das componentes a usar. FORM_DIRECTIVES componentes nativas.

[(ng-model)]

Two-way data binding. Binding hero.name - input;

Typed language

Instanciação da classe Hero.

Dependency Injection

import {bootstrap, Component, FORM_DIRECTIVES} from 'angular2/angular2';

Com TypeScript há autocomplete enquanto se escreve dentro do 'import { '.

Templating

Bootstrap

bootstrap(LittleComponent);

Código HTML

index.html


<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script>
      System.config({
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Outro exemplo disponível aqui.

fonte: Creating your first Angular 2 app

Node.js vs AngularJS

Para ler

AngularJS: Service vs Factory

Para ler

Qual a diferença?

.service() é um método do módulo que recebe um nome e uma função que define o serviço.

app.service('myService', function () {
  this.sayHello = function () {
    console.log('Que lindo dia!');
  };
});

.factory() é um método do módulo que recebe um nome e uma função que define a factory.

app.factory('myFactory', function () {
  return {
    sayHello: function () {
      console.log('Lindo dia realmente.');
    };
  }
});

Então, qual é a diferença?
Como se pode verificar, ao invés de se trabalhar com this na factory, é retornado um objecto. Porquê? Porque um serviço é um construtor e a factory não.

Quando usar um e outro?

A escolha mais acertada é optar pela adopção de serviços sempre que possível no que toca à migração para , visto que o serviço é um constructor e a factory não. Optar por um constructor em permite usar classes ao migrar para .
Pode pegar-se, por exemplo, no código acima e reescrevê-lo desta forma em ES6:

class MyServiceClass {
  sayHello() {
    console.log('Que lindo dia!');
  }
}

app.service('MyService', MyServiceClass);

Na verdade, uma classe é um construtor em . Com uma factory tal não é possível, uma vez que é invocada como uma função.

Aqui está disponível um bom artigo sobre o uso de ES6 em AngularJS.

Mais informação sobre a versão do JavaScript em ES6js.com.

fonte: Blogue thoughtram

Dependency Injection em AngularJS 2

Para ler

Video YouTube, Dependency Injection for Future Generations by Pascal Precht at JSConf Budapest 2015

Diapositivos

Dependecy Injection como padrão

A facilidade de testar através de constructor injection

Dependecy Injection como framework

Dependency Injection em AngularJS 1

Dependency Injection em AngularJS 2

Injector - Biding - Object

Dependency type as a token

O decorator adiciona metadata à classe e o sistema injector assim sabe que dependências têm de ser instanciadas para criar o objecto que depende delas.

Fazer o biding do token à classe

O token mapeia qualquer classe, mesmo um serviço de terceiros, e não há conflitos de nomes.

Assincronicidade

.toAsyncFactory()

Transient Dependencies e Child Injectors

Os child injectors fazem override de alguns bindings ou obtêm diferentes instâncias de uma classe.

DI aplicado em AngularJS 2

class NameService {
  constructor() {
    this.name = 'Pascal';
  }

  getName() {
    return this.name;
  }
}

Questões

As perguntas e respostas estão disponíveis a partir do minuto 30 da apresentação.

DI em AngularJS 1 e AngularJS 2

Limitação	Resolução
Síncrono por omissão	Síncrono e assíncrono
Colisão de namespaces	Não há conflito de nomes
Dependências como Singletons	Dependências transientes
Dependente da framework	Pode ser Standalone

Notas
Ler o artigo sobre a apresentação pelo autor.
vide The difference between Annotations and Decorators

vide A popularidade do AngularJS

vide Is using React JS with Angular for view a good idea?

A popularidade do AngularJS

Para ler

O que é o AngularJS?

A framework web de código aberto AngularJS é escrita em JavaScript e mantida pela Google.
Esta framework é comumente usada no desenvolvimento de Single Page Applications (SPA). Estas aplicações são aplicações web ou sitios web que cabem numa única página web.

Malgrado a curva de aprendizagem acentuada, esta framework é muito popular e uma vez havendo conhecimento de AngularJS, o desenvolvimento e os testes das aplicações web tornam-se mais simples.

Esta framework é grátis e ajuda a usar HTML como template, cria aplicações RICH e é uma aplicação cliente. Permite ainda estender a sintaxe da linguagem HTML e, acima de tudo, muito do código que teria de ser escrito é eliminado graças ao data binding e à dependency injection desta framework.

Esta solução cliente fornece

data binding
directivas que estendem a linguagem HTML com templates
validação
routing
deep linking
componentes reutilizáveis

O que tornou o AngularJS tão popular?

Possiblita a estruturação do código segundo os padrões MVVM ou MVC.
O two-way data binding diminui consideravelmente a quantidade de código necessário à manutenção da consonância entre Model e View.
Web designers e programadores podem trabalhar em paralelo, uma vez que as templates são HTML. Enquanto os designers criam as interfaces, os programadores ligam as componentes de UI com os modelos de dados através de uma sintaxe declarativa para programar o binding.
O DOM da página é analisado e o binding é feito usando atributos do elemento. O AngularJS também pode modificar directamente o DOM da página.
Dado que os modelos de dados do AngularJS são Plain Old Java Object(POJO), torna-se relativamente simples alterar ou adicionar propriedades.
Qualquer aplicação web baseada em dados pode ser desenvolvida sem recorrer a outra framework ou plug-in visto a framework ter um pacote completo.
Suporta testes unitários.

Exemplo básico

<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<body>

<div ng-app="">
 
<p>Escreve um nome qualquer na caixa:</p>
<p>Nome: <input type="text" ng-model="name"></p>
<h1>Olá {{name}}</h1>

</div>

</body>
</html>

AngularJs Quick Start

(editado)