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: