Développement d'applications javascript Paris JS Conference chez Toucan Toco
Merci aux sponsors, Zelros , Scrapoxy, Marmelade ,Toucan Toco, pour ce transcript pige et de nous accueillir au 4 rue Paul Cézane, 75008 PARIS.
C'était une conférence 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
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
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: