Conseils, services, ingénierie en informatique. Mise en place de solutions technologiques, et support, pour les entreprises.

Note utilisateur: 1 / 5

Etoiles activesEtoiles inactivesEtoiles inactivesEtoiles inactivesEtoiles inactives
 

React.js and React Native Comet Expo chez Comet

 

 developpement application mobile native react native expo 

 

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.

  1. 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

 

Commentaires   

DigMind
-1 #6 DigMind 18-12-2017 10:05
C quoi c conneries que GraPHQL remplace REST, n'importe quoi!
Citer | Signaler à l’administrateur
St0rm
0 #5 St0rm 16-12-2017 13:06
Pas mal l'explication de GraPHQL!
Citer | Signaler à l’administrateur
Nickopl
0 #4 Nickopl 14-12-2017 18:48
Je comprends un peu mieux GraphQL merci
Citer | Signaler à l’administrateur
JCP
+2 #3 JCP 14-12-2017 14:34
Beau résumé de GraphQL merci; C'était au top
Citer | Signaler à l’administrateur
comet
+1 #2 comet 14-12-2017 10:23
Meetup très intéressant ! Toute l'équipe comet était ravie d'accueillir la communauté React hier :)
Rejoignez notre communauté de développeurs freelances ici : hellocomet.co/fr/freelances. A bientôt !
Citer | Signaler à l’administrateur
FredM
+1 #1 FredM 14-12-2017 07:49
Merci ça me donne envie de tester Expo
Citer | Signaler à l’administrateur

Ajouter un Commentaire

Ces commentaires reflète exclusivement l'opinion de leurs auteurs et n’engage en aucune façon Consultingit. L'icone à gauche du commentaire apparait si votre adresse email utilisée pour poster est la même que celle de votre compte gravatar: https://fr.gravatar.com Pour insérer une balise youtube: [youtube]IDENTIFIER[/youtube]

Code de sécurité
Rafraîchir