Développement d'applications javascript ReactJS and React Native Paris conference chez Toucan Toco

Merci Stéphanie, Sébastien, Xavier, et au sponsor Toucan Toco de nous accueillir au 4 rue Paul Cézane, 75008 PARIS.

C'était un "café-philo" sur le thème du développement d'applications javascript ave de l'analytics

Un talk de Xavier qui va nous parler de Google Analytics avec React Native sur une application Tinder like

Thibaut va nous parler de son snake fait en langage fonctionnel dans une interface graphique en elm, model view controler,

Wilfried qui va nous parler de GraphQL

 
Merci à Toucan Toco de nous recevoir. Comme dirait Kevin Duchier, si nous avions un message à faire passer ce serait une de nos valeurs: Each on teach one ! Nous hostons beaucoup de meetup car notre objectif chez Toucan Toco c'est de partager nos connaissances et d'apprendre des autres.

Xaviere Lefèvre, développeur à BAM studio de développement d'applications hybrides. Anciennement PO chez Rocket Internet, d'où l'analytics

Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

www.linkedin.com/in/lefevrexavier/

Product Owner, UX/Analytics, développement

Cercle virtueux: build, measure, learn

Pourquoi Google Analytics?

Gratuit, forte communauté, très puissant, solutions web et applications mobiles. Fait un bridge entre les données et les outils marketings, Googl Adwords, Criteo, et permet de bénéficier des outils google.

Service premium Google Analytics, le top, 1000 Euros par mois, pour faire du cross devices, entre autre...

Que peut-on faire avec de l'analytics?

Acquisition: Taux de retention, bouton d'achat, profil des utilisateurs, est-ce que les utilisateurs sont satisfaits? On voit d'où viennent les gens.

Un exemple concret. Projet réseau social application mobile de vote de photos. Ce réseau social nécéssitait une fonctionnalité de vote: il y avait plusieurs façon de voter: swiper de gauche à droite ou cliquer sur le coeur au milieu.
 

Une question? Posez-la ici

Que trouve-t-t-on sur Google Analytics?

Des dimensions et des metrics

C'est une base de donnée temporelle: chacune des actions de l'utilisateur peut-être enregistrée et ça permet de faire du profiling très précis.

Une métrique, un count sur un attribut permet de faire ce que l'on veut. Connaitre le comportement des utilisateurs dans une application.

Installer Google Analytics

Installer l'appli React Native Google Analytics Bridge

 Tester l'application en intégration ET en production.

On veut mesurer ce que font les utilisateurs: est-ce qu'ils swipent à gauche, à droite, où est-ce qu'ils cliuent au milieu?

Référence au store pour avoir accès au store tout le temps

On crée une fonction getGlobalDimensions() pour étudier les comportements. On récupère tout du store et on passe les infos dans la fonction sendEvent

Envoyons l'event

Comparé à Redux qui a des actions, on veut centraliser tout l'historique d'action.

Exemple avec une image card, leftSwipe, rightswipe, et center

Debugger et tester

Vérifier que les variables sont bien peuplées avant d'appeler la librairie

Activer le mode debug du SDK pour voir la donnée.

Android, afficher les logcat avec "adb logcat -v time -s GAv4"

Comparons les nouveaux utilisateurs, par rapport aux utilisateurs habitués.

On constate que les nouveaux utilisateurs swipent 11% à drtoite, alors que les utilisateurs habitués swipent pour 5% à gauche

22% de ceux qui swipent à droite recommencent à voter, et 4% quittent l'application.

Ils font l'analogie avec Tinder. Donc le dev a calqué l'application Tinder pour que les utilisateurs soient plus à l'aise!

moralité: merci l'analytics, il faut toujours calquer les interfaces utilisateurs aux interface dont les utilisateurs ont l'habitude d'utiliser

Une question? Posez-la ici

Thibaut nous parle de son dev du jeu snake en "Elm" mvc model-vue-controlleur.

C'est transpilé vers du javascript. En "Elm", c'est du fonctionnel, comment debugguer puisque c'est transpilé en javascript!? Si j'ai une exception? Un bug? Comme cofee script, comment faire pour gérer les exceptions?

En M il n'y a pas de pointeurs nulls, pas d'exceptions, il ne peut pas y avoir de bugs dans le browser.

Revue de code!

L'elm c'est comme du C, ou tu html typé.

On a une fonction main, appelée de base dans le programme

Cette fonction est typée et ne prend aucun paramètre. Elle appelle une fonction dans un fichier html. Il n'y a pas d'objets en "Elm", il n'y a que des fonctions. C'est l'équivalent des objets inline en javascript.

On ne peut pas assigner de variables, c'est assez restrictif, mais l'avantage c'est qu'il n'y a aucun side effect, pas de trucs pas gérés dans un retour de requestes...

La fonction init génère les données de l'application de base. Ensuite une fonction update permet de fournir aux subscriptions. Modèle - Vue -Controlleur

Développement d'applications : vue

On commence par expliquer la vue qui prend en paramètre un modèle qui retourne une div

Il n'y a pas de composants Elm, ce sont juste des appels de fonctions

Notre fonction div est inclue depuis HTML, elle prend 2 paramètres, un tableau d'attributs, avec la liste des élements html

Développement d'applications : model

Ensuite, le modèle worldview model

Le snake est une liste de vertebres, ce sont les elements du snake, les "chunks"?
 

Une question? Posez-la ici

Développement d'applications : controlleur

List.map de vertebraview de snake. Fonctions partielles. LE spriteView, est composé d'emojis. Dans les arguments, on peut destructurer les objets et les valeurs. On lui passe un couple pour les positions. Top, left, etc.

 Le snake est une liste.

Passage de l'application du mode texte en mode Web-GL

Modification de la vue pour passer en Web-GL !

Le code ne change pas, il n'y a que la vue qui a été un peu modifiée

Vertex shaders typés, et webgltohtml

Intéret: on a découplé le composant vue du reste du programme, on passe d'une vue 2D en vue 3D très facilement. Tout est découplable à volonté!

Wilfried qui nous parle de GraphQL react-apollo

Comment utiliser GraphQL dans une application React

Exemple, on a 3 fronts qui tapent la même API en requetant via du Json. On envoie tout l'objet, cela génère une chage réseau, soit on fait du cas par cas, pour que ça soit scalable.

La requête GraphQL définit le besoin du retour serveur

GraphIQL documente toutes les données qui sont exposée

Un exemple de requête: Events de react europe 2017 . On va regarder dans schedule, title,

 On request en GraphQL et on répond en JSON

Une question? Posez-la ici

Apollo, HOC pour les requetes

Refetching automatique pour simuler des données en temps réel, du bouchonnage.

Cache local qui allège le serveur, et red l'application plus réactive.

Interrogarions sur le serveur GraphQL

Une question? Posez-la ici

Besoin d'aide en javascript? Un projet d'application? Remplissez ce formulaire: