Esse é um guia com a intenção de apresentar novos desenvolvedores ao JavaScript e ajudar desenvolvedores experientes a aprenderem mais sobre as melhores práticas.
Apesar do nome, esse guia não significa necessariamente "o único caminho" em JavaScript.
Nós apenas juntamos todos os artigos, dicas e artimanhas dos desenvolvedores top e colocamos aqui. Uma vez que esse material vem de pessoas excepcionais, nós podemos dizer que é "a forma certa", ou a melhor forma de fazer.
Criado pela Netscape em 1995 como uma extensão do HTML para o navegador Netscape Navigator 2.0, o JavaScript teve como função principal a manipulação de documentos HTML e a validação de formulários. Antes de ganhar seu nome tão famoso hoje em dia, o JavaScript foi chamado de Mocha. Quando saiu pela primeira vez em uma versão beta foi chamado oficialmente de LiveScript e finalmente quando foi liberado pela Sun Microsystems foi batizado pelo nome que hoje nós conhecemos. Devido à similaridade de nomes, algumas pessoas confundem o JavaScript com o Java. Embora ambos tenham a estrutura léxica da programação, elas não são a mesma linguagem. Diferente do C, C# e do Java, o JavaScript é uma linguagem interpretada. Isso significa que ele precisa de um "interpretador". No caso do JavaScript, o interpretador é o navegador.
O padrão do JavaScript é o ECMAScript. Em 2012 todos os navegadores modernos passaram a dar suporte ao ECMAScript 5.1. Navegadores antigos suportam pelo menos o ECMAScript 3. Uma sexta revisão desses padrões está em andamento.
Uma boa referência para versões, referências e novidades sobre o JavaScript pode ser encontrada no Mozilla Developer Network.
O Modelo de Objetos de Documentos é uma API para documentos HTML e XML. Ele fornece uma representação estrutural do documento, permitindo que você modifique seu conteúdo e sua apresentação visual usando linguagens de script como o JavaScript. Leia mais em Mozilla Developer Network - Referência do DOM.
Assim como todas as linguagens, JavaScript tem muitos guias de estilo de código. Talvez o mais usado e recomendado seja o Google Code Style Guide for JavaScript, mas recomendamos a leitura do Idiomatic.js.
Nos dias de hoje, a melhor ferramenta para analise de código em JavaScript é o JSHint. Nós recomendamos que sempre que possível você verifique o seu estilo de código e padrões com uma ferramenta de análise (Lint Tool).
JavaScript tem fortes capacidades de programação orientada a objetos, apesar de ocorrerem algumas discussões devido às diferenças da orientação a objetos no JavaScript em comparação com outras linguagens.
Fonte: Introdução ao JavaScript Orientado a Objeto
Funções anônimas são funções que são declaradas dinamicamente em tempo de execução. Elas são chamadas de funções anônimas devido ao fato de não receberem um nome, como as funções tradicionais.
Fonte: JavaScript anonymous functions
Funções em JavaScript são funções de primeira classe. Isso significa que no JavaScript as funções são um tipo especial de objeto que podem fazer todas as coisas que um objeto normal pode fazer.
Fonte: Functions are first class objects in JavaScript
Para muitos desenvolvedores front-end, o JavaScript foi o primeiro gostinho de uma linguagem de script e/ou de linguagem interpretada. Para esses desenvolvedores, os conceitos e implicações de variáveis de tipagem fraca podem ser naturais. Entretanto, o crescimento explosivo na demanda por aplicações web modernas resultou no crescimento do número de desenvolvedores back-end que tiveram que enfiar seus pés nas tecnologias de client-side. Muitos desses desenvolvedores estão chegando com conhecimentos de uma linguagem fortemente tipada, como c# ou Java, e não estão familiarizados com a liberdade e as armadilhas envolvidas em trabalhar com variáveis de tipagem fraca.
Fonte: Understanding Loose Typing in JavaScript
Escopos: Em JavaScript, funções são nosso delimitador de escopo de facto para declaração de variáveis, o que significa que blocos usuais de loops e estruturas condicionais (como if, for, while, switch e try) NÃO delimitam escopos, diferente de muitas outras linguagens. Portanto, esses blocos irão compartilhar do mesmo escopo que a função que os contém. Dessa forma, pode ser perigoso declarar variáveis dentro de blocos, já que irá parecer que a variável pertence apenas ao bloco.
Elevação (hoisting): Em tempo de execução, todas as variáveis e declarações de funções são movidas para o início de cada função (seu próprio escopo) - isso é conhecido como elevação (hoisting). Dito isso, é uma boa prática declarar todas as variáveis juntas na primeira linha, a fim de evitar falsas expectativas em relação a uma variável que foi declarada depois mas que acabou recebendo um valor antes - esse é um problema comum para programadores vindos de linguagens com escopos em blocos.
Fonte: JavaScript Scoping and Hoisting
Binding de funções será provavelmente a última de suas preocupações quando estiver começando com o JavaScript, mas quando você perceber que precisa de uma solução para o problema de como manter o contexto do 'this' dentro de outra função, então você pode se dar conta do que realmente precisa é a função Function.prototype.bind().
Fonte: Understanding JavaScript’s Function.prototype.bind
Closures (fechamentos) são funções que se referem a variáveis livres (independentes). Em outras palavras, a função definida no closure "lembra" do ambiente em que ela foi criada. Esse é um importante conceito a ser entendido, pois pode ser muito útil durante o desenvolvimento, como emulando métodos privados. Também pode ajudar a aprender como evitar erros comuns, como criando closures em loops.
Fonte: MDN - Closures
O modo rigoroso do ECMAScript 5 é um modo de optar por uma variação restrita do JavaScript. O modo rigoroso não é apenas um subconjunto, ele intencionalmente tem a semântica diferente do código normal. Navegadores que não suportam o modo rigoroso irão executar o código com o comportamento diferente de navegadores que suportam, então não confie no modo restrito sem contar com testes de funcionalidades em aspectos relevantes do modo restrito. Modo rigoroso de código e não rigoroso podem coexistir, então scripts podem optar pelo modo rigoroso incrementalmente.
Fonte: MDN - Strict mode
Uma função imediata é um padrão que produz um escopo léxico usando os escopos de função do JavaScript. Funções imediatas podem ser usadas para evitar a elevação de variáveis (hoisting) dentro de blocos, protegendo o ambiente global de ser poluído e simultanamente permite o acesso público a métodos enquanto retém a privacidade para as variáveis declaradas dentro da função.
Esse padrão tem sido referenciado como função anônima de auto execução, mas @cowboy (Ben Alman) introduziu o termo IIFE como um termo mais semântico para o padrão.
Apesar de o JavaScript possuir padrões de projeto exclusivos da linguagem, outros padrões clássicos também podem ser implementados.
Uma boa maneira de aprendê-los é ler o livro de código aberto Learning JavaScript Design Patterns do Addy Osmani. A maioria dos links abaixo são baseados nesse livro.
Creational Design Patterns
Structural Design Patterns
Behavioral Design Patterns
Várias bibliotecas e frameworks para fazer testes em JavaScript.
Mantida por TJ Holowaychuk
Mantida por jQuery
Mantida por Pivotal Labs
Mantida pelo time por trás do AngularJS. Em maior parte por Vojta Jina
Mantida por Sitepen
Uma ferramenta de cobertura de código JavaScript escrita em JavaScript, mantida por Krishnan Anantheswaran
Espiões de teste standalone, stubs (esboços) e mocks (simulação/imitação) para JavaScript. Sem dependências, funciona com qualquer framework de testes unitários. Criado por Sinon.JS community
Um helper de testes para fazer mocks de funções e de objetos XHR, mantido por Leo Balter
Test runner with asynchronous tests, maintained by Sindre Sorhus
Painless JavaScript Testing, maintained by Facebook
jQuery é uma biblioteca JavaScript rápida, pequena e cheia de recursos. Criada por John Resig.
Criado pelo Yahoo!, YUI é uma biblioteca JavaScript e CSS de código aberto para criação de aplicações web ricas e interativas. Novas atualizações estão paradas desde 29 de Agosto de 2014.
Zepto é uma biblioteca JavaScript minimalista para navegadores modernos com uma grande compatibilidade com a API do jQuery. Se você usa jQuery, você já sabe como usar o Zepto.
Dojo é um kit de ferramentas JavaScript grátis e de código aberto para criação de aplicações web de alto desempenho. Os patrocinadores do projeto incluem IBM e SitePen.
Underscore.js é uma biblioteca JavaScript que fornece uma enorme quantidade de helpers úteis sem estender qualquer objeto interno.
Framework JavaScript client-side muito popular, criado por @jashkenas.
Criado por @wycats, desenvolvedores do núcleo do jQuery e Ruby on Rails .
Simplifica interfaces de cliente dinâmicas criadas em JavaScript aplicando o modelo Model-View-View (MVVM).
Criado pelo Google, Angular.js é como um polyfill para o futuro do HTML.
Um framework.Mobile & desktop. Uma maneira de criar aplicativos com o Angular e usar seu código e habilidades para criar aplicativos para cada meta de implantação. Para web, web móvel, telefone móvel nativo e desktop nativo.
Cappuccino é um framework de código aberto que torna fácil a criação de aplicações parecidas com desktop que rodam em um navegador.
JavaScriptMVC é um framework de código aberto que contém as melhores ideias no desenvolvimento do jQuery.
Meteor é uma plataforma de código aberto para criação rápida de aplicações web de alta qualidade, seja você um desenvolvedor experiente ou que está apenas começando.
Spice é um framework MVC em JavaScript minúsculo (< 3k) e flexível. Spice foi construido para ser fácil de ser adicionado em qualquer aplicação existente e funciona bem com outras tecnologias como jQuery, pjax, turbolinks, node ou qualquer outra coisa que você esteja usando.
Riot é uma biblioteca client-side (MV*) incrivelmente rápida, potente e pequena para criar aplicações web de grande escala. Apesar do tamanho pequeno todos os blocos de construção estão lá: um motor de templates, rotas, biblioteca de eventos e um padrão MVP rígido para manter as coisas organizadas.
CanJS é um framework JavaScript que simplifica e agiliza o desenvolvimento de aplicações complexas. Fácil de aprender, pequeno e com uma estrutura modesta, mas com características modernas como tags customizadas e com binding de duas vias.
Criado pelo Facebook. React é uma biblioteca JavaScript para criação de interfaces de usuários do Facebook e do Instagram. Muitas pessoas enxergam o React como o V do MVC.
É uma biblioteca MVVM que provê two-way data binding, adiciona comportamento adicional ao HTML (através de diretivas) e componentes reativos. Ao utilizar add-ons nativos o desenvolvedor pode também contar com rotas, AJAX, gerenciamento de fonte de dados ao estilo Flux, validação de formulários e mais. Provê uma extensão para Chrome que é muito útil para inspecionar componentes construídos com Vue.
Handlebars fornece de forma eficaz o poder necessário para você criar templates semânticos sem frustrações.
Templates assíncronos para o navegador e para node.js.
Velocity é um motor de animações com a mesma API $.animate() do jQuery.
Bounce.js é uma biblioteca JavaScript e uma ferramenta que permite você criar lindas animações em CSS3.
Uma biblioteca JavaScript simples mas poderosa para interpolar e animar propriedades HTML5 e JavaScript.
Move.js é uma biblioteca JavaScript pequena que torna animações em CSS3 super simples e elegantes.
SVG é uma excelente forma de criar gráficos vetoriais interativos e independentes de resolução que ficam ótimos em qualquer tamanho de tela.
Rekapi é uma biblioteca para fazer animações canvas e DOM com JavaScript, assim como animações @keyframe do CSS, para navegadores modernos.
Faça uso do seu favicon com emblemas, imagens ou vídeos.
Textillate.js combina algumas bibliotecas impressionantes para fornecer um plugin fácil de usar para aplicar animações CSS3 em qualquer texto.
Motio é uma pequena biblioteca JavaScript para uma simples porém poderosa animação baseada em sprites e panning (panorâmica).
Com a Anima é fácil de animar mais de cem objetos de cada vez. Cada item pode ter sua massa e viscosidade para simular objetos da vida real!
With Anima it's easy to animate over a hundred objects at a time. Each item can have it's mass and viscosity to emulate reallife objects!
MelonJS é um motor de jogos leve e grátis. O motor integra o formato tiled map, tornando o level design mais fácil.
ImpactJS é um dos motores de jogos mais "testados e aprovados" em HTML5, com sua primeira publicação no final de 2010. Ele é muito bem mantido e atualizado, conta com uma boa comunidade dando suporte. A documentação é boa e conta com dois livros falando sobre criação de jogos com esse motor.
LimeJS é um framework de jogos em HTML5 para criação rápida de jogos com experiência nativa para navegadores modernos e dispositivos touch.
Crafty é um motor de jogo lançado no final de 2010. Crafty torna realmente fácil começar a desenvolver jogos com JavaScript.
Cocos2d-html5 é um framework de código aberto para desenvolvimento de jogos web em 2D, lançado sob a licença MIT. É uma versão HTML5 do projeto Cocos2d-x. O foco para o desenvolvimento do Cocos2d-html5 está em torná-lo multiplataforma entre navegadores e aplicações nativas.
Phaser é baseado fortemente no Flixel. É mantido por Richard Davey (Photon Storm) que tem sido bem ativo por anos na comunidade HTML5.
Goo é um motor de jogos JavaScript 3D feito inteiramente em WebGL/HTML5
LycheeJS é uma biblioteca de jogos em JavaScript que oferece uma solução completa para prototipação e desenvolvimento de HTML5 Canvas, WebGL ou OpenGL(ES) nativo, baseado no navegador ou em ambientes nativos.
Quintus é um motor de jogos HTML5 projetado para ser modular e leve, com uma sintaxe concisa e bem próxima ao JavaScript.
Kiwi.js é um motor de jogos de código aberto. Algumas pessoas o chamam de o WordPress dos motores de jogos HTML5.
Panda.js é um motor de jogos em HTML5 para dispositivos mobile e desktop com renderização de Canvas e WebGL.
Isogenic é um motor de jogos que fornece as mais avançadas funcionalidades de rede e multiplayer em tempo real disponíveis em qualquer motor de jogos HTML 5. O sistema é baseado em streaming de entidades e inclui opções poderosas de simulação e interpolação de entidades no client a partir de delta updates.
Isogenic is an advanced game engine that provides the most advanced networking and realtime multiplayer functionality available in any HTML 5 game engine. The system is based on entity streaming and includes powerful simulation options and client-side entity interpolation from delta updates.
Super-fast 3D framework for Web Applications & Games. Based on Three.js. Includes integrated physics support and ReactJS integration.
por Quildreen Motta
por Yehuda Katz
por Scott Allen
por Ben Alman
por Nico Bevacqua
por Viljami S.
por Ju Gonçalves
por Marijn Haverbeke
por David Flanagan
por Stoyan Stefanov
por James Coglan
por Henrik Joreteg
por Stoyan Stefanov
por Dustin Diaz
por John Resig
por Nicolas Bevacqua
por Axel Rauschmayer
por >Kyle Simpson
por Ryan Burgess
por Ivo Wetzel
por David Herman
por Michael Fogus
por DevFreeBooks
by DevFreeBooks
Este projeto não existiria sem esses maravilhosos contribuidores. Obrigado galera por tornarem isso real!
JavaScript: A forma certa por William Oliveira.
Licenciado sobre Creative Commons Atribuição-NãoComercial 4.0 Internacional.
Baseado no trabalho em http://jstherightway.org.
William Oliveira
Allan Esquina