O que é desenvolvimento Front-End e Back-End?
Quem trabalha com código é programador? Não necessariamente! Saiba mais sobre Front-End e Back-End e como diferentes tipos de código formam um site.
Web Design, Front-End, Back-End, Hospedagem… criar um site ou aplicativo parece ser bem complicado, já que esse é um processo que passa por várias etapas.
Muita gente pensa que quem faz sites necessariamente é um programador. Não é verdade, até porque sites não são feitos só de código de programação.
Isso porque há dois tipos de código: o front-end e o back-end. Se você quer entender a diferença entre os dois, continue lendo!
Índice
Código-fonte: diferenças no desenvolvimento
Responda rápido: Quem trabalha com código é programador?
O termo “código” pode ser muito mais abrangente do que parece. Isso porque não há um só tipo de código, e nem todo código é “programação”.
Sim, parte do código criado para fazer sites, por exemplo, não tem nada a ver com programação.
Podemos dividir o código-fonte de um site em duas partes fazendo uma comparação com o corpo humano:
- Uma parte é o código que faz as coisas que são vistas em um site: HTML, CSS e JavaScript, por exemplo, que são códigos que o navegador lê – esse código é o front-end. Em um corpo humano, imagine que essa é a parte da carne, músculos e esqueleto.
- A outra parte é o código que faz essas as coisas funcionarem, mas não são aparentes no site: PHP ou Java, por exemplo, que são códigos que o servidor lê – esse código é o back-end. No exemplo do corpo humano, imagine que essa parte são os órgãos.
Sentiu falta de algo nessa analogia do corpo humano?
Você sabia que escolher a hospedagem errada pode reduzir sua nota no Google, causar lentidão e até mesmo deixar seu site vulnerável para invasões e vírus?
É que a pele, os pelos, ou mesmo a roupa, por exemplo, fazem parte dos estilos visuais que são criados por um web designer, e não por um desenvolvedor.
Mas como o trabalho do web designer é aplicado em um site, então?!
Como funciona o código de um site?
Continuando com a comparação entre site e corpo humano, o que o profissional de web design cria é transformado em código pelo desenvolvedor front-end.
Por isso citei como exemplo de front-end a carne e os músculos: são recursos que não são visíveis, mas dão forma ao corpo. Então, web design e front-end estão diretamente relacionados.
Já no back-end estão as funcionalidades e ferramentas do site – daí a analogia com órgãos, como coração e cérebro. Novamente, são recursos que não são visíveis, mas fazem com que partes do site funcione.
No entanto, nem todo site precisa de back-end. No caso de sites mais básicos, sem formulários de contato e outros recursos que necessitam de uma linguagem de programação, é possível utilizar apenas código front-end.
Ou seja: não é preciso ser um programador para criar um site.
O que é Front-End?
É o desenvolvimento da interface gráfica de um site ou aplicativo, por exemplo.
O navegador lê esse código no momento em que o usuário acessa o site, traduzindo-o de forma com que o site fique navegável. Assim, em vez de códigos, o usuário vê a interface gráfica do site.
Linguagens front-end
Um profissional de Front-End trabalha com HTML, CSS e JavaScript, basicamente.
Conforme comentei no tópico anterior, não é preciso ser programador para criar um site. Isso porque:
- CSS: linguagem de estilo. É o que forma os estilos visuais do site.
- HTML: linguagem de marcação. É o que forma a estrutura do site.
- JavaScript: é linguagem de script*. No front-end, é o que dá vida à elementos de interação, como slideshows e menus suspensos, por exemplo.
*Conforme você verá abaixo, JavaScript também pode ser utilizado como linguagem de programação.
Bibliotecas e frameworks front-end
Bibliotecas e frameworks front-end são ferramentas feitas para facilitar o trabalho do desenvolvedor.
Eis alguns exemplos:
- Bootstrap: framework de CSS
- jQuery: biblioteca de funções interativas do JavaScript
- React: biblioteca JavaScript para criação de interface de usuários para sites e aplicativos
- Vue: framework JavaScript para criação de interface de usuários para sites e aplicativos
O que é Back-End?
É o desenvolvimento das funcionalidades e ferramentas de um site ou aplicativo, por exemplo.
O servidor faz a leitura desse código de acordo com a interação do usuário, como o preenchimento de um formulário ou mesmo a publicação de um texto, por exemplo.
Linguagens back-end
Um profissional de Back-End é o tal do “programador”, já que trabalha com linguagens de programação como, por exemplo:
- Java
- JavaScript
- PHP
- Python
- Ruby
- Swift
Mas não é só isso! A lista é enorme conforme você pode ver aqui.
CMSs e frameworks back-end
Assim como no front-end, o profissional de back-end também tem algumas ferramentas para facilitar seu trabalho.
Por exemplo:
- Django: framework da linguagem Python
- Ghost: CMS escrito na linguagem JS
- Laravel: framework da linguagem PHP
- WordPress: CMS escrito na linguagem PHP
O que é Client-Side e Server-Side?
Por fim, há também os termos client-side e server-side. É a mesma coisa que front-end e back-end, respectivamente – só muda o nome.
São termos mais descritivos, porque denominam melhor o que é cada tipo de desenvolvimento:
- Client-Side: Em tradução livre, significa “lado do cliente” (e cliente, na área de desenvolvimento de sites, é basicamente o navegador que o usuário está utilizando para acessar o site). Isso porque a linguagem front-end é lida pelo navegador.
- Server-Side: Em tradução livre, significa “lado do servidor”. Isso porque a linguagem back-end é lida pelo servidor.
Então, client-side e front-end são a mesma coisa, assim como server-side e back-end.
Programador ou desenvolvedor?
Há uma certa diferença entre os termos “programador” e “desenvolvedor”. Em suma:
- Desenvolvedor: Termo mais abrangente, sendo que esse profissional pode ter conhecimento tanto com front-end quanto com back-end, além de realizar tarefas em todas as etapas de um projeto.
- Programador: É o profissional que trabalha com back-end, normalmente especialista em uma linguagem de programação.
Ou seja: um desenvolvedor pode ou não ser programador também.
Eu, por exemplo, sou desenvolvedor. Tenho experiência com web design, front-end e back-end também (essencialmente WordPress).
Minha especialidade é com desenvolvimento front-end. Então, não me considero um programador, já que a maior parte do meu trabalho com back-end é com WordPress. No máximo, sou um “programador WordPress”.
Créditos das imagens: Freepik e sites citados.
Tire suas dúvidas
Entendeu as diferenças entre front-end e back-end? Se tiver dúvidas, confira o FAQ abaixo ou então deixe um comentário!
O web designer é o profissional responsável pela interface gráfica do site, se limitando a trabalhar na criação de layouts. No entanto, o web designer pode ter conhecimentos com front-end o suficiente para criar sites que não demandam trabalho de programação.
A diferença entre biblioteca e framework é: biblioteca é um pacote com funções prontas; já o framework é um conjunto de bibliotecas.
A diferença entre CMS e framework é: CMS (sigla para Content Management System, ou sistema de gerenciamento de conteúdo) é uma aplicação para gerenciar conteúdo em plataformas digitais de maneira personalizada; já o framework é um conjunto de funções prontas para construir sites e aplicativos.
52 comentários até o momento
Estou no inicio dos estudos de PHP, mas minha pretensão e FRONT-END, é necessário aprender esta linguagem ou é perca de tempo, o curso que vou começar é uma facada, me da esta dica. Muito obrigado!
Não é perder tempo não! É muito importante ter, ao menos, uma base dessa linguagem de programação. ;]
Devido a sua pretensão de ser Front-end, se você estudar mais Front-end do que PHP, não é perca de tempo não!
Olha realmente são boas dicas, mas não achei correto em falar que Javascript não é uma linguagem de programação! Isso não tem lógica. Tem tudo que outras linguagens possuem.
Javascript linguagem de programação representada como script essa é a real! E claro que uma pessoa que utiliza essa tecnologia é um programador!! Programador Javascript!
Mas a matéria está muito bom!! Show.
Javascript é linguagem de programação sim, e como dito pelo autor do post, é uma linguagem de script. A diferença das muitas outras linguagens é que ela é interpretada e não compilada, e funciona como client-side. Apesar de uma linguagem mais “simples”, ela sem dúvida é crucial para a interação com os objetos do navegador (quando falamos de aplicações web based).
É uma linguagem de programação de tipagem dinâmica, segue o padrão ECMAScript…. É uma lingaugem de programação estruturada, disso não há dúvida.. Podemos entrar em outras definições, como “linguagem funcional”, mas daí falariámos da filosofia e de paradigmas em vez da funcionalidade pratica da linguagem. Outra coisa, é que falar que javascript roda no client-side foi o dia… Vide NodeJS
Concordo com vocÊ amigo. Claro que é muito utlizada para construção de layout mas é uma linaguagem de programação sim.
Estranha e errada essa diferenciação que o autor faz entre javascript e as demais linguagens de programação. Javascript é uma linguagem como qualquer outra. O fato de ser interpretada não faz qualquer diferença (inclusive, todas as linguagens citadas também são interpretadas).
Hoje em dia, existem sites, aplicações e jagos inteiros feitos com javascript. Com node.js, por exemplo, podemos fazer coisas bastante poderosas com essa linguagem
Não entendi por que alguns “pegaram no pé” com minha citação sobre JavaScript no post. Primeiro que em momento algum eu afirmo que JS não é linguagem de programação; segundo que eu fiz esse post para diferenciar, de forma resumida e para leigos (principalmente para quem pensa que quem faz sites é programador), o que fazem os profissionais de front e back end. É um post básico para dúvidas básicas.
Discordo quando diz que JavaScript não é uma linguagem complexa, pelo simples fato de que algumas pessoas por saber fazer “FadeIn()” e “FadeOut()” em jQuery dizem que sabem JavaScript, NÃO SABEM!!! JavaScript é uma linguagem complexa SIM, com ela é possivel montar toda uma página utilizando DOM, que alias é umas das técnicas mais utilizadas pela Google. Técnicas como AJAX são essenciais para o desenvolvimento de um bom website, e só podem ser utilizadas da melhor forma a partir do momento que se conhece JavaScript em sua integridade. Tambem podemos citar o JSON, que é umas das principais formas de comunicação entre Back e Front, sem falar que não adianta nada o Front programar jQuery sem ao menos conhecer como funciona uma estrutura DOM…. Não estou dizendo que o JavaScript trabalha sozinho em um site, pois se fosse assim não era necessário um Back-End correto, mas JavaScript é uma linguagem essencial para ser um bom desenvolvedor Front-End. Um Front-End não é um desenhista, é um programador, ou vocês acham que é facil fazer um bom slider ou um bom efeito DINÂMICO sem saber logica e sem usar “Códigos prontos”!!!
Por fim dou a seguinte dica:
Se você que ser um bom desenvolvedor Front, estude lógica, estude JavaScript e estude padrões web, seguindo isso você será um bom profissional e vai conseguir resolver muito mais problemas do que um cara que usa slider pronto e não sabe como funciona um clone!!!
Boas observações, Anderson. Concordo completamente, principalmente na parte dos scripts prontos: é exatamente como o cara que “sabe mexer no photoshop” e se diz designer. A ideia de estudar, correr atrás do conhecimento e de que softwares são só ferramentas é algo que eu sempre defendo aqui no blog, comentários assim são inspiradores.
Só um adendo: Eu não disse que Javascript não é uma linguagem complexa. Bom, pelo menos eu não quis dizer isso. No texto, eu apenas diferencio Javascript de Java, algo que muitos leigos não sabem. No comentário acima, eu quis dizer que Java tem maior complexidade que JS (Ou seja, aparentemente acabei me expressando mal porque faltaram palavras melhores para descrever – tem alguma sugestão para dar uma explicação básica de forma didática? O foco desse post é justamente o pessoal que não entende do assunto e está buscando conhecimento, então eu sempre tento usar comparações e explicações mais didáticas.), mas é algo que realmente está dando assunto nos comentários. Felizmente dessa vez veio um com conteúdo.
Valeu! ;D
Meu nome é Tiago e estou iniciando em programação php, gostei muito do post.
Abraços
Meu nome é Bruno, trabalho como programador back-end (2 anos).
Parabéns pelo blog !
Valeu! :D
Gostaria apenas de complementar que em algumas ocasiões o front-end acaba sendo tão importante como back-end mas com funções diferentes, pois num mundo de aplicações web tão complexas não se pode apenas delegar todas as ações ao servidor. Portanto com o aumento da complexidade tanto e das aplicações voltadas à web é necessário que o especialista nessa área se aprimore ainda mais até mesmo por conta de tornar o seu trabalho mais produtivo.
É bom ressaltar que não estou desmerecendo o profissional de back-end e na verdade acho que os dois devem cada vez mais trabalhar em conjunto e acho que esse processo gera até mais oportunidade para esse profissional de back-end tendo em vista o fato de ele ja possuir uma experiência poder trabalhar nas duas camadas.
E por ultimo fica a dica a sempre gosto de mencionar que temos vários recursos de back-end, mas que uma das bolas da vez é justamente o front-end aja vista o novo html 5 que vem com inúmeros recursos para tornar a web mais dinâmica e então devemos estar atentos que a internet não é uma rede morta e estática ela vem mudando e com isso ela deixa disponível um leque de possibilidades para que quer trabalhar com ela resta apenas aproveitar as oportunidades.
Boa!
Muito bom o post, esclarece bem para os iniciantes da área.
Esqueceu de citar o C# como exemplo de linguagem. ='(
Muito bom da sua parte colocar foto ali em cima e citar a fonte e a tirinha deu um humor ao post.
Vou visitar mais o blog.
Show de bola.
Parabéns.
Valeu, Bruno! Confesso que não atualizo muito o blog, mas quando o faço, faço com empenho!
Eu sou dos que gosta de desenvolvimento backend, nada de dev de interface gráfica(apesar de ser divertido). Gosto de trabalhar com algoritmos, performance e programação em um nível mais baixo.
Bom, acho que todo frontend passa por situações iguais! Por Exemplo: Começamos mexendo no photoshop( e dizemos que somos designers) , depois aprendemos HTML e CSS ( e dizemos que fazemos sites) e consequentemente aprender a utilizar frameworks javascript(jQuery, Bootstrap, etc). Lendo alguns comentários deste ótimo post, percebi a mentalidade de várias pessoas, e acabo concordando com alguns deles.
Sabemos que existem classes de frontends, Junior, Pleno e Sênior, então denominamos que FrontEnd Junior, não sabe muita coisa, usa quase sempre tudo pronto da internet, o Pleno por sua vez, já começa a criar seus widgets,plugins javascript puro e etc, e o Sênior já começa a utiliza Design Pattern JS, Backbone, Angular e etc, então chegamos a conclusão que o FrontEnd Mesmo é quando ele chega no nivel Sênior, onde ele cria tudo que precisar sem necessidade de pesquisar no ‘google’..
Bom acho que é isso!
Thadeu, é por isso que os níveis fazem sentido. Porque se a gente não dividir entre trainee, júnior, pleno, sênior etc, tecnicamente quase ninguém pode ser chamado de FrontEnd, BackEnd, Designer e por aí vai.
Aliás, como você citou “sem a necessidade de pesquisar no google”, podemos chegar à conclusão de que não existem profissionais de qualquer área no mundo inteiro, já que constantemente o Google é usado independente do nível de experiência do profissional.
Eu uso o Google até pra saber se estou escrevendo corretamente alguma palavra/sentença – seguindo seu raciocínio, eu não sou alfabetizado! :D
Excelente post, Fábio Lobo. Sucinto e, ao mesmo tempo, claro. Procurei muito por uma definição dessas.
Obrigado, José! :D
Bom, acho que Front e Back-End não se comparam, são visões diferentes, por se dizer que alguém que mexa com front não é programador não esta desvalorizando ateh pq são só formas de dizer, pois os dois mexem com códigos porém em áreas distintas e formas completamente diferentes!
Excelente post, Fábio Lobo. Foi a melhor definição que já vi, deu para esclarecer melhor minhas duvidas.
Que bom, Bruno! :D
Muito bom essas suas dicas !!! Parabéns pois esclareceram as minhas dúvidas !!!
Valeu, Henrique!
Cara o seu texto encontrei por acaso, mas é um texto simples e legal, parabéns, porém vc teve um baita erro em dizer que javascript não é uma linguagem de programação, a não ser que vc fez isso premeditado para criar um certo reboliço, rsrs. Olha sou bem mais conhecedor de PHP do que javascript, porém o javascript é uma linguagem que evolui muito, chegando inclusive no mundo mobile devido a Open Web Platform, então ela ainda vai crescer mais ainda.
Lembrando que muitos programas hj são escritos com javascript, seja ele puro ou com framework por exemplo Extjs.
Tb pela data do primeiro comentário, mas não sei se o artigo foi escrito em 2011, já existia o Node.js, que hj já está mais maduro que nessa época e é javascript server side, então hj o javascript é, guardada as suas devidas proporções, o que linguagens como java, python e c++ são em estar em várias plataformas.
Valeu, Rafael! Mas confesso que desde 2011 estou procurando no texto algo que diga que javascript NÃO é linguagem de programação! :D
“…desde 2011 estou procurando no texto algo que diga que javascript NÃO é linguagem de programação!”
auhahuahahaua agora eu ri viu!
Hahaha! :D
Você diz que não é uma linguagem de programação quando você afirma duas coisas:
1 – JavaScript é uma linguagem de script –
Você diferencia todas as linguagens que supostamente não são programação apenas colocando-as como outras linguagens, como “linguagem de estilo” e “linguagem de marcação”, logo colocando-a como “linguagem de script” a exclui do grupo de linguagens de programação.
2 – Dizendo que quem é back-end sim que é programador –
Ou seja, quem estava na outra categoria não é, quem já foi citado não é programador, logo, quem mexe com JavaScript não é programador, JavaScript não é uma linguagem de programação.
Mesmo que tenha sido sem intenção você afirmou que JavaScript não é uma linguagem de programação, espero que tenha dado pra entender hehe
Opa! Sua resposta foi mais completa, obrigado. Só que em back end eu coloquei “e JavaScript também”. De qualquer forma, fiz um ajuste de leve na parte do front end, acho que agora tá mais claro.
Valeu!
parabéns Fabio, post inteligente. Realmente vc resumiu bem as funções de cada um dentro do processo. A questão é que ANTIGAMENTE, era apenas 1 pessoa que fazia TUDO. Hoje a coisa mudou, graças a Deus (rs).
Sobre o Javascript, quem programa em linguagens do tipo PHP, C# e Java, sempre dirão que JS não é linguagem de programação, mas sim de scripts, afinal ela até faz a função de outras linguagens, mas é MUITO RARO (se não for impossivel) se fazer um site INTEIRO de JS (eu nunca vi nenhum)
Valeu, Daniel!
Sobre JS, acho que é uma linguagem bastante usada para fazer apps (não sei bem ao certo, mas acredito que deve ter app só com js).
tirou muitas duvidas minha e ja deu uma ajudinha extra para escolher oque quero fazer da vida.
Legal! :D
Boa, tudo está bem claro!!
Só mencionar que o post está incrível e inspirador. É estimular certos tipos de críticas e comentários em posts assim, pois leigos como eu acabam aprendendo mais sobre alguns assuntos (especialmente comparações entre linguagens, eu acho muito importante saber diferenciá-las) que não vejo outros sites publicando.
Obrigado, abraço! espero mais posts assim explicando termos usados por profissionais da área e diferenças e relações que podemos estabelecer entre as diversas linguagens(ou pelo menos as que estão em alta).
Valeu, Mauricio! O tempo tá bem escasso, mas vou tentar escrever mais posts em breve!
Parabéns pelo post, muito bom mesmo ;)
Valeu, Diana! :D
Mto bom, esclareceu bastante, obg
Olá, pessoal.
Eu gostaria de fazer um comentário na tentativa de melhorar o que está escrito.
Sou analista de sistemas há mais de 20 anos. E ultimamente tenho percebido que algumas pessoas estão mudando o sentido de back-end e front-end.
O front-end de um sistema não é apenas tela, mas sim, toda a funcionalidade que o cliente tem acesso. Nessa funcionalidade teremos designers fazendo as telas e os desenvolvedores fazendo o código. O back-end são funcionalidade voltadas para a manutenção do sistema, por exemplo a área de administração do site, ou seja, front-end e back-end não têm nada a ver com a função do profissional mas sim com à quem se destina a funcionalidade do sistema, ao cliente, usuário (front-end) ou ao administrador (back-end).
Abraço
Bom dia.
Irei simplificar minhas perguntas para não ficar uma coisa gigante:
Programador Back-end precisa aprender basicamente PHP, MySQL e (não obrigatório) Javascript?
E gostaria de saber na opinião de vocês, qual é mais difícil de se tornar:
Back-end ou Front-end ?
Obrigado!
Jonatas, só dei alguns exemplos de linguagens de programação que um Back-end pode aprender. Você deve pesquisar a linguagem que mais te agradar, independente se front ou back, e começar a estudar!
Cara depois de tantos anos da publicação, estou aqui para comentar no seu BLOG.. Vamos lá… Até um dia atrás eu achava que pra ser um bom profissional eu precisava saber os dois, Front-End e o Back-End, mas pelo que li não é bem isso… Claro, se eu for fazer um site pequeno pro meu vizinho eu vou precisar entender um pouco de cada coisa, mas assim, no mercado de trabalho eu posso tranquilamente ser especialista em um dos dois nichos certo? Eu já estava coçando a cabeça com a quantidade de coisa que eu precisaria aprender, achando que teria que saber os dois pra arrumar um trampo…
Douglas, você não precisa saber dos dois mesmo. Se especializa em um e tente pelo menos ter uma noção de como o outro funciona.
Nossa, ótima explicação! Muito obrigado por tirar esta dúvida. Gostei do modo simples e direto com o que tratou a questão.
Abração e tenha uma ótima semana!
Obrigado, Marcos!
O que você falou é verdade. Qualquer pessoa que se DEDIQUE consegue dominar o HTML5 e CSS3. Apesar de não ser linguagens complexas, ainda sim da trabalho para aprender do jeito certo. Tem que ter dedicação e muita prática. O JavaScript, minha querida e amada linguagem de programação abre um mundo de possibilidades. Posso fazer de tudo com ela, incruzive um game ou que eu imaginar. Agora ela está no Back-end tbem, o que é muito animador. Sou um desenvolvedor Front-end, mas me considero um programador por causa do JavaScript. Posso fazer sistemas complexos utilizando apenas JavaScript. Antes mesmo de aprender o JS, tive que adentrar em lógica e algoritmos pra fazer do jeito certo. Acredito que muitos “profissionais” que sabem apenas o Jquery se atrapalham todo quando precisam fazer algo além. Amo programar e sou sim um programador JavaScript. Acho que você estava se reverindo, quando citou o design aos Web Designers, já que eles só precisam, geralmente, fazer o design do site. Coisas mais complexas ficam com o Front-end. A programação que sustenta o site no servidor fica com o Beck-end.