O documento discute ferramentas e práticas de desenvolvimento web, focando em scaffolding, frameworks e linguagens como ASP.NET Core, Angular 2 e TypeScript. Ele compara abordagens de desenvolvimento entre métodos manuais e automatizados, destacando o uso de geradores de código. Além disso, menciona ferramentas como Yeoman, Gulp e Git para otimizar o processo de criação de aplicações web.

1. 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

2. O que é
Scaffolding

3. vs

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

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

6. Qual é melhor?

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

8. 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

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

11. 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

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

13. 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 […]

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

15. Nova paradigma…

16. …vem com muitas outras ferramentas!

17. “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

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

20. Scaffolding
Tool

21. “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

22. BUILD
TOLL

23. “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

24. OU

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

26. 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

27. Diferença código

28. Diferença código

29. Package
Manager

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

31. Exemplo código

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

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

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

35. Frameworks SPA

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

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

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

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

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

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

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

43. “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

45. “.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

46. 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

47. Exemplo

48. “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

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

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

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

52. Gerar um novo projeto
yo aspnetcore-angular2

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

54. Resultado

55. O que gerou 

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

57. 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