Développement d'applications javascript Paris JS Conference chez Toucan Toco

 

Merci Stéphanie, Sébastien, Pierrick, 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: Declarative programming, Scrapoxy, le proxy dédié au Webscraping, en Javascript, I18N A2C R3T, Visual TDD and awesome docs

Toucan Toco ce sont de petites applications smartphone pour représenter facilement les données de manière visuelle. Concues pour tous les terminaux mobiles. Produits de data visualisation. 5 valeurs: écrire la doc, la transmission du savoir est importante, each one teach one, tous les vendredis quelqu'un parle d'un sujet, don't brake the first window, si dans une rue il y a une fenetre cassée, il faut toutes les réparer sinon elles seront toutes cassées. Train together, pédagogie, beaucoup de formations, take care: on prend soin des autres et de sois-même. Etre attentif et bienveillants.

Super, on est très bien accueilli, il y a des bières, des pizzas, des planches d’autocollants sur les chaises car les développeurs adorent les coller sur le capot de leurs ordinateurs, et un accès wifi qui fonctionne et des préservatifs Toucan Toco.

 

Le programme:


• Scrapoxy, le proxy dédié au Webscraping, en Javascript par Fabien Vauchelles @fabienv

fabien.vauchelles CTO chez Zelros . Connecte des données sur Link.

 #opensource #webscraping #proxy #noblacklisting

Http://scrapoxy.io

http://bit.ly/scrapoxyjs

Scrapoxy cache ton webscraper derrière les nuages. Il démarre un ensemble de proxies pour relayer tes requêtes.

 qu'est-ce que le websarping? Transformer une page web visible pour un humain en une données utilisable par une machine (Json...) Pour enrichir nos modèles de machine learning, on croise des données externets, etc.

On cree un peit script simple pour récupérer une ou 2 informations. Problème, quand on veut, 1 million d'informations en moins de 10 minutes et qu'on veut le faire très rapidement.

Les sites ont des protections contre ça: ils nous blacklistent. On va avoir besoin de proxys poru éviter de se faire blacklister l'IP.

 

Une question? Posez-la ici

 

Les applications javascript bots de scrapping, comment les sites s'en protègent-ils?

Dans les CGUS, il existe souvent une clause: tu n'utiliseras pas de scrapper...

-Changement de status http: 200, tout va bien, on recoit. Quand on se fait blacklister, on recoit, 503... C'est la version cool, le site web nous dit qu'on est détecté.

-Un captcha apparait: 15 photos de sandwiches, choisissez le hamburger (mechanical turk permet de casser ça.)

-temps de réponse augmenté exponentiellement.

Il faut donc que notre scarper détecte le blacklisting

SInon l'admin web reçoit: "Attention, qqn fait 1 million de requetes sur ton site alors qu'habituellement le site recoit 10 visites par jour."

Que faire en priorité pour ne pas se faire blacklister?

Change aléatoirement son user agent

Utiliser un proxy

En cas de blacklist, c'est le proxy qui se fait

On va utiliser un scrapoxy qui va utiliser un pool de proxys et selectionner les proxys qui fonctionnent et rejeter les proxys qui ne fonctionnent pas.

 

Une question? Posez-la ici

 

Avec quelle architecture?

Notre scraper passe par le manager qui gère les instances sur AWS EC2. Le commander gère le nombre d'instances pour le scaling. Et c'est en NodeJS, donc une application javascript.

Demo

Exemple sur un site de profils avec des noms de gens. Quand on clique sur un profil, on a le nom de la personne, son experience... Le but c'est de récupérer tout ça.

Si je fais plusieurs requetes trop rapidement, je récupère 2, 3, 4 profils, et le site nous bloque.

Le scraper utilise cherio, jsquery light

node index.js

On va mettre derrière tout un jeu de proxys rotatifs

npm install -g scrapoxy

l'aide est directement en tapant scrapoxy

init my-config-9.json

On peut modifier le nombre d'instances par defaut

ca va utiliser EC2, OVH, Vscale, Digital Ocean, on peut avoir des IPS un peu partout dans le monde, même en Russie, c'est cool ça!

On lance:

scrapoxu start my-config-9.json

Il trouve une instance chez Digital Ocean.

Update scaling, on voit des instances lancées, et on récupère une adresse ip. Il y a un bot pour la tester:

scrapoxy test http://localhost:8080

Il y a une API, consulter docs.scapoxy.io

Demonstration: sur Linkedin, on veut que le scraper récupère sur tous les profils, le prénom, le nom, le métier, la ville, le plus rapidement possible, sans se faire blacklister.

Idéal pour upscale de gros systèmes de scrapping distribués

Sur EC2, on démarre des instances modèles.

VPS amazon ; Tests sur TOR, c'est un peu compliqué, on peut commander les noeuds thor mais ca

Il n'y a que 20000 adresses IP disponibles sur TOR, dont les sites les connaissent et le detectent.

SI une instance se fait blacklister, une autre instance la remplace

Attention quand on a fini, il faut l'éteindre parce que si on ne l'éteind pas, on douille.

Problèmes ethiques (moral) et légalité. Il y a un cadre juridique qui encadre la récupération de données.

Si les sites veulent protéger leurs données.

Utilité des scrapers: récupérer les prix sur Amazon pour faire des comparaisons de prix

Amazon: par deaut: 20 machines. Toutes les rallumages de 10 instances de machines, on peut avoir 300 IPs (solutions luminatis avec 50 millions d'IPS)

 

Une question? Posez-la ici

 

Développement web javascript appliqué à la taduction

 I18N A2C R3T par Jonathan Petitcolas @Sethpolma

www.jonathan-ptitcolas.com

Internationalisation d'une application web javascript avec ReactJQ

chez www.marmelade.com

chatbots en NodeJS, di blockchain...

Qu'est-ce que l'internationalisation?

Lorsqu'on veut exporter un programme à l'étranger, on le traduit dans d'autres langues, il faut par exemple traduire des phases, remplacer, des vigules par des points...

Exemple: ARTE+7 un site qui permet de visualiser les videos

Sur Arte, il y a 5 langues différentes: français anglais espagnol et le polonais

Symphony 3 en backend, avec Twig,  et sur le client pour react

La librairie javascript sympa: Polyglot.js on l'installe avec node-polyglot.js

On crée l'objet const polyglot = new Polygot({locale,phrases}) et voilà. Voir la doc officielle.

 Avec ReactJS on commence à faire de la traduction, ensuite on translate avec des props, car on instancie notre polyglot

 Un provider est un composant react qui va definir et setter les données dans le context. On définit les types du contexte, une fonction, une string, ensuite on remplit les données avec la méthode getChildContext, et on retourne le contexte rempli.

On utiliseun HOC. Hire order component: fonction qui prend une fonction et qui retourne un component: on agit sur les props et sur les children, ca nous permet de faire ce qu'on veut ensuite, des logs, etc. Ce composant on l'abonne au contexte.

L'appli d'exemple est dispo sur Github jpetitnicolas

 

Une question? Posez-la ici

 

Applications javascript en declarative programming par Matthias Le brun

@bloodyowl fait des petits widgets, blog "putain de code"

Qu'est-ce que le déclarative programming? C'est ll'opposé de l'impérative, avec des boucles, for, while, ....

Beaucoup d'étapes, beaucoup de risques de bugs

En déclaratif, c'est beaucoup plus simple: je veux un nouveau tablea filtré avec les valeurs...

Niveau front et niveau UI, bibliothèque d'il y a 2 ans, ReactJS qui permet de créer des abstractions (React Router4).

Dans AngularJS, il n'y a pas de déclaratif :(

 

Une question? Posez-la ici

 

Visual TDD and awesome docs expliqué par David @davinov

 Fait de la Dataviz, l'idée c'est de faire du composant graphqiue pour représenter des données.

Ce sont des barres, des camemberts, des graphiques, des cartes de France avec des départements en couleur, etc.

Meta-Programming

Comment faire pour que notre code ne soit pas exploité d'une mauvaise manière?

Il faut faire des tests, d'où le TDD

Dans un navigateur, avec Mocha, HTML reporter. Chaque test est associé à un élément du DOM. On peut faire du grep avec Mocha.

Documentation générée par JSdoc. On insère les tests dans la doc, et elle devien intéractive.

Voir toucantoco/tech-blog

 

 

 

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