Le Post Infeeny

Les articles des consultants et experts Infeeny

#SPC2012 : JavaScript Best Practices for Developing Apps

Tuesday, 11h00, Scott Hillier

Résumé

La session est super intéressante pour les développeurs. Scott Hillier est une pointure dans le domaine et a participé à la mise en place des modèles objets clients de SP depuis des années. Et ça attire du monde, la session est pleine.

Il va vite, très vite, il donne de bonnes informations et de codes ainsi que des démos très très techniques.

Le code est parfois un peu compliqué alors dur de tout comprendre d’un coup, mais on comprend les principes qui permettent de définir des pattern javascript afin de rendre le code plus propre et efficace notamment lorsque nous parlons d’appels asynchrones comme nous le faisions en 2010 et ferons de plus en plus avec les Apps sur 2013.

Il revient également sur les différents moyens d’attaquer les données SharePoint via notamment les services REST et du code javascript/jQuery.

Enfin il explique l’utilisation et l’implémentation du pattern MVVM sur notre code avec notamment la librairie Knockout.

Code dowload : http://hillier.codeplex.com

La salle est comble, difficile de trouver une place. Les personnes sont assises par terre voire debout sur les côtés de la salle.

Coding practice

* Utiliser strict mode : « use script ». Cela permet de définir des restrictions afin d’éviter que Javascript soit trop permissif et éviter des erreurs.

* Eviter les égalités coercives car les types en javascript ne sont pas. (0==’0′; // true 0 === ‘0’ // false)

* Ecapsuler les codes (singleton, module – fonctionnement comme classe avec la visibilité des propriétés – , Prototype – utilise un constructeur avec des prototypes comme des pseudo-classes lorsqu’on créé beaucoup d’instances etc.)

// Promises pattern – aussi appelé Deferreds Un pattern javascript
Effectivement en SP, il y a beaucoup de code asynchrone où l’on créé un callback pour le success ou le fail.

Le code peut être nesté mais devient alors très « sale » lorsqu’on enchaine les opérations dans les success Le pattern vient de jQuery, qui créé un objet dont le résultat est disponible quand la requête a été effectuée On a une méthode qui retourn une méthode du deffered. $.Deffered() est utilisé et mis dans une var.

La méthode retourne une promise() –> deffered.promise(). Entre la déclaration et la return, on a un setTimeout qui va tester la promesse deffered.resolve(« success! ») et exécuter le then suivant lorsque la requêtes est utilisée.

Ensuite on a une méthode mypromise().then (success, failed) qui permet d’appeler les bons callbacks.

NDLR : la théorie a l’air compliquée bien que le code fasse une dizaine de ligne. Voyons la démo.

// DEMO
il va faire une démo du pattern Promises ou Deferred Il a créé une App qui utilise Music Brainz (service API qui retourne les infos de musiques).

Il fait donc un appel REST pour récupérer les musiques qui parlent de « Boston »

Il a deux appels

  1. pour les albums Boston (musicbrainz.org)
  2. maintenant qu’il récupère les éléments, pour chacun, il va récupérer les convers. (coverartarchive.org) Retour sur Visual Studio 2012 pour voir comment ça marche.

Il explique le appmanifest. Il met des Remote Endpoints pour permettre au serveur de faire des appels au services.

Il effectue des rappels sur les Apps en insistant notamment sur la sécurité et les problématiques de cross-domains. il va en faire un exemple grâce à ces remote endpoints. Il explique que l’appel se fait alors côté serveur par SharePoint pour permettre les appels cross romain –> c’est un workaround.

Il retourne sur les scripts « il a un songquery.js » qui fait appel à Music Brainz.

Il utilise « use strictt en haut de sa fonction. Rappel sur la recommandation : on peut mettre use strict sur la fonction plutôt que sur la lib Il utilise la méthode SharePoint SP.WebRequestInfo qui permet au javascript de faire un appel au endpoint déclaré dans le manifest. L’appel se fera par le serveur pour contourner le cross domain.

Il a créé une variable Deffered $.Deffered() Il a des appels SP classique asynchrones.

Il a fait un new MusicBrainz.SongQuery().Excute où il va récupérer un tableau initialisé ou non.

Il fait un test ensuite pour savoir si son tableau est initialisé, sinon il récupère la promise qui a été générée.

La promise est un objet finalement qui exécute du code une fois que la requête a effectivement été exécutée (la méthode then est exécuté lorsque la requête a été effectuée.

Le pattern est présenté comme propre et quelque chose qui doit être utilisé.

Maintenant il a expliqué qu’il a récupéré les albums « Boston » de Music Brainz. Il va maintenant récupérer pour chaque album, la pochette de l’album.

Il montre qu’il a le même pattern pour faire cela, mais avec un objet différent qu’il a créé CoverArtQuery().

Il explique que comme ça il peut faire de multiple appels REST proprement et de façon robuste.

NDLR : Cela parait compliqué comme ça, il faut rentrer dans le code car ça va vite sur la démo.

// Retour sur les slides : Les librairies

Il faut utilise les librairies existantes. Il faut minifier les librairies et les compiler un maximum de librairies en un minimum de fichiers en fin de process de développements. Eventuellement utiliser les CDN pour toujours avoir la dernière version. Enfin utiliser les librairies SharePoint dynamiquement lorsque nous en avons besoin.

On peut utiliser Microsoft AJAX Minifier pour vinifier nos scripts.

Il explique qu’il est possible de charger des librairies SharePoint via un jQuery.getScript() notamment lorsque nous voulons SP.RequestExecutor et ce de façon relative au web que nous voulons (App Web ou Hostweb)

// DEMO : Javascript coding practices

Il fait une App « Contacts ». Où il fait un CRUD sur la liste de contacts.

Il explique qu’il y a des « Prom Controls » pour appliquer un design à l’App correspondant au design du site sur lequel il a été installé.

Il fait un spinner en HTML5 grâce à un setInterval, des arc et des stroke.

PS : il a mis un use script au début de sa librairie js Il nous explique que dans le répertoire Scripts de son App il a un sous-dossier debug et un release.

Le dossier debug contient les version full des js. Le release, les versions minifiées.

Le but est qu’il références les scripts dans un _reference.js. Grâce à cela, il a un intellisense dans son Visual Studio.

Il va sur sa page ASPX, il a référencé la version Release de son JS.

Il utilise AJAX Minifier pour minifier les js. Il a un match pour faire cela. ajaxminifier debug\sonjs.js -o release\sonjs.js

// Retour sur les slides : App practices REST / MVVM pattern / App UI Guidelines

// REST

Il explique qu’une app peut être développée et marcher très bien mais comment faire pour avoir du code propre et lisible.

Il incite alors à utiliser le pattern MVVM pour ça.

REST : Il incite à utiliser javascript et REST et MVVM en SharePoint hosted app. Plutôt que CSOM ou JSOM.

Il revient sur l’architecture REST sur SharePoint 2013 en disant que tous les JSoM CSOM et ODATA font appel à _api/web/, anciennement client.svc Il montre du code avec jQuery et REST (en JSON) avec un $.getJSON(/_api/web/currentuser) ou $.ajax().

// MVVM

Il explique le fait d’isoler la récupération de données et son affichage.

Le model contient les données, la view affiche la données, et le viewmodel lie le model et la view.

Utilisation de Knockout.js. http://knockoutjs.com (declarative bindings, et dependency tracking).

Ex : VIEW : d’un tableau avec pour le tbody un attribut data-bind= »foreau: get_contacts() » qui retourne un tableau.

Pour chaque tr, on créé 3 td, qui ont chacun un data-bind=’text: get_lname() » ou get_fname etc.

VIEWMODEL : comprendre les dependency tracking. il utilise une variable ko.observableArray().

// APP UI

App project template : utilisation du style du host web WebTemplate : Déclaration dans l’appmanifest, l’ID du webtemplate à utiliser.

Chrome Control sur des .html Utilisation de SP.UI.Controls.Navigation(« chrome_ctrl_placeholder_id », options);. Classe SP qui permet de récupérer le style du host web via du javascript. Dans les options, on peut notamment utiliser l’attribut settingsLinks pour définir les liens de Navigation.

// DEMO : MVVM avec Knockout

Il utilise une App avec une page HTML qui utilise d’ailleurs un ChromeControl, qui d’ailleurs est en HTML5 avec la nav mise dans un <nav> Il a mis un binding sur un table grâce à l’attributs data-ms comme ci-dessus.

Il retourne dans son js, où il un une classe Contact  où il y a un last name, un email –> c’est le Model Il y a un ContactViewModel qui contient le code qui fait la requêtes sur les contacts. Dans la méthode success, il y a juste besoin de définir la propriété contacts qu’il a bindé. Enfin grâce à Knockout il fait un ko.applyBindings … ko étant une variable KnockOut instanciée.

// Conclusion :

Utiliser les pattern d’encapsulation.

Utiliser les JS + REST + MVVM

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 :