<!-- .slide: class="splash" data-background="https://image.slidesdocs.com/responsive-images/background/nature-meteor-simple-starry-sky-blue-planet-powerpoint-background_e815352821__960_540.jpg" data-background-opacity="0.5" -->
[go.epfl.ch/formation-meteor-angular](https://go.epfl.ch/formation-meteor-angular)
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Meteor-logo.png"/> <br/>
(+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/2048px-Angular_full_color_logo.svg.png" style="height: 30vh;"/>)
<!-- .element: class="fragment" data-fragment-index="1" -->
----
# Démo !
<span style="font-size: 50pt !important;">http://128.179.183.44:3000/</span>
----
# Meteor : en quelques mots
<!-- .slide: data-background="https://d2n4wb9orp1vta.cloudfront.net/cms/can-you-draw-seven-parallel-lines.jpg" data-background-opacity="0.6" -->
Un framework full-stack pour JavaScript / TypeScript
----
## Cible : les applications «intranet»
<p class="fragment">
Exemples de réalisations :
<ul>
<li class="fragment">Back-offices WordPress
<ul>
<li class="fragment">WP-Veritas</li>
<li class="fragment">Polylex</li>
</ul>
</li>
<li class="fragment">Évaluation des doctorants</li>
</ul>
</p>
----
## Architecture
----
## Opinionations
<!-- .slide: data-background="https://cdn.thewirecutter.com/wp-content/uploads/2017/10/tools-and-toolbox-2x1-fullres-.jpg" data-background-opacity="0.2" -->
- <!-- .element: class="fragment" -->Modèle de données : DDP, publish/subscribe, CQRS... <span class="fragment">MongoDB</span>
- <!-- .element: class="fragment" -->Programmation fonctionnelle : <code>Tracker</code>
- <!-- .element: class="fragment" -->Isométrie des APIs : MiniMongo
- <!-- .element: class="fragment" -->Packaging : Babel
----
# En retard ! ...
<!-- .slide: data-background="https://freepngimg.com/download/disney/127489-wonderland-alice-rabbit-in-free-download-png-hd.png" data-background-opacity="0.4" -->
- <!-- .element: class="fragment" -->Versions de Node (⇐ <code>Fibers</code>)
- <!-- .element: class="fragment" -->Modules ESM
... Tout cela arrivera dans la branche <code>3.O</code>.<!-- .element: class="fragment" -->
---
<table class="comparaison">
<tr>
<td class="definition"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Meteor-logo.png"/></td>
<td><ul>
<li class="fragment">JavaScript portable client/serveur (<b>«isométrique»</b>)</li>
<li class="fragment">Modèle de données (MiniMongo, DDP, Tracker)</li>
<li class="fragment">Sessions, sécurité</li>
</ul></td>
</tr>
<tr class="fragment">
<td class="definition"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/2048px-Angular_full_color_logo.svg.png" style="height: 30vh;"/></td>
<td><ul>
<li class="fragment">Affichage (DOM)</li>
<li class="fragment">Expérience utilisateur (événements, animations)</li>
</ul></td>
<tr class="fragment">
<td id="ingredients-code-epfl" class="definition"><img src="https://epfl-si.github.io/elements/svg/epfl-logo.svg"></td>
<td><ul>
<li class="fragment">Authentification (Tequila)</li>
<li class="fragment">... Quelque chose d'utile pour le métier ? 😂</li>
</td>
</tr>
</table>
---
# On plonge !
https://www.meteor.com/tutorials/angular/
```bash
npm install -g meteor
meteor create --blaze angular.starterkit
cd angular.starterkit
meteor npm i
meteor
```
<!-- .slide: data-background="https://raw.githubusercontent.com/epfl-idevfsd/hackmd.angularjs/master/uploads/upload_b3ddda2b449c1f972b630f70cc139edb.png" -->
Note:
- `--blaze` parce qu'on ne veut pas de React.
- `meteor npm i` : voir slide suivant...
---
<!-- .slide: data-background="https://ychef.files.bbci.co.uk/976x549/p07fxjpk.jpg" data-background-color="black" data-background-opacity="0.6" -->
```bash
cat package.json; cat .meteor/packages
cat package-lock.json; cat .meteor/versions
node --version; meteor node --version
```
---
https://atmospherejs.com/meteor/angular-compilers
```bash
git clone https://github.com/epfl-si/angular.starterkit
cd angular.starterkit
git checkout exercices
meteor npm i
git checkout -b mabranche
```
Note: nous allons suivre les commits un par un. (gitk et `git cherry-pick` si besoin)
---
# ... AOT ?
<!-- .slide: data-background="https://www.forbes.fr/wp-content/uploads/2022/12/gettyimages-151814127.jpg" -->
[Seulement avec Angular 12](https://github.com/Urigo/angular-meteor/issues/1988)
Note:
- ... Ou bien la branche `fuxxture/webpack
- Voir aussi :
- https://redfin.engineering/node-modules-at-war-why-commonjs-and-es-modules-cant-get-along-9617135eeca1
- https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
<style>
body {
--epfl-red: #FF0000;
--epfl-red-dark: #B51F1F;
}
.reveal {
background-image: url('https://epfl-si.github.io/elements/svg/epfl-logo.svg');
background-repeat: no-repeat;
background-position: 5px 5px;
}
.reveal h1, .reveal h2, .reveal h3,
.reveal h4, .reveal h5, .reveal h6 {
color: black;
}
.reveal code {
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
color: dimgray;
background-color: rgba(255, 255, 255, 0.76);
border-radius: 3px;
}
.reveal cite:before { content: "\2009 \2015 \2009"; }
.reveal cite { font-size: 80%; }
section {
padding: 1.5em 15px;
}
section[data-contrast="on-"] {
background-color: #ffffff20;
}
section[data-contrast="on"] {
background-color: #ffffff50;
}
section[data-contrast="on+"] {
background-color: #ffffff99;
}
.reveal [data-background] > div {
background-color: #ffffff94;
border-radius: 20px;
padding: 0.3em;
}
.reveal section.splash p.fragment {
font-size: 30vh;
}
.reveal section.splash a {
font-size: 40pt;
font-weight: bold;
color: var(--epfl-red-dark);
}
table.comparaison, table.comparaison td {
border: 1px solid;
}
table.comparaison td {
border: 1px solid;
font-size: 0.8ex;
padding: 1ex;
}
table.comparaison td.definition {
text-align: center;
}
table.comparaison img {
max-height: 20vh;
}
td#ingredients-code-epfl {
background-image: url(https://s42814.pcdn.co/wp-content/uploads/2020/01/Workshop_0919-HS-40Something_Ask-studio_TommyCorner-1.0-scaled.jpg.webp);
background-size: cover;
background-position: center 30%;
}
td#ingredients-code-epfl img {
padding: 20px;
border-radius: 20px;
background-color: rgba(100%, 100%, 100%, 0.6);
transform: rotate(-10deg);
}
</style>
{"metaMigratedAt":"2023-06-18T03:08:44.080Z","metaMigratedFrom":"YAML","title":"Meteor (+ Angular)","breaks":true,"description":"Présentation Meteor + Angular à l'équipe ISCS-MD","slideOptions":"{\"transition\":\"convex\",\"theme\":\"white\",\"spotlight\":{\"enabled\":false},\"progress\":true}","contributors":"[{\"id\":\"35350d9c-aeac-41da-82de-65dc5010a23b\",\"add\":9629,\"del\":2279}]"}