Le Post Infeeny

Les articles des consultants et experts Infeeny

Developing SharePoint Applications with HTML5 and jQuery

Session animée par Ted Pattison (Author & Instructor / Critical Path Training)

Après la session d’Andrew Connell à laquelle a assisté Marc hier, voici la session d’une autre figure emblématique du monde SharePoint à savoir Ted Pattison.

Comme pour la session d’hier, plus une seule place disponible dans la salle et des gens assis par terre le long des murs, comme quoi les noms connus ça attire la foule dans ce genre d’événement   😉

Ted commence la session par annoncé qu’il mettra à disposition les scripts Powershell et les fichiers permettant de réinstaller ses démos sur nos propres environnements.

Il commence par faire le show en demandant à 2 personnes dans la salle, 1 pro SharePoint Designer et 1 pro Visual Studio de monter sur scène avec lui en revêtant un t-shirt.

Et ça continue en demandant aux participants de crier à tour de rôle « Visual Studio Rulez… SharePoint Designer Sucks » et « SharePoint Designer Rulez… Visual Studio Sucks ».

C’est l’hilarité dans la salle… Un vrai showman ce Ted et un esprit typiquement Américain… A quand la même chose aux TechDays ?   😉

Après 5mn de franches rigolades, la session démarre enfin.

Petit rappel sur jQuery qui est là pour masquer les différences entre les navigateurs et faire en sorte qu’un même code fonctionne sur tous les navigateurs de la même manière.

Histoire d’améliorer les performances, premier petit truc donné à savoir référencer jQuery depuis le CDN de Microsoft http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js

On peut aussi l’ajouter à SharePoint dans les classiques dossiers _layouts ou Style Library.

Comme beaucoup de développeurs et à en juger par ses blagues à répétition sur (ou plutôt contre) SharePoint Designer, on peut dire que Ted déteste cet outil.

1ère démo pour montrer la structure du site SharePoint qui a été créé (dans Visual Studio) avec des JavaScript, CSS, images…

On bascule dans SharePoint Designer pour voir la structure du site SharePoint une fois créé et comment éditer et créée des fichiers JavaScript.

Petit truc pour avoir l’intellisense jQuery dans SharePoint Designer et Visual Studio, ajouter une balise <reference path= »… » /> en commençant la ligne par ///

Retour sur les slides pour expliquer les concepts de base de jQuery et notamment la syntaxe, le gestionnaire d’événement principal $(document).ready et d’autres petites choses assez classiques (parcours du DOM, sélection d’éléments, application de CSS et d’effets…).

2ème démo pour montrer l’édition de code JavaScript en utilisant la syntaxe jQuery pour animer du texte, créer des systèmes de visualisation d’images au survol de la souris, etc…

Ca continue dans les blagues mais cette fois avec Google pour lequel il écrit une commande jQuery qui recherche tous les liens contenu le terme google dans l’URL afin de leur appliquer un style CSS qui barre le texte.

Retour aux slides pour parler de jQuery UI qui propose tout un tas de contrôles pour enrichir les sites web (auto-complete, date picker, spider, progress bar, tags, accordion, dialog…).

3ème démo pour montrer jQuery UI en action. Rien de bien passionnant ici puisque vous pouvez retrouver les mêmes démos sur le site officiel de jQuery. La seule particularité est qu’ici cela s’exécute dans un site SharePoint mais qui n’apporte rien de particulier d’un point de vue technique ou fonctionnel.

Retour aux slides pour introduire la notion de « jQuery Templates » qui permettent de convertir de tableaux d’objets (sous forme de Javascript évidemment) en code HTML faisant une jolie mise en forme.

C’est relativement puissant à utiliser mais cela est très verbeux et ressemble beaucoup à XSLT.

4ème démo pour montrer par la pratique cette notion de templates ou des fichiers JS ont été ajoutés en référence d’une page SharePoint, une liste de personne est définie dans ces fichiers et un tableau est généré par jQuery à partir de ces données.

Plutôt que de générer du JavaScript pour ensuite le mettre en forme, pourquoi ne pas utiliser les services REST de SharePoint (ListData.svc) pour récupérer le contenu d’une liste et le mettre en forme ?

Toujours grâce à jQuery et la méthode getJSON, on peut récupérer les données via le service REST et la mise en forme n’est plus qu’une formalité.

Récupérer des données c’est déjà bien mais comment faire si on veut en ajouter ? SharePoint propose les services Odata permettant de répondre à cette question.

Il suffit d’appeler le même service REST que précédemment, de faire un POST avec les bons paramètres et le tour est joué. L’avantage c’est que quasiment tout est géré sur le client donc la montée en charge est assurée puisque le serveur ne travaille que pour insérer les données dans la liste.

Si on utilise le verbe DELETE à la place de POST, on peut également supprimer des données.

Pour mettre à jour des données, il faut utiliser le verbe POST et passer X-HTTP-METHOD:MERGE dans les headers de la requête.

Retour aux slides pour parler HTML5 qui n’est pas utilisé par SharePoint 2010. Celui-ci est fait pour tourner à ce jour avec XHTML 1.0 et CSS 2.1.

Pourquoi migrer vers HTML5 ?

  • Ecrire du code HTML qui fonctionne sur tous les navigateurs récents
  • Tirer avantage des APIs JavaScript définies dans la norme
  • Eliminer le besoin de recourir à Flash et autres plug-in du genre (Silverligh n’est pas cité, comme c’est bizarre   ;-))
  • Cibler les périphériques mobiles et l’iPad du PDG (si si c’est ce qui est écrit vous ne rêvez)

Beaucoup d’éléments fonctionnels font leur apparition audio, video, canvas… pour ajouter des fonctionnalités de nouvelle génération aux applications.

Des changements aussi dans CSS avec de nouvelles capacités et pareil pour Javascript (pas eu le temps de tout lire car il a fait défiler 5 slides en 20s).

Retour aux démos avec la création d’une MasterPage tout en HTML5 au sein d’un projet SharePoint. Rien de bien particulier à dire car ça reste du HTML après tout mais avec CSS3, on peut faire des choses beaucoup plus simplement qu’avant et surtout cross-browser.

On passe ensuite en revue des pages de contenus qui embarquent quelques unes des nouvelles fonctionnalités comme la balise video, la création de dessin via SVG ou la géolocalisation.

La session est intéressante mais je reste malgré tout sur ma faim car il a surtout été question de montrer les capacités de HTML5 et jQuery (qu’on retrouve partout sur Internet en cherchant 5mn) et pas vraiment sur le développement d’une application réelle dans laquelle on pourrait se projet (sauf en ce qui concerne l’utilisation des services REST pour récupérer et mettre à jour des données).

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 :