Exploring JavaScript MV Frameworks Part 1 – Hello Backbonejs

JavaScript se tornou uma das linguagens de programação mais populares da web. No início, os desenvolvedores não o levaram a sério, simplesmente porque não se destinava à programação do lado do servidor.

Katie Mikova Last Updated Feb 21, 2025 14min read

Era um equívoco comum entre os desenvolvedores profissionais que essa linguagem era destinada a "amadores", pois se concentrava apenas na interface do usuário. O JavaScript ganhou destaque quando o uso do Ajax veio à tona e os programadores profissionais deram importância à capacidade de resposta da página. Mas agora a linguagem se tornou mais popular do que nunca, pois a experiência do usuário se tornou a parte fundamental do desenvolvimento web. O acesso à web não se limita apenas aos navegadores – existem muitos dispositivos com tamanhos de tela variados acessando o mesmo conteúdo. Com o surgimento do HTML5 e do CSS3, a web se tornará mais adaptável e responsiva do que nunca, e o JavaScript desempenha um papel importante nisso. Ele também ganhou popularidade na programação do lado do servidor, o que é possibilitado pela estrutura NodeJS.

O aumento no uso de JavaScript em aplicativos modernos exige que os desenvolvedores escrevam código sustentável, separem preocupações e melhorem a capacidade de teste. JavaScript é uma linguagem sem "classe" e não foi projetada para suportar Programação Orientada a Objetos, no entanto, você pode obter resultados semelhantes por meio de soluções alternativas. Portanto, se você é um desenvolvedor de um mundo de Programação Orientada a Objetos, achará difícil até se acostumar. Embora existam algumas bibliotecas de manipulação de DOM, como o jQuery, que simplificam o script do lado do cliente do HTML, elas na verdade não resolvem o problema de lidar efetivamente com a separação de preocupações. Você acabará escrevendo muitos seletores e retornos de chamada jQuery para manter os dados sincronizados entre o HTML, JavaScript e os dados buscados no servidor e ainda estamos presos ao código Spaghetti.

Felizmente, existem algumas bibliotecas e frameworks que vêm para resgatar. Vamos explorar alguns conceitos e bibliotecas que auxiliam na estruturação de aplicativos JavaScript!

Este post é a primeira parte de uma série de blogs sobre JavaScript Frameworks e Bibliotecas por aí e estarei explorando o BackboneJS aqui. Fique atento aos outros!

O que é MV*?

Embora todos os frameworks por aí tentem ser MVC, eles não seguem necessariamente o padrão estritamente. A ideia de todos os padrões é separar Model, View e Logic que prende os dois atrás dos quais está o controlador. No entanto, o BackboneJS incorpora a lógica do controlador na própria visualização, embora mantenha a separação com eficiência. Por outro lado, temos outras bibliotecas que implementam o padrão Model-View-Presenter(MVP) e Model-View-ViewModel(MVVM). Por esse motivo, vamos nos referir a essas estruturas como implementação MV*.

O que é MVC?

Modelo – Visualização – Controlador é um padrão arquitetônico que existe há muito tempo e é amplamente utilizado na programação do lado do servidor. Existem alguns frameworks como ASP.net MVC, Ruby on Rails etc. que ajudam os desenvolvedores web a programá-los facilmente.

Modelo– refere-se a dados de aplicativos e regras de negócios. (também conhecido como modelo de domínio, entidades)

Visualizar– o que o usuário vê! (Página HTML no navegador da web)

Controlador– mediador entre os dois. Manipula o modelo com base na interação do usuário. Ele lida com toda a lógica.

Image Source: Wikipedia

MVC In JavaScript?

A criação de aplicativos de página única usando JavaScript está se tornando popular nos dias de hoje e bons exemplos deles são o GMail e o Google Docs. Quando você se propõe a construir esse tipo de aplicativo, provavelmente inventará muitas das peças que compõem um paradigma de codificação MV*. Então, em vez disso, você pode usar algumas das bibliotecas famosas, como BackboneJS, KnockoutJS, AngularJS, EmberJS.... Vamos explorar esses frameworks em detalhes, começando com o BackboneJS.

Framework ou apenas uma biblioteca?

Antes de optar por trabalhar em um determinado JavaScript Framework ou em uma Biblioteca, é importante entender a diferença entre os dois. As bibliotecas apenas se encaixam em sua arquitetura existente e adicionam uma funcionalidade específica, enquanto um Framework fornece uma arquitetura e você precisará seguir as regras. Para simplificar para você - Backbone e Knockout são bibliotecas JavaScript e Ember e AngularJS são frameworks. À medida que os exploramos, você verá a clara diferença.

Hello Backbone

Backbone é uma biblioteca JavaScript leve criada por Jeremy Ashkenas, também conhecido por CoffeeScript. Ele foi projetado para oferecer suporte a aplicativos da Web de página única e depende da biblioteca UnderscoreJS, que fornece funções utilitárias para tarefas comuns de JavaScript.

Com o Backbone, os dados são representados como Modelos, que podem ser criados, validados e salvos no servidor. As exibições exibem o estado do modelo e ele se renderiza novamente quando uma alteração é acionada (por meio de um evento "change") no modelo devido a uma interação da interface do usuário. Dessa forma, o Backbone fornece uma abordagem estruturada para manter os dados sincronizados com a interface do usuário HTML.

Alguns dos principais sites que usaram o Backbone incluem USA Today, LinkedIn Mobile, Hulu, WordPress, Foursquare, Bitbucket, Khan Academy e muito mais.

Introdução ao Backbone

Script Dependency

O Backbone tem uma dependência de UnderscoreJS ou Lo-Dash para funções de utilitário e depende de jQuery ou Zepto para manipulações de DOM. Portanto, certifique-se de adicioná-los à sua página.

<script type="text/javascript" src="../common/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../common/lodash.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>

Backbone.Model

$(function(){
      var Person = Backbone.Model.extend({});
      var person = new Person({name: "James", age: 51});
      var name = person.get("name");
      var age = person.get("age");
      console.log(name + ":" + age);
});

Para criar uma classe Model própria, estenda Backbone.Model e passe um objeto JavaScript para o construtor e defina os atributos. Em seguida, você pode recuperar facilmente os valores de uma função get. Como alternativa, você pode definir os atributos usando uma função set.

Backbone.View

Set a template first:

<script type="text/template" id="person-template">
    <div class="view">
        <p>Name: <input type="text" value="<%- name%>"/></p>
        <p>Age: <input type="text" value="<%- age%>"/></p>
    </div>
</script>

Defina um contêiner para renderização:

<div id="container">Your content will load in a bit..</div>

Define a view in the script:

//define view
var AppView = Backbone.View.extend({
el: '#container',
model: person,
template: _.template($("#person-template").html()),
initialize: function(){this.render();},
render: function(){this.$el.html(this.template(this.model.toJSON()));}
});
// initialize view
new AppView();

As visualizações no Backbone são quase mais convencionais do que código, então você terá que confiar em alguma biblioteca de modelos JavaScript, como modelos de sublinhado ou Mustache.js para fazer uma separação mais limpa da interface do usuário. No exemplo acima, usei a solução de modelagem do Underscore para obter a separação.

Suas próprias visualizações personalizadas podem ser criadas com a ajuda do Backbone.View.extend. Há algumas propriedades básicas que você deve conhecer para definir o Modo de Exibição.

El–DOM no qual a exibição será renderizada. Neste caso, é o elemento <div> com o id "container"
$el –um objeto jQuery (ou Zepto) armazenado em cache para o elemento da visualização
model : defina os dados do modelo que foram criados usando Backbone.Model
modelo–O Backbone é agnóstico em relação ao seu método preferido de modelagem HTML. Nesse caso, a função de modelo do Sublinhado é usada para definir o modelo definido no "modelo de pessoa"
initialize –esta função será chamada pelo Backbone no momento da criação da visualização
render –essa função é usada para renderizar o elemento com o modelo de exibição e os dados. Nesse caso, substituímos o valor no "contêiner" pela exibição modelada que consiste em dados do modelo

Conforme declarado na documentação do Backbone, a classe View também pode ser pensada como um tipo de controlador que despacha eventos que se originam da interface do usuário, com o modelo HTML servindo como a visualização verdadeira. Isso leva a uma discussão se o Backbone segue ou não os princípios reais do MVC. No entanto, se você não aprender como uma biblioteca MVC e der importância à maneira como ela separa as preocupações, tudo bem.

Algum tempo atrás, o Backbone tinha o seu próprio Backbone.Controller, no entanto, foi renomeado para Router, pois a nomenclatura desse componente não fazia sentido pela maneira como estava sendo configurada para uso.

Tamanho do arquivo, download e outros links úteis

Tamanho do arquivo: 6,3 Kb - minificado e 56 kb com fonte completa e comentários.

Download: Backbone website

Annotated Source: http://backbonejs.org/docs/backbone.html

CDN: cdnjs, jsdelivr

Quem está usando?: Confira a seção de exemplos

Fique ligado

Então essa foi uma rápida introdução ao BackboneJS e uma explicação sobre frameworks JavaScript em geral. Nos próximos posts, você será apresentado a Ember, Knockout e Angular também. Portanto, fique atento!

If you have any questions write to me nish@infragistics.com or find me on twitter @nishanil

Para este post, estou assumindo que você é um programador como eu e o design é um planeta fora do seu universo. Se você é do mundo do design, também pode continuar lendo; pode ser que haja algo para você também!

Escrever CSS é divertido, emocionante e fácil até que seu site engorde com páginas e layouts complicados. Se você já tentou consertar um layout em tal página - você sabe o que quero dizer. Eu falei sobre consertar um layout? Ah, sim, obrigado a todos os navegadores.

Muitas vezes, enquanto escrevia CSS, eu desejava poder escrevê-lo de forma mais programática do que apenas estilizá-los. Por exemplo, se o CSS permitisse declarações de variáveis, eu poderia simplesmente manter os valores em variáveis, realizar algumas operações e reutilizá-los em propriedades. Mas isso é pedir demais de uma linguagem de folha de estilo que deveria apenas fazer estilo!

Felizmente, existem alguns pré-processadores como o Sass & LESS que estendem bem o CSS e adicionam tudo o que um programador sempre quis. Depois de fazer algumas pesquisas, peguei MENOS para ver como funciona. Passei algumas horas reestilizando algumas das minhas demos com LESS e devo dizer que estou completamente impressionado com essa linguagem. Então, aqui estou explicando sobre LESS.

So LESS

LESS é uma linguagem de folha de estilo dinâmica que estende o CSS e adiciona recursos interessantes como variáveis, mixins, operações e funções a ele. Mais importante, são necessários menos esforços para os desenvolvedores escreverem CSS complexos e criarem sites de aparência incrível rapidamente. O LESS usa a sintaxe CSS existente que facilita o aprendizado e você sempre pode recorrer ao CSS.

A primeira versão do LESS foi escrita em Ruby e foi usada como uma linguagem do lado do servidor que, ao compilar, emitia CSS. No entanto, nas versões posteriores, o uso de Ruby é obsoleto e substituído por JavaScript. Adicionar LESS.js arquivo JavaScript à sua página HTML permite a compilação em tempo real nos navegadores. Ele também suporta compilação do lado do servidor com a ajuda de Node.js tornando mais fácil para os desenvolvedores escolherem entre os dois.

Adding Less.js – Client-Side Usage

Todos os arquivos LESS devem ter a extensão ".less" e você pode tê-los no diretório CSS do seu servidor web.

Adicione as seguintes linhas de código à sua página HTML para garantir que a pré-compilação do CSS ocorra no seu navegador:

<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<script src="js/less-1.3.3.min.js"></script>

Nota: Se você estiver trabalhando em um sistema de arquivos local, ou seja, se estiver acessando a página usando "file:///" no Chrome ou IE, poderá incorrer em um erro de "Solicitações de origem cruzada são suportadas apenas para HTTP" ou "Acesso negado", respectivamente. Estes são alguns erros relacionados à segurança e não encontrei uma maneira de me livrar deles. Hospede-os em um servidor de desenvolvimento e você verá isso desaparecer. No entanto, não encontrei nenhum problema com o Mozilla Firefox.

Server Side Usage

Se o desempenho é o que está sendo executado em sua mente, você pode compilar esses arquivos no lado do servidor. Primeiro, baixe e instale o Node.js e, em seguida, usando o npm, baixe o compilador less (lessc.cmd).

Para compilar, use este comando:

lessc styles.less > styles.css

Para mais opções, como CSS minifying, execute lessc sem parâmetros.

Existem poucos editores legais por aí que permitem que você compile esses arquivos ao vivo. Por exemplo, eu uso o WebStorm, que compila MENOS para CSS enquanto digito. Se você estiver em um projeto grande e a maioria de seus desenvolvedores se sentir confortável com o LESS, você poderá adicionar a etapa de compilação do lado do servidor à sua tarefa de compilação.

Agora que você sabe como criar arquivos ".less" e compilá-los em CSS, vamos examinar essa linguagem em detalhes.

Variáveis

Como mencionado anteriormente, as variáveis são um bom recurso para se ter nas folhas de estilo. LESS permite que você adicione variáveis com a ajuda do símbolo @ e use-as nas propriedades. Encontre abaixo um exemplo onde defino a cor de fundo e a cor do corpo com a ajuda de variáveis.

@backgroundColor: #333;
@color: #fff;

body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px #000;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
}

Essas variáveis agora podem ser reutilizadas no restante do código e qualquer alteração que você fizer na cor será aplicada a todas. Os códigos CSS podem coexistir com LESS – Se você notar que apenas duas das propriedades foram definidas por variáveis e o resto é CSS.

Operações

Agora que você sabe que as variáveis são uma possibilidade na folha de estilo, deve ficar feliz em saber que pode realizar operações nelas. É fácil! Aqui está um exemplo de como fazer isso:

@baseColor: #000;
@backgroundColor: (@baseColor + #333);
@color: (@backgroundColor / 3);
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;
#body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

Dê uma olhada em como @backgroundColor, @color e font-size obtém o valor calculado de uma operação. Encontre abaixo a saída que é gerada.

Output:

#body {
  background-color: #333333;
  color: #111111;
  border-top: solid 10px #000000;
  font-size: 0.85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

Mixins

Os mixins ajudam você a reutilizar todo o conjunto de propriedades de um conjunto de regras para outro conjunto de regras. Aqui está um exemplo:

@baseColor: #000;
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;

.gradients {
  /*local scoped variables*/
  @gradientStartColor: #eaeaea;
  @gradientEndColor: #cccccc;
  background: @baseColor; /* variable from global scope */
  background: linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -o-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -ms-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -moz-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -webkit-linear-gradient(top, @gradientStartColor, @gradientEndColor);
}

#body {
 .gradients;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

No código acima, você pode ver como.gradients ruleset é reutilizado em #body. É um recurso muito bom, pense em como você precisa escrever menos código agora!

Escopo variável

Como qualquer outra linguagem de programação, o LESS também fornece escopo variável. As variáveis são pesquisadas localmente primeiro e, quando não forem encontradas, serão pesquisadas globalmente. No exemplo acima, você pode ver que o @baseColor está sendo usado em ambos.gradientes e #body. Se você tiver variáveis com escopo local, como @gradientStartColor e @gradientEndColor elas não estarão acessíveis fora do escopo, a menos que sejam misturadas. No exemplo acima #body pode acessar essas variáveis dentro desde.gradients é referido.

Confira o Scope para mais informações.

Parametric Mixins

Este é um tipo especial de conjunto de regras que pode ser misturado em classes semelhantes, mas aceita parâmetros. Aqui está um exemplo que configura border-radius para diferentes navegadores.

.border-radius (@radius: 4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#body {
 .gradients;
  .border-radius;
  border-top: solid 10px @baseColor;
}
#sidebar{
  .border-radius(25px);
  background: #eee;
}

Se você olhar#body ele chama sem parâmetros, porque LESS permite definir valores padrão de parâmetros que, neste caso, são 4px. Veja #sidebar para chamada com parâmetros. Você também pode definir vários parâmetros, confira isso para obter mais informações.

Funções

LESS fornece algumas funções auxiliares para transformar cores, manipulação de strings e fazer contas. Veja abaixo um exemplo da documentação do LESS que usa porcentagem para converter 0,5 em 50%, aumenta a saturação de uma cor base em 5% e, em seguida, define a cor de fundo para uma que é iluminada em 25% e girada em 8 graus:

#sidebar{
  width: percentage(0.5);
  color: saturate(@baseColor, 5);
  background-color: spin(lighten(#ff0000, 25%), 8);
}

Confira a Referência de função para obter detalhes.

Resumo

Até agora você teria uma boa ideia do que LESS traz para a mesa. Mas esteja ciente de que LESS não é o único pré-processador CSS. Há o Sass, que significa Syntactically Awesome Stylesheets, e alguns outros, mas eles não são populares. Existem vários blogs por aí que lhe darão uma boa comparação entre os dois. Eu sugiro que você experimente os dois e mantenha a sintaxe que você gosta! Afinal, eles emitem CSS Smile

Tem um feedback? Encontre-me no twitter @nishanil

Como