Categorias

Newsletter

  • http://chocoladesign.com/wp-content/uploads/2014/04/cover.png
    Coding

    Frontend vs Backend

    Conhecendo melhor os dois mundos dos programadores e diferenciando o frontend do backend.


    Quando se trata de desenvolvimento (development), existe duas vertentes que separa métodos, linguagens e tipos, de diferentes ramificações que englobam o contexto de programação. Essas duas vertentes são conhecidas por frontend e backend, assuntos distintos porém se comunicam afim de formar um produto final: seja um site, um aplicativo ou uma aplicação. Vamos conhecer um pouco de cada um deles.

    front-back

    Olá, Mundo!

    Tudo que você vê na internet, no seu celular, tablet, sites, aplicativos e jogos é o resultado de um componente só: O front. E não apenas isso: o UX está totalmente ligado ao front assim como totalmente ligado ao back, sendo este uma ponte de 3 rios que liga a programação grosseira que faz o componente, a programação visual que exibe a ação e a interação final que depende do usuário para funcionar. Um exemplo: “Deslize para baixo para carregar”. Essa função presente em apps como iOS mail e twitter é um digno exemplo dessa ponte de três rios, feita pelo UX. Para que o usuário deslize o dedo para baixo, ocorrendo uma animação da flecha que magicamente vira uma engrenagem girando é necessário um estudo em UX e uma programação frontend que dá sentido ao efeito visual. Entretanto, enquanto você se delicia com o efeitinho bonito, o sistema por trás está se matando pra executar centenas de linhas de código, afim de processar o resultado do que você está operando. Isso é o trabalho do backend.

    "swipe down to refresh" é um bom exemplo de UX que o frontend exibe. fonte da imagem: iphonehacks.com

    “swipe down to refresh” é um bom exemplo de UX que o frontend exibe. fonte da imagem: iphonehacks.com

    O frontend é então, tudo que você consegue ver. Isso engloba o layout e programações de altíssimo* nível, como HTML**, CSS*** e Javascript. Normalmente, CSS e Javascript (JQuery**** na maioria dos casos) são as linguagens responsáveis pelos efeitos visuais nos sites como movimento de botões, slider, zoom, mudança de cores, gradientes e objetos que rodopiam, entre outros.

    * Pra não confundr I: Linguagem de alto nível é considerada aquela que tem uma sintaxe mais próxima da linguagem humana e bem diferente da comunicação de máquinas. Linguagens de alto nível são: PHP, C, Python, Ruby, entre outras. HTML e CSS não se enquadram nesses padrões, por isso usei o termo “altíssimo” em fator ilustrativo 🙂
    Pra não confundir II: Linguagens de alto nível também são usadas em backend.

    ** HTML não é de fato, considerada uma linguagem de programação, sendo uma linguagem de marcação (HiperText Markup Language).

    *** CSS (Cascading Style Sheet) é uma linguagem declarativa (Declarative programming).

    **** JQuery é uma biblioteca compilada designada ao uso de JavaScript, não é uma linguagem independente! Javascript também difere de Java, sendo Java uma linguagem backend.

    $message = “Olá Mundo!”;

    A explicação mais simples e resumida para programação backend é compará-la com o motor de um carro. Você não o vê, mas sabe que funciona. Você não sabe qual pistão está sendo empurrado pela explosão no tempo certo, mas sabe que está saudável porque o carro está andando normalmente. Especialistas em motores podem identificar com alguns auxílios qual pistão teve atraso de movimento. Esta análise a olho nu da mecânica, é o nosso querido Firebug ou Inspector no mundo dos devs.

    Backend consiste basicamente em 3 partes: Um servidor, uma aplicação, um banco de dados. Se você faz uma compra online, durante as telas do processo de compra, muita coisa está acontecendo por trás: dados sendo processados, requisições chamando e consultando o banco de dados, linhas e linhas de código sendo processadas, arquivos sendo carregados, tudo invisível a “olho nu”.

    Detalhando as três partes:

    Servidor: É a casa. Onde fica hospedado os arquivos do projeto, onde possui todas as tecnologias necessárias para computar tudo, desde programação backend para ser interpretada até o mais alto nível que será exibido ao usuário.

    Aplicação: O projeto em si.

    Banco de dados: Há casos que dispensam, mas quando há o conjunto é necessário um banco de dados que armazena, organiza e informa o código sobre o que será exibido e/ou processado. o PHP é uma das principais linguagens que funciona como ponte de comunicação entre o banco de dados e a ação final, exibida ao usuário e podendo ser manipulada por ele.

    O programador backend faz o lado grosseiro do projeto, o motor, projeta as engrenagens que ninguem vê, mas que dá sentido ao que está sendo exibido. E a indústria do café agradece!

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.


    • skroski

      Tem muitos clientes que precisam saber a diferença, designers gráficos também deveriam se aprofundar e entender melhor os 2 mundos.

    • luisfelipelino

      Legal o artigo. Uma aprofundada no assunto com mais detalhes sobre cada um dos profissionais envolvidos seria interessante.

      A web está evoluindo, ficando mais complexa, as profissões estão se especializando e se ramificando em novas profissões, mas várias empresas e pessoas ainda não entendem que os profissionais cada vez estarão menos aptos a serem o “faz-tudo” por conta da complexidade e proporção dos projetos.