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

© Arnaud Weil @epo

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

Un début de projet

Démo 1

© 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 ?

Push temps-réel

Démo 6

© Arnaud Weil @epo

Faisons le ménage

© Arnaud Weil @epo

Routage

meteor add iron:routerRouter.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

Autoform

meteor add aldeed:autoform

{{> quickForm collection="Books"

id="someId" type="insert"}}

Schéma et autoform

Démo 8

© 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/