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
This email address is being protected from spambots. You need JavaScript enabled to view it.
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: