Apresentando:                Giovanni Bassi               Victor Cavalcante     giovanni@lambda3.com.br     vcavalcante@la...
@VCavalcante          @GiovanniBassi
Uma empresa democrática•   Sem gerentes ou estrutura hierárquica•   Livros abertos•   Decisões por consenso•   100% ágil  ...
Agenda                                      Desafios do desenvolvimento   Algumas bizarrices do JavaScript                ...
Desafios dodesenvolvimento com           JavaScript
Bizarrices do JavascriptVeja mais em: http://youtu.be/kXEgk1Hdze0
Desafios do JavaScript• OO com prototypes• Auto-complete limitado• Modularização é difícil
Herança com prototypesvar Animal = function () { };Animal.prototype.respira = function () {    return "Respirando.... Resp...
Nosso desafio do dia a dia
Modularização do JavaScript• Diversos atributos adicionados ao escopo global (no  browser, window)• Conflitos de nomes• Se...
O que é?TypeScript
JavaScript é TypeScript!               TypeScript               JavaScript
TypeScript compila para JavaScript
TypeScript é escrito em TypeScript• Código fonte aberto• Compilador na linha de comando/terminal• Módulo do NodeJS ou exec...
TypeScriptA linguagem
Tipagem estática opcionalvar soma = function(x, y){  return x + y;}soma(1,2) //3 //ok!soma(1,"2") //"12" //não ok!
Tipagem estática opcionalvar soma = function(x:number, y:number){  return x + y;}soma(1,2) //3 //ok!soma(1,"2") //não comp...
Sintaxe de função mais limpavar mult = function(a,b){  return a*b;}//a mesma função:var mult = (a,b) => a*b;
Tipagem nas funçõesvar somaLados = (poligono: { x: number; y: number; }) {  return poligono.x + poligono.y;}var total = so...
Inferência de tipovar numero = 1; //isso é um númerofunction escreva(texto:string){}escreva(numero); //não compila//o mesm...
Inferência de tipovar numero = 1; //isso é um númerofunction escreva(texto:string){}            Com TypeScript os erros de...
Classes!class Animal {    respira(): string {        return "Respirando.... Respirando....";    };}class Cachorro extends ...
Construtoresclass Animal {    constructor(public nome: string) { };    respira(): string {        return this.nome + " Res...
Interface de funçãointerface binario {  (x: number, y: number): number;}var soma:binario = (x, y) => x + y;soma(4, "5"); /...
Interfaces de objetosinterface Cachorro {  nome: string;  late: () => void;}var lessie: Cachorro = {  nome: "Lessie",  lat...
Interfaces como parâmetrosinterface Retangulo {  altura: number;  largura?: number;}var area = (r: Retangulo) => {  if (r....
Interfaces para classesinterface Calc {    soma(n: number): Calc;    total(): number;}interface Calc {    subtrai(n: numbe...
Propriedades em classesclass Pessoa {    private _nome: string;    get nome(): string {        return this._nome;    }    ...
Módulos//arquivo notificações.tsmodule Notificacao {    export interface Notificador {        notificar(msg:string): void;...
Módulos// arquivo ContasAPagar.ts/// <reference path="Notificacoes.ts" />module ContasAPagar {    class PagamentoAtrasados...
Módulos devem carregar na ordemcorreta<script src="Notificacoes.js"></script><script src="ContasAPagar.js"></script>
Modulos AMDimport notificacao = module("Notificacoes");module ContasAPagar {    class PagamentoAtrasados {        private ...
TypeScript é escrito em TypeScript                                Código fonte                                            ...
Node, Visual Studio, Vim, Sublime, Cloud9, Linux, Windows...                                         Como?
Playgroundhttp://www.typescriptlang.org/Playground/http://bit.ly/tsplayground
+       Sublime Texthttp://www.sublimetext.com/’
+        +http://bit.ly/nodeversionmanagernpm install -g typescriptsudo apt-get install vimClone: https://github.com/giggi...
+           +                             WebEssentialshttp://bit.ly/DOWNLOADVShttp://vswebessentials.com
Source maps FTW!Debugging
Possivel debugar direto no TypeScript• Usando um de-para de TypeScript para JavaScript• O padrão atual é baseado nos sourc...
Debugging com source maps e Chrome
Debugging com source maps e Visual Studio
Desenvolvimento pra    Windows 8 com          TypeScript
Comparando com   CoffeeScript
TypeScript x CoffeeScriptTypeScript                                    CoffeeScriptTipagem estática opcional              ...
Roadmap                                        1.0??                                 0.9?                       0.8.2     ...
Mais informações•   http://www.typescriptlang.org/•   Cursos da Pluralsight: http://bit.ly/cursots•   Blog do TypeScript: ...
Obrigado!           Giovanni Bassi               Victor Cavalcantegiovanni@lambda3.com.br     vcavalcante@lambda3.com.br  ...
@GiovanniBassi@VCavalcante
www.lambda3.com.br
TypeScript - Campus party 2013
TypeScript - Campus party 2013
TypeScript - Campus party 2013
Próximos SlideShares
Carregando em…5
×

TypeScript - Campus party 2013

1.792 visualizações

Publicada em

Palestra ministrada na Campus Party Brasil 2013.

Publicada em: Tecnologia
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.792
No SlideShare
0
A partir de incorporações
0
Número de incorporações
568
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Roteiro:Mostrar as bizarrices do JavaScript Demonstrar as coisas ruins do JavaScript parecido com o vídeo: http://www.youtube.com/watch?v=kXEgk1Hdze0Desafios do desenvolvimento com JavaScript OO com prototypesAuto-complete limitado Modularização é difícilApresentar o TypeScript A linguagem Classes Módulos Interfaces Classes e Interface abertas Tipagem opcionalApresentar o fato de ser Open Source (código no codeplex) http://typescript.codeplex.com/Roda em NodeJSTypeScript é escrito em TypeScriptDemos: Continuar mostrando features da linguagem Demo no site com o Playgroundhttp://www.typescriptlang.org/Playground/Demo mostrando com NodeJS no Linux Instalando Baixando com GitRodando a partir do código fonte Desenvolvendo no VimDemo mostrando TypeScript no Visual Studio RefactoringApoio do ferramental Exibição lado a lado com JS geradoDesenvolvimento pra Windows 8 com TypeScript Comparação com CoffeeScriptDescrição: JavaScript é a linguagem da web, e disso não há dúvida. Mas a linguagem tem evoluído com timidez, e quem trabalha no dia a dia com ela sente necessidade de uma linguagem que suporte melhor o desenvolvimento. Coisas simples, como uma ferramenta que suporte uma boa refatoração, modularização, e suporte a orientação a objetos com classes fazem muita falta. Além disso, algumas construções do JavaScript poderiam ser mais fáceis de entender. O TypeScript é uma linguagem baseada em JavaScript (na verdade, um superconjunto seu), que compila para JavaScript, e que pode ser usada em qualquer plataforma (servidor e cliente) e com qualquer navegador. Fácil de usar, extremamente familiar aos desenvolvedores de JavaScript, de instalação rápida e simples no Linux, Mac ou Windows, e com um excelente ferramental a disposição, a linguagem chega para pavimentar o caminho até a próxima versão do JavaScript e para brilhar por conta própria. Nessa palestra veremos como usar e instalar, quais as vantagens e oportunidades e os melhores cenários para seu uso.
  • Victor Cavalcante[]+[]// ’’[]+{}// ‘[object Object]’{}+[]// 0{}+{}// NaN“\\f\\n\\r” == 0
  • Você pode copiar JavaScript e colocar em um arquivo .TS.
  • Você pode copiar JavaScript e colocar em um arquivo .TS.
  • Com JavaScript, só em tempo de execução, não há opção.
  • Giovanni Bassi
  • Victor Cavalcante
  • Giovanni Bassi
  • Victor Cavalcante
  • Victor Cavalcante
  • Giovanni Bassi
  • TypeScript - Campus party 2013

    1. 1. Apresentando: Giovanni Bassi Victor Cavalcante giovanni@lambda3.com.br vcavalcante@lambda3.com.br @giovannibassi @vcavalcante
    2. 2. @VCavalcante @GiovanniBassi
    3. 3. Uma empresa democrática• Sem gerentes ou estrutura hierárquica• Livros abertos• Decisões por consenso• 100% ágil http://bit.ly/lambda3democracia
    4. 4. Agenda Desafios do desenvolvimento Algumas bizarrices do JavaScript O TypeScript com JavaScript Demos Desenvolvimento pra Windows Comparação com CoffeeScript (features, linux, windows, etc) 8 com TypeScript Q&A
    5. 5. Desafios dodesenvolvimento com JavaScript
    6. 6. Bizarrices do JavascriptVeja mais em: http://youtu.be/kXEgk1Hdze0
    7. 7. Desafios do JavaScript• OO com prototypes• Auto-complete limitado• Modularização é difícil
    8. 8. Herança com prototypesvar Animal = function () { };Animal.prototype.respira = function () { return "Respirando.... Respirando....";};var Cachorro = function () { };Cachorro.prototype = new Animal();Cachorro.prototype.late = function () { return Au Au!;};var cachorro = new Cachorro();var animal = new Animal();console.log(cachorro.respira());console.log(cachorro.late());console.log(animal.respira());
    9. 9. Nosso desafio do dia a dia
    10. 10. Modularização do JavaScript• Diversos atributos adicionados ao escopo global (no browser, window)• Conflitos de nomes• Sem modularização com suporte na linguagem, é preciso programar a modularização na mão• Difícil definir explicitamente as dependências de cada módulo
    11. 11. O que é?TypeScript
    12. 12. JavaScript é TypeScript! TypeScript JavaScript
    13. 13. TypeScript compila para JavaScript
    14. 14. TypeScript é escrito em TypeScript• Código fonte aberto• Compilador na linha de comando/terminal• Módulo do NodeJS ou executável
    15. 15. TypeScriptA linguagem
    16. 16. Tipagem estática opcionalvar soma = function(x, y){ return x + y;}soma(1,2) //3 //ok!soma(1,"2") //"12" //não ok!
    17. 17. Tipagem estática opcionalvar soma = function(x:number, y:number){ return x + y;}soma(1,2) //3 //ok!soma(1,"2") //não compila
    18. 18. Sintaxe de função mais limpavar mult = function(a,b){ return a*b;}//a mesma função:var mult = (a,b) => a*b;
    19. 19. Tipagem nas funçõesvar somaLados = (poligono: { x: number; y: number; }) { return poligono.x + poligono.y;}var total = somaLados( { x: 2, y: 3 });somaLados( 3 ); //não compila
    20. 20. Inferência de tipovar numero = 1; //isso é um númerofunction escreva(texto:string){}escreva(numero); //não compila//o mesmo que:var numero:number = 1
    21. 21. Inferência de tipovar numero = 1; //isso é um númerofunction escreva(texto:string){} Com TypeScript os erros de tipagem podem ser pegosescreva(numero); //não compila em tempo de compilação//o mesmo que:var numero:number = 1
    22. 22. Classes!class Animal { respira(): string { return "Respirando.... Respirando...."; };}class Cachorro extends Animal { latir(): string { return "Au Au!!"; }}var cachorro = new Cachorro();var animal = new Animal();console.log(animal.respira());console.log(cachorro.latir());
    23. 23. Construtoresclass Animal { constructor(public nome: string) { }; respira(): string { return this.nome + " Respirando.... Respirando...."; };}class Cachorro extends Animal { late(): string { return this.nome + " Au Au!!"; }}var cachorro = new Cachorro("Link");var animal = new Animal("Arroba");
    24. 24. Interface de funçãointerface binario { (x: number, y: number): number;}var soma:binario = (x, y) => x + y;soma(4, "5"); //não compila
    25. 25. Interfaces de objetosinterface Cachorro { nome: string; late: () => void;}var lessie: Cachorro = { nome: "Lessie", late: () => console.log("auau")}lessie.late();
    26. 26. Interfaces como parâmetrosinterface Retangulo { altura: number; largura?: number;}var area = (r: Retangulo) => { if (r.largura === undefined) return r.altura * r.altura; else return r.largura * r.altura;}var areaquadrado = area({altura:10});var arearetangulo = area({altura:10, largura:5});
    27. 27. Interfaces para classesinterface Calc { soma(n: number): Calc; total(): number;}interface Calc { subtrai(n: number): Calc;}class MinhaCalc implements Calc { private t = 0; soma(n: number) { this.t += n; return this; } total() { return this.t; }; subtrai(n: number) { this.t -= n; return this; }}
    28. 28. Propriedades em classesclass Pessoa { private _nome: string; get nome(): string { return this._nome; } set nome(value: string) { this._nome = value; }}var p = new Pessoa();p.nome = "Giovanni";console.log(p.nome);
    29. 29. Módulos//arquivo notificações.tsmodule Notificacao { export interface Notificador { notificar(msg:string): void; } export class Alert implements Notificador { notificar(msg:string): void { alert(msg); } } export class Log implements Notificador { notificar(msg:string): void { console.log(msg); } }}
    30. 30. Módulos// arquivo ContasAPagar.ts/// <reference path="Notificacoes.ts" />module ContasAPagar { class PagamentoAtrasados { private notificador:Notificacao.Notificador =new Notificacao.Log(); Avisar() { this.notificador.notificar("ola"); } }}
    31. 31. Módulos devem carregar na ordemcorreta<script src="Notificacoes.js"></script><script src="ContasAPagar.js"></script>
    32. 32. Modulos AMDimport notificacao = module("Notificacoes");module ContasAPagar { class PagamentoAtrasados { private notificador:notificacao.Notificador = new notificacao.Log(); Avisar() { this.notificador.notificar("ola"); } }}
    33. 33. TypeScript é escrito em TypeScript Código fonte Apache 2Clone at:https://git01.codeplex.com/typescriptFork at:http://typescript.codeplex.com/SourceControl/BrowseLatest
    34. 34. Node, Visual Studio, Vim, Sublime, Cloud9, Linux, Windows... Como?
    35. 35. Playgroundhttp://www.typescriptlang.org/Playground/http://bit.ly/tsplayground
    36. 36. + Sublime Texthttp://www.sublimetext.com/’
    37. 37. + +http://bit.ly/nodeversionmanagernpm install -g typescriptsudo apt-get install vimClone: https://github.com/giggio/vimfiles
    38. 38. + + WebEssentialshttp://bit.ly/DOWNLOADVShttp://vswebessentials.com
    39. 39. Source maps FTW!Debugging
    40. 40. Possivel debugar direto no TypeScript• Usando um de-para de TypeScript para JavaScript• O padrão atual é baseado nos source maps propostos pela Mozilla (http://bit.ly/sourcemapsr3)• É possível colocar breakpoints, ver valor de variáveis, step into, etc• Já disponível no Google Chrome e Visual Studio
    41. 41. Debugging com source maps e Chrome
    42. 42. Debugging com source maps e Visual Studio
    43. 43. Desenvolvimento pra Windows 8 com TypeScript
    44. 44. Comparando com CoffeeScript
    45. 45. TypeScript x CoffeeScriptTypeScript CoffeeScriptTipagem estática opcional Tipagem dinâmicaSuperset do JavaScript (antencipando Nova linguagemnovidades do EcmaScript 6)Em geral, mais agradável para Em geral, mais agradável paraprogramadores Java, C#, C++ programadores Ruby, Python, GroovyMais fácil escrever ferramental pelas Mais difícil escrever ferramental pelascaracterísticas estáticas da linguagem características dinâmicas da linguagemAuto-complete, refactoring, debugging, findreferences, etcSource mapping e debugging possibilitado Source mapping em versão futura, atrasadodireto na linguagem com relação ao planejamentoLeitura é igual ao JavaScript, com pequenas Mais fácil de ler (postfix, novas palavras-melhorias chave, etc, autoreturn, menos cerimônia)
    46. 46. Roadmap 1.0?? 0.9? 0.8.2 21/jan 0.8.1 Jake 5/dez --out Source --watch 0.8.0 maps 1/out Release inicial
    47. 47. Mais informações• http://www.typescriptlang.org/• Cursos da Pluralsight: http://bit.ly/cursots• Blog do TypeScript: http://blogs.msdn.com/b/typescript/• Tag de TypeScript no blog da Lambda3: http://bit.ly/lambda3ts• TouchDevelop (app Windows8): http://bit.ly/touchdevelopvideo• Anders Hejlsberg apresentando: http://bit.ly/andersts• Hanselman com Anders: http://bit.ly/hanselts• Type Definitions para TypeScript: http://bit.ly/definitelytyped
    48. 48. Obrigado! Giovanni Bassi Victor Cavalcantegiovanni@lambda3.com.br vcavalcante@lambda3.com.br @giovannibassi @vcavalcante
    49. 49. @GiovanniBassi@VCavalcante
    50. 50. www.lambda3.com.br

    ×