AngularJS chez Deezer

http://www.meetup.com/AngularJS-Paris/events/147070122/

Transcript

1. Présentation du 26 novembre 2013
2. Julie Knibbe - évangéliste Vladimir Kosmala - ingénieur
3. ♫ Plan ➔ Introduction API ➔ Deezer Light “jQuery” ➔ Conversion à AngularJS
4. ♫ Deezer ? • 30 millions de titres • 1 Pétaoctet de musique • Servis grâce à 4 points de présence … via l’API
5. ♫ API sur 3 niveaux • Interne (accès total) • Partenaire (stream mp3) • Publique (DRM)
6. ♫ API - clients Deezer REST API Search / Track / Artist / User / Albums / History / Playlist / Editorial / Fans / Followers / Genre Android SDK Javascript SDK iOS SDK
7. ♫ API Publique developers.deezer.com • Accès à toutes les données • Accès aux players • Via le standard REST sur HTTP & HTTPS DZ.api(“/album/42”, function(r){ // musiques, artistes, image DZ.player.playTracks([...]); });
8. ♫ Deezer Light • Créé lors d’un hackathon interne • API + jQuery
9. ♫ Deezer Light - jQuery DZ.Event.subscribe('current_track', function(e) { $('#playing_author').text(e.track.artist.name); $('#playing_title').text(e.track.title); DZ.api('/track/' + e.track.id, function(response) { $('#cover').attr('src', response.album.cover); }); });
10. ♫ AngularJS MVC $scope.songs = [ {artist: “U2”, title: “New Year’s Day”}, ... ]; <ul><li ng-repeat=”song in songs”> {{song.title}} - {{song.artist}} </li><ul>
11. ♫ Deezer Light - AngularJS DZ.Event.subscribe('current_track', function(e) { $scope.current_track = e.track; $scope.$apply(); DZ.api('/track/' + e.track.id, function(response) { $scope.current_album = response.album; $scope.$apply(); }); });
12. ♫ Deezer Light - jQ / Ng $('#cover').attr('src', response.album.cover); VS $scope.current_album = response.album; • Plusieurs vues depuis cette données: • Background blur en CSS3 • Favicon via un service • Modulaire, maintenable, bref MVC :-)
13. ♫ Deezer Light - AngularJS // 92 secondes -> 1:32 angapp.filter('humain_time', function() { return function(time) { if (time && time > 0.0) { var sec = parseInt(time % 60); return parseInt(time / 60) + ':' + (sec < 10 ? '0' + sec : sec); } else return '0:00'; }; });
14. ♫ Deezer Light - AngularJS <span>{{track.time | humain_time}}</span>
15. ♫ Deezer Light Démo http://vladimir.sh/playground/deezer_light
16. ♫ Deezer Light - AngularJS 400 lignes 2.3Ko
17. ♫ Deezer Light C’est open-source :-) @Github/deezer/javascript-samples
18. ♫ Plan ➔ Introduction API ➔ Deezer Light “jQuery” ➔ Conversion à AngularJS ➔ Allez plus loin
19. ♫ AngularJS • HTML5 Application • Chromium • NodeJS avec Deezer Lib C++
20. ♫ AngularJS • HTML5 Application • Chromium • NodeJS avec Deezer Lib C++ => Application Desktop HTML5
21. ♫ Questions ? @vladimirkosmala