{"id":300,"date":"2020-12-08T02:26:29","date_gmt":"2020-12-08T02:26:29","guid":{"rendered":"https:\/\/backbonejsdescomplicado.com.br\/?p=300"},"modified":"2024-04-30T20:26:02","modified_gmt":"2024-04-30T20:26:02","slug":"o-que-e-backbone-js-e-como-funciona","status":"publish","type":"post","link":"https:\/\/escolhadev.com.br\/javascript\/o-que-e-backbone-js-e-como-funciona\/","title":{"rendered":"O que \u00e9 Backbone.js e Como Funciona?"},"content":{"rendered":"\n<p>Voc\u00ea gostaria de descobrir um framework que pode ajudar voc\u00ea no desenvolvimento de aplica\u00e7\u00f5es JavaScript e que sejam elegantes e organizadas? Backbone.js j\u00e1 est\u00e1 no mercado tem alguns anos e entrega para n\u00f3s exatamente os componentes que grandes empresas utilizaram no desenvolvimento de aplica\u00e7\u00f5es JavaScript complexas de boa qualidade. Me acompanhe at\u00e9 o final deste artigo para entender como funciona o framework ao mesmo tempo que descobre o que \u00e9 Backbone.js comigo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 Backbone.js?<\/h2>\n\n\n\n<p>Backbone.js \u00e9 uma biblioteca JavaScript criada em 2010 por <a href=\"https:\/\/en.wikipedia.org\/wiki\/Jeremy_Ashkenas\">Jeremy Ashkenas<\/a>. \u00c9 conhecida por ser leve pois sua \u00fanica depend\u00eancia \u00e9 a biblioteca Underscores.js. No entanto jQuery \u00e9 uma depend\u00eancia opcional que permite voc\u00ea utilizar todo o potencial do framework.<\/p>\n\n\n\n<p>O Backbone.js tenta entregar ao desenvolvedor alguns componentes m\u00ednimos: Models e Collections para cria\u00e7\u00e3o e organiza\u00e7\u00e3o da estrutura dos dados, Views e URL&#8217;s para interfaces gr\u00e1ficas de intera\u00e7\u00e3o com usu\u00e1rio e uma API RESTful JSON e Events para sincroniza\u00e7\u00e3o dos dados. Esses componentes quando combinados d\u00e3o ao desenvolvedor liberdade para criar Single Page Applications ou simplesmente manter servidor e aplica\u00e7\u00f5es clientes sincronizados.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design Pattern MVC &amp; Backbone.js<\/h2>\n\n\n\n<p>O Backbone.js disponibiliza para n\u00f3s desenvolvedores alguns componentes \u00fateis para cria\u00e7\u00e3o de aplica\u00e7\u00f5es utilizando JavaScript. No entanto quero destacar aqui 3 componentes fundamentais para aplicar o <a href=\"https:\/\/en.wikipedia.org\/wiki\/Model%E2%80%93view%E2%80%93controller\">Design Pattern MVC<\/a> (Model View Controller). S\u00e3o eles:<\/p>\n\n\n\n<ul>\n<li>Model<\/li>\n\n\n\n<li>Collection<\/li>\n\n\n\n<li>View<\/li>\n<\/ul>\n\n\n\n<p>Voc\u00ea pode combinar estes componentes da maneira como achar melhor &#8211; incluindo organizar o projeto seguindo o DesignPattern MVC que \u00e9 um padr\u00e3o muito utilizado pelos desenvolvedores com o objetivo de planejar melhor as responsabilidades de uma aplica\u00e7\u00e3o. Aplicar corretamente o MVC implica em aplica\u00e7\u00f5es JavaScript melhor estruturadas e mais f\u00e1ceis de dar manuten\u00e7\u00e3o no longo prazo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Single Page Application &amp; Backbone.js Router<\/h2>\n\n\n\n<p>O Router \u00e9 mais um componente fornecido pelo Backbone.js que vale a pena destacar por aqui. Ele \u00e9 o principal respons\u00e1vel por tornar poss\u00edvel o desenvolvimento de aplica\u00e7\u00f5es do tipo Single Page Application. Vou listar para voc\u00ea alguns exemplos de grandes empresas e sites famosos que j\u00e1 adotaram o SPA:<\/p>\n\n\n\n<ul>\n<li>Netflix<\/li>\n\n\n\n<li>Airbnb<\/li>\n\n\n\n<li>Twitter<\/li>\n\n\n\n<li>GMail\/Google<\/li>\n<\/ul>\n\n\n\n<p>Agora deixe-me tentar explicar para voc\u00ea o que \u00e9 Single Page Application (SPA). Um SPA \u00e9 uma aplica\u00e7\u00e3o ou site que pode ser acessado pelo seu navegador web &#8211; no entanto o que o separa de sites comuns \u00e9 o fato de ser exibido para o usu\u00e1rio com apenas uma requisi\u00e7\u00e3o ao servidor. Depois de carregado cada componente visual na tela \u00e9 capaz de interagir com o servidor para atualizar outros componentes ou a si pr\u00f3prio evitando recarregar toda a p\u00e1gina novamente.<\/p>\n\n\n\n<p>A vantagem de se utilizar SPA em seus projetos \u00e9 entregar na outra ponta um site que \u00e9 capaz de responder mais r\u00e1pido as a\u00e7\u00f5es executadas pelo usu\u00e1rio. \u00c9 como se voc\u00ea estivesse entregando para o usu\u00e1rio uma usabilidade parecida com a que encontramos em aplica\u00e7\u00f5es nativas como aquelas desenvolvidas diretamente para Desktop, iOS ou Android.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conecte Backbone.js em sua API RESTful<\/h2>\n\n\n\n<p>Voc\u00ea tamb\u00e9m precisa saber que para ajudar na cria\u00e7\u00e3o de interfaces ricas e que se comuniquem com o lado servidor Backbone.js j\u00e1 est\u00e1 pronto e pr\u00e9-configurado para sincroniza\u00e7\u00f5es usando uma API RESTful.<\/p>\n\n\n\n<p>Caso esteja se perguntado o que \u00e9 REST: <strong>Representational State Transfer (REST)<\/strong> \u00e9 uma arquitetura para aplica\u00e7\u00f5es em rede e que conseguem se comunicar entre si utilizando apenas requisi\u00e7\u00f5es HTTP simples.<\/p>\n\n\n\n<p>Como no nosso caso estamos falando do framework JavaScript Backbone.js saiba que s\u00e3o os componentes Model e Collection quem possuem internamente mapeamentos para recursos REST atrav\u00e9s destes seguintes m\u00e9todos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ GET \/livros\/<br>collection.fetch();<br>\u200b<br>\/\/ POST \/livros\/<br>collection.create();<br>\u200b<br>\/\/ GET  \/livros\/1<br>model.fetch();<br>\u200b<br>\/\/ PUT  \/livros\/1<br>model.save();<br>\u200b<br>\/\/ DEL  \/livros\/1<br>model.destroy();<\/code><\/pre>\n\n\n\n<p>No c\u00f3digo acima \u00e9 poss\u00edvel imaginar como sua aplica\u00e7\u00e3o cliente feito em Backbone.js executaria facilmente requisi\u00e7\u00f5es HTTP (POST, GET, PUT ou DELETE) para efetuar no servidor opera\u00e7\u00f5es CRUD (create, read, update e delete).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Backbone.js continua relevante em 2020<\/h2>\n\n\n\n<p>Talvez voc\u00ea esteja se perguntando por que usar Backbone.js em 2020 e como ele se compara com outros projetos como Knockout.js, React, Angular ou Vue. Qual \u00e9 o melhor?<\/p>\n\n\n\n<p>Em minha opini\u00e3o n\u00e3o temos um ganhador. Cada projeto possui necessidades \u00fanicas. Ou talvez a equipe que vai trabalhar com voc\u00ea j\u00e1 domina uma solu\u00e7\u00e3o que atenderia bem o projeto. Minha sugest\u00e3o como desenvolvedor \u00e9 que voc\u00ea estude na medida do poss\u00edvel um pouco sobre os frameworks ou bibliotecas dispon\u00edveis no mercado. Estes estudos ir\u00e3o orient\u00e1-lo no momento que precisar avaliar e decidir qual solu\u00e7\u00e3o melhor se encaixa em um projeto.<\/p>\n\n\n\n<p>Um cen\u00e1rio de exemplo onde Backbone.js continua relevante para mim \u00e9 no desenvolvimento de temas ou plugins para WordPress. Quando estou desenvolvendo com WordPress quero evitar o m\u00e1ximo poss\u00edvel de depend\u00eancias externas. Backbone.js foi oficialmente incluido no WordPress desde sua vers\u00e3o 3.5 e desde ent\u00e3o n\u00e3o tenho d\u00favidas em preferir Backbone comparado \u00e0 outras bibliotecas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00e9-requisitos para aprender Backbone.js<\/h2>\n\n\n\n<p>Os requisitos para aprender Backbone.js n\u00e3o s\u00e3o complexos. Saber o b\u00e1sico de JavaScript e JQuery \u00e9 suficiente para iniciar sua jornada como iniciante at\u00e9 ser capaz de construir uma aplica\u00e7\u00e3o do Zero usando Backbone.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea gostaria de descobrir um framework que pode ajudar voc\u00ea no desenvolvimento de aplica\u00e7\u00f5es JavaScript e que sejam elegantes e organizadas? Backbone.js j\u00e1 est\u00e1 no mercado tem alguns anos e entrega para n\u00f3s exatamente os componentes que grandes empresas utilizaram no desenvolvimento de aplica\u00e7\u00f5es JavaScript complexas de boa qualidade. Me acompanhe at\u00e9 o final deste [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,1],"tags":[],"_links":{"self":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/300"}],"collection":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/comments?post=300"}],"version-history":[{"count":2,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/300\/revisions"}],"predecessor-version":[{"id":827,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/posts\/300\/revisions\/827"}],"wp:attachment":[{"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/media?parent=300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/categories?post=300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/escolhadev.com.br\/javascript\/wp-json\/wp\/v2\/tags?post=300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}