Embed Size (px)
Citation preview
ARTHURMAROULIERCONSULTANTIT
Versusmind
Nancy, Lorraine, France
@arthurmaroulier
arthurmaroulier
EncoreunframeworkJavaScript?
Panneaude ausiègeduW3CJamesWard
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
GalaxyServicepayantd'hébergementMeteor
DéploiementHaute disponibilitéScalabilité à la demandeHot code pushMetricsTracking
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.
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
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
LivequeryConnecteurs de base de données temps réel.
Requête = résultat + mises à jours au fil du temps
oplog tailing
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.
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)
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.
MobileetWeb
Isobuild : à la fois une application web et une app iOS / Android.
Cordova et tout ses plugins vous tendent les bras.
UIoptimiste
"Data-on-the-wire"
Compensation de la latence et résolution des conflits intégré.
Moinsdecode,radicalement
Accomplir en 10 lignes ce qui autrement en prendrait 1000.
Entièrementintégréetflexible
Pas de temps à perdre avec les composants.
Vous vous concentrez sur votre application.
GestionnairedepaquetsAtmosphere donne accès à plus de 8500 paquets de contribution
communautaire.
Il a son propre solveur de versions avec gestion.atmospherejs
Sécurité
Publications / SouscriptionsMethodsOAuthSSLAuthorisations sur les routes
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.
InstallationOSX&Linux
Windowsviainstalleur
curl https://install.meteor.com/ | sh
CLI
$meteorcreatemy-appmy-app:created.Torunyournewapp:cdmy-appmeteor$cdmy-app$meteoraddtwbs:bootstrap$meteoDeployingtomy-app.meteor.com.Nowservingathttp://my-app.meteor.com
Créationdel'application
Onseplacedansledossiercrée
$ meteor create symposium-meteor-demo
$ cd symposium-meteor-demo
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
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
Onenlèvelespackagesinutiles
OnajoutelepackagepourdessinerlegraphiqueenSVG
$ meteor remove autopublish insecure
$ meteor add d3js:d3
Oncréerlescollections
shared.js
Votes = new Mongo.Collection('votes');Movies = new Mongo.Collection('movies');
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');});
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>
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()}); }); }
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>
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(); }});
Onautorisel'ajoutdevotesdepuislesclients
shared.js
Votes.allow({ insert: function () { return true; }});
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 ""; } }});
Onajoutel’événementdeclicsurlesboutonspourenregistrerunvote
/client/client.js
Template.buttons.events({ 'click a': function (e) { e.preventDefault(); Votes.insert({ movie: this.title, createdAt: Date.now() }); }});
Onajoutelegraphiquedansletemplate
/client/index.html
<body> <h1>Top films 2015</h1> {{> pie}} {{> buttons}}</body>
<template name="pie"> <div id="pie"></div></template>
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); });});
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
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
Applicationopen-sourcefaiteavecMeteor
Web app pour créer sa propre communauté(hacker-news, product hunt, ...)
Applicationopen-sourcefaiteavecMeteor
Web app kanban Trello-like, open-source
Applicationopen-sourcefaiteavecMeteor
Apps temps réel pour l'Internet des objets (IoT)
ApplicationcommercialefaiteavecMeteor
Duels de code pour développeurs
ApplicationcommercialefaiteavecMeteor
Classcraft aide les enseignants à gérer, motiver et impliquer leursélèves en transformant le cours en un jeu de rôle
ApplicationcommercialefaiteavecMeteor
Application multi-plateforme pour apprendre le piano
ApplicationcommercialefaiteavecMeteor
Job marketplace, pour entreprises locales et travail journalier
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)
</html>@arthurmaroulier
@Versusmind
http://symposium.versusmind.eu/
