React.js and React Native Comet Expo chez Comet
Nous sommes une communauté sympa d'informaticiens, de développeurs qui créent des programmes informatiques en javascript et qui se réunit pour discuter des nouvelles technologies qui ont vu le jour autour du langage de programmation javascript (mais pas que, on parle aussi de typescript). Les anciens y voient une sorte de "café-philo" en référence aux débats animés de Marc Sautet au café des Phares, place de La Bastille à Paris. Nous nous réunissons depuis 2010, tous les mois, le dernier mercredi du mois, pour généralement 1h30 de présentations, avec un networking-pizza à la fin pour discuter technique, demander de l'aide sur tel ou tel sujet, du feedback, et faire connaissance avec les petits nouveaux.
Cette communauté de "javascripters" indépendante, il n'y a pas de "directeurs", de "chefs", il n'y a que des contributeurs, et chacun présente ce qu'il veut, du moment que ça intéresse la communauté. L'entrée est libre, tout le monde est le bienvenu. Merci à Comet de nous accueillir. C'est pratique, c'est facilement accessible pour tout le monde, au centre de Paris, au 47 rue de Popincourt, 75011 PARIS. Merci à Patrick Aljord et Wilfried Boukhers pour l'organisation
Une question? Posez-la ici
Aide au développement d'applications
Qu'est-ce que Comet?
Comet est une mise en relation entre freelance et les clients, le site est ici
Modèle économique sympa pour les développeurs
Exemple, pour les développeurs ios natif c'est parfait, surtout quand c’est trouble avec les SSII qui agressent sur Linkedin
Fraicheur dans le monde des développeurs, remettre le freelance au centre de l’activité.
Faire du travail une commodité : trouver des missions en continue. Sans avoir des frictions, sans être seul.
Il y 7 développeurs dans la salle et ils recherchent un admin sys
Les salles ont des noms de planètes, Saturne, Mercure, etc... avec des comètes sur les murs, trop beau!
Une question? Posez-la ici
Aide au développement d'applications web mobile smartphone
Créez votre premier composant GraphQL complexe par Thomas Pucci
Changement de planning c'est graphQL en premier
Thomas est développeur chez BAM
Créez votre premier composant GraphQL complexe par Thomas Pucci
Optimisez l'utilisation du réseau avec Apollo et l'architecture de votre projet en suivant les principes de l'Atomic Design.
Expo permet de créer une application mobile React Native et simplifie grandement tout ce qui empêcherait un développeur de créer l’application, que ce soit l’installation, la gestion des modules, les tests, la distribution ou même la plateforme (iOS, Android). Tout est fait pour l’Expérience Développeur.
Live coding sur comment connecter GraphQL à des composants REACT. Ceux qui ne connaissent pas GraphQL c'est une norme.
sur des apps smartphones IOS et Android pour commander de la nourriture dans des restaurants.
Entre la cuisine et l’utilisateur qui commande, il y a des service. Plusieurs services construits independament les uns des autres : authentifiaction, utiliateurs, commandes, menus
Avec differentes technologies, NodeJS, Go, Mongo, PostgreSQL, Websocket…
On construit des API pour faire communiquer les smatphones avec le service backend.
Aujourd’hui quand on pense API, client serveur, on pense à 99 % REST.
REST, c’est la façon la plus courante d’échanger des données entre machines.
Requetes en GraphQL: toutes les requetes vont sur le même endpoint.
Création d'une application "todo" pour faire une liste de taches, avec craftpool: un fichier qui deploie un serveur GraphQL automatiquement.
Le client, en une requete, demande ce qu'il a besoin. Créé par Facebook il y a quelques années et utilisé en production.
- Avec REST, il y a des doucis de performances
On découpe les routes par ressources : par exemple, si on a besoin des données, il faut une route pour chaque donnée. Si on prend par exemple Facebook, il nous faut une route pour lire le profil utilisateur, une route pour lire le post, une route pour lire les commentaires, une route pour lire les likes.
Et donc ça fait plein de requetes REST à la suite, l’application mobile doit effectuer 5 requêtes imbriquées. Et sur mobile, les requêtes sont très lentes. L’utilisateur voit l’affichage ralenti, voire figé, il est frustré.
REST n’est pas un standard, mais un style d’architecture logicielle.
GraphQL est une alternative qui peut remplacer le REST.
Qu’est-ce qui cloche avec Rest ? Rien, c’est sympa REST, mais ça a 20 ans quand même et il y a certaines limitations que l’on rencontre de nos jours lorsque l’on constuit un micro service
On demande une information à travers une ressource et une url scheme. On constuit une route pour une ressource, une sub_resource
Il y a plein de web services
/posts
/posts/434/
/posts/434/comments
/posts/434/contributors…
On peut parler de CRUD, create, read, update, delete
Post, get put, delete
On a des routes, on a des verbes pour effectuer différentes requetes
Exemple de requete :
Pour un « Get »
/api/posts ?limit=35&type=trending
On a l’équivelent en JSON, c’est classique.
On a généralement des requetes avec, une image, un texte .
Un endpoint = une ressource
Et si on n’avait pas besoin de l’image, ou du texte ?
Des fois le contenu que l’on requete est enorme, et on n’utilise que 10 % de ce qu’on interroge
Si on multiplie ça par des milliers de clients mobiles, on récupères des tonnes d’informations superflues. Et comme on facture à la donnée, ça devient très cher !
Alors on requete l’essentiel !
On recrée un 2eme webservice, avec une API plus légère, avec uniquement ce que l’on veut
MAIS, il faut gérer les versions, ça devient compliqué, il faut maintenir, etc.
Et si maintenant on veut récupérer en plus de l’image et du texte, du contenu sipplémentaire, comme des like facebook, ou d’autrer commentaires. C’est une sorte de tableau de commentaires.
On peut créer une 3eme version de ce web service API
En plus, on constuit les requetes differement sur les mobiles et les desktops. Donc il nous faut une V4, une V5.. Ca commence à être compliqué.
Une route = 1 ressource.
On récupère donc un tableau.
Overfetching comme sur les mobiles, on reçoit trop de données, car on va à l’essentiel sur mobile, et on réduit les données disponibles à requeter.
Underfetching, on ne reçoit pas assez de données, car chaque tableau contient plein de données, on les veut toutes.
Donc ça devient compliqué de gérer tout ça.
Alors il faut tricher un peu, on ne fait pas du « restful », on bricole un peu pour adapter les requetes à nos besoins… Ca devient compliqué…
C’est là qu’arrive GraphQL, tada !
Cette technologie a été introduite en 2012 par Faceboook pour faciliter les échanges d’informations entre les applications.
Open source depuis 2015
C’est un moyen de demander de l’information dans n’importe quel langage, sur n’importe quel protocole. Ca a l’air intéréssant, allons voir plus en profondeurs. C’est une sorte de SQL.
Serveur de demo en NodeJS, javascript
On utilise un client léger, « GraphiQL », un plugin sur Chrome
Il y a 2 éléments dans GraphQL la query, requete, et la mutation
Ca commence comme ça :
Query{
}
On a un endpoint sur notre serveur web.
Ensuite entre les accoaldes, les moustaches
On peut ajouter
Posts
PostById
Query{
Posts{
title
}
}
On a donc une requete qui demande un tableau de titres
On peut ajouter d’autres attributs :
Query{
Posts{
id
Title
pictureURL
author{
name
comments {
author{
name
}
}
}
}
}
Chaque champ est une fonction. Chaque champ peut avoir des paramètres
Je peux ajouter à pictureURL le paramètre taille
pictureURL{size :200}
GraphQL est typé : chaque champ a un type, ça change de javascript qui n’est pas typé et ça rejoint Java et Typescript.
On va interroger, requêter pour réceptionner une collection de données, une liste.
On n’a pas besoin de lire la doc, on a tout dans le graphe, avec l’IDE et l’auto complétion, l’API nous donne automatiquement les fonctionnalités dont on a besoin.
Je peux rajouter des élément à post : posts(limit :25,type : TRENDING
Je peux créer un alias : trendingPosts : posts(limit :25,type : TRENDING
Je peux requêter : postByd(postID : 3) etc.
Mais, en même temps, si j’ai des données dupliquées, je peux créer un fragment en selectionnant seluement les champs qui m’interessent.
Fragment BaseFields on Post {
}
Je peux créer des conditions avec « Skip » ou « include »
2eme type : mutation
Mutation{
}
Mutation{
recomendPost(postID :3)
title
votes
}
Il y a d’autres types comme
Subscription {
}
Voilà pour la théorie. Maintenant, qu’est-ce que ça donne en pratique ?
GraphQL est fortement typé. Resources -> types .
Voici quelques types :
type Post{
title :String !
content :String
author : User !
}
Type User{
name : String !
avatar :String
}
Type Comment {
content :String !
}
Et là, GraphQL crée un graphe entre les types, avec des dépendances entre chacun des types.
Le schema est la mère de tous les éléments, de tous les types
Schema, query, mutation
La query et la mutation sont 2 types de GraphQL
On accède à une mutation ou à une query
Quand on fait une requete, le schema général se met à jour.
On utilise pour les tests un db.js qui est notre base de donnée, on pourrait utiliser mongo, postgreSQL…
On utilise un server.js qui contient les requetes vers la base de donnée db.js
Avec un const graphql=
On a le post et le resolver. Une Query peut etre composée d’un champ post qui est une fonction avec quelques arguments. On retourne quelquechose, on retourne un tableau.
Avec le champ author par exemple avec le type Author. Il a un nom typé String.
Quelques exemples à découvrir sur Graphql.org
On peut l’utiliser sur un site web classique. Si on a besoin de créer une API, pourquoi ne pas la faire en GraphQL, à tester, car beaucoup de sites l’utilisent, comme Github par exemple, ou youtube, ou Linkedin, en fait les reseaux sociaux qui ont besoin de faire des opérations sur les commentaires, c’est très pratique.
Composant :Apollo
Atomic design: manière d'architecturer son app
Organismes: toute la page qui regroupe une liste de todo
C'est parti pour le live code...
Une question? Posez-la ici
Aide au développement d'applications web mobile smartphone
Création d’une application mobile avec React Native par Jean-Claude Pratt-Delzenne
Travaille chez vente privée, aime aider les gens à créer les produits, UI, machine learning, fan de javascript
Application expo
Dan Abramov se sent frustré quand il développe. Au début, c'est fun, mais plus on avance, plus on doit se battre avec les outils.
On met en place un workflow pour orchestrer tout ça. Il a donc créé Redux. Elm à coté.
Experience développeur pour l'UX:
Le workflow personnel soit plus efficace
Etre plus productif
Application facile à tester
Exemple d'API : Stripe: au début elle était dificile à utiliser, puis petit à petit elle a été mise à jour pour être plus user-friendly. On se sent mieux, on est plus productif.
Le rapport avec React Native? C'est pareil, c'est aussi étudié pour développé les applications
Avant, on utilisait javascript et Cordova pour développer des applications mobiles.
Maintenant, avec React, ceux qui connaissent React peuvent développer facilement en multi plateforme
Multi plateforme: ce code fera de l'android, ce code là fera de l'IOS.
XCode (il faut un mac), Android studio
Pourquoi l'on est obligé d'utiliser un IDE? Plus besoin de l'environnement de développement d'applications pour développer ses applications par exemple
Le développeur javascript est un peu frustré quand il se met au natif
Qu'est-ce que Expo? C'est une toolchain, plein de petites briques pour créer une application react native
On va créer un seul code et ce code va fonctionner sur 2 plates formes
On peut développer son application OS sur Linux, Windows, Mac
Idem, on peut développer son application Adroid sans Android studio
De l'idée au prototype très rapidement
Expo promet de opuvoir développer rapidement les fonctionnalités classiques les plus demandées
"Ceate react native app" derrière c'est Expo. La manière la plus rapide de créer une application
Dès qu'on a terminé, on build et on envoie à nos amis l'url pour tester l'appli en 30 minutes
Depuis le web on peut créer une application directement
On peut mapper des objets dans le backend et les modifier en dagn' drop
En dragn'drop, en 10 secondes on voit la 3D de WebGL.
Idem pour on peut utiliser Arkit à travers Expo, c'est top
Voilà, j'espère que ça vous a plu. Vos commentaires/remarques sont les bienvenus