ARTHUR	MAROULIER
CONSULTANT	IT
Versusmind
 Nancy, Lorraine, France


@arthurmaroulier
arthurmaroulier
Nouveau
projet
web
Techno
Partie
client
?
Partie
serveur
?
Web
+
Mobile
?
Temps
réel
?
Early
days
Tout
coté
serveur
Framework
client
JavaScript
On
en
fait
plus
coté
client,
langages
différents
Frameworks
client
et
serveur
JavaScript
mais
API
différentes
MEAN
MongoDB
-
Express
-
AngularJS
-
Node
Encore
un
framework
JavaScript
?
Panneau
de
 
au
siège
du
W3CJames
Ward
Meteor
Plateforme
JavaScript
Full-Stack
Skybreak première version 12/2011
Renommé Meteor le 20/01/2012
25/07/2012 Levée de...
Licence
MIT
Galaxy
Service
payant
d'hébergement
Meteor
Déploiement
Haute disponibilité
Scalabilité à la demande
Hot code push
Metrics
...
Percolate
Studio
Rejoint le Meteor Developer Group le 26 juin 2015.
Plateforme
JavaScript
Full-Stack
même
API
Plateforme
JavaScript
Full-Stack
Échanges
de
données
JSON
par
web
socket
Plateforme
JavaScript
Full-Stack
"Database
Everywhere",
données
synchronisées
Plateforme
JavaScript
Full-Stack
Réactivité
Plateforme
JavaScript
Full-Stack
Réactivité
En
détail
Blaze
Puissante bibliothèque déclarative pour créer des UI à mise à jour
temps réel et réactives.
Possibilité d'utiliser l...
Distributed
Data
Protocol
(DDP)
"REST
pour
websockets"
Protocole simple pour transférer des données structurées et
recevoi...
Distributed
Data
Protocol
(DDP)
Implémenté
dans
16
langages
Android, AS3, C#, Dart, Go, Haskell, iOS, Java, JavaScript, .N...
Livequery
Connecteurs de base de données temps réel.
Requête = résultat + mises à jours au fil du temps
oplog tailing
Tracker
Minuscule (~1ko) mais puissante.
Permet de faire de l'événementiel sans avoir à le gérer et de réagir
en cascade a...
Tracker
var currentTemperatureCelsius = function () {
return (currentTemperatureFahrenheit() - 32) / (9/5);
};
> currentTe...
Temps
réel
out
of
the
box
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 n...
Mobile
et
Web
Isobuild : à la fois une application web et une app iOS / Android.
Cordova et tout ses plugins vous tendent ...
Rendu
réactif
Grâce à Blaze ou en intégrant AngularJS ou ReactJS
UI
optimiste
"Data-on-the-wire"
Compensation de la latence et résolution des conflits intégré.
Moins
de
code,
radicalement
Accomplir en 10 lignes ce qui autrement en prendrait 1000.
Entièrement
intégré
et
flexible
Pas de temps à perdre avec les composants.
Vous vous concentrez sur votre application.
Gestionnaire
de
paquets
Atmosphere donne accès à plus de 8500 paquets de contribution
communautaire.
Il a son propre solve...
Sécurité
Publications / Souscriptions
Methods
OAuth
SSL
Authorisations sur les routes
Outils
et
services
Pour simplifier le processus de développement.
Les dépendances sont injectés et minifiées automatiqueme...
Installation
OS
X
&
Linux
Windows
via
installeur
curl https://install.meteor.com/ | sh
CLI
$	meteor	create	my-app
my-app:	created.
To	run	your	new	app:
			cd	my-app
			meteor
$	cd	my-app
$	meteor	add	twbs:boot...
$	demo
Création
de
l'application
On
se
place
dans
le
dossier
crée
$ meteor create symposium-meteor-demo
$ cd symposium-meteor-demo
Structure
initiale
On
lance
l'app
$ ls -a
. .meteor symposium-meteor-demo.css
.. symposium-meteor-demo.js symposium-meteor...
On
supprime
les
fichiers
d'exemple
On
créer
la
nouvelle
structure
de
l'app
symposium-meteor-demo.css
symposium-meteor-demo...
On
enlève
les
packages
inutiles
On
ajoute
le
package
pour
dessiner
le
graphique
en
SVG
$ meteor remove autopublish insecur...
On
créer
les
collections
shared.js
Votes = new Mongo.Collection('votes');
Movies = new Mongo.Collection('movies');
On
les
publies
/server/server.js
On
y
souscrit
/client/client.js
Meteor.startup(function () {
Meteor.publish('votes', func...
Un
peu
d'html
/client/index.html
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,...
On
ajoute
la
liste
des
films
dans
la
collection
des
films
/server/server.js
Meteor.startup(function () {
...
if (!Movies.f...
On
ajoute
les
templates
pour
afficher
les
boutons
pour
les
films
/client/index.html
<body>
<h1>Top films 2015</h1>
{{> but...
On
ajoute
les
helpers
pour
ces
templates
/client/client.js
Template.buttons.helpers({
movies: function () {
return Movies....
On
autorise
l'ajout
de
votes
depuis
les
clients
shared.js
Votes.allow({
insert: function () {
return true;
}
});
On
ajoute
le
nombre
de
votes
dans
les
boutons
/client/index.html
Et
le
helper
qui
va
avec
/client/client.js
<template name...
On
ajoute
l’événement
de
clic
sur
les
boutons
pour
enregistrer
un
vote
/client/client.js
Template.buttons.events({
'click ...
On
ajoute
le
graphique
dans
le
template
/client/index.html
<body>
<h1>Top films 2015</h1>
{{> pie}}
{{> buttons}}
</body>
...
On
ajoute
le
tracker
pour
rendre
le
graphique
live
/client/client.js
Meteor.startup(function () {
Meteor.subscribe('votes'...
On
ajoute
encore
plus
de
magie
:
flexbox
/client/index.html
getOrder retourne l'ordre d'un film en fonction du nombre de v...
$	demo^C
$
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 ...
Application
open-source
faite
avec
Meteor
Web app pour créer sa propre communauté
(hacker-news, product hunt, ...)
Application
open-source
faite
avec
Meteor
Web app kanban Trello-like, open-source
Application
open-source
faite
avec
Meteor
Apps temps réel pour l'Internet des objets (IoT)
Application
commerciale
faite
avec
Meteor
Duels de code pour développeurs
Application
commerciale
faite
avec
Meteor
Classcraft aide les enseignants à gérer, motiver et impliquer leurs
élèves en tr...
Application
commerciale
faite
avec
Meteor
Application multi-plateforme pour apprendre le piano
Application
commerciale
faite
avec
Meteor
Job marketplace, pour entreprises locales et travail journalier
Et
bien
d'autres
Retour
d'expérience
Facilité de mise en place
Produit fonctionnel en très peu de temps
Supprimer les packages insecure et ...
Aller
plus
loin
Offline
appcache est utilisé par défaut par webapp
ground:db
</html>
@arthurmaroulier
@Versusmind
http://symposium.versusmind.eu/
Symposium n°7 : Plateforme Meteor
Prochain SlideShare
Chargement dans…5
×

Symposium n°7 : Plateforme Meteor

622 vues

Publié le

Présentation Versusmind de la Plateforme Meteor par Arthur Maroulier : Meteor est une série de projets 100% open source intégrés pour créer une plateforme d'application JavaScript complète pour le développement d'applications réactives sur web et mobile.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
622
Sur SlideShare
0
Issues des intégrations
0
Intégrations
165
Actions
Partages
0
Téléchargements
16
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Symposium n°7 : Plateforme Meteor

  1. 1. ARTHUR MAROULIER CONSULTANT IT Versusmind  Nancy, Lorraine, France   @arthurmaroulier arthurmaroulier
  2. 2. Nouveau projet web Techno Partie client ? Partie serveur ? Web + Mobile ? Temps réel ?
  3. 3. Early days Tout coté serveur
  4. 4. Framework client JavaScript On en fait plus coté client, langages différents
  5. 5. Frameworks client et serveur JavaScript mais API différentes
  6. 6. MEAN MongoDB - Express - AngularJS - Node
  7. 7. Encore un framework JavaScript ? Panneau de au siège du W3CJames Ward
  8. 8. 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
  9. 9. Licence MIT
  10. 10. Galaxy Service payant d'hébergement Meteor Déploiement Haute disponibilité Scalabilité à la demande Hot code push Metrics Tracking
  11. 11. Percolate Studio Rejoint le Meteor Developer Group le 26 juin 2015.
  12. 12. Plateforme JavaScript Full-Stack même API
  13. 13. Plateforme JavaScript Full-Stack Échanges de données JSON par web socket
  14. 14. Plateforme JavaScript Full-Stack "Database Everywhere", données synchronisées
  15. 15. Plateforme JavaScript Full-Stack Réactivité
  16. 16. Plateforme JavaScript Full-Stack Réactivité
  17. 17. En détail
  18. 18. 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.
  19. 19. 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
  20. 20. 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
  21. 21. Livequery Connecteurs de base de données temps réel. Requête = résultat + mises à jours au fil du temps oplog tailing
  22. 22. 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.
  23. 23. 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)
  24. 24. Temps réel out of the box
  25. 25. 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.
  26. 26. Mobile et Web Isobuild : à la fois une application web et une app iOS / Android. Cordova et tout ses plugins vous tendent les bras.
  27. 27. Rendu réactif Grâce à Blaze ou en intégrant AngularJS ou ReactJS
  28. 28. UI optimiste "Data-on-the-wire" Compensation de la latence et résolution des conflits intégré.
  29. 29. Moins de code, radicalement Accomplir en 10 lignes ce qui autrement en prendrait 1000.
  30. 30. Entièrement intégré et flexible Pas de temps à perdre avec les composants. Vous vous concentrez sur votre application.
  31. 31. Gestionnaire de paquets Atmosphere donne accès à plus de 8500 paquets de contribution communautaire. Il a son propre solveur de versions avec gestion. atmospherejs
  32. 32. Sécurité Publications / Souscriptions Methods OAuth SSL Authorisations sur les routes
  33. 33. 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.
  34. 34. Installation OS X & Linux Windows via installeur curl https://install.meteor.com/ | sh
  35. 35. CLI $ meteor create my-app my-app: created. To run your new app: cd my-app meteor $ cd my-app $ meteor add twbs:bootstrap $ meteo Deploying to my-app.meteor.com. Now serving at http://my-app.meteor.com
  36. 36. $ demo
  37. 37. Création de l'application On se place dans le dossier crée $ meteor create symposium-meteor-demo $ cd symposium-meteor-demo
  38. 38. 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
  39. 39. On supprime les fichiers d'exemple On créer la nouvelle structure de l'app symposium-meteor-demo.css symposium-meteor-demo.js symposium-meteor-demo.html /client client.js index.html /lib pie.js style.css /public favicon.png /server server.js shared.js
  40. 40. On enlève les packages inutiles On ajoute le package pour dessiner le graphique en SVG $ meteor remove autopublish insecure $ meteor add d3js:d3
  41. 41. On créer les collections shared.js Votes = new Mongo.Collection('votes'); Movies = new Mongo.Collection('movies');
  42. 42. 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'); });
  43. 43. 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>
  44. 44. 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()}); }); }
  45. 45. 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>
  46. 46. 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(); } });
  47. 47. On autorise l'ajout de votes depuis les clients shared.js Votes.allow({ insert: function () { return true; } });
  48. 48. 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 ""; } } });
  49. 49. 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() }); } });
  50. 50. 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>
  51. 51. 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); }); });
  52. 52. 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
  53. 53. $ demo^C $
  54. 54. 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
  55. 55. Application open-source faite avec Meteor Web app pour créer sa propre communauté (hacker-news, product hunt, ...)
  56. 56. Application open-source faite avec Meteor Web app kanban Trello-like, open-source
  57. 57. Application open-source faite avec Meteor Apps temps réel pour l'Internet des objets (IoT)
  58. 58. Application commerciale faite avec Meteor Duels de code pour développeurs
  59. 59. 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
  60. 60. Application commerciale faite avec Meteor Application multi-plateforme pour apprendre le piano
  61. 61. Application commerciale faite avec Meteor Job marketplace, pour entreprises locales et travail journalier
  62. 62. Et bien d'autres
  63. 63. 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)
  64. 64. Aller plus loin Offline appcache est utilisé par défaut par webapp ground:db
  65. 65. </html> @arthurmaroulier @Versusmind http://symposium.versusmind.eu/

×