Le Post Infeeny

Les articles des consultants et experts Infeeny

#SPC2012 : Using TypeScript to Build Apps for Office and SharePoint

Wednesday, 10h15, Rober Bogue, MVP, Thor ProjectsKeenan Newton, Developer audience SharePoint and Office Microsoft

Résumé

Session très intéressante sur TypeScript, comme surcouche de Javascript. Il permet notamment à un IDE comme Visual Studio 2012 de profiter de l’intellisense et la gestion d’erreurs en javascript. L’objectif est de créer des applications assez robustes et avancées en javascript en profitant des classes, namespaces etc tout en étant en Javascript.

Malgré tout, la session montre beaucoup de code qui comme ça, n’est pas forcément digeste. On fait confiance sur le fait que cela fonctionne bien et soit bien codé, mais cela mérite d’être poussé avec un mode « en pratique »

TypeScript dans SharePoint, puis dans Office.

TypeScript a été dévoilé il y a un mois. L’idée est de compiler du code pour qu’il finisse en javascript sur une page. C’est une méthode en quelque sorte d’abstraction à l’utilisation de javascript.

// Retour sur javascript

Avantages :

Ubquitous, cross-browser, cross-platform Utilisation de jQuery Knockout et autres libraires possibles.

Inconvénients :

Vérification à la compilation prend du temps. Pas d’Intellisense.

Différences d’implémentations parfois.

// Pourquoi TypeScript

Application-Scale Development : Gestion de modules, classes, types.

Beaucoup de lignes de codes.

Vérification du compilateur, d’autant plus intéressant lorsque nous avons beaucoup de lignes de codes.

On peut toujours utiliser les librairies Javascript.

TypeScript est une surcouche à Javascript, il ne le remplace pas.

Il invite à utiliser http://www.typescriptlang.org/Playground/

Gestion d’intellisense, d’erreur à la volée, compilation à la volée. Gestion de classes, modules (équivalent namespaces), héritages.

// DEMO : App de commentaires de Vidéos

L’App est en HTML5, a mis une <video>, 3 input (2 textes, et un bouton).

Il a ajouté un VideoCommenter.js dans son projet.

Il va sur un fichier VideoCommenter.ts –> Il va dessus, il est dans le window.onload = () => {} Il utilise un type Commenter avec class Commenter {} Il a un constructeur et des méthodes.

Le code reste du javascript, mais il profite de la gestion d’erreur, l’intellisense etc.

En allant sur le VideoCommenter.js, on a bien du javascript classique.

// Retour sur les slides : Newton parle des options de développements

Il y a les full trust farm solution et les Apps.

Il revient sur les modes d’hébergement d’une App (Autohosted, Provider hosted, ou SharePoint hosted).

Il revient sur le cross-site scripting où il explique que cette sécurité est importante et qu’une app est sur une URL différente pour permettre nativement aux Apps d’être sécurisées face à SharePoint.

// DEMO : Rogue présente son TypeScript SPREST library

Ce qu’il a fait c’est de créer de nombreux fichiers .ts représentant les objets SharePoint, tous compilés en un seul .js.

Pour ce faire, ouvrir le csproj, par défaut, il y a un noeud qui force le fait que chaque .ts va être compilé en un js bien séparé.

Pour ce faire, il ouvre le csproj et ajout un –out &quote;$(ProjectDir)SPREST.js&quot; et -c -declarations. Il est allé vite, je ne sais pas sur quel noeud c’est.

Il va dans son autre csproj pour son App, dans le App.js, il va consommer grâce à Knockout et les promises (cf session de Scott Hillier sur les best practices Javascript).

Il a déployé son App, sur une Asset Library où il va commenter sa vidéo. Il a ajouté un Custom Action dans son app pour avoir un menu dans l’ECB par lequel il accède à son App et où il poste un commentaire à la seconde S.Les commentaires sont sauvegardés dans une liste.

Il revient sur VS2012, où il référence son SPREST.js dans son Default.aspx.

Il présente notamment un JQuery.d.ts, version TypeScript de jQuery développée pour avoir l’intellisense.

Il revient sur la méthode de rendre un csproj compatible avec TypeScript. Il ouvre le csproj.

CSproj dans <Project> il y met intialtargets= »TypeScriptCompile »

Le noeud Target, il ajoute le -out etc.

Il est passé rapidement car il a mis ça dans les slides.

// Retour sur les slides : Newton revient sur les Apps Office

Ce sont une WebPage (avec <script src= »Office.js »> + AppManifest.xml Pour l’instant il n’existe pas encore de TypeScript pour Office.js pour l’instant mais cela va venir.

// DEMO : Extraction des commentaires vidéos vers Excel

Il a un fichier Excel avec une App for Excel où il récupère les données de la liste de commentaires et les insère dans la feuilles.

Il retourne sur VS2012. Il a deux projets, un pour l’AppManifest. L’autre pour l’App dans lequel il ouvre le fichier ASPX.

Il y charge MicrosoftAjax.js et Office.js. Il a aussi sa librairie SPREST.js et son js de son App.

Au début il utilise un declare.

Il fait ses requêtes en javascript avec sa librairie. Là où il veut nous emmener est qu’il récupère ses données et les insère dans  l’Excel assez facilement via quelques lignes de codes grâce notamment à la librairie Office.

En fait il a utilisé assez facilement sa librairie TypeScript et la librairie Office.js dans son code.

Cela ne parait pas clair à l’écrit mais la démo est plutôt convaincante même si la vitesse et la quantité de code montrée est assez conséquente.

Christian

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :