ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário

Tecnologia de Programação 2- Seminário
Professor: Cleiton dos Santos Garcia
Alunos: Djiovani Douglas, Luiz Machado e Osmar Petry
ASP .NET CORE,
Angular 2, e TypeScript
Scaffolding

Hulk:
• Força bruta!
• Mais código
• Muito rápido
• Difícil de achar
• Ou se tornar
• (ninguém quer ser verde)

Homem de ferro:
• Ferramentas!
• Menos código
• Atalhos, IDEs
• Fácil de disseminar
• (todo mundo quer ser milionário)

+53Armaduras diferentes do Iron Man
http://marvel.wikia.com/wiki/Iron_Man_Armor

Hulkbuster Armor
Como o nome sugere, foi feito
especificamente feita para
batalhar contra o Hulk. […]
Durante seu primeiro uso
enagural, ela conseguiu
aguentar um combate fisico
contra o Hulk

ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário

Use ferramentas de produtividade
• Frameworks, Bibliotecas …
• Snippets, shortcuts, scripts …
• IDEs, livre reload, hot deploy …
• Geradores de código

Tempo
gasto
ganha.geek
Tamanho
tarefa
faz
manualmente
fica
puto
roda
script
faz
manualmente
zoa o método complicado
do geek
retorno do
invstimento
escreve
script

Emmet - Ferramenta para desenvolvedores Web
http://emmet.io/

SCAFFOLDING
È um termo […] da engenharia
civil, que denota a colocação de
andaimes e outras estruturas
para suportar tenoriamente
trabalhadores e/ou maquinário
enquanto a construção definitive
não está pronta […]

Scaffolding
• Rails (Ruby)
• Spring Roo (Java)
• Cake (PHP)
• Yeomen (WEB)

…vem com muitas outras ferramentas!

“Git is a fast, scalable, distributed revision control system with an unusually rich command
set that provides both high-level operations and full access to internals.”
Open-Source
Version Controll
Multiplataforma (Linux, Windows,Mac, [...])
https://github.com/git/git

“GitHub is a web-based Git repository hosting service”
Open-Source
Social Network
Git Repository
https://github.com/git/git.github.io

“Yeoman is a robust and opinionated set of tools, libraries, and a workflow
that can help developers quickly build beautiful, compelling web apps.”
Open-Source
Scaffolding
Web Components
https://github.com/yeoman/yeoman

“Gulp is a toolkit that helps you automate painful or time-consuming
tasks in your development workflow.”
Open-Source
Automation
https://github.com/gulpjs/gulp

“Grunt: The JavaScript Task Runner”
Open-Source
Automation
https://github.com/gruntjs/grunt

Qual melhor?
1,910,975
Download
ultimo mês
Plugins
disponíveis
Contribuidores
GitHub
Perguntas
Stackoverflow
Benchmarks
1,910,975 5,915 64 22,945 930ms
2,437,448 2,656 174 23,052 493ms

“Bower package manager for the Web,
created by Twitter”
Open-Source
Package manager
https://github.com/bower/bower

+4321Geradores registrados, sendo +46 oficias
http://yeoman.io/generators/
https://github.com/yeoman

Geradores oficiais
• generator-angular
• generator-polymer
• generator-bootstrap
• generator-chrome-extension
• (…)

Geradores comunidade
• Javascript: Mean, React, Meteor
• Mobile: Android, iOS, Ionic, Cordova, Xaramin
• Java: Jhipster, Spring, JAX-RS
• .NET: Aspnetmvc, Aspnetcore,
• (…)

O que é SPA
• Single page application
• Menos lado servidor, mais do lado cliente
• Não necessáriamente Parallax ou Infinite Scroll

Vantagens
• Melhor experiência usuário
• Performance
• Maior responsabilidade para o lado do cliente

Desvantagens
• Um novo framework
• Javascript desabilitado
• SEO (Search engine optimization)

“Angular is a development platform for building mobile and desktop web applications”
Open-Source
Single Page Application
Web Components
https://github.com/angular/angular

COMPONENTES DIRETIVAS SERVIÇOSROTEAMENTO
TEMPLATE METADATA DATA BINDING
INJEÇÃO
DEPÊNCIA
PRINCIPAIS BLOCOS

{ }
{ }
{ }
{ }
{ }
Barra de navegação
Barra Lateral
Post
Post
Post
Star Widget

{ }
Node.Js
Java
.NET
Ruby
Python
COMPONENT
SERVICE
BACKEND

“TypeScript is a superset of JavaScript that compiles to clean JavaScript output”
Open-Source
MultiBrowser(Chome,Edge,Firefox, [...])
Multiplataforma (Linux, Windows,Mac, [...])
https://github.com/Microsoft/TypeScript

“.NET Core is a blazing fast, lightweight and modular platform for creating
web applications and services that run on Windows, Linux and Mac”
Open-Source
Multiplataforma (Linux, Windows,Mac,[...])
Ambiente .NET
https://github.com/dotnet/core
.NET Core

https://channel9.msdn.com/Events/Build/2016/B891
Android
.NET STANDARD LIBRARY
Uma biblioteca para reger tudo
.NET FRAMEWORK
WPF
Windows
Forms
ASP.NET
.NET CORE
UWP
ASP.NET
CORE
XARAMIN
iOS
OS X
Android

“Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine”
Open-Source
Roda sem auxilio do navegador
Multiplataforma (Linux, Windows,Mac,[...])
https://github.com/nodejs/node-v0.x-archive

Instalação
npm install -g yo
npm install -g generator-aspnetcore-angular2
npm install -g typescript

Gerar um novo projeto
yo aspnetcore-angular2

Command-line
cd src/sua-aplicacao
tsc
dotnet restore
dotnet run

Se informe sobre Yomen
http://yeoman.io/

ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário (20)

Mais de Osmar Petry (20)

ASP .NET CORE, Angular 2, e Typescript com Scaffolding Yeoman | Seminário

Notas do Editor