Meteor: you're going to love full-stack JavaScript. At last.

METEOR
You're going to love full-stack JavaScript. At last.Arnaud Weil @epo

© Arnaud Weil @epo
Sondage: aimez-vous JavaScript ?
Je déteste JavaScript
J’adore JavaScript
Sans opinion

Créer une application Web aujourd’hui
 ASP.NET
 Java
 Node.JS
 PHP
 Ruby on Rails
 …
 (jQuery)
 Angular
 Blaze
 Knockout
 React
 …
Serveur Client

© Arnaud Weil @epo
ASP.NET c’est bien mais…
 Les WebForms ne produisent pas de HTML5 ou
JSON
 SPA
 MVC, C#, Razor pour le bas niveau
 Code client en JavaScript et Angular / React / …
 Beaucoup de boulot

© Arnaud Weil @epo
La jungle Node.JS
 Node.JS, Express, React, WebPack, Browserify,
Babel, Reload, Gulp, Yeoman
 Mais JavaScript fatigue

© Arnaud Weil @epo
Pourquoi Meteor ?
 Basé sur Node.JS
 Multi-plateforme comme .NET Core
 Simple
 Ca va très, très vite

© Arnaud Weil @epo
La simplicité
meteor create appli
cd appli
meteor

© Arnaud Weil @epo
Le cahier des charges
 Startup
 Fil de discussion
 Temps-réel
 Base de données
 Pour demain

Un peu de HTML et de JavaScript
Démo 2

© Arnaud Weil @epo
MongoDB
 NoSQL: pas de schéma
 Parfait pour du prototypage
 Equivalent d’un SELECT:
 Equivalent d’un INSERT:
db.collection.find({});
db.collection.insert({ name: "John", age: 25 });

Lire et écrire dans la base en ligne de
commande
Démo 3

© Arnaud Weil @epo
Code isomorphique
 Du temps gagné
 Collections MongoDB
 Schémas
 Routage
 Votre logique fonctionnelle
 …

© Arnaud Weil @epo
Synchro MongoDB
 new Meteor.Collection("nom");
MongoDB
Navigateur
Serveur
MeteorCache
MiniMongo
Synchro
temps-réel

Ecrire dans la base en JavaScript
Démo 4

© Arnaud Weil @epo
Au fait…
Ajout côté
client
Envoi au
serveur
Ajout côté
serveur
Gestion
conflits
Push vers
clients

© Arnaud Weil @epo
Donner vie au HTML
 React, Angular, …
 Blaze
<h1>Comments</h1>
<ul>
{{#each message in messages}}
<li>{{message.title}} - by {{message.author}}</li>
{{/each}}
</ul>

© Arnaud Weil @epo
Template.messagesDisplay.helpers({
hasMessages: function() {
return true;
},
messages: function(param1, param2) {
return ['Hello', 'Important message'];
},
});

Lire dans la base en JavaScript
Démo 5

© Arnaud Weil @epo
Mais!
 Et le temps réel dans tout ça ?

© Arnaud Weil @epo
Faisons le ménage

© Arnaud Weil @epo
Routage
 meteor add iron:router
Router.route('/message', function () {
this.render('messagesDisplay');
});
Router.route('/message/:id', function () {
var id = this.params.id;
this.render('messagesDisplay',
{ data: { id: id } }
);
});

© Arnaud Weil @epo
Routage avec modèles
<template name="mainLayout">
<h1>My awesome application</h1>
<div class="mainContent">
{{> yield}}
</div>
</template>
Router.configure({
layoutTemplate: 'mainLayout'
});

Routage, template, Bootstrap
Démo 7

© Arnaud Weil @epo
Schémas
 meteor add aldeed:simple-schema
 meteor add aldeed:collection2
Products = new Mongo.Collection('products');
Products.attachSchema(new SimpleSchema({
title: {
type: String
},
price: {
type: Number
}
}));

© Arnaud Weil @epo
Identification
 Meteor.user()
 Providers: accounts-password, accounts-facebook,
accounts-google, …
 UI toute prête ou ian:accounts-ui-bootstrap-3
 {{> loginButtons}}
 useraccounts:bootstrap, useraccounts:materialize, …
 {{> atForm}} {{> atNavButton}}

© Arnaud Weil @epo
Navigation et identification
 useraccounts:iron-routing
AccountsTemplates.configure({
defaultLayout: 'layout',
});
Router.plugin('ensureSignedIn', {
only: ['prices', 'admin'],
except: ...
});

© Arnaud Weil @epo
Le livre
 http://tinyurl.com/devdaybe (ebook, 50% jusqu’au 4)
 https://www.amazon.fr/dp/1365291200

© Arnaud Weil @epo
Les livres
 Learn ASP.NET MVC
 Learn Meteor
 Learn WPF MVVM
http://arnaudweil.blogspot.be/

Meteor: you're going to love full-stack JavaScript. At last.

Contenu connexe

Tendances (18)

Similaire à Meteor: you're going to love full-stack JavaScript. At last. (19)

Meteor: you're going to love full-stack JavaScript. At last.