28
Donnez votre avis ! Depuis votre smartphone, sur : http://notes.mstechdays.fr De nombreux lots à gagner toutes les heures !!! Claviers, souris et jeux Microsoft… Merci de nous aider à améliorer les TechDays http://notes.mstechdays.fr

TypeScript for dummies

Embed Size (px)

DESCRIPTION

Les applications web recourent de plus en plus au javascript, et on commence maintenant à recourir au javascript pour les parties serveur avec des outils comme Node.js TypeScript est un nouveau language permettant d'annoter et de structurer son code javascript, afin d'en faciliter la fiabilité et la maintenance. Dans cette session, nous vous présenterons les bases de TypeScript et comment tirer le meilleur parti de ce nouvel outil dans vos applications.

Citation preview

Page 1: TypeScript for dummies

Donnez votre avis !Depuis votre smartphone, sur : http://notes.mstechdays.fr

De nombreux lots à gagner toutes les heures !!!

Claviers, souris et jeux Microsoft…

Merci de nous aider à améliorer les TechDays

http://notes.mstechdays.fr

Page 2: TypeScript for dummies

TypeScript pour les nuls

Guillaume LeborgneArchitecte logiciel

François GuillotDéveloppeur web

Code / Développement

#typescriptwww.typescriptlang.org

Page 3: TypeScript for dummies

180 collaborateurs Depuis 2007 à Paris - Lyon - Genève

Stand 97 – Zone bleu foncé

BusinessIntelligence Talk

Biz

NETDot Share

Point

Microsoft

100 %

Page 4: TypeScript for dummies

JAVASCRIPT? COMME JAVA?Il y a à peine 10 ans…

TypeScript pour les nuls

Page 5: TypeScript for dummies

TypeScript pour les nuls

JavaScript il y a 10 ans// Manipuler dynamiquement les CSSvar myDiv = document.getElementById("main");myDiv.style.display = "block";myDiv.style.backgroundColor = "#FF0000";

// Créer une requête Ajaxvar XMLHttpFactories = [ function () {return new XMLHttpRequest()}, function () {return new ActiveXObject("Msxml2.XMLHTTP")}, function () {return new ActiveXObject("Msxml3.XMLHTTP")}, function () {return new ActiveXObject("Microsoft.XMLHTTP")}];

function createXMLHTTPObject() { var xmlhttp = false; for (var i=0;i<XMLHttpFactories.length;i++) { try { xmlhttp = XMLHttpFactories[i](); } catch (e) { continue; } break; } return xmlhttp;}

Page 6: TypeScript for dummies

TypeScript pour les nuls

JavaScript il y a 10 ans

Page 7: TypeScript for dummies

TypeScript pour les nuls

JavaScript il y a 5 ans// Les librairies nous facilitent le travail$.ajax({ "url": "http://www.example.org", "type": "GET", "success": displayData});

function displayData(data) { $("#myDiv") .html(data) .fadeIn() .addClass("newData");}

Page 8: TypeScript for dummies

TypeScript pour les nuls

• Incontournable pour le développeur web

• Écosystème riche et communauté importante

• Single page applications

JavaScript aujourd’hui

Page 9: TypeScript for dummies

TypeScript pour les nuls

La course aux performances

Page 10: TypeScript for dummies

L’ÉTAT DU LANGAGEOù en est JavaScript?

TypeScript pour les nuls

Page 11: TypeScript for dummies

TypeScript pour les nuls

• Typage dynamique• Langage prototypé• Encapsulation fastidieuse

Ce qu’on lui reproche

Page 12: TypeScript for dummies

TypeScript pour les nuls

Ce qu’on lui reproche

Peu adapté aux développements dépassant une simple page web

Page 13: TypeScript for dummies

TypeScript pour les nuls

• ECMAScript 5 sur la dernière génération de navigateurs– http://kangax.github.com/es5-compat-table/

• ECMAScript 6 prometteur mais en chantier (pas avant 2014…)– http://kangax.github.com/es5-compat-table/es6/

Une norme à dépoussiérer

Page 14: TypeScript for dummies

TYPESCRIPT

TypeScript pour les nuls

Page 15: TypeScript for dummies

TypeScript pour les nuls

TypeScript est un surensemble de JavaScript destiné à améliorer la qualité et la maintenabilité des bases de code JavaScript.

Qu’est ce que TypeScript ?

Page 16: TypeScript for dummies

TypeScript pour les nuls

• 100% compatible avec JavaScript• Open source (licence Apache 2.0)• Compilateur TypeScript écrit en TypeScript• Compatible ECMAScript 3/5 (flag)

Intégration à l’écosystème

Page 17: TypeScript for dummies

TypeScript pour les nuls

• Typage statique• Orienté objet• Arrow functions (lambdas)• Fichiers de définitions

La syntaxe

Page 18: TypeScript for dummies

TypeScript pour les nuls

• Permettre aux IDE des fonctionnalités avancées– Intellisense– Refactoring– Audit de code

• Limiter les erreurs les plus communes• Améliorer la qualité du code

Intérêts

Page 19: TypeScript for dummies

TypeScript pour les nuls

TypeScript = JavaScript avec des supers pouvoirs

Page 20: TypeScript for dummies

demoTYPESCRIPT EN ACTIONhttp://www.typescriptlang.org/Playground/

TypeScript pour les nuls

Page 21: TypeScript for dummies

TypeScript pour les nuls

• Plusieurs plugins disponibles :– Visual Studio 2012 (IntelliSense)– Vi– EMAC– Sublime Text

• Web essentials pour Visual Studio :– Compilation automatique– Options de compilation

Intégration aux IDE

Page 22: TypeScript for dummies

demoAPPLICATION WINDOWS STORE

Retour d’expérience

TypeScript pour les nuls

Page 23: TypeScript for dummies

LE FUTUR DE TYPESCRIPTEt demain?

TypeScript pour les nuls

Page 24: TypeScript for dummies

TypeScript pour les nuls

• Version actuelle : 0.8.2 (21 janvier 2013)• 0.8.3 :

– Généricité– Améliorations du système de typage visant à permettre la modélisation

des librairies JavaScript

• 0.9.x :– Alignement des fonctionnalités avec ECMAScript 6– Site communautaire pour partager les fichiers de syntaxe– Amélioration du plugin Visual Studio

• 1.x :– Async/Await, Mixins, Protected access– Génération de code compatible ECMAScript 6

ROADMAP

Page 25: TypeScript for dummies

TypeScript pour les nuls

• • Script#

• JSLint et Google Closure

Les challengers

Page 26: TypeScript for dummies

TypeScript pour les nuls

• Plugins pour les IDE (Eclipse, Notepad++…)• Fichiers de syntaxe (.d.ts)

– https://github.com/borisyankov/DefinitelyTyped

• Suggestions sur CodePlex

Vous pouvez participer

Page 27: TypeScript for dummies

Donnez votre avis !Depuis votre smartphone, sur : http://notes.mstechdays.fr

De nombreux lots à gagner toutes les heures !!!

Claviers, souris et jeux Microsoft…

Merci de nous aider à améliorer les TechDays

http://notes.mstechdays.fr

Page 28: TypeScript for dummies

Formez-vous en ligne

Retrouvez nos évènements

Faites-vous accompagner gratuitement

Essayer gratuitement nos solutions IT

Retrouver nos experts Microsoft

Pros de l’ITDéveloppeurs

www.microsoftvirtualacademy.com

http://aka.ms/generation-app

http://aka.ms/evenements-developpeurs

http://aka.ms/itcamps-france

Les accélérateursWindows Azure, Windows Phone,

Windows 8

http://aka.ms/telechargements

La Dev’Team sur MSDNhttp://aka.ms/devteam

L’IT Team sur TechNethttp://aka.ms/itteam