Conference Paris.js développement langage javascript applications terminaux temps-réel Cordova Node.js GraphQL React.js Redux

 

 Soirée dédiée au langage de programmation javascript. Merci à Paris.js Djebbz, Adrien Risser, Julien Guézennec, Pierrick Paul, et aux incubateurs  paris&Co 

Paris & CO, connecteurs étudiants: merci Antonin pour la présentation de ce dispositif destiné à connecter les étudiants avec l’écosystème de l’innovation professionnel, lancé en 2014, avec le soutient de la ville de Paris. 8 incubateurs, 200 startups incubées par an. Nouveau site incubateurs.parisandco.com jobboard.

Mauvaise nouvelle, ce soir, pas de sponsor, pas de pizza, pas de sushis, plus de fontaine à eau… On cherche des sponsors pour la prochaine conf

Mais bonne nouvelle, une place à gagner pour « best of web » http://www.bestofweb.paris le 8 & 8 juin 2017 

 

Présentation de l’outil Strapi

 

Strapi est un outil qui permet de créer, mettre en ligne et gérer des APIs

http://strapi.io

https://github.com/strapi/strapi

opensource, nodejs, ES6

npm install strapi -g

pou les développeurs frontend, ou les développeurs backend . Licence MIT.

 

développement d'application mobile avec JavaScript et DOM dans vos terminaux par Mael

Emacs, vim, dialog, ce sont des terminaux, ou interfaces graphiques qui peuvent afficher davantage que du texte. Bibliotheque Blessed en JS.

But : si on veut faire une page web pour un système qui n’a pas de navigateur web.

Plusieurs biliotheques :

Bash : Dialog

C/C++ Curses, NCurses

Python : Urwid

Javascript : Blessed

MyLittleDom frontend appliqué au backend. C’est une bibliotheque d’abstraction du DOM dont le renderer princpal est sur un terminal. On utilise du CSS, display, position, top, …, il y a des flexbox grace à Yoga, merci Facebook. Native React renderer . React 16 avec fiber, qui permet de faire des renderers customs.

Une question? Posez-la ici

 

 Real-time applications with GraphQL, Node.js and MQTT par Jacopo

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

Qu’est-ce qu’une application en temps réel ? Qui répond à des evenements en dessous d’un certain temps. Exemple une voiture sans chauffeur qui analyse les informations de ses capteurs. En dessous de 100ms par exemple. Facebook permet d’envoyer un message d’un utilisateur à un autre en moins de 100 millisecondes grace à l’infrastructure de Messenger.

 

Pull-based approach

 

Via du web socket, le client est informé qu’il y a de la nouvelle donnée et il fait un fetch sur le server en http généralement, REST.

 

Push-based approach

 

Le client fait d’abord une requête pour récupérer un état initial des données. Il s’inscrit ensuite pour connaitre les différences d’informations et les recevoir.

Une question? Posez-la ici

 

Pourquoi un développement d’application mobile avec GraphQL ?

 

Souvent on a des clients différent, Android, IOS, etc et ils utilisent les données dans des formats différents : grace à GraphQL on homogénise les formats des données échangées.

Pour découpler facilement le frontend du backend de façon rapide.

Le client demande ce qu’il veut, dans le format qu’il veut, quand il veut.

Lire la date, écrire la data, mutations, subscriptions

 

Qu’est-ce que MQTT ?

 

MQ telemetry transport basé sur TCP/IP. C’est un serveur de mutation

Publish, subscribe, unsuscribe, fetch

 

Pourquoi un développement d’application mobile avec MQTT ?

 

Pour économiser la batterie, low power usage.

 

Les paquets MQTT sont très petit, et distribution one to many très efficace

Quand on fait du websocket sur des applis mobiles, sur les connections 4G ça se déconnecte tout le temps c’est bien connu, alors ave MQTT on gère mieux le mode on-line/off-line.

 

Pourquoi un développement d’application mobile avec GraphQL et MQTT ?

 

Le martphone est intéréssé à s’abonner à une ressoure identifiée par le nom de la ressource et son identifiant. Exemple, un utilisateur, avec son ID. Dès qu’un utilisateur met à jour son profil, par exemple s’il change son email où son numéro de téléphone, la nouvelle donnée sera envoyée. Le topic sera : resource, id, query GraphQL.

IOS peut demander nom, prénom, date de naissance

Android peut demander nom, prénom

GraphQL homogénise les requetes pour que les 2 clients recoivent les données qu’ils ont demandé.

MQTT contacte GraphQL : cette resource a changé.

On voit l’API comme un serveur http. Connection en TCP/IP ou SSL sécurisée.

RabbitMQ pour scaler en horizontal possède un plugin pour MQTT.

 

Pourquoi un développement d’application mobile avec Node.JS embarqué dans la webview?

Parce qu’il y a MOSCA qui permet d’intégrer le MQTT broker facilement. On peut bootstraper une infra rapidement.

MQTTJS est la version client spéciale pour NodeJS

Une question? Posez-la ici

 

Génération dynamiques développement d'application mobile avec React, Redux et Cordova par Florian

  

par Florian Rival chez BAM (react native) et David Blavier chez One2team : solution en ligne qui permet de gérer des projets AGILE. But pouvoir adapter au client leurs outils en faisant du sur-mesure. Exemple, en R&D, développement d’application mobile qui contient une liste de sprints qui contient une liste de tickets

 

Cordova : un web bowser embarqué, webview, embarqué dans une application mobile

 

On utilise React et Redux pour paramétrer l’infrastructure. On se base sur la modularité des composants de React, et avec Redux on fait abstraction de la logique. Redux c’est un store qui contient l’état de l’application (données utilisateurs, liste, contexte…) Suivant l’état de l’application , la connection au composant callback appelle une action Redux avec un type/payload qui fera un compte rendu du message. Les Reducers : quand une action est emise par un composant React, les reducers la recoivent et se mettent à jour, car ils écoutent toutes les actions et réagissent en fonction de ces actions.

Composant modulaire en react. Extends Coponent, avec une méthode dispatchActions.

On lui passe des actions grace à propTypes.action

Recevoir une partie du state et utiliser une partie du state

 

Comment composer ces éléments pour le développement d’une application mobile ?

 

Fichier de configuation avec views, actions, reducers…. On déclare ensuite les composants et vont devoir être codés en classes javascript.

Instancier les vues avec un composant racine, un props et une view. Les composants peuvent eux même en créer d’autres. Pour instancier les actions et reducers, c’est encore plus simple, grace aux fonctions, il n’y a pas d’opérations spéciales à faire avec React.

Il existe des outils pratiques : ils permettent d’inspecter le payload avec l’action : les devtools redux. Devtools REact react-devtools dans le debugger chrome. Hot loader avec react-transform-hmr. Edition ultra efficace du style d’un composant.

Une question? Posez-la ici

 

Comment bien choisir son associé business, par Jean Loup Karst

 

Retour d’experience sur aventure entreprenariale : quand on a les 1ers employés recrutés, quand on est développeur

Breez.io, chacun a apporté 8000Euros racheté par hire après 500000 euros de CA, boite qui contacte les clients finaux.

 

Erreurs à éviter pour le développeur qui s’associe à un profil business

 

Quel sont les projets personnels/professionnels de mon associé ?

 

Au moment où on engage la conversation, comprendre les objectifs de la personne, car souvent on part très vite sur l’excitation du marché…

Quelles sont ses motivations

Quel est son mode de vie idéal ? Gagner bien sa vie ? Ou la grosse aventure ? Lever des millions d’euros… ? Il est essentiel de bien comprendre ça au départ car cela peut coincer quelques années après.

Ensuite :

 

Une question? Posez-la ici

 

L’ego , l’intelligence émotionnelle

 

Ce qui nous empêche d’accéder à une forme de vérité.

Une personne qui lorsqu’on lui donne du feedback, elle a du mal à accepter les critiques pour aller de l’avant. Il faut pouvoir parler ouvertement de ses echecs, sinon ca limite le potentiel de croissance. Il faut tester la personne en lui donnant du feedback, car on ne peut pas changer une personne.

 

L’orgueil, que la personne se survalorise

 

Que la personne n’a pas envie de mettre « les mains dans le camboui » quand on a besoin. Se connaitre dans quoi on est bon, ce dans quoi on est moins bon. Exemple : je deteste le reporting, ca me saoule, je n’ai pas envie de le faire. Plus une boite grossit, plus elle se spécialise. Il faut travailler avec des gens qui se connaissent bien et peuvent se remettre en question

 

Le trait de caractère narcissique

 

Si ce qui excite ce genre de personnage, c’est de faire la une des médias, de techcrunch, des interview, etc. C’est un danger car la personne va être moins focalisée sur les problemes du business et sera davantage concentrée sur ses attentes de star.

 

Si vous avez un doute, ne pas s’associer, écouter son intuition.

 

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