Contente
- 01. É hora de um hangout
- 02. $ ('light'). FadeIn ();
- 03. Suas mãos são feitas para o navegador
- 04. Jogos 3D controlados com seu gamepad
- 05. Rodando o Flash no seu iPad
- 06. Escrevendo aplicativos para o seu smartphone
- 07. Executando Ruby e Python em seu navegador
- 08. Escrevendo programas de desktop independentes do SO
- 09. Executando um servidor web
- 10. Webscraping e captura de tela
- Esperar! Tem mais...
O JavaScript percorreu um longo caminho desde seu nascimento em 1995. Um caminho difícil, com certeza, cheio de mal-entendidos, uso indevido e ignorância. Mas os tempos mudaram, desde os últimos cinco anos o JavaScript vem ganhando cada vez mais atenção. Com mais atenção, mais desenvolvedores estão realmente usando JavaScript, para muitos propósitos diferentes e apreciando sua beleza. História clássica do "Patinho Feio", se você me perguntar.
No artigo a seguir, descobriremos 10 casos de uso para JavaScript que são diferentes dos comuns "no navegador", aos quais você está acostumado.
01. É hora de um hangout
Você se lembra da visão dos anos 80 de comunicação por vídeo semelhante ao Facetime?
Demorou apenas 20 anos para que isso se tornasse popular devido à internet banda larga disponível em quase todos os lugares e ao uso pesado de um pequeno software chamado Skype.
Com os recursos do Flash da Adobe e da tentativa do Google de construir uma rede social, já temos os recursos de comunicação por vídeo em nosso navegador. Não seria legal ter essas habilidades sem usar um plug-in de terceiros, como o Flash?
Felizmente, os fornecedores de navegadores pensaram o mesmo e implementaram a API "getUserMedia" em seu software. Este foi o primeiro passo para acessar dispositivos como câmeras ou microfones diretamente de seu navegador.
Usando o Node.js como um servidor na parte de trás desse aplicativo, é incrivelmente fácil transportar o sinal de vídeo pelo ar para um ou mais clientes. Infelizmente, no momento em que escrevo isso, apenas o Chrome e o Opera oferecem suporte para a API, mas outros vão se atualizar rapidamente.
A abordagem mais limpa para uma comunicação bidirecional é uma coisa única do Chrome no momento, chamada WebRTC. Por causa do WebRTC, os clientes podem abrir canais de comunicação ponto a ponto, conectando diretamente o cliente ao cliente.
Para se divertir, confira a implementação do Photo Booth do Sindre Sorhus feita em 121 bytes!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia (’video’, successCallback, errorCallback);
function successCallback (stream) {
video.src = stream;
}
function errorCallback (error) {
console.log (erro);
}
02. $ ('light'). FadeIn ();
A plataforma de microcontrolador Arduino é um exemplo de grau A para um caso de uso de JavaScript "pronto para usar". Para aqueles de vocês que não estão familiarizados com a plataforma Arduino, aqui está uma citação super famosa de seu site:
"Arduino é uma plataforma de prototipagem eletrônica de código aberto baseada em hardware e software flexível e fácil de usar. Destina-se a artistas, designers, amadores e qualquer pessoa interessada em criar objetos ou ambientes interativos."
O próprio Arduino suporta apenas código escrito em C, o que ainda não é grande coisa. Com algumas linhas de C (além das outras que já fizeram esse trabalho para você), o Arduino pode receber comandos por meio de sua porta USB via protocolo de porta serial.
Mas como você pode acessar a porta serial via JavaScript? Claramente, não do navegador.
Node.js para o resgate!
Devido aos esforços do defensor da comunidade Chris Williams, temos uma biblioteca de porta serial Node, onde podemos enviar dados sobre o antigo protocolo SP. Essa foi a descoberta inicial, com base na biblioteca que outras pessoas criaram com uma abordagem mais abstrata para os recursos do Arduino. Por exemplo, as bibliotecas node-arduino e duino.
A biblioteca mais quente e mais legal do bloco para a programação do Arduino orientada por JS até agora é jonny-five. Confira o blog do Bocoup para ver algumas coisas interessantes que eles fizeram com a plataforma Arduino e muitos plug-ins. Além disso, o vídeo JSConf de Nicolai Onken e Jörn Zaefferer pode dar uma visão geral do que é possível hoje com pouco código.
03. Suas mãos são feitas para o navegador
A visão futura do Minority Report (aquela em que eles controlam os computadores com as mãos, não os carros feios) se aproxima a cada dia. Um grande passo nessa direção foi a tentativa de jogo sem controle da Microsoft, o Kinect. Jogabilidade incrível você pode pensar, mas o que isso tem a ver com JavaScript ?!
Com o lançamento do Kinect SDK da Microsoft, várias pessoas cruzaram a ponte de uso do navegador para o Kinect. Em primeiro lugar, o pessoal da ChildNodes que construiu uma biblioteca kinect.js funcional completa, que permite o uso do Kinect da Microsoft em seu navegador.
Eu recomendo fortemente para verificar suas demos e vídeos, é uma explosão. Uma grande desvantagem da biblioteca kinect.js, no entanto, é que deve haver um programa de servidor WebSocket em execução na parte de trás do cliente (na verdade, o Kinect -> C # -> cola JS).
Alguns estudantes famosos do MIT estão trabalhando em uma solução para derrubar essa parede, chamada DepthJS,
um plug-in no navegador que permite o uso do Kinect para Chrome e Safari, mesmo para sites que não são otimizados para uso baseado em Kinect de qualquer forma. DepthJS está atualmente em um estágio inicial de desenvolvimento, mas definitivamente vale a pena acompanhá-lo.
04. Jogos 3D controlados com seu gamepad
Você já tentou jogar um jogo de navegador não Flash hoje em dia? Os recursos gráficos são incríveis, especialmente quando você vê clones de jogos como o Quake.
Mas, ao tocar essas coisas, você está sempre preso ao teclado e ao mouse (principalmente) desajeitado. Esta é uma grande desvantagem, em particular para jogos de ação, pois realmente os impede de acessar o navegador.
Não seria legal se você pudesse conectar o controlador do Xbox ao PC e começar a jogar seu jogo de navegador favorito? Esta não é mais uma visão de futuro, diga olá para a API do Gamepad!
Se você tiver um gamepad em sua mesa, conecte-o agora mesmo e curta alguns jogos, que já usam a API do Gamepad. Programar os controles de entrada também é moleza, verifique este trecho de código ou, melhor ainda, execute-o você mesmo:
div id = "gamepads"> / div>
script>
function gamepadConnected (event) {
var gamepads = document.getElementById ("gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "Gamepad conectado (id =" + gamepadId + ")";
}
window.addEventListener ("MozGamepadConnected", gamepadConnected, false);
/ script>
Se você gostaria de saber mais sobre os recursos 3D dos navegadores, confira Three.js e o motor de simulador 3D de código aberto Ascent de Jens Arps, construído sobre ele. Mark Hammil cuidado, podemos precisar de você para outra sequência do Wing Commander!
05. Rodando o Flash no seu iPad
Como um amante de padrões abertos e fanboy da Apple, tenho que admitir que realmente gostaria de agradecer à Apple por não colocar Flash no iPad e no iPod, isso realmente iniciou um movimento de abraçar tecnologias abertas como HTML5, CSS3 e JavaScript.
Como funcionário de uma agência, devo dizer que esta é uma situação muito ruim para nossos clientes.
A maioria deles tem que pagar duas vezes por um anúncio ou campanha simples que estão lançando para ter conteúdo interativo em execução no antigo IE7 ou IE8 via Flash e em navegadores modernos, bem como iDevices via HTML5.
Polyfilling os recursos dos navegadores antigos tem suas fronteiras, principalmente chamadas de desempenho. Portanto, não existe a capacidade de executar o Flash nesses iDevices sem Flash?
Claro que existe um, e é claro que é construído em JavaScript.
Um pedaço da história: em 2010, Tobias Schneider lançou uma pequena biblioteca chamada Gordon
que permitia que os arquivos SWF fossem executados diretamente no navegador. Isso funcionou muito bem para pequenos arquivos Flash, como anúncios que só usavam funcionalidades até a versão 2 do Flash, mas a funcionalidade de nível superior não foi incluída.
Quando Tobias se juntou à empresa ueberJS UXEBU, eles tiveram uma nova ideia.
E assim, nasceu Bikeshed. O próprio Bikeshed é um tipo de estrutura de animação JavaScript, mas também é um JavaScript para Flash para tudo o que você deseja que seja compilado (é baseado em adaptador, então você pode escrever adaptadores para qualquer coisa que desejar, embora o comportamento padrão seja compilar Flash para JavaScript) . É compatível com Flash 10 e ActionScript 3. Dê uma olhada em sua página da web para aprender mais sobre sua abundância de recursos além do compilador.
06. Escrevendo aplicativos para o seu smartphone
Escrever aplicativos nativos para ambientes de telefonia móvel é um caminho difícil. Tudo começa com a decisão de qual plataforma você deseja oferecer suporte. Se o seu aplicativo for executado em um iPhone e iPad, um dispositivo móvel com Android, Windows Mobile, dispositivos Blackberry, plataforma baseada em webOS e assim por diante.
Cada uma dessas plataformas tem suas próprias APIs e, principalmente, usa diferentes linguagens de programação.
Se você sobreviveu à guerra dos navegadores, deixe-me dizer que esta é uma luta muito mais difícil de entrar. É quase impossível para um desenvolvedor construir um aplicativo para todas essas plataformas em tempo e orçamento.
Então o que fazer? Contratar mais desenvolvedores? Cobrar mais pelos aplicativos? Ou encontrou uma abordagem melhor para garantir que sua base de código seja executada em todos os dispositivos? Como a maioria de vocês, eu preferiria a última abordagem.
Mas em que esses aplicativos devem ser construídos? O que todas essas plataformas têm em comum? Você deve saber a resposta, é um navegador da web e, portanto, um mecanismo JavaScript.
Essa é a ideia por trás do Apache Cordova, mais conhecido pelo nome anterior de PhoneGap.
Cordova é uma estrutura JavaScript que abstrai as APIs de cada ambiente móvel e expõe uma API JavaScript limpa para controlar todos eles. Isso permite que você mantenha uma única base de código, que você então constrói e implementa em diferentes dispositivos móveis.
Confira os recursos aqui para descobrir como usar o Cordova para criar aplicativos móveis incríveis que você cria uma vez e que executará em qualquer lugar.
07. Executando Ruby e Python em seu navegador
A Mozilla, a empresa por trás do famoso navegador Firefox, emprega muitos geeks, com certeza. Um deles é Alon Zakai, engenheiro da Equipe de Pesquisa da Mozilla, que construiu uma ferramenta bizarra chamada Emscripten.
Emscripten permite que você leve o código de bits LLVM - que pode ser gerado a partir de bibliotecas baseadas em C / C ++, para o JavaScript. Ele faz isso compilando as bibliotecas em código de bits e, em seguida, pegando esse código de bits e transformando-o em JavaScript. Legal, mas o que posso realmente fazer com isso, você pode se perguntar?
Eu tenho uma contra-pergunta para você: você já ouviu a frase "Usar CoffeeScript e Prototype é o mais próximo que você pode chegar de executar Ruby no navegador"? Não? Não se preocupe, porque isso não é mais verdade.
Com o Emscripten você pode simplesmente pegar os fontes Ruby, transformá-los em JavaScript e voilà, ter o Ruby real rodando em seu navegador! Mas isso não se aplica apenas a Ruby, Python, por exemplo, também foi executado em script.
Ou verifique o decodificador Broadway h.264 do navegador. Essa é, na verdade, uma biblioteca C ++ com scripts!
Vá para repl.it para ver algumas linguagens de programação (incluindo Ruby e Python) rodando em seu navegador!
08. Escrevendo programas de desktop independentes do SO
Já falamos sobre como almejar várias plataformas móveis com a ajuda do Apache Cordova antes. Não é novidade que o JavaScript não pode ser usado apenas para atingir plataformas móveis, nosso velho amigo, o computador desktop, também pode ser usado.
As primeiras soluções vieram dos caras da Appcelerator com o Titanium Desktop Suite e da Adobe a amplamente usada plataforma Air.
Mas, como amantes do código aberto que todos nós somos, uma tecnologia mais aberta e baseada em Node.js é o que estamos procurando. Conheça app.js! app.js é um criador de programas de desktop baseado em tecnologia da web e Node.js, que nos permite escrever programas de desktop reais com acesso ao sistema de arquivos, controles de janela e muito mais. Podemos contar com as APIs de plataforma cruzada estáveis do Node e construir nossa IU de softwares com HTML e CSS. Assim como as novidades mais quentes desta lista aqui.
app.js é um projeto muito jovem e, portanto, só suporta Windows e Linux agora, mas de acordo com a lista de discussão, o suporte para Mac está a caminho.
09. Executando um servidor web
Hoje em dia, você não choca ninguém ao dizer que seu site está sendo servido por um servidor baseado em JavaScript. Se você pensar dois ou três anos atrás, e disser exatamente a mesma coisa aos desenvolvedores da web, eles provavelmente teriam rido de você ou até pior.
Mas com o incrível sucesso do Node.js, felizmente, isso está longe de agora. Além de não surpreender mais as pessoas, devido à sua natureza assíncrona, o Node.js é um prodígio em desempenho, especialmente quando se trata de enfrentar o problema de muitas conexões paralelas. Não apenas seu desempenho é incrível, a API realmente simples atrai muitos desenvolvedores também. Vamos verificar o exemplo "Hello World" do mundo Node, não é apenas um exemplo de impressão "Hello World" na tela, é um servidor da web http!
var http = requer ('http');
http.createServer (função (req, res) {
res.writeHead (200, {’Content-Type’: ’text / plain’});
res.end ('Olá, mundo n');
}). ouça (1337, '127.0.0.1');
Se você não está surpreso com essa simplicidade, bem, eu também não posso ajudá-lo.
Uma das melhores partes da popularidade (ou exagero) do Node é que grandes empresas como a Microsoft estão realmente oferecendo suporte a ele, ou seja, em seus Serviços em Nuvem do Azure!
10. Webscraping e captura de tela
Então, por último, mas não menos importante, vamos dar uma olhada em um projeto que eu pessoalmente adoro por me permitir executar meus testes QUnit sem cabeça na linha de comando. PhantomJS é um navegador baseado em WebKit sem cabeça com uma API baseada em JavaScript (ou CoffeScript).
Mas testar seu JavaScript e DOM não é o único caso de uso para o Phantom. O que realmente me fascina são suas capacidades de raspar sites e permitir que você faça capturas de tela deles!
Sim, você está lendo certo, com o Phantom você pode gerar páginas da web em diferentes formatos gráficos e, claro, é tão fácil quanto roubar doces de um bebê.
Vamos dar uma olhada em um script que faz exatamente isso:
var page = new WebPage ();
page.open (’http://google.com’, função (status) {
page.render (’google.png’);
phantom.exit ();
});
Isso é tudo que você precisa para fazer uma captura de tela e, como é baseado em JavaScript, você também pode usar jQuery e manipular o conteúdo da página antes de fazer a captura de tela!
Esperar! Tem mais...
Então, espero que você fique tão surpreso quanto eu quando descobri cada uma dessas ferramentas. Este artigo apenas arranhou a superfície do que é possível com JavaScript hoje em dia. Há muito mais como IDEs inteiramente escritos em JS Cloud9 ou coisas de alta segurança feitas com ele (Seu cartão de crédito foi feito com JavaScript).
Espero que você se sinta inspirado, tire um tempo e brinque com alguns dos projetos mencionados aqui, ou melhor ainda, pegue algumas dessas ferramentas e construa coisas novas em torno delas. A maior parte disso aqui é de código aberto e existem desenvolvedores por aí, procurando por você para ajudá-los a melhorar seu trabalho, mesmo que seja apenas usando as ferramentas, descobrindo bugs e relatando-os.
