SlideShare a Scribd company logo
Da JavaScript a TypeScript
WEB04
Da JavaScript a TypeScript
Roberto Messora
@robymes
robymes@gmail.com
robymes
Chi Sono
Software Engineer, ESRI & Azure Specialist
Divisione GIS
@
Consulenza di management e Information Technology sui temi
di Marketing,Vendite e Retailing
www.valuelab.it Business Partner
Topic take aways
• Focus: perchè TypeScript e perchè migrare/integrare una
soluzione JavaScript esistente a TypeScript
• Prerequisito: conoscenza basilare di TypeScript: sintassi,
costrutti
• Opzionale: per comprendere i concetti fondamentali, non è
necessario conoscere in dettaglio ogni strumento utilizzato nello
stack tecnologico delle demo (riferimenti in fondo alla presentazione)
• Goodies: Struttura real-world della soluzione demo
Nelle puntate precedenti
• CDays 2012: JavaScript avanzato: sfruttare al massimo il web
• CDays 2013: Usare Knockout.js
• CDays 2014: Single Page Applications: Come? Cosa? Perchè?
• CDays 2015: Code quality e test automatizzati con JavaScript
Disponibili sul sito dei Community Days: http://www.communitydays.it/events/
Follow me live
DEMO
http://github.com/robymes/cdays16
SLIDE
http://www.slideshare.net/RobertoMessora/da-javascript-a-typescript
Agenda
• Chi siamo, da dove veniamo, dove andiamo: JavaScript
• TypeScript vive e lotta con noi
• Pronti, partenza, JavaScript
• Mamma, devo integrare TypeScript
Chi siamo, da dove veniamo: JavaScript
"JavaScript (in 1996) had to 'look like Java' only less so, be Java’s
dumb kid brother or boy-hostage sidekick. Plus, I had to be done in
ten days or something worse than JS would have happened."
"JavaScript (nel 1996) doveva 'sembrare Java', solo un po' meno, essere il suo fratellino
imbranato o il suo partner inesperto. In più dovevo essere pronto in dieci giorni o sarebbe
accaduto qualcosa di peggio di JavaScript stesso."
Brendan Eich, ideatore di JavaScript - 2010
TypeScript vive e lotta con noi (dal 2012)
• Linguaggio e strumenti per sviluppare applicazioni complesse
che scalano in grandi team di sviluppo (“JavaScript that
scales”)
• https://www.typescriptlang.org/
• Installazione (ultima versione 2.0.3): npm install -g typescript
• Transpiling verso JavaScript: tsc helloworld.ts  helloworld.js
• Open source
• Inizia e finisce con JavaScript
• Supporta le ultime versioni di JavaScript ed anche alcune future
evoluzioni (async/await, decorators)
1 Ottobre 2012
Anders Hejlsberg
Introducing TypeScript
Channel 9
http://bit.ly/2dqJ3NN
DEMO
TypeScript ABC
“Ma io ho un’applicazione JavaScript”
• Bello TypeScript, ma la mia azienda ha investito tempo,
formazione, personale e denaro per sviluppare un’applicazione
in JavaScript
• Dobbiamo migrare l’intera codebase? No.
• Quanto costa? Il tempo di imparare il linguaggio.
• Ci vogliono nuove competenze? No (anzi…).
Stack tecnologico sviluppo JavaScript
• npm: Node.JS Package Manager
• package.json
• Bower: Repository di librerie di terze parti
• bower.json
• Gulp: Task manager
• gulpfile.js
Stack tecnologico sviluppo JavaScript
• Karma: Test runner
• karma.js
• Jasmine: Unit testing
• Eslint: Linter, code quality, code standards
• .eslintrc.json
DEMO
Pronti, partenza, JavaScript
Stack tecnologico sviluppo TypeScript
• npm, Bower, Gulp, Karma, Jasmine, Eslint
• tsc: Compilatore TypeScript
• tsconfig.json
• Tslint: Linter, code quality, code standards
• tslint.json
TypeScript Declaration File
• Scrittura manuale: generazione di un declaration file
per l’uso del JavaScript già sviluppato nel codice
TypeScript
• tsd: DefinetelyTyped (http://definitelytyped.org/),
repository github che raccoglie i declaration file delle
librerie JavaScript più usate
• tsd.json
DEMO
Mamma, devo integrare TypeScript
Riferimenti
• Node.JS - https://nodejs.org/
• Bower - https://bower.io/
• Gulp.JS - http://gulpjs.com/
• Karma - http://karma-runner.github.io/1.0/index.html
• Jasmine - http://jasmine.github.io/
• Eslint - http://eslint.org/
• TypeScript - https://www.typescriptlang.org/
• Tslint - https://palantir.github.io/tslint/
• DefinetelyTyped - http://definitelytyped.org/
Domande?
Materiale su
http://www.communitydays.it/

More Related Content

PDF
DotNetToscana - Sessione TypeScript
PDF
Open Source Day 2015 - DBaaS con Docker: un caso di studio
PPTX
DbUp - A real case of database migration
PPTX
Architetture a Microservizi con Docker Container
PPTX
Single Page Applications
PPTX
Project modern c++ (ITA)
PPTX
Introduzione a TypeScript
PPTX
Real world Visual Studio Code
DotNetToscana - Sessione TypeScript
Open Source Day 2015 - DBaaS con Docker: un caso di studio
DbUp - A real case of database migration
Architetture a Microservizi con Docker Container
Single Page Applications
Project modern c++ (ITA)
Introduzione a TypeScript
Real world Visual Studio Code

What's hot (20)

PPTX
La mia prima lezione di pozioni
PPTX
Introduzione a .Net Core
PPTX
Introduzione a Docker
PDF
node.js everywhere
PDF
Mobile Development: una introduzione per Web Developers
PDF
Roma linuxday 2013 - nodejs
PPTX
.NET Core, ASP.NET Core e Linux per il Mobile
PDF
Docker & DevOps
PDF
I linguaggi di programmazione e il mondo open-source
PDF
Progetto Linux va a scuola - Descrizione tecnica
PDF
Progetto Linux va a scuola
PDF
Iced tea, la macchina virtuale Java libera
PPTX
Introduzione a Docker
PDF
Applicazioni Serverless con AWS
PPTX
VS Package @ CD2008
PDF
ODP
Un'Infrastruttura di Sviluppo Web Enterprise Distribuita Basata su Modelli Pa...
PDF
Anatomia di un progetto open-source
PDF
Faccio cose. Vedo gente. Localizzo siti.
PDF
Building infrastructure as code with typescript and aws cdk
La mia prima lezione di pozioni
Introduzione a .Net Core
Introduzione a Docker
node.js everywhere
Mobile Development: una introduzione per Web Developers
Roma linuxday 2013 - nodejs
.NET Core, ASP.NET Core e Linux per il Mobile
Docker & DevOps
I linguaggi di programmazione e il mondo open-source
Progetto Linux va a scuola - Descrizione tecnica
Progetto Linux va a scuola
Iced tea, la macchina virtuale Java libera
Introduzione a Docker
Applicazioni Serverless con AWS
VS Package @ CD2008
Un'Infrastruttura di Sviluppo Web Enterprise Distribuita Basata su Modelli Pa...
Anatomia di un progetto open-source
Faccio cose. Vedo gente. Localizzo siti.
Building infrastructure as code with typescript and aws cdk
Ad

Viewers also liked (20)

PDF
Aulas linux
PDF
Node.js: perche' tutto questo hype?
PDF
Apache Cordova: Overview and Introduction
XLS
V. liqviat 2009
PDF
Introduzione a node: cenni storici ecc
PDF
Corso base di Tecnologie WEB - Primi passi in javascript
PPT
node.js e Postgresql
PDF
Introduzione a jQuery
PDF
Corso base di Tecnologie WEB - una visione d'insieme
PDF
Introduzione a JavaScript
PPTX
Workshop AngularJs, Cordova, Ionic - Politecnico di Milano
PDF
Il Web orientato al futuro: Express, Angular e nodeJS
PDF
Web base-03-js-numeri stringearray
PDF
Node js: che cos'è e a che cosa serve?
PPTX
Angular2 가기전 Type script소개
PPTX
Design for Developers: Introduction to Bootstrap 3
PDF
TypeScript - An Introduction
PDF
Titan: Scaling Graphs and TinkerPop3
PDF
Node Foundation Membership Overview 20160907
PDF
Introduction to Bootstrap
Aulas linux
Node.js: perche' tutto questo hype?
Apache Cordova: Overview and Introduction
V. liqviat 2009
Introduzione a node: cenni storici ecc
Corso base di Tecnologie WEB - Primi passi in javascript
node.js e Postgresql
Introduzione a jQuery
Corso base di Tecnologie WEB - una visione d'insieme
Introduzione a JavaScript
Workshop AngularJs, Cordova, Ionic - Politecnico di Milano
Il Web orientato al futuro: Express, Angular e nodeJS
Web base-03-js-numeri stringearray
Node js: che cos'è e a che cosa serve?
Angular2 가기전 Type script소개
Design for Developers: Introduction to Bootstrap 3
TypeScript - An Introduction
Titan: Scaling Graphs and TinkerPop3
Node Foundation Membership Overview 20160907
Introduction to Bootstrap
Ad

Similar to Da JavaScript a TypeScript (20)

PDF
TypeScript, ovvero JavaScript che "non si rompe"
PPTX
Slide typescript - xe dotnet - Codemotion Rome 2015
PPTX
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
PPTX
Slide typescript - net campus
PDF
Acadevmy - TypeScript Overview
PDF
Introduzione ad ECMAScript 6 (ES6) e TypeScript
PPTX
Javascript, il linguaggio (non solo) del web
PDF
Introduzione a java script
PDF
Object Oriented JavaScript con TypeScript
PDF
Corso Javascript
PPTX
Come pensare in TypeScript (Part 1) (Eduard Capanu).pptx
PDF
Web base - Javascript (Node.js): Elementi di base
PPTX
Code quality e test automatizzati con JavaScript
PDF
EcmaScript 6 & 7
PPTX
Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)
PPTX
Javascript avanzato: sfruttare al massimo il web
PPTX
Node js dev day napoli 2016
PDF
Introduzione a node.js
PDF
Introduzione a Node.js
TypeScript, ovvero JavaScript che "non si rompe"
Slide typescript - xe dotnet - Codemotion Rome 2015
TYPESCRIPT, ANGULAR E BOOTSTRAP ASSIEME PER APPLICAZIONI REAL WORLD
Slide typescript - net campus
Acadevmy - TypeScript Overview
Introduzione ad ECMAScript 6 (ES6) e TypeScript
Javascript, il linguaggio (non solo) del web
Introduzione a java script
Object Oriented JavaScript con TypeScript
Corso Javascript
Come pensare in TypeScript (Part 1) (Eduard Capanu).pptx
Web base - Javascript (Node.js): Elementi di base
Code quality e test automatizzati con JavaScript
EcmaScript 6 & 7
Diversamente Javascript: si.. può.. fare! (di Mirko Ravaioli)
Javascript avanzato: sfruttare al massimo il web
Node js dev day napoli 2016
Introduzione a node.js
Introduzione a Node.js

More from Roberto Messora (12)

PPTX
Azure Synapse: data lake & modern data warehouse dalla A alla Z
PPTX
Azure Data Factory: l'evoluzione della specie della data integration
PPTX
Seminario Big Data
PPTX
Docker as a hosting target
PPTX
Da imperativo a reattivo: Bacon.JS
PPTX
Event streaming pipeline with Windows Azure and ArcGIS Geoevent extension
PPTX
Javascript Unit Testing
PPTX
Single Page web Application
PPTX
Self-adaptive geospatial web applications
PPTX
Web technologies and patterns in HTML5 mapping
PPTX
Usare Knockout JS
PPTX
MV* presentation frameworks in Javascript: en garde, pret, allez!
Azure Synapse: data lake & modern data warehouse dalla A alla Z
Azure Data Factory: l'evoluzione della specie della data integration
Seminario Big Data
Docker as a hosting target
Da imperativo a reattivo: Bacon.JS
Event streaming pipeline with Windows Azure and ArcGIS Geoevent extension
Javascript Unit Testing
Single Page web Application
Self-adaptive geospatial web applications
Web technologies and patterns in HTML5 mapping
Usare Knockout JS
MV* presentation frameworks in Javascript: en garde, pret, allez!

Da JavaScript a TypeScript

  • 2. WEB04 Da JavaScript a TypeScript Roberto Messora @robymes [email protected] robymes
  • 3. Chi Sono Software Engineer, ESRI & Azure Specialist Divisione GIS @ Consulenza di management e Information Technology sui temi di Marketing,Vendite e Retailing www.valuelab.it Business Partner
  • 4. Topic take aways • Focus: perchè TypeScript e perchè migrare/integrare una soluzione JavaScript esistente a TypeScript • Prerequisito: conoscenza basilare di TypeScript: sintassi, costrutti • Opzionale: per comprendere i concetti fondamentali, non è necessario conoscere in dettaglio ogni strumento utilizzato nello stack tecnologico delle demo (riferimenti in fondo alla presentazione) • Goodies: Struttura real-world della soluzione demo
  • 5. Nelle puntate precedenti • CDays 2012: JavaScript avanzato: sfruttare al massimo il web • CDays 2013: Usare Knockout.js • CDays 2014: Single Page Applications: Come? Cosa? Perchè? • CDays 2015: Code quality e test automatizzati con JavaScript Disponibili sul sito dei Community Days: http://www.communitydays.it/events/
  • 7. Agenda • Chi siamo, da dove veniamo, dove andiamo: JavaScript • TypeScript vive e lotta con noi • Pronti, partenza, JavaScript • Mamma, devo integrare TypeScript
  • 8. Chi siamo, da dove veniamo: JavaScript "JavaScript (in 1996) had to 'look like Java' only less so, be Java’s dumb kid brother or boy-hostage sidekick. Plus, I had to be done in ten days or something worse than JS would have happened." "JavaScript (nel 1996) doveva 'sembrare Java', solo un po' meno, essere il suo fratellino imbranato o il suo partner inesperto. In più dovevo essere pronto in dieci giorni o sarebbe accaduto qualcosa di peggio di JavaScript stesso." Brendan Eich, ideatore di JavaScript - 2010
  • 9. TypeScript vive e lotta con noi (dal 2012) • Linguaggio e strumenti per sviluppare applicazioni complesse che scalano in grandi team di sviluppo (“JavaScript that scales”) • https://www.typescriptlang.org/ • Installazione (ultima versione 2.0.3): npm install -g typescript • Transpiling verso JavaScript: tsc helloworld.ts  helloworld.js • Open source • Inizia e finisce con JavaScript • Supporta le ultime versioni di JavaScript ed anche alcune future evoluzioni (async/await, decorators)
  • 10. 1 Ottobre 2012 Anders Hejlsberg Introducing TypeScript Channel 9 http://bit.ly/2dqJ3NN
  • 12. “Ma io ho un’applicazione JavaScript” • Bello TypeScript, ma la mia azienda ha investito tempo, formazione, personale e denaro per sviluppare un’applicazione in JavaScript • Dobbiamo migrare l’intera codebase? No. • Quanto costa? Il tempo di imparare il linguaggio. • Ci vogliono nuove competenze? No (anzi…).
  • 13. Stack tecnologico sviluppo JavaScript • npm: Node.JS Package Manager • package.json • Bower: Repository di librerie di terze parti • bower.json • Gulp: Task manager • gulpfile.js
  • 14. Stack tecnologico sviluppo JavaScript • Karma: Test runner • karma.js • Jasmine: Unit testing • Eslint: Linter, code quality, code standards • .eslintrc.json
  • 16. Stack tecnologico sviluppo TypeScript • npm, Bower, Gulp, Karma, Jasmine, Eslint • tsc: Compilatore TypeScript • tsconfig.json • Tslint: Linter, code quality, code standards • tslint.json
  • 17. TypeScript Declaration File • Scrittura manuale: generazione di un declaration file per l’uso del JavaScript già sviluppato nel codice TypeScript • tsd: DefinetelyTyped (http://definitelytyped.org/), repository github che raccoglie i declaration file delle librerie JavaScript più usate • tsd.json
  • 19. Riferimenti • Node.JS - https://nodejs.org/ • Bower - https://bower.io/ • Gulp.JS - http://gulpjs.com/ • Karma - http://karma-runner.github.io/1.0/index.html • Jasmine - http://jasmine.github.io/ • Eslint - http://eslint.org/ • TypeScript - https://www.typescriptlang.org/ • Tslint - https://palantir.github.io/tslint/ • DefinetelyTyped - http://definitelytyped.org/