http://www.versusmind.eu/

ARTHURMAROULIERCONSULTANTIT

Versusmind

Nancy, Lorraine, France

@arthurmaroulier

arthurmaroulier

NouveauprojetwebTechno

Partieclient?Partieserveur?Web+Mobile?Tempsréel?

EarlydaysToutcotéserveur

FrameworkclientJavaScriptOnenfaitpluscotéclient,langagesdifférents

FrameworksclientetserveurJavaScriptmaisAPIdifférentes

MEAN

MongoDB-Express-AngularJS-Node

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

LicenceMIT

GalaxyServicepayantd'hébergementMeteor

DéploiementHaute disponibilitéScalabilité à la demandeHot code pushMetricsTracking

PercolateStudio

Rejoint le Meteor Developer Group le 26 juin 2015.

PlateformeJavaScriptFull-StackmêmeAPI

PlateformeJavaScriptFull-StackÉchangesdedonnéesJSONparwebsocket

PlateformeJavaScriptFull-Stack"DatabaseEverywhere",donnéessynchronisées

PlateformeJavaScriptFull-StackRéactivité

PlateformeJavaScriptFull-StackRéactivité

Endétail

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)

Tempsréeloutofthebox

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.

Renduréactif

Grâce à Blaze ou en intégrant AngularJS ou ReactJS

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

$demo

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

$demo^C$

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

Etbiend'autres

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)

Allerplusloin

Offlineappcache est utilisé par défaut par webapp

ground:db

</html>@arthurmaroulier

@Versusmind

http://symposium.versusmind.eu/