Slides for my session at Dev day mons 2016. http://arnaudweil.blogspot.com "Come and discover how JavaScript evolved. Ever heard about Node.JS and MongoDB? This session will show you how a full-stack JS technology like Meteor can leverage Node.JS and MongoDB and enable developers to deliver real-time web applications in a breeze. If you like spending very little time while getting big results, this is a must see"

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

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

3. © Arnaud Weil @epo

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

5. © 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

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

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

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

9. Un début de projet
Démo 1

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

11. Un peu de HTML et de JavaScript
Démo 2

12. © 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 });

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

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

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

16. Ecrire dans la base en JavaScript
Démo 4

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

18. © 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>

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

20. Lire dans la base en JavaScript
Démo 5

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

22. Push temps-réel
Démo 6

23. © Arnaud Weil @epo
Faisons le ménage

24. © 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 } }
);
});

25. © 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'
});

26. Routage, template, Bootstrap
Démo 7

27. © 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
}
}));

28. © Arnaud Weil @epo
Autoform
 meteor add aldeed:autoform
{{> quickForm collection="Books"
id="someId" type="insert"}}

29. Schéma et autoform
Démo 8

30. © 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}}

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

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

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