Neste artigo quero iniciar nossos primeiros passos no universo do Backbone.js com o famoso clássico Hello, World! Até o final deste artigo entregarei um projeto simples e funcional.
Eu também gostaria que este projeto possa ser usado como ponto de partida, ou seja, um repositório no GitHub que possa ser facilmente clonado para começar outros projetos rapidamente.
Pré-Requisitos
Para acompanhar este tutorial recomendo que conheça pelo menos um pouco de HTML, CSS e JavaScript. Algum conhecimento em desenvolvimento web no geral é bem vindo. Ter pelo menos uma idéia sobre O que é Backbone.js também é importante para manter você motivado durante toda a leitura, mas não é obrigatório.
PS: Para conhecer HTML, CSS e JavaScript acesse Dê um start na carreira de programação – nele recomendo um minicurso para dar seus primeiros passos no desenvolvimento web.
Criação da estrutura de diretórios
Agora explicarei como vamos organizar a estrutura de diretórios do nosso projeto. Criaremos uma pasta chamada bd2020-hello-world que será o diretório raiz da aplicação. Dentro criaremos os subdiretórios resources e vendors, cada um contendo as pastas css e js.
A motivação para criar os dois subdiretórios são o seguinte: o resources deverá armazenar arquivos do tipo CSS e JavaScript criados por nós e específicos para este projeto enquanto o vendors deverá conter código CSS e JavaScript de terceiros. Exemplos de códigos de terceiros seriam bibliotecas como Bulma, jQuery, Underscores e o próprio Backbone.
Agora que você entendeu a motivação sobre como deverá ser organizado o projeto vou mostrar como ficaria a estrutura já finalizada. Talvez fique mais fácil para você visualizar e replicar aí no seu editor de textos também.
bd2020-hello-world
├── resources
│ ├── css
│ └── js
└── vendors
├── css
└── js
No meu caso sou usuário do sistema operacional Linux. Se este também for o seu caso segue dois comandos que executei dentro da pasta bd2020-hello-world usando terminal. Esses comandos criarão a estrutura de diretórios do seu projeto caso você ainda não tenha criado.
mkdir -p resources/{js,css}
mkdir -p vendors/{js,css}
Finalizamos a estrutura de diretórios e agora estamos prontos para a próxima etapa. Bora baixar alguns arquivos necessários para continuarmos com o desenvolvimento da nossa aplicação Backbone?
Criação dos arquivos necessários
Agora que finalizamos a estrutura de pastas do nosso projeto vamos para o próximo passo. Primeiro criaremos os arquivos que conterão nosso código CSS e JavaScript. Em seguida baixaremos as dependências.
Para você ter uma idéia de como vai ficar nossa estrutura quando finalizarmos a criação dos arquivos estou disponibilizando logo abaixo o resultado final. Pode ser útil você ter uma visão da estrutura pronta para se guiar mais facilmente enquanto avançamos para as próximas etapas.
bd2020-hello-world
├── index.html
├── resources
│ ├── css
│ │ └── screen.css
│ └── js
│ └── app.js
└── vendors
├── css
│ ├── bulma.css
│ └── bulma.css.map
└── js
├── backbone.js
├── jquery-3.5.1.js
└── underscore.js
Usualmente projetos web precisam de pelo menos um arquivo HTML, um arquivo para salvar estilos CSS e um arquivo onde escrevemos código JavaScript. Sabendo disso então vamos criar na raiz os seguintes arquivos: index.html, resources/css/screen.css e resources/js/app.js.
touch index.html
touch resources/css/screen.css
touch resources/js/app.js
Os nossos arquivos mínimos para começar um projeto web estão criados. Agora vamos fazer o download do Bulma que é um framework CSS moderno baseado no flexbox.
No momento que escrevo este artigo a versão atual do Bulma é 0.9.1. Faça o download, descompacte o arquivo, localize os arquivos bulma.css e bulma.css.map e os copie no caminho vendors/css. Caso esteja em um terminal bash os camandos que executei para acessar um CDN e baixar o bulma seguem abaixo.
wget https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.css -P vendors/css
wget https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.css.map -P vendors/css
Nosso próximo objetivo é realizar o download do Backbone.js e suas respectivas dependências que são o Underscore.js e JQuery. Essas dependências deverão ser baixadas e salvas no caminho vendors/js.
Segue abaixo os comandos que utilizei no meu terminal bash para fazer o download das bibliotecas e salva-las dentro da pasta vendors/js. No momento que escrevo este artigo a versão das dependências baixadas são Backbone.js 1.14.0, Underscore.js 1.12.0 e jQuery 3.5.1.
wget https://cdn.jsdelivr.net/npm/underscore@1.12.0/underscore.js -P vendors/js
wget https://code.jquery.com/jquery-3.5.1.js -P vendors/js
wget https://backbonejs.org/backbone.js -P vendors/js
Se você chegou até aqui comigo então já possui em mãos uma estrutura de pastas, arquivos de projeto e dependências para começar um projeto usando Backbone.
O próximo passo agora é escrever um pouco de código que seja fácil e funcional. O suficiente para dar um pouco de vida ao nosso projeto.
Escrevendo nosso primeiro código JavaScript
Com toda esta estrutura de pastas e arquivos criados podemos começar a escrever um pouco de código JavaScript. Abra o arquivo resources/js/app.js usando seu editor de código preferido.
Nele vamos criar a classe AppRootView que deverá estender Backbone.View. Depois sobrescreva o método render para concatenar ao DOM this.$el um título e descrição com as tags H1 e P respectivamente.
No final crie uma instância de AppRootView e execute o método render. O resultado armazenado na propriedade $el será passado por parâmetro para o seletor jQuery que aponta para #app-root.
O objetivo deste artigo não é se aprofundar no Backbone.js – para manter simples e ficar mais claro tudo o que expliquei veja abaixo como deve ficar o seu código JavaScript.
(function () {
const AppRootView = Backbone.View.extend({
className: 'container',
render: function () {
const title = $('<h1>');
title.addClass('title');
title.append('Hello, World!');
const subtitle = $('<p>');
subtitle.addClass('subtitle');
subtitle.append('My first website with <strong>Backbone.js</strong>!');
this.$el.append(title);
this.$el.append(subtitle);
return this;
},
});
$('#app-root').html(new AppRootView().render().$el);
})();
Escrever apenas código JavaScript não é suficiente para um projeto mínimo e funcional com Backbone. Vamos no próximo tópico escrever o código HTML responsável por exibir alguma informação no navegador.
Escrevendo nossa estrutura HTML
Agora vamos escrever o código HTML do projeto. É simples – código HTML básico que importa os arquivos de estilo e JavaScript. O conteúdo é composto apenas por uma tag div marcado com o ID app-root. Esta marcação é necessária pois é nela onde o Backbone.js vai renderizar a saída do método render da nossa classe AppRootView que escrevemos anteriormente usando JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello, World!</title>
<link rel="stylesheet" href="vendors/css/bulma.css" />
<link rel="stylesheet" href="resources/assets/css/screen.css" />
</head>
<body>
<section class="section">
<div id="app-root"></div>
</section>
<script src="vendors/js/underscore.js"></script>
<script src="vendors/js/jquery-3.5.1.js"></script>
<script src="vendors/js/backbone.js"></script>
<script src="resources/assets/js/app.js"></script>
</body>
</html>
Agora que nosso código HTML e JavaScript estão prontos certamente já temos um projeto funcional para acessá-lo pelo navegador. Fique à vontade para fazer seus testes. Mas vamos escrever um pouco de CSS com o objetivo de deixar a tela mais agradável.
Últimos ajustes no código CSS
Vamos agora criar uma estrutura básica para organizar e escrever o nosso código CSS. Como este projeto é muito simples e deve servir apenas como um ponto de partida para novos projetos escreveremos apenas estilos para centralizar o título e subtítulo. Veja abaixo como ficou.
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Title
# Subtitle
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Title
--------------------------------------------------------------*/
.title {
text-align: center;
}
/*--------------------------------------------------------------
# Subtitle
--------------------------------------------------------------*/
.subtitle {
text-align: center;
}
Caso queira fazer seus próprios ajustes usando CSS fique à vontade. Agora que está tudo pronto vamos abrir nossa aplicação usando um navegador e conferir se está tudo funcionando corretamente.
Executando o seu projeto pelo navegador
Agora que todo código necessário para executar nossa aplicação de exemplo está pronto precisamos executá-lo localmente. Apenas clique duas vezes no arquivo index.html e seu projeto será executado em seu navegador.
Aqui no meu navegador apareceu uma página com os textos “Hello, World!” e “My first website with Backbone.js” posicionados ao centro. Se o mesmo apareceu aí pra você então é sucesso!
Faça o download do projeto finalizado no GitHub
Espero que você tenha seguido todo o passo a passo deste artigo e criado o seu primeiro projeto “Hello, World!” usando Backbone. Quero deixar para você minha versão finalizada do projeto acessível no GitHub. Você deve baixá-lo para tirar dúvidas caso tenha sentido alguma dificuldade, mas também pode ser útil caso você preferiu apenas ler o artigo e pegar tudo prontinho no final do artigo.
Conclusão
Obrigado por chegar até o final deste artigo comigo. Você aprendeu qual é o passo a passo para iniciar uma nova aplicação do Zero usando Backbone. Agora você sabe na prática quais são os diretórios e arquivos necessários para iniciar o seu projeto. Também acompanhou comigo o download do framework Bulma para ajudar com CSS e deixar o visual de nossas páginas um pouco mais agradáveis.
Compartilhei também no GitHub este projeto finalizado para que você possa fazer o download sempre que necessário. Sempre que quiser iniciar um projeto novamente do Zero você pode optar por baixá-lo e modificá-lo para que atenda suas necessidades específicas.
Eu acho muito divertido criar projetos do ZERO como este que acabamos de criar. Se você também curte visite um artigo que escrevi onde indico um minicurso gratuito: nele você cria uma calculadora do ZERO e passo a passo usando HTML, CSS e JavaScript.