Meteor: you're going to love full-stack JavaScript. At last.
-
Upload
arnaud-weil -
Category
Software
-
view
161 -
download
0
Transcript of 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
© 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/