Contenido
- 01. Es hora de un hangout
- 02. $ ('luz'). FadeIn ();
- 03. Tus manos están hechas para el navegador
- 04. Juegos 3D controlados con tu gamepad
- 05. Ejecutando Flash en tu iPad
- 06. Escribir aplicaciones para tu teléfono inteligente
- 07. Ejecutando Ruby y Python en su navegador
- 08. Escribir programas de escritorio independientes del sistema operativo
- 09. Ejecutando un servidor web
- 10. Webscraping y captura de pantalla
- ¡Esperar! Hay más...
JavaScript ha recorrido un largo camino desde su nacimiento en 1995. Seguro, un camino difícil, lleno de malentendidos, mal uso e ignorancia. Pero los tiempos han cambiado, desde los últimos cinco años, JavaScript ha ido ganando cada vez más atención. Con más atención, más desarrolladores están usando JavaScript, usándolo para muchos propósitos diferentes y disfrutando de su belleza. Historia clásica del "patito feo", si me preguntas.
En el siguiente artículo, descubriremos 10 casos de uso de JavaScript que son diferentes de los habituales "en el navegador" a los que está acostumbrado.
01. Es hora de un hangout
¿Recuerda la visión de los 80 de la comunicación por video similar a Facetime?
Solo pasaron 20 años antes de que esto se generalizara debido a la Internet de banda ancha disponible en casi todas partes y al uso intensivo de un pequeño software llamado Skype.
Con las capacidades de Flash de Adobe y el intento de Google de construir una red social, ya contamos con las capacidades de comunicación por video en nuestro navegador. ¿No sería genial tener esas habilidades sin usar un complemento de terceros como Flash?
Afortunadamente, los proveedores de navegadores pensaron lo mismo e implementaron la API "getUserMedia" en su software. Este fue un primer paso para acceder a dispositivos como cámaras o micrófonos directamente desde su navegador.
Al usar Node.js como servidor en la parte posterior de dicha aplicación, es increíblemente fácil transportar la señal de video por aire a uno o más clientes. Desafortunadamente, en el momento de escribir esto, solo Chrome y Opera son compatibles con la API, pero otros se pondrán al día rápidamente.
El enfoque más limpio para una comunicación bidireccional es algo exclusivo de Chrome en este momento, llamado WebRTC. Gracias a WebRTC, los clientes pueden abrir canales de comunicación de igual a igual, conectando directamente cliente con cliente.
En aras de la diversión, echa un vistazo a la implementación de Photo Booth de Sindre Sorhus hecha en 121 bytes.
var video = document.getElementsByTagName ("video") [0],
navigator.getUserMedia ("video", successCallback, errorCallback);
function successCallback (stream) {
video.src = flujo;
}
function errorCallback (error) {
console.log (error);
}
02. $ ('luz'). FadeIn ();
La plataforma del microcontrolador Arduino es un ejemplo de grado A para un caso de uso de JavaScript "listo para usar". Para aquellos de ustedes que no están familiarizados con la plataforma Arduino, aquí hay una cita súper famosa de su sitio web:
"Arduino es una plataforma de creación de prototipos de electrónica de código abierto basada en hardware y software flexible y fácil de usar. Está destinada a artistas, diseñadores, aficionados y cualquier persona interesada en crear objetos o entornos interactivos".
El propio Arduino solo admite código escrito en C, lo que todavía no es gran cosa. Con unas pocas líneas de C (además de que otros han hecho este trabajo por ti), el Arduino puede recibir comandos a través de su puerto USB a través del protocolo de puerto serie.
Pero, ¿cómo se puede acceder al puerto serie a través de JavaScript? Claramente no desde el navegador.
¡Node.js al rescate!
Debido a los esfuerzos del defensor de la comunidad Chris Williams, tenemos una biblioteca de puerto serie Node, donde podemos enviar datos a través del antiguo protocolo SP. Este fue el avance inicial, basado en la biblioteca que a otras personas se les ocurrió un enfoque más abstracto para las capacidades de Arduino. Por ejemplo, las bibliotecas node-arduino y duino.
La biblioteca más caliente y más genial del bloque para la programación de Arduino impulsada por JS a estas alturas es jonny-five. Consulte el blog de Bocoup para ver algunas cosas interesantes que han hecho con la plataforma Arduino y muchos complementos. Además, el video JSConf de Nicolai Onken y Jörn Zaefferer podría darle una idea de lo que es posible hoy con poco código.
03. Tus manos están hechas para el navegador
La visión de futuro de Minority Report (aquella en la que controlan las computadoras con las manos, no con los autos feos) se acerca cada día más. Un gran paso en esta dirección fue el intento de juego sin controlador de Microsoft, Kinect. Podrás pensar en una jugabilidad increíble, pero ¿qué tiene esto que ver con JavaScript?
Con el lanzamiento del SDK de Kinect de Microsoft, un grupo de personas cruzó el puente del uso del navegador para Kinect. En primer lugar, los chicos de ChildNodes que han creado una biblioteca kinect.js completa y funcional, que permite el uso de Kinect de Microsoft en su navegador.
Recomiendo encarecidamente ver sus demostraciones y videos, es una maravilla. Sin embargo, un gran inconveniente de la biblioteca kinect.js es que debe haber un programa de servidor WebSocket ejecutándose en la parte posterior del cliente (que es en realidad el pegamento Kinect -> C # -> JS).
Algunos estudiantes de la fama del MIT están trabajando en una solución para derribar este muro, llamado DepthJS,
un complemento del navegador que permite el uso de Kinect para Chrome y Safari, incluso para sitios que no están optimizados para un uso basado en Kinect de ninguna forma. DepthJS se encuentra actualmente en una etapa de desarrollo inicial, pero definitivamente vale la pena hacer un seguimiento.
04. Juegos 3D controlados con tu gamepad
¿Alguna vez has intentado jugar a un juego de navegador que no sea Flash en la actualidad? Las capacidades gráficas son increíbles, especialmente cuando ves clones de juegos como Quake.
Pero cuando tocas estas cosas, siempre estás atado a tu teclado y al (en su mayoría) torpe del mouse. Esta es una gran desventaja, en particular para los juegos de acción, realmente los retiene del navegador.
¿No sería genial si pudieras conectar el mando de tu Xbox a tu PC y empezar a jugar a tu juego de navegador favorito? Esta ya no es una visión de futuro, ¡saluda a la API de Gamepad!
Si tiene un gamepad en su escritorio, conéctelo ahora mismo y disfrute de algunos juegos que ya utilizan la API de Gamepad. Programar los controles de entrada también es pan comido, consulte este fragmento de código o, mejor aún, ejecútelo usted mismo:
div id = "gamepads"> / div>
guión>
function gamepadConnected (evento) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad conectado (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, falso);
/ script>
Si desea obtener más información sobre las capacidades 3D de los navegadores, consulte el motor de simulador 3D de código abierto de Three.js y Jens Arps, construido por Ascent. Mark Hammil, cuidado, ¡es posible que te necesitemos para otra secuela de Wing Commander!
05. Ejecutando Flash en tu iPad
Como amante de los estándares abiertos y fanático de Apple, debo admitir que realmente me gustaría agradecer a Apple por no poner Flash en el iPad y el iPod, esto realmente inició un movimiento de adopción de tecnologías abiertas como HTML5, CSS3 y JavaScript.
Como empleado de una agencia, debo decir que esta es una situación realmente mala para nuestros clientes.
La mayoría de ellos tienen que pagar dos veces por un simple anuncio o campaña que están lanzando para que el contenido interactivo se ejecute en el antiguo IE7 o IE8 a través de Flash y en navegadores modernos, así como iDevices a través de HTML5.
Polyfilling las características de los navegadores antiguos tiene sus fronteras, en su mayoría con nombre de rendimiento. Entonces, ¿no existe la capacidad de ejecutar Flash en esos iDevices sin Flash?
Por supuesto que hay uno y, por supuesto, está integrado en JavaScript.
Un pedazo de historia: en 2010 Tobias Schneider lanzó una pequeña biblioteca llamada Gordon
lo que permitió que los archivos SWF se ejecutaran directamente en el navegador. Esto funcionó bastante bien para archivos Flash pequeños como anuncios que solo usaban funcionalidades hasta la versión 2 de Flash, pero la funcionalidad de nivel superior no se incluyó en absoluto.
Cuando Tobias se unió a la empresa UXEBU de ueberJS, se les ocurrió una nueva idea.
Y así nació Bikeshed. Bikeshed en sí es una especie de marco de animación de JavaScript, pero también es un JavaScript para Flash para todo lo que quieres que sea compilador (está basado en adaptadores, por lo que puedes escribir adaptadores para lo que quieras, aunque el comportamiento estándar es compilar Flash a JavaScript) . Es compatible con Flash 10 y ActionScript 3. Eche un vistazo a su página web para obtener más información sobre sus numerosas funciones además del compilador.
06. Escribir aplicaciones para tu teléfono inteligente
Escribir aplicaciones nativas para entornos de teléfonos móviles es un camino difícil. Comienza con la decisión de qué plataforma desea respaldar. Si su aplicación se ejecuta en un iPhone y iPad, un dispositivo móvil con Android, Windows Mobile, dispositivos Blackberry, sistema basado en webOS ... y así sucesivamente.
Cada una de estas plataformas tiene sus propias API y, en su mayoría, utiliza diferentes lenguajes de programación.
Si ha sobrevivido a las guerras de navegadores, déjeme decirle que esta es una lucha mucho más difícil de conseguir. Es casi imposible para un desarrollador crear una aplicación para todas estas plataformas en tiempo y presupuesto.
¿Entonces lo que hay que hacer? ¿Contratar más desarrolladores? ¿Cobrar más por las aplicaciones? ¿O encuentra un mejor enfoque para asegurarse de que su código base se ejecute en todos los dispositivos? Como la mayoría de ustedes, preferiría el último enfoque.
Pero, ¿en qué deberían construirse estas aplicaciones? ¿Qué tienen todas estas plataformas en común? Es posible que conozca la respuesta, es un navegador web y, por lo tanto, un motor de JavaScript.
Esa es la idea detrás de Apache Cordova, más conocido por su antiguo nombre PhoneGap.
Cordova es un marco de JavaScript que abstrae las API de cada entorno móvil y expone una API de JavaScript ordenada para controlarlos a todos. Esto le permite mantener una única base de código, que luego crea e implementa en diferentes dispositivos móviles.
Consulte los recursos aquí para descubrir cómo usar Cordova para crear aplicaciones móviles increíbles que cree una vez y que se ejecutarán en todas partes.
07. Ejecutando Ruby y Python en su navegador
Mozilla, la compañía detrás del famoso navegador Firefox, emplea a muchos geeks, eso es seguro. Uno de ellos es Alon Zakai, un ingeniero del equipo de investigación de Mozilla, que creó una extraña herramienta llamada Emscripten.
Emscripten le permite llevar el código de bits LLVM, que se puede generar a partir de bibliotecas basadas en C / C ++, a JavaScript. Lo hace compilando las bibliotecas en código de bits y luego, tomando ese código de bits y transformándolo en JavaScript. Genial, pero ¿qué puedo hacer realmente con esto, te preguntarás?
Tengo una contrapregunta para ti: ¿alguna vez has escuchado la frase "Usar CoffeeScript y Prototype es lo más cercano que puedes estar de ejecutar Ruby en el navegador"? ¿No? No se preocupe, porque esto ya no es cierto.
Con Emscripten, simplemente puede tomar las fuentes de Ruby, transformarlas en JavaScript y listo, ¡tener el Ruby real ejecutándose en su navegador! Pero esto no se aplica solo a Ruby, Python, por ejemplo, también fue redactado.
O echa un vistazo al decodificador Broadway del navegador h.264. ¡Eso es en realidad una biblioteca de C ++ emscriptada!
¡Vaya a repl.it para ver algunos lenguajes de programación (incluidos Ruby y Python) ejecutándose en su navegador!
08. Escribir programas de escritorio independientes del sistema operativo
Hablamos antes de apuntar a múltiples plataformas móviles con la ayuda de Apache Cordova. Como era de esperar, JavaScript no solo se puede usar para apuntar a plataformas móviles, nuestro viejo amigo, la computadora de escritorio, también se puede abordar.
Las primeras soluciones vinieron de los chicos de Appcelerator con Titanium Desktop Suite y de Adobe, la ampliamente utilizada plataforma Air.
Pero como amantes del código abierto que todos somos, lo que estamos buscando es una tecnología más abierta y basada en Node.js. ¡Conoce app.js! app.js es un generador de programas de escritorio basado en tecnología web abierta y Node.js, que nos permite escribir programas de escritorio reales con acceso al sistema de archivos, controles de ventana y más. Podemos confiar en las API multiplataforma estables de Node y construir nuestra interfaz de usuario de software con HTML y CSS. Al igual que las cosas nuevas más populares de esta lista aquí.
app.js es un proyecto bastante joven y, por lo tanto, solo es compatible con Windows y Linux por ahora, pero según la lista de correo, el soporte para Mac está en camino.
09. Ejecutando un servidor web
Hoy en día, no sorprende a nadie cuando le dice que su sitio web está siendo atendido por un servidor web basado en JavaScript. Si piensas en dos o tres años atrás y les dijiste a los desarrolladores web exactamente lo mismo, probablemente se habrían reído de ti o incluso algo peor.
Pero con el increíble éxito de Node.js, afortunadamente, esto está muy lejos de ahora. No solo ya no sorprende a la gente, debido a su naturaleza asincrónica, Node.js es un niño prodigio en el rendimiento, especialmente cuando se trata de enfrentar el problema de muchas conexiones paralelas. No solo su rendimiento es una maravilla, la API realmente simple atrae a muchos desarrolladores también. Veamos el ejemplo de "Hello World" del mundo Node, no es solo un ejemplo impreso de "Hello World" en la pantalla, ¡es un servidor web http!
var http = require ('http');
http.createServer (función (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end ('Hola mundo n');
}). listen (1337, '127.0.0.1');
Si no está impresionado por esta simplicidad, bueno, tampoco puedo ayudarlo.
Una de las mejores partes de la popularidad (o exageración) de Node es que las grandes empresas como Microsoft lo están apoyando, es decir, en sus servicios en la nube de Azure.
10. Webscraping y captura de pantalla
Entonces, por último, pero no menos importante, echemos un vistazo a un proyecto que personalmente me encanta por permitirme ejecutar mis pruebas QUnit sin cabeza en la línea de comandos. PhantomJS es un navegador basado en WebKit sin cabeza con una API ordenada basada en JavaScript (o CoffeScript).
Pero probar su JavaScript y DOM no es el único caso de uso de Phantom. ¡Lo que realmente me fascina son sus capacidades para rastrear sitios web y permitirle tomar capturas de pantalla!
Sí, estás leyendo bien, con Phantom puedes generar páginas web en diferentes formatos gráficos y, por supuesto, es tan fácil como robarle dulces a un bebé.
Echemos un vistazo a una secuencia de comandos que hace exactamente esto:
var page = new WebPage ();
page.open (’http://google.com’, function (status) {
page.render (’google.png’);
phantom.exit ();
});
Eso es todo lo que necesita para hacer una captura de pantalla y, debido a que está basado en JavaScript, también puede usar jQuery y manipular el contenido de la página antes de hacer una captura de pantalla.
¡Esperar! Hay más...
Entonces, espero que esté tan sorprendido como yo cuando descubrí cada una de estas herramientas. Este artículo acaba de arañar la superficie de lo que es posible con JavaScript hoy en día. Hay muchos más IDE escritos completamente en JS Cloud9 o cosas de alta seguridad hechas con él (su tarjeta de crédito se creó con JavaScript).
Espero que se sienta inspirado, tómese un tiempo y juegue con algunos de los proyectos mencionados aquí, o mejor aún, tome algunas de estas herramientas y cree cosas nuevas a su alrededor. La mayor parte de esto aquí es de código abierto y hay desarrolladores que lo buscan para ayudarlos a mejorar su trabajo, incluso si es solo mediante el uso de las herramientas, descubriendo errores e informándolos.
