Contenu
- 01. Il est temps pour un hangout
- 02. $ ('light'). FadeIn ();
- 03. Vos mains sont faites pour le navigateur
- 04. Jeux 3D contrôlés avec votre manette de jeu
- 05. Exécution de Flash sur votre iPad
- 06. Ecrire des applications pour votre smartphone
- 07. Exécution de Ruby et Python dans votre navigateur
- 08. Ecriture de programmes de bureau indépendants du système d'exploitation
- 09. Exécution d'un serveur Web
- 10. Webscraping et capture d'écran
- Attendez! Il y a plus...
JavaScript a parcouru un long chemin depuis sa naissance en 1995. Un chemin difficile à coup sûr, plein d'incompréhensions, d'abus et d'ignorance. Mais les temps ont changé, depuis les cinq dernières années, JavaScript a de plus en plus d'attention. Avec plus d'attention, plus de développeurs utilisent réellement JavaScript, l'utilisent à de nombreuses fins différentes et apprécient sa beauté. Histoire classique "Ugly Duckling", si vous me demandez.
Dans l'article suivant, nous découvrirons 10 cas d'utilisation de JavaScript différents de ceux courants "dans le navigateur" auxquels vous êtes habitué.
01. Il est temps pour un hangout
Vous souvenez-vous de la vision des années 80 de la communication vidéo de type Facetime?
Cela n'a pris que 20 ans avant que cela ne se généralise en raison de la disponibilité d'Internet à large bande presque partout et de l'utilisation intensive d'un petit logiciel appelé Skype.
Avec les capacités d'Adobe Flash et la tentative de Google de créer un réseau social, nous avons déjà les capacités de communication vidéo dans notre navigateur. Ne serait-il pas cool d’avoir ces capacités sans utiliser un plug-in tiers tel que Flash?
Heureusement, les vendeurs de navigateurs ont pensé la même chose et ont implémenté l'API "getUserMedia" dans leur logiciel. C'était une première étape pour accéder à des appareils tels que des caméras ou des microphones directement depuis votre navigateur.
En utilisant Node.js comme serveur à l'arrière d'une telle application, il est incroyablement facile de transporter le signal vidéo en direct vers un ou plusieurs clients. Malheureusement, au moment de la rédaction de cet article, seuls Chrome et Opera prennent en charge l'API, mais d'autres le rattraperont rapidement.
L'approche plus propre pour une communication bidirectionnelle est une seule chose Chrome pour le moment, appelée WebRTC. En raison de WebRTC, les clients sont autorisés à ouvrir des canaux de communication d'égal à égal, connectant directement le client au client.
Pour vous amuser, découvrez l’implémentation de Photo Booth de Sindre Sorhus en 121 octets!
var video = document.getElementsByTagName ('video') [0],
navigator.getUserMedia ('video', successCallback, errorCallback);
function successCallback (flux) {
video.src = flux;
}
function errorCallback (erreur) {
console.log (erreur);
}
02. $ ('light'). FadeIn ();
La plate-forme de microcontrôleur Arduino est un exemple de grade A pour un cas d'utilisation JavaScript «prêt à l'emploi». Pour ceux d'entre vous qui ne sont pas familiers avec la plate-forme Arduino, voici une citation très célèbre de son site Web:
"Arduino est une plate-forme de prototypage électronique open-source basée sur du matériel et des logiciels flexibles et faciles à utiliser. Elle est destinée aux artistes, aux concepteurs, aux amateurs et à toute personne intéressée par la création d'objets ou d'environnements interactifs."
L'Arduino lui-même ne prend en charge que le code écrit en C, ce qui n'est toujours pas un problème. Avec quelques lignes de C (en plus que d'autres ont fait ce travail pour vous), l'Arduino peut recevoir des commandes via son port USB via le protocole du port série.
Mais comment accéder au port série via JavaScript? Clairement pas du navigateur.
Node.js à la rescousse!
Grâce aux efforts du défenseur de la communauté Chris Williams, nous avons une bibliothèque de ports série Node, où nous pouvons envoyer des données via l'ancien protocole SP. Il s’agissait de la première percée, basée sur la bibliothèque, d’autres personnes ont proposé une approche plus abstraite des capacités d’Arduino. Par exemple, les bibliothèques node-arduino et duino.
La bibliothèque la plus chaude et la plus cool du bloc pour la programmation Arduino pilotée par JS est maintenant jonny-five. Consultez le blog de Bocoup pour découvrir des trucs chauds qu'ils ont réalisés avec la plate-forme Arduino et de nombreux plug-ins. La vidéo JSConf de Nicolai Onken et Jörn Zaefferer pourrait également vous donner une idée de ce qui est possible aujourd'hui avec peu de code.
03. Vos mains sont faites pour le navigateur
La vision future de Minority Report (celle où ils contrôlent les ordinateurs avec leurs mains, pas les voitures laides) se rapproche chaque jour. La tentative de jeu avec le contrôleur de Microsoft, Kinect, a été un énorme pas en avant dans cette direction. Un gameplay incroyable, vous pourriez penser, mais qu'est-ce que cela a à voir avec JavaScript?!
Avec la sortie du SDK Kinect de Microsoft, un groupe de personnes a franchi le pont de l'utilisation du navigateur pour le Kinect. Tout d’abord les gars de ChildNodes qui ont construit une bibliothèque kinect.js fonctionnelle complète, qui permet l’utilisation de Kinect de Microsoft dans votre navigateur.
Je recommande vivement de regarder leurs démos et leurs vidéos, c'est génial. Cependant, un inconvénient majeur de la bibliothèque kinect.js est qu'il doit y avoir un programme serveur WebSocket s'exécutant à l'arrière du client (c'est en fait la colle Kinect -> C # -> JS).
Quelques étudiants renommés du MIT travaillent sur une solution pour abattre ce mur, appelée DepthJS,
un plugin intégré au navigateur qui permet l'utilisation de Kinect pour Chrome et Safari, même pour les sites qui ne sont pas optimisés pour une utilisation basée sur Kinect sous quelque forme que ce soit. DepthJS est actuellement à un stade de développement précoce, mais il vaut vraiment la peine de le suivre.
04. Jeux 3D contrôlés avec votre manette de jeu
Avez-vous déjà essayé de jouer à un jeu par navigateur non Flash de nos jours? Les capacités graphiques sont incroyables, surtout lorsque vous voyez des clones de jeu comme Quake.
Mais lorsque vous jouez à ce genre de choses, vous êtes toujours lié à votre clavier et à la souris (principalement) maladroite. C'est un inconvénient majeur, en particulier pour les jeux d'action, cela les retient vraiment du navigateur.
Ne serait-ce pas cool si vous pouviez simplement brancher votre manette Xbox sur votre PC et commencer à jouer à votre jeu par navigateur préféré? Ce n'est plus une vision future, dites bonjour à l'API Gamepad!
Si vous avez une manette de jeu autour de votre bureau, branchez-la maintenant et profitez de certains jeux qui utilisent déjà l'API Gamepad. La programmation des contrôles d'entrée est également un jeu d'enfant, consultez cet extrait de code ou mieux encore, exécutez-le vous-même:
div id = "gamepads"> / div>
script>
function gamepadConnected (événement) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Manette de jeu connectée (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Si vous souhaitez en savoir plus sur les capacités 3D des navigateurs, consultez Ascent, le moteur de simulation 3D open source de Three.js et Jens Arps. Mark Hammil attention, nous pourrions avoir besoin de vous pour une autre suite de Wing Commander!
05. Exécution de Flash sur votre iPad
En tant qu'amateur des standards ouverts et fanboy d'Apple, je dois admettre que j'aimerais vraiment remercier Apple de ne pas avoir installé Flash sur l'iPad et l'iPod, cela a vraiment commencé un mouvement d'adoption de technologies ouvertes comme HTML5, CSS3 et JavaScript.
En tant qu'employé d'agence, je dois dire que c'est une très mauvaise situation pour nos clients.
La plupart d’entre eux doivent payer deux fois pour une simple annonce ou campagne qu’ils lancent pour diffuser du contenu interactif dans l’ancien IE7 ou IE8 via Flash et sur les navigateurs modernes ainsi que sur les iDevices via HTML5.
Le polyfilling des anciennes fonctionnalités des navigateurs a ses limites, principalement nommées performances. Alors n’existe-t-il pas la possibilité d’exécuter Flash sur ces iDevices Flashless?
Bien sûr, il y en a un, et bien sûr il est construit en JavaScript.
Un morceau d'histoire: en 2010, Tobias Schneider a publié une petite bibliothèque appelée Gordon
qui permettait aux fichiers SWF de s'exécuter directement dans le navigateur. Cela fonctionnait plutôt bien pour les petits fichiers Flash comme les annonces qui n'utilisaient que des fonctionnalités jusqu'à la version Flash 2, mais les fonctionnalités de niveau supérieur n'étaient pas du tout incluses.
Lorsque Tobias a rejoint la société ueberJS UXEBU, ils ont eu une nouvelle idée.
Et ainsi, Bikeshed est né. Bikeshed lui-même est une sorte de cadre d'animation JavaScript, mais c'est aussi un JavaScript vers Flash pour tout ce que vous voulez qu'il soit compilateur (il est basé sur un adaptateur, vous pouvez donc écrire des adaptateurs pour tout ce que vous voulez, bien que le comportement standard soit de compiler Flash en JavaScript) . Il est compatible avec Flash 10 et ActionScript 3. Consultez sa page Web pour en savoir plus sur ses nombreuses fonctionnalités en plus du compilateur.
06. Ecrire des applications pour votre smartphone
L'écriture d'applications natives pour les environnements de téléphonie mobile est une route difficile. Cela commence par la décision de la plate-forme que vous souhaitez prendre en charge. Si votre application s'exécute sur un iPhone et un iPad, un appareil mobile sous Android, Windows Mobile, des appareils Blackberry, une plaquette basée sur webOS ... et ainsi de suite.
Chacune de ces plates-formes possède ses propres API et utilise principalement différents langages de programmation.
Si vous avez survécu à la guerre des navigateurs, laissez-moi vous dire que c'est un combat bien plus difficile à faire. Il est presque impossible pour un développeur de créer une application pour toutes ces plates-formes dans les délais et le budget.
Alors que faire? Embaucher plus de développeurs? Chargez plus pour les applications? Ou trouver une meilleure approche pour vous assurer que votre base de code fonctionne sur tous les appareils? Comme la plupart d'entre vous, je préférerais la dernière approche.
Mais dans quoi ces applications devraient-elles être construites? Qu'est-ce que toutes ces plates-formes ont en commun? Vous connaissez peut-être la réponse, c'est un navigateur Web et donc un moteur JavaScript.
C’est l’idée derrière Apache Cordova, mieux connue sous son ancien nom PhoneGap.
Cordova est un framework JavaScript qui résume les API de chaque environnement mobile et expose une API JavaScript soignée pour les contrôler tous. Cela vous permet de conserver une base de code unique, que vous créez et déployez ensuite sur différents appareils mobiles.
Consultez les ressources ici pour savoir comment utiliser Cordova pour créer des applications mobiles kick ass que vous créez une fois et qui s'exécuteront partout.
07. Exécution de Ruby et Python dans votre navigateur
Mozilla, la société derrière le célèbre navigateur Firefox, emploie beaucoup de geeks, c'est sûr. L’un d’eux est Alon Zakai, ingénieur de l’équipe de recherche Mozilla, qui a créé un outil bizarre appelé Emscripten.
Emscripten vous permet de prendre le bitcode LLVM - qui peut être généré à partir de bibliothèques basées sur C / C ++, vers JavaScript. Il le fait en compilant les bibliothèques en code binaire, puis en prenant ce code binaire et en le transformant en JavaScript. Bien, mais que puis-je faire avec ça, vous vous demandez peut-être?
J'ai une contre-question pour vous: avez-vous déjà entendu l'expression "Utiliser CoffeeScript et Prototype est le plus proche que vous puissiez obtenir de l'exécution de Ruby dans le navigateur"? Non? Ne vous inquiétez pas, car ce n’est plus le cas.
Avec Emscripten, vous pouvez simplement prendre les sources Ruby, les transformer en JavaScript et voilà, faire fonctionner le vrai Ruby dans votre navigateur! Mais cela ne s'applique pas uniquement à Ruby, Python par exemple a également été emscripté.
Ou consultez le décodeur Broadway dans le navigateur h.264. C'est en fait une bibliothèque C ++ emscriptened!
Allez sur repl.it pour voir quelques langages de programmation (y compris Ruby et Python) s'exécutant dans votre navigateur!
08. Ecriture de programmes de bureau indépendants du système d'exploitation
Nous avons déjà parlé de cibler plusieurs plates-formes mobiles avec l'aide d'Apache Cordova. Sans surprise, JavaScript ne peut pas seulement être utilisé pour cibler les plates-formes mobiles, notre vieil ami l'ordinateur de bureau peut également être abordé.
Les premières solutions sont venues des gars d'Appcelerator avec Titanium Desktop Suite et d'Adobe la plate-forme Air largement utilisée.
Mais en tant qu'amoureux de l'open source que nous sommes tous, une technologie plus ouverte et basée sur Node.js est ce que nous recherchons. Rencontrez app.js! app.js est un constructeur de programmes de bureau basé sur la technologie Web ouverte et Node.js, qui nous permet d'écrire de vrais programmes de bureau avec un accès au système de fichiers, des contrôles de fenêtre et plus encore. Nous pouvons nous appuyer sur les API multiplateformes stables de Node et construire notre interface utilisateur logicielle avec HTML et CSS. Tout comme les nouveautés les plus chaudes de cette liste ici.
app.js est un projet assez jeune et ne prend donc en charge que Windows et Linux pour le moment, mais selon la liste de diffusion, le support Mac est en cours.
09. Exécution d'un serveur Web
De nos jours, vous ne choquez personne lorsque vous lui dites que votre site Web est servi par un serveur Web basé sur JavaScript. Si vous repensez à il y a deux ou trois ans et que vous avez dit exactement la même chose aux développeurs Web, ils se seraient probablement moqués de vous ou pire encore.
Mais avec l'incroyable succès de Node.js, c'est heureusement loin d'être maintenant. Non seulement il ne surprend plus les gens, en raison de sa nature asynchrone, Node.js est un prodige en termes de performances, surtout lorsqu'il s'agit de faire face au problème de nombreuses connexions parallèles. Non seulement ses performances sont époustouflantes, mais l'API vraiment simple attire également de nombreux développeurs. Jetons un coup d'œil à l'exemple "Hello World" du monde Node, ce n'est pas seulement un exemple d'impression "Hello World" sur l'écran, c'est un serveur Web http!
var http = require ('http');
http.createServer (fonction (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end ("Hello World n");
}). écouter (1337, '127.0.0.1');
Si vous n’êtes pas époustouflé par cette simplicité, eh bien, je ne peux pas non plus vous aider.
L'une des meilleures parties de la popularité (ou du battage médiatique) de Node est que de grandes entreprises comme Microsoft le soutiennent réellement, c'est-à-dire dans leurs services cloud Azure!
10. Webscraping et capture d'écran
Alors, last but not least, jetons un coup d'œil à un projet que j'aime personnellement pour m'avoir permis d'exécuter mes tests QUnit sans tête sur la ligne de commande. PhantomJS est un navigateur WebKit sans tête avec une API basée sur JavaScript (ou CoffeScript).
Mais tester votre JavaScript et votre DOM n'est pas le seul cas d'utilisation de Phantom. Ce qui me fascine vraiment, ce sont ses capacités à gratter des sites Web et à vous permettre d'en prendre des captures d'écran!
Oui, vous lisez bien, avec Phantom, vous pouvez générer des pages Web dans différents formats graphiques et, bien sûr, c'est aussi simple que de voler des bonbons à un bébé.
Jetons un coup d'œil à un script qui fait exactement cela:
var page = new WebPage ();
page.open ("http://google.com", fonction (état) {
page.render ("google.png");
phantom.exit ();
});
C'est tout ce dont vous avez besoin pour faire une capture d'écran et comme elle est basée sur JavaScript, vous pouvez également utiliser jQuery et manipuler le contenu de la page avant de la capturer!
Attendez! Il y a plus...
J'espère donc que vous êtes aussi étonné que moi lorsque j'ai découvert chacun de ces outils. Cet article ne fait qu'effleurer la surface de ce qui est possible avec JavaScript de nos jours. Il y a tellement plus comme des IDE entièrement écrits dans JS Cloud9 ou des trucs de haute sécurité réalisés avec (votre carte de crédit a été créée avec JavaScript).
J'espère que vous vous sentirez inspiré, que vous prendrez du temps et que vous jouerez avec certains des projets mentionnés ici, ou encore mieux que vous utiliserez certains de ces outils et que vous construirez de nouvelles choses autour d'eux. La plupart de ces outils sont open source et il y a des développeurs qui cherchent à vous aider à améliorer leur travail, même si ce n'est qu'en utilisant les outils, en découvrant les bogues et en les signalant.
