Développement d'applications javascript AngularJS Conference chez Meetic
Merci Patrick et le sponsor Meetic de nous accueillir au 6 rue Auber, 75009 PARIS.
Super ce site de rencontres, en technos javascript et AngularJS, j'ai bien fait de prendre des cours ;-)
C'est un "café-philo" sur le thème du développement d'applications javascript: EX : Angular+Redux sur la Web App Desktop Meetic, présenté par Mathieu Kluj ; angular2 web-component interoperability par Wassim Chegham
Cet article permet aux absents de suivre ce dont nous on avons parlé, ça fait de la pub aux partenaires, pour moi de l'A/B testing SEO temps réel. Que du win-win pour tout le monde!
Nous sommes très bien accueillis dans une grande salle. Les fauteuils sont confortables, ils pivotent pour déstresser de la journée, c'est top. 2 gros écrans au mur pour projeter les slides. Et il y a un excellent Wi-fi guest.
Tout le monde connait Meetic. Specialistes des rencontres et specialistes des evenements. A la fin du meetup petite colation avec des cookies. Ah les fameux cookies de Meetic.
Développement d'une application javascript en Angular+Redux sur la Web App Desktop Meetic, présenté par Mathieu Kluj
Equipe Sparkle: travailler sur les nouvelles versions du site desktop Meetic.
Anien site de Meetic, stack PHP, qui date de 10 ans.
1ere partie: "profile capture", c'est l'onboarding de l'utilisateur où on lui pose des questions. Niveau données, avec Anglar c'est facile à gérer, service utilisateur, niveau data très simple.
Nouveau site: box, cartes de membres: on a du state partout, et les controlleurs sont saturés. Ca c'était il y a un an. Mais....
Une question? Posez-la ici
Découverte de Redux
1) source unique de vérité: Onestore
1 objet javascript qui contient toutes les données, l'état de l'application.
2) Read only state
Actions typées et wrappées dans un action créator
3) Changements : reducers avec des fonctions
Bonus : on peut être notifié dès qu'il y a un changement de l'état du store grace à un listener.
Flow: utilisateur qui dispatche les actions qui rentrent dans les reduceurs, puis vers le state.
Dans Chrome, console developer: redux. Ca permet de voir toutes les actions qui sont dispatchées sur le store.
exemple: salut: MESSAGE_SEND_START envoyé à l'API, on voit le payload qui part avec le message.
Pratique pour savoir ce qui se passe dans l'application.
Une question? Posez-la ici
Comment intégrer Redux avec AngularJS?
Avec notre module message, on veut envoyer un message et lister les messages envoyés.
1ere etape: l'utilisateur qui interagit avec le composant Angular, le controlleur, NGredux sur le thread-controller.js
dans message-action.JS On a le send message start
Ensuite dans le message-reducer.js on crée le reducer, le switch case, nouvelle version du state avec le payload.
Dernière étape: notifier que le composant a changé et informer l'utilisateur
Connect de ngReduc avec le thread on obtient la liste de message et on binde sur le this de la vue et voilà.
index.js permet de définir les types d'actions en temps que constante, le reduceur en temps que provider et les services.
Voilà la boucle du dataflow.
Mais comment créer le store? Dans le config du module message, on conserve les messages dans un objet...
Examen du core.js
Le store n'est pas vraiment readonly, cest juste un principe de redux.
immutable.js : librairie collection d'objets qui vont retourner une copie de l'objet si on veut le modifier
A partir d'un state, on cree un nouveau state sans impacter l'ancien objet. On ne peut pas modifier un objet, on crée une copie de cet objet: l'objet original n'est pas modifié.
L'API est assez verbeuse. Et ce n'est pas compatible avec ngRepeat : messages.toArray() mais c'est couteux niveau performances, on perd du temps.
Eviter les calls getState quand on est dans un connect.
$ngRedux.getState() ?
Une question? Posez-la ici
Faut-il tout connecter?
Si on part avec Redux, pourquoi pas avoir un state graphique de toute l'application dans le store?
Menu hamburger: true ou false
Différence entre les smart et les dumb composants?
Le dumb: pas d'objets complexes, pas d'accès au state, pas de connecteur
Le smart: en bindings, on envoie juste l'ID du membre, et ensuite on va chercher les données dans le store.
Façon d'organiser le store
Call d'API pour avoir un thread: auteur, message, etc. On ne peut pas le mettre directement dans le store, sinon on va avoir des duplicates.
=> Faire une référence au membre
librairie normalizr = correspondance entre les retours d'API et les mises dans le store
Trop de connects?
Tous les listeners sont appelés quand le store est mis à jour
Du controller on appelle le services et connect
librairie : Reselect , qui permet d'alleger le store.
fonction createSelector qui envoie une liste de threads. Enchainement des selectors. Ensuite on lance le filter pour voir les non lus.
Tant que threadsSelector ne change pas, il n'est pas mis à jour
Une question? Posez-la ici
Trop de cases, trop de switchcases!
Ca devient illisible trop de switchs et de cases.
Au lieu des switchs on appelle des fonctions. Selon le type d'action, on cree une fonction et on lui passe le state et le payload
Bilan de l'utilisation de Redux
Ca fait 1 an que le projet est en cours. Globalement l'adoption de redux est positive. Le debugger est bien, le dataflow est plus facilement hierarchisable. LA documentation est claire: en 1 ou 2 semaine on comprend le principe et comment ca fonctionne.
Des axes à améliorer?
immutable.js des soucis de performance, à tester autre chose.
Le store grossit et devient dur à comprendre.
Des soucis de mémoire
Une question? Posez-la ici
Développement d'une application javascript en Angular2 web-component interoperability par Wassim Chegham
Angular2: qui a fait de l'Angular2? Quelques mains se lèvent.
POC: avec AngularJS, brancher d'autres composants, est-ce que ca build? Est-ce que ca peut partir en prod et est-ce que ça marche?
On peut récupérer du vieux code et l'intégrer dans Angular
SFEIR développeur advocate. @manekinekko
Un beacon dans sa poche diffuse son twitter sur les androids dernière version.
Contriuteur AngularUniversal: on fait tourner l'applcation Angular sur un serveur, intéréssant.
Programme Google developers Experts en bénévolat pour aider les développeurs. Pont entre les produits Google et remonter du feedback....
Pourquoi mixer des composants, Meteor, polymer, react dans AngularJS?
Pour les réutiliser et ne pas les réecrire. REUSABILITY
Attention, ceci est en cours d'experimentation
Il ne faut plus dire Angular2, il faut dire juste Angular pour les versions 2, 3, 4 et AngularJS pour la version1.
Une question? Posez-la ici
Angular CLI, client en ligne de commande
Idéal pour débuter un projet from scratch. Utilisation de Webpack. Bundler l'application, l'optimiser, éliminer le code mort...
Les Build systems alternatifs: stacks avec gulp, grunt..
Quels IDEs et utiliser
On utilise n'importe quel IDE qui supporte TypeScript. Visual Studio code possède un template sympa.
Langages supportés
ES6, ES5 (pas très recommandés), Typescript recommandé.
Concepts de base
Arbre de modules: on crée des modules, spécialisés, métiers... Que l'on partage avec les autres équipes.
1 module est une classe avec une annotation (transpilées avec typescript). @NgModule ...
Composant:
Comme un module
Component communication
Souci avec AngularJS de composants modifient le state d'un autre composant.... Soucis de performance. Pour éviter ça: un composant ne peut pas modifier un autre comosant, ils doivent passer par des input/output.
Property Binding, event binding
On se bind directement sur les evenements.
Une question? Posez-la ici
2-way binding
Annotation babana in the box [(title)]="name"
Structural directives
Ce sont des composants sans vues
What's that *Star ?
*ngIf balise template...
Angular architecture
au choix: MVCn MCCM, MVI, FRP, FLUX/REDUX
Comment ajouter des composants?
Angular 2 et plus implémentent les customs elements
annotations @Directive et @Component pour définir le type de la classe.
HTML templates, projections, Shadow DOM (encapsulation au sein d'un web component du CSS, cf Jquery) encapsulation : toutes les dernières versions des navigateurs le supporte.
Comment utiliser un web component ?
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
bit.ly/pwc-people
voir github/Web component.org ?
Il y a une version 2 de Polymer qui arrive bientot.
Rappel : ceci est en cours d'experimentation, in progress
POC: Agular avec Polymer 1
AngularJS à intégrer à Angular2 et plus?
voir http://bit.ly/ng1-ng-interop mais...
le routeur d'AngularJS ne passe pas bien, bref.
Besoin d'aide en javascript? AngularJS? Un projet d'application? Remplissez ce formulaire: