TP3 : frameworks, nouvelles fonctionnalités

Présentation d'angularJS

Pour aller plus loin nous vous proposons de découvrir un framework MVC très populaire en ce moment : angularJS. Ce framework permet de définir des "vues" (morceaux de page HTML avec structures de contrôles type boucles, et références à des modèles), des modèles (des objets JS définis dans des "contrôleurs") et des bindings entre les vues/modèles/contrôleurs et avec des données sur un serveur. Particularité notable d'angular, il définit de nouveaux attributs à ajouter dans les éléments HTML, qui permettent en quelque sorte de "programmer en HTML". 

• Tutorial présenté en cours (en français): 
• Un autre tuto en anglais, montrant notamment comment on peut faire des tests unitaires : http://docs.angularjs.org/tutorial/

L'intérêt ici est d'avoir un objet représentant une chanson, un objet représentant une piste, et d'itérer sur le nombre de pistes par exemple, pour faire le rendu d'une chanson. On établira un binding entre le serveur et les objets avec une méthode similaire à celle présentée dans la vidéo.

Pour les plus curieux, je propose ce lien vers une comparaison entre les deux frameworks JS les plus en vue du moment : AngularJS (Google) et EmberJS. Cet article est intéressant car il contient des témoignages de développeurs qui ont réalisé de grosses applications : http://www.quora.com/Client-side-MVC...ipt-frameworks.

DevTools pour debugger un site utilisant AngularJS

• Chrome extendion pour les devtools : https://chrome.google.com/webstore/d...giloacoafjmpfk
• Pour Firefox : https://addons.mozilla.org/fr/firefo...e-angularjs-s/, 

Ajout d'une piste d'enregistrement

Vous vous inspirerez de cette démo (faire view source) : http://webaudiodemos.appspot.com/Aud...der/index.html

Possibilité d'uploader ses morceaux

Voir dans ce fichier la partie concernant le drag'n'drop et l'upload  avec XhR2 avec barres de proression et envoi en mode binaire. Pour le projet je conseille fortement de voir les exemples avec drag'n'drop.

Côté NodeJS, regardez comment on peut faire avec le module express, c'est très simple : http://tonyspiro.com/uploading-and-r...using-node-js/ Les exemples du PDF précédent avec l'objet FormData envoie du multipart donc le code présenté pour NodeJS marche bien avec.

Encore des idées pour la visualisation

Pourquoi ne pas utiliser un moteur de particules dont les paramètres bougent en musique ? (à l'aide du noeud analyzer de web audio on récupère les fréquences, les basses peuvent donner le rythme. Chercher aussi BPM detector web audio).

• http://buildnewgames.com/particle-systems/ (ce blog est une mine d'infos)