Symposium n°7 : Plateforme Meteor
-
Upload
arthurmaroulier -
Category
Internet
-
view
1.173 -
download
0
Transcript of Symposium n°7 : Plateforme Meteor
![Page 2: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/2.jpg)
ARTHURMAROULIERCONSULTANTIT
Versusmind
Nancy, Lorraine, France
@arthurmaroulier
arthurmaroulier
![Page 8: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/8.jpg)
EncoreunframeworkJavaScript?
Panneaude ausiègeduW3CJamesWard
![Page 9: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/9.jpg)
Meteor
PlateformeJavaScriptFull-StackSkybreak première version 12/2011Renommé Meteor le 20/01/201225/07/2012 Levée de fonds de 11,2 millions de dollarsMeteor v1.0 le 28/10/201419/05/2015 Levée de fonds de 20 millions de dollarsMeteor Development Group : 31+ personnes à temps plein
![Page 11: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/11.jpg)
GalaxyServicepayantd'hébergementMeteor
DéploiementHaute disponibilitéScalabilité à la demandeHot code pushMetricsTracking
![Page 19: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/19.jpg)
BlazePuissante 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.
![Page 20: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/20.jpg)
DistributedDataProtocol(DDP)"RESTpourwebsockets"
Protocole simple pour transférer des données structurées etrecevoir des mises à jour en temps réel lorsque celles-ci sont
modifiées.
décrites en moins de 360 lignes.Spécifications
![Page 21: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/21.jpg)
DistributedDataProtocol(DDP)Implémentédans16langages
Android, AS3, C#, Dart, Go, Haskell, iOS, Java, JavaScript, .NET,Node.JS, Objective C, PHP, Python, Qt/QML et Ruby
![Page 22: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/22.jpg)
LivequeryConnecteurs de base de données temps réel.
Requête = résultat + mises à jours au fil du temps
oplog tailing
![Page 23: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/23.jpg)
TrackerMinuscule (~1ko) mais puissante.
Permet de faire de l'événementiel sans avoir à le gérer et de réagiren cascade aux changements des sources de données.
La plupart des composants de Meteor l'utilisent.
![Page 24: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/24.jpg)
Trackervar 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)
![Page 26: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/26.jpg)
JavaScript
Le même code du client au serveur, pour les packages et les APIde base de données.
Le même code sur tout les navigateurs et appareils mobiles.
![Page 27: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/27.jpg)
MobileetWeb
Isobuild : à la fois une application web et une app iOS / Android.
Cordova et tout ses plugins vous tendent les bras.
![Page 29: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/29.jpg)
UIoptimiste
"Data-on-the-wire"
Compensation de la latence et résolution des conflits intégré.
![Page 30: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/30.jpg)
Moinsdecode,radicalement
Accomplir en 10 lignes ce qui autrement en prendrait 1000.
![Page 31: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/31.jpg)
Entièrementintégréetflexible
Pas de temps à perdre avec les composants.
Vous vous concentrez sur votre application.
![Page 32: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/32.jpg)
GestionnairedepaquetsAtmosphere donne accès à plus de 8500 paquets de contribution
communautaire.
Il a son propre solveur de versions avec gestion.atmospherejs
![Page 33: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/33.jpg)
Sécurité
Publications / SouscriptionsMethodsOAuthSSLAuthorisations sur les routes
![Page 34: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/34.jpg)
Outilsetservices
Pour simplifier le processus de développement.
Les dépendances sont injectés et minifiées automatiquement.
Hotcodepush : mise à jour du code en préservant états etsessions.
![Page 35: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/35.jpg)
InstallationOSX&Linux
Windowsviainstalleur
curl https://install.meteor.com/ | sh
![Page 36: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/36.jpg)
CLI
$meteorcreatemy-appmy-app:created.Torunyournewapp:cdmy-appmeteor$cdmy-app$meteoraddtwbs:bootstrap$meteoDeployingtomy-app.meteor.com.Nowservingathttp://my-app.meteor.com
![Page 38: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/38.jpg)
Créationdel'application
Onseplacedansledossiercrée
$ meteor create symposium-meteor-demo
$ cd symposium-meteor-demo
![Page 39: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/39.jpg)
Structureinitiale
Onlancel'app
$ ls -a. .meteor symposium-meteor-demo.css.. symposium-meteor-demo.js symposium-meteor-demo.html
$ ls .meteor/local packages platforms release versions
$ meteor
![Page 40: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/40.jpg)
Onsupprimelesfichiersd'exemple
Oncréerlanouvellestructuredel'app
symposium-meteor-demo.csssymposium-meteor-demo.jssymposium-meteor-demo.html
/client client.js index.html /lib pie.js style.css/public favicon.png/server server.jsshared.js
![Page 41: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/41.jpg)
Onenlèvelespackagesinutiles
OnajoutelepackagepourdessinerlegraphiqueenSVG
$ meteor remove autopublish insecure
$ meteor add d3js:d3
![Page 42: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/42.jpg)
Oncréerlescollections
shared.js
Votes = new Mongo.Collection('votes');Movies = new Mongo.Collection('movies');
![Page 43: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/43.jpg)
Onlespublies
/server/server.js
Onysouscrit
/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');});
![Page 44: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/44.jpg)
Unpeud'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>
![Page 45: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/45.jpg)
Onajoutelalistedesfilmsdanslacollectiondesfilms
/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()}); }); }
![Page 46: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/46.jpg)
Onajoutelestemplatespourafficherlesboutonspourlesfilms
/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>
![Page 47: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/47.jpg)
Onajouteleshelperspourcestemplates
/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(); }});
![Page 48: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/48.jpg)
Onautorisel'ajoutdevotesdepuislesclients
shared.js
Votes.allow({ insert: function () { return true; }});
![Page 49: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/49.jpg)
Onajoutelenombredevotesdanslesboutons
/client/index.html
Etlehelperquivaavec
/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 ""; } }});
![Page 50: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/50.jpg)
Onajoutel’événementdeclicsurlesboutonspourenregistrerunvote
/client/client.js
Template.buttons.events({ 'click a': function (e) { e.preventDefault(); Votes.insert({ movie: this.title, createdAt: Date.now() }); }});
![Page 51: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/51.jpg)
Onajoutelegraphiquedansletemplate
/client/index.html
<body> <h1>Top films 2015</h1> {{> pie}} {{> buttons}}</body>
<template name="pie"> <div id="pie"></div></template>
![Page 52: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/52.jpg)
Onajouteletrackerpourrendrelegraphiquelive
/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); });});
![Page 53: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/53.jpg)
Onajouteencoreplusdemagie:flexbox
/client/index.html
getOrder retourne l'ordre d'un film en fonction du nombre de votesqu'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
![Page 55: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/55.jpg)
chiffresmisàjour
chiffresmisàjour
ilya3jours
ilya3jours
Communauté
Littératurederéférence écrit par Tom Coleman et Sacha Greif
gratuit & traduit en plusieurs langues
8865PACKAGES
54SERVICES
PROFESSIONNELS
17211QUESTIONS SUR
STACK OVERFLOW
505KINSTALLATIONS
UNIQUES
58ÉVÉNEMENTS À
VENIR
DiscoverMeteor
![Page 56: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/56.jpg)
Applicationopen-sourcefaiteavecMeteor
Web app pour créer sa propre communauté(hacker-news, product hunt, ...)
![Page 57: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/57.jpg)
Applicationopen-sourcefaiteavecMeteor
Web app kanban Trello-like, open-source
![Page 58: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/58.jpg)
Applicationopen-sourcefaiteavecMeteor
Apps temps réel pour l'Internet des objets (IoT)
![Page 59: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/59.jpg)
ApplicationcommercialefaiteavecMeteor
Duels de code pour développeurs
![Page 60: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/60.jpg)
ApplicationcommercialefaiteavecMeteor
Classcraft aide les enseignants à gérer, motiver et impliquer leursélèves en transformant le cours en un jeu de rôle
![Page 61: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/61.jpg)
ApplicationcommercialefaiteavecMeteor
Application multi-plateforme pour apprendre le piano
![Page 62: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/62.jpg)
ApplicationcommercialefaiteavecMeteor
Job marketplace, pour entreprises locales et travail journalier
![Page 64: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/64.jpg)
Retourd'expérienceFacilité de mise en placeProduit fonctionnel en très peu de tempsSupprimer les packages insecure et autopublishPiège du package qui évolue radicalementProblèmes de conflits de versions de paquetsDéploiement sur son propre serveur (hors service payant)
![Page 66: Symposium n°7 : Plateforme Meteor](https://reader033.fdocument.pub/reader033/viewer/2022052117/5a6871de7f8b9a4a258b4c01/html5/thumbnails/66.jpg)
</html>@arthurmaroulier
@Versusmind
http://symposium.versusmind.eu/