{
  "path": "/vamos-aprender-javascript-para-separar-as-responsabilidades-do-frontend-e-do-backend.html",
  "site": "at://did:plc:3272gdrjsuikiff7qsgokgas/site.standard.publication/3mjaxtes2yf2v",
  "tags": [
    "pt",
    "JavaScript",
    "Frontend",
    "Backend",
    "Dev",
    "Live Coding"
  ],
  "$type": "site.standard.document",
  "title": "Vamos aprender JavaScript para separar as responsabilidades do frontend e do backend",
  "publishedAt": "2018-04-14T00:00:00.000Z",
  "textContent": "Apesar de projetos robustos de frontend não ser uma das minhas especialidade, várias pessoas que programam e que são próximas vivem tirando dúvida de JavaScript comigo. O que é estranho, pois sou bem tosco em JavaScript.\n\nMas também é compreensível: a maior parte das minhas respostas não é sobre JavaScript em si, mas sobre como a arquitetura de um projeto permite que frontend e backend se comuniquem. Em outras palavras, as dúvidas não são sobre JavaScript ou um _framework_ específico, mas sobre como separar as responsabilidades do frontend e do backend.\n\nPensando nisso fiz algumas sessões de _live coding_ mostrando como eu penso essa arquitetura. Não foquei nem em código, nem em biblioteca alguma. Usei um backend simples em Django e o restou foi JavaScript puro.\n\nFiz assim pois a ideia é falar de arquitetura, não de código (o código vem como exemplo da implementação dessa arquiteura). Em outras palavras, se é para falar de código, vai logo pro Elm :)\n\nSendo assim, tentei destacar o que é responsabilidade do fronend, o que é responsabilidade do backend, e como escrever código que respeite essa divisão de responsabilidades (independente se é Django, Flask, Rails, Express, Code Igniter, Laravel, Iron etc; e independente se é Elm, React, Vue, Angular, Ember…).\n\nO escopo foi mais ou menos esse:\n\n Criar um aplicação com Django que gerencie uma agenda telefônica\n Propûs uma aplicação não retorna os dados via HTML, os dados só são servidos via JSON:\n   Uma view para listar todos os contatos\n   Uma view que dê os detalhes de um contato\n   Uma view para criar um contato novo\n   Uma view para editar um contato existente\n O frontend é um SPA (_single page application_), independente do Django, onde a gente pode fazer quatro coisas – e é isso que foi implementado nas sessões:\n   Ao carregar, ele carrega a lista de contatos\n   Ao clicar em Novo, adicionamos um contato\n   Ao clicar em um contato, ele mostra os detalhes desse contato\n  * Ao clicar em Editar podemos editar os dados desse contato\n\nO código foi escrito em mais de 5h de sessões de _live coding_ – espero que ajude mais gente além de quem participou das _lives : )\n\nParte 1\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/uSNPrpdSvP0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>\n\nParte 2\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/5liiGKWmKNc\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>\n\nParte 3\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/qH5xvNegPCM\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>\n\nParte 4\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/cj4z1-GL2QA\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>\n\nParte 5\n\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/HZ1izoKfKRg\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>\n\n> UPDATE No dia 26 de fevereiro de 2019 subi novas versões dos vídeos, com o áudio tratado pelo Marcelino Pinheiro — muito obrigado : )",
  "canonicalUrl": "https://cuducos.me/vamos-aprender-javascript-para-separar-as-responsabilidades-do-frontend-e-do-backend.html"
}