Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Destaque
Destaque (14)
Semelhante a Symposium n°7 : Plateforme Meteor
Semelhante a Symposium n°7 : Plateforme Meteor (20)
Symposium n°7 : Plateforme Meteor
- 2. ARTHUR MAROULIER CONSULTANT IT Versusmind Nancy, Lorraine, France @arthurmaroulier arthurmaroulier
- 9. Meteor Plateforme JavaScript Full-Stack Skybreak première version 12/2011 Renommé Meteor le 20/01/2012 25/07/2012 Levée de fonds de 11,2 millions de dollars Meteor v1.0 le 28/10/2014 19/05/2015 Levée de fonds de 20 millions de dollars Meteor Development Group : 31+ personnes à temps plein
- 10. Licence MIT
- 11. Galaxy Service payant d'hébergement Meteor Déploiement Haute disponibilité Scalabilité à la demande Hot code push Metrics Tracking
- 12. Percolate Studio Rejoint le Meteor Developer Group le 26 juin 2015.
- 18. En détail
- 19. Blaze Puissante bibliothèque déclarative pour créer des UI à mise à jour temps réel et réactives. Possibilité d'utiliser l'intégration d'AngularJS ou de React.
- 20. Distributed Data Protocol (DDP) "REST pour websockets" Protocole simple pour transférer des données structurées et recevoir des mises à jour en temps réel lorsque celles-ci sont modifiées. décrites en moins de 360 lignes.Spécifications
- 21. Distributed Data Protocol (DDP) Implémenté dans 16 langages Android, AS3, C#, Dart, Go, Haskell, iOS, Java, JavaScript, .NET, Node.JS, Objective C, PHP, Python, Qt/QML et Ruby
- 22. Livequery Connecteurs de base de données temps réel. Requête = résultat + mises à jours au fil du temps oplog tailing
- 23. Tracker Minuscule (~1ko) mais puissante. Permet de faire de l'événementiel sans avoir à le gérer et de réagir en cascade aux changements des sources de données. La plupart des composants de Meteor l'utilisent.
- 24. Tracker var currentTemperatureCelsius = function () { return (currentTemperatureFahrenheit() - 32) / (9/5); }; > currentTemperatureCelsius() 21.7 > var handle = Tracker.autorun(function () { console.log("La température actuelle est ", currentTemperatureCelsius(), "°c"); }); La température actuelle est 21.7°C (affiché immédiatement) La température actuelle est 22.0°C (affiché quelques minutes plus tard) > handle.stop(); (arrête le tracker)
- 26. JavaScript Le même code du client au serveur, pour les packages et les API de base de données. Le même code sur tout les navigateurs et appareils mobiles.
- 27. Mobile et Web Isobuild : à la fois une application web et une app iOS / Android. Cordova et tout ses plugins vous tendent les bras.
- 28. Rendu réactif Grâce à Blaze ou en intégrant AngularJS ou ReactJS
- 29. UI optimiste "Data-on-the-wire" Compensation de la latence et résolution des conflits intégré.
- 30. Moins de code, radicalement Accomplir en 10 lignes ce qui autrement en prendrait 1000.
- 31. Entièrement intégré et flexible Pas de temps à perdre avec les composants. Vous vous concentrez sur votre application.
- 32. Gestionnaire de paquets Atmosphere donne accès à plus de 8500 paquets de contribution communautaire. Il a son propre solveur de versions avec gestion. atmospherejs
- 33. Sécurité Publications / Souscriptions Methods OAuth SSL Authorisations sur les routes
- 34. Outils et services Pour simplifier le processus de développement. Les dépendances sont injectés et minifiées automatiquement. Hot code push : mise à jour du code en préservant états et sessions.
- 37. $ demo
- 38. Création de l'application On se place dans le dossier crée $ meteor create symposium-meteor-demo $ cd symposium-meteor-demo
- 39. Structure initiale On lance l'app $ ls -a . .meteor symposium-meteor-demo.css .. symposium-meteor-demo.js symposium-meteor-demo.html $ ls .meteor/ local packages platforms release versions $ meteor
- 41. On enlève les packages inutiles On ajoute le package pour dessiner le graphique en SVG $ meteor remove autopublish insecure $ meteor add d3js:d3
- 42. On créer les collections shared.js Votes = new Mongo.Collection('votes'); Movies = new Mongo.Collection('movies');
- 43. On les publies /server/server.js On y souscrit /client/client.js Meteor.startup(function () { Meteor.publish('votes', function () { return Votes.find(); }); Meteor.publish('movies', function () { return Movies.find(); }); }); Meteor.startup(function () { Meteor.subscribe('votes'); Meteor.subscribe('movies'); });
- 44. Un peu d'html /client/index.html <head> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Top films 2015</title> <link rel="shortcut icon" type="image/png" href="/favicon.png" sizes="16x16 32x32 64x64"> </head> <body> <h1>Top films 2015</h1> </body>
- 45. On ajoute la liste des films dans la collection des films /server/server.js Meteor.startup(function () { ... if (!Movies.find().count()) { [ 'À la poursuite de demain', 'Avengers: L'ère d'Ultron', 'Jurassic World', 'Kingsman : Services secrets', 'Mad Max: Fury Road', 'Mission: Impossible - Rogue Nation', 'Pixels', 'Seul sur Mars', 'Spectre', 'Terminator Genisys' ].forEach(function (d) { Movies.insert({ title: d, createdAt: Date.now()}); }); }
- 46. On ajoute les templates pour afficher les boutons pour les films /client/index.html <body> <h1>Top films 2015</h1> {{> buttons}} </body> <template name="buttons"> <ul> {{#each movies}} <li>{{> button}}</li> {{/each}} </ul> </template> <template name="button"> <a href="#" class="{{getButtonClass this.title}}">{{this.title}}</a> </template>
- 47. On ajoute les helpers pour ces templates /client/client.js Template.buttons.helpers({ movies: function () { return Movies.find().fetch(); } }); Template.button.helpers({ getButtonClass: function (str) { return 'btn ' + str.replace(/[^a-z0-9]/ig, '').toLowerCase(); } });
- 48. On autorise l'ajout de votes depuis les clients shared.js Votes.allow({ insert: function () { return true; } });
- 49. On ajoute le nombre de votes dans les boutons /client/index.html Et le helper qui va avec /client/client.js <template name="button"> <a href="#" class="{{getButtonClass this.title}}">{{this.title}} {{{movieVotesCount(this.title)}}}</a> </template> Template.button.helpers({ . . . movieVotesCount: function (movie) { var count = Votes.find({movie: movie}).count(); if (count) { return " (" + count + " vote" + ((count > 1) ? "s" : "") + ")"; } else { return ""; } } });
- 50. On ajoute l’événement de clic sur les boutons pour enregistrer un vote /client/client.js Template.buttons.events({ 'click a': function (e) { e.preventDefault(); Votes.insert({ movie: this.title, createdAt: Date.now() }); } });
- 51. On ajoute le graphique dans le template /client/index.html <body> <h1>Top films 2015</h1> {{> pie}} {{> buttons}} </body> <template name="pie"> <div id="pie"></div> </template>
- 52. On ajoute le tracker pour rendre le graphique live /client/client.js Meteor.startup(function () { Meteor.subscribe('votes'); Meteor.subscribe('movies'); Tracker.autorun(function () { var votes = Votes.find().fetch(); var data = Pie.group(votes, 'movie'); Pie.render('#pie', data); }); });
- 53. On ajoute encore plus de magie : flexbox /client/index.html getOrder retourne l'ordre d'un film en fonction du nombre de votes qu'il a. <template name="buttons"> <ul class="flexContainer"> {{#each movies}} <li style="order: {{getOrder this.title}}">{{> button}}</li> {{/each}} </ul> </template> meteor.demo.maroulier.com github.com/ArthurMaroulier/meteor-demo
- 54. $ demo^C $
- 55. chiffres mis à jour chiffres mis à jour il y a 3 jours il y a 3 jours Communauté Littérature de référence écrit par Tom Coleman et Sacha Greif gratuit & traduit en plusieurs langues 8865 PACKAGES 54 SERVICES PROFESSIONNELS 17211 QUESTIONS SUR STACK OVERFLOW 505K INSTALLATIONS UNIQUES 58 ÉVÉNEMENTS À VENIR Discover Meteor
- 56. Application open-source faite avec Meteor Web app pour créer sa propre communauté (hacker-news, product hunt, ...)
- 57. Application open-source faite avec Meteor Web app kanban Trello-like, open-source
- 58. Application open-source faite avec Meteor Apps temps réel pour l'Internet des objets (IoT)
- 59. Application commerciale faite avec Meteor Duels de code pour développeurs
- 60. Application commerciale faite avec Meteor Classcraft aide les enseignants à gérer, motiver et impliquer leurs élèves en transformant le cours en un jeu de rôle
- 61. Application commerciale faite avec Meteor Application multi-plateforme pour apprendre le piano
- 62. Application commerciale faite avec Meteor Job marketplace, pour entreprises locales et travail journalier
- 63. Et bien d'autres
- 64. Retour d'expérience Facilité de mise en place Produit fonctionnel en très peu de temps Supprimer les packages insecure et autopublish Piège du package qui évolue radicalement Problèmes de conflits de versions de paquets Déploiement sur son propre serveur (hors service payant)
- 65. Aller plus loin Offline appcache est utilisé par défaut par webapp ground:db