Front end primeiro ou Back end primeiro. Dos dois quais é uma boa prática de design de sistema?

30

No momento, tenho um cliente exigindo que eu desenvolva um sistema de matrícula escolar. Agora, esta é a primeira vez que estou enfrentando esse tipo de desafio. A maioria dos softwares anteriores que eu criei não é tão complexa.

Eu sei que a maioria de vocês criou softwares complexos, só quero seu conselho sobre isso. Devo projetar primeiro o front-end ou back-end?

obrigado!

Aqui está a conclusão de um artigo que encontrei na Internet há um tempo atrás. Apenas quero compartilhar

http://www.skitoy.com/p/front-end-vs-back-end-developers-my-take/157

Desenvolvedores front-end vs. back-end (minha opinião)

Minha opinião pessoal

Novamente, é uma questão de treinamento, algumas generalizações gerais de AVC:

Desenvolvedores front-end

  • Normalmente, não tem um diploma de nível superior ou possui uma graduação em uma escola de 3ª série.
  • Trabalhe em linguagens semelhantes às básicas (consulte PHP é Básico)
  • Tem uma habilidade visual na conversão de documentos do photoshop para CSS / HTML / etc.
  • Tem uma alta tolerância para programação iterativa, devido a linguagens livres de tipo

Desenvolvedores de back-end

  • Ter um diploma de CS ou muita experiência
  • Tendam a mim de forma mais sistemática na abordagem de resolução de problemas
  • Não se importe de passar dias encontrando o único objeto que está vazando
  • Experimente e crie ferramentas para resolver problemas
drexsien
fonte
2
smh, essa é a razão pela qual digo às pessoas que sou desenvolvedor de software versus desenvolvedor web.
pllee 30/05
10
O que essas generalizações sobre os desenvolvedores de front-end e back-end têm a ver com a questão?
precisa saber é o seguinte
Front End Dev! = Back End Devs, embora na maioria das vezes, as transições entre eles continuem.
Abhinav Gauniyal
Eu acho que a única resposta válida aqui seria 'Depende ...' #
Oliver Weiler #

Respostas:

43

Se você começar por trás e seguir em frente, corre o risco de entender mal o cliente. Como você criará coisas que eles não podem ver e compreender facilmente, eles não poderão participar com muita facilidade para verificar se você atende aos requisitos. Isso significa que você pode desperdiçar muito trabalho.

Se você começar pela frente e recuar, corre o risco de o cliente achar que está quase pronto, quando tudo o que você fez foi desenhar um formulário simples na tela. Eles podem então questionar por que está demorando tanto, já que você o terminou em alguns dias. Você também corre o risco de se encurralar quando percebe que precisa fazer um trabalho complicado para casar de frente para trás, quando um front-end mais adequado seria mais simples.

Na IMO, você deve trabalhar nele primeiro. Escreva o front-end e o back-end juntos, para cada recurso no sistema. Isso dá ao cliente uma maior visibilidade do progresso e oferece a oportunidade de dizer "não, não foi isso que eu quis dizer", sem causar muito sofrimento a você.

Dito isto, se este é um projeto muito grande no qual você precisa considerar o hardware do servidor ou os recursos de qualquer software em que você confia (por exemplo, em qual banco de dados você está usando), provavelmente você deve pensar bem sobre essa parte primeiro.

Paul Butcher
fonte
Eu acho que é uma explicação mais concisa. Mas seria melhor fazer o back-end primeiro porque acho que é mais fácil criar o front-end se você tiver um back-end bem estruturado.
precisa saber é o seguinte
3
Se eles acham que o front-end é tudo, você poderia mencionar Google ...
l0b0
1
É por isso que você deve criar uma GUI de maquete que você mostra ao cliente e dizer "É isso que você deseja que o programa faça?", E uma vez resolvido, jogue-o fora e comece a criar o back-end.
gablin
1
+1. @andsien: Se você já teve sua opinião, por que perguntou? Para minha experiência, Paul está certo, o desenvolvimento orientado a recursos é quase sempre a melhor estratégia.
Doc Brown
3
@andsien: "é mais fácil criar o front end se você tiver um back end bem estruturado". IMHO que é um mal-entendido perigoso. O problema é: você não sabe se o seu back-end está bem estruturado até usá-lo para criar recursos para o front-end.
sleske
9

Existem muitas dimensões para o software, portanto, uma frente-verso excessivamente simplista é uma pergunta ruim e é muito, muito difícil de fornecer uma resposta sensata e útil.

Uma visão é a estrutura estática dos dados. Há pelo menos três dimensões nessa visão: camadas arquiteturais ("frente para trás"), casos de uso e atores, bem como custos ou riscos de implementação.

Uma visão é a estrutura dinâmica do processamento. Há pelo menos três dimensões nessa visualização também.

Uma terceira visão são os componentes arquiteturais, que caem naturalmente em camadas, suportam casos de uso e apresentam custos e riscos.

Eu poderia continuar, mas o ponto é este.

Desenvolvedores front-end vs. back-end (minha opinião)

É aproximadamente a maneira menos útil de analisar o problema. Os desenvolvedores reais - e suas opiniões sobre eles - importam muito, muito pouco aqui. O que importa é

  • Casos de uso e atores

  • Modelo de dados lógicos para suportar esses casos de uso

  • Processo feito como parte do caso de uso

  • Componentes que você usará para criar os elementos lógicos e de processamento do caso de uso.

É por isso que a maioria das pessoas diz que você precisa decompor seu sistema pela história do usuário ou pelo caso de uso.

Não faça generalizações gerais sobre pessoas que farão desenvolvimento.

S.Lott
fonte
7

Nem. O que seu aplicativo precisa ser capaz de fazer? Certifique-se de que a válvula quente forneça água quente, a válvula fria forneça água fria, que a água flua em primeiro lugar, que você possa estender os tubos sempre que necessário e depois se preocupar em implementar o encanamento real em todos os cômodos da casa ou o que a casa irá oferecer. realmente parece exatamente.

O front end é apenas uma máscara com alguns interruptores e alavancas. O back-end é apenas uma coisa que recebe solicitações para recuperar e processar dados. Chegue a um ponto em que você pode implementar rapidamente ambos em qualquer combinação desejada primeiro.

Mas faça o que fizer, não deixe que o design de um dite o design do outro. Dessa forma, a loucura está.

Instale as ferramentas para permitir que seus desenvolvedores construam o que for necessário para o seu cliente, independentemente de quantas vezes eles mudem de idéia. Em seguida, construa-o de acordo com as especificações e redigite-o até que os pequenos xingamentos estejam finalmente felizes.

Além disso, comparar os desenvolvedores de front-end com os de back-end em 2008 já faz muito tempo nos anos da web. Por uma questão de diversão, eu gostaria de corrigir / adicionar algumas coisas a essa velha castanha, já que a vinculamos na pergunta, mas também (espero) incorporar algumas dicas:

Desenvolvedores front-end

Normalmente, não tem um diploma de nível superior ou possui uma graduação em uma escola de 3ª série.

Mostre as mãos. Quantas pessoas com formação em CS aprenderam as melhores práticas no front-end? Ou como não mexer no JavaScript? Ou como lidar com problemas de CSS no IE6-IE9? A indústria de livros didáticos, que administra a academia, é muito preguiçosa e inchada para lidar com a constante mudança da tecnologia, de modo que recebeu muito pouca atenção "séria" nas faculdades. Isso tem sido excelente para quem está atrasado como eu.

Trabalhe em linguagens semelhantes às básicas (consulte PHP é Básico)

Porque o PHP é uma tecnologia do lado do cliente? Ou porque o JavaScript, que foi inspirado principalmente pelo Scheme, tem mais em comum com o Basic do que com o Visual Basic, que agora não é mais uma preocupação constante no front end e nunca foi realmente, mas ainda está disponível para aplicativos da web .NET de back-end? O blog compara desenvolvedores da web de código aberto autodidatas com desenvolvedores da web graduados em CS usando tecnologia popular corporativa neste momento, eu acho. Eu me deparei com insuportável e competente em partes iguais de ambos os lados daquela luta em particular, mas ele ainda está no fim.

Tem uma habilidade visual na conversão de documentos do photoshop para CSS / HTML / etc.

Mais atenção aos detalhes do que "habilidade visual", que é um pouco ampla. Nem todos temos habilidades de design estético. Mas sim, a maioria de nós precisa aprender essas coisas no nível Jr. e é realmente bastante crítico escrever uma boa interface do usuário que não use martelos JS quando os bisturis CSS o farão.

Tem uma alta tolerância para programação iterativa, devido a linguagens livres de tipo

É por isso que você deseja que as peças que mencionei anteriormente sejam substituídas primeiro. Passamos os botões pressionados, você produz / recupera a mercadoria. Nós empacotamos e entregamos. Não há razão para essas coisas estarem intimamente ligadas umas às outras. Além disso, na verdade, a digitação estrita não deve interferir com um processo iterativo, se você não gosta do OOP, o que a maioria das pessoas que gosta de se gabar de um idioma que não tem aulas tecnicamente, de fato, costuma fazer. Mas, mesmo que cheiram mal, o front-end precisa apenas de um ponto de acesso previsível e você pode fazer o que quiser no back-end, desde que não faça algo bobo como escrever dinamicamente JavaScript que não seja JSON ou vincular firmemente o comportamento bem-sucedido do back-end à estrutura HTML, sendo "apenas isso". * tosse * Java Devs * / tosse *

Erik Reppen
fonte
Meu único arrependimento é não poder marcar sua pergunta com +1 mais de uma vez. É uma pena que eu tive que rolar para baixo duas respostas a esta pergunta para finalmente encontrar a que afirma que perguntar sobre a ordem em que a frente e as costas e deve ser desenvolvida é a pergunta errada a ser feita. Também concordo com a sua opinião sobre o grau CS. E a observação final dos "atrasados".
Shivan Dragon
5

Não existe uma única resposta certa para isso. Qualquer abordagem pode ser boa (e ruim) em determinadas situações.

Eu recomendo que você considere a abordagem TDD, na qual uma pessoa é liderada por testes (aceitação e unidade).

Comece montando um esqueleto do sistema: a infraestrutura básica, com a funcionalidade mínima absoluta. Isso é apenas para mostrar que seu conceito funciona e os diferentes componentes são capazes de trabalhar juntos. Isso também inclui uma interface simples (se aplicável), apenas o suficiente para realmente fazer e / ou mostrar algo mínimo.

Depois, você detalha os detalhes, recurso por recurso : escreva um teste de aceitação para um recurso / cenário específico, faça-o falhar e depois escreva um código para satisfazê-lo. Isso faz você trabalhar de dentro para fora : o sistema recebe alguma mensagem de entrada; portanto, você precisa manipular / converter essa mensagem, fazer alguma coisa com ela e depois propagar os resultados de volta para a interface do usuário. No caminho, você descobrirá os conceitos de domínio e os representará com novas classes, da interface do usuário para a camada de domínio e vice-versa.

Para essa abordagem, uma leitura recomendada é Crescer software orientado a objetos, guiado por testes .

Péter Török
fonte
1

API primeiro

Os engenheiros de ambas as equipes devem trabalhar juntos na API entre o front-end e o back-end. Em seguida, ambas as equipes podem começar a trabalhar com base na API projetada. Isso tem a vantagem de que outra equipe de front-end também pode iniciar o trabalho (talvez móvel, após o cliente da Web), além da vantagem óbvia de que as equipes podem começar a trabalhar em paralelo.

Combine com uma abordagem iterativa e deve ficar assim:

  1. Crie uma API simples
  2. Ambas as equipes desenvolvem e testam com base na API
  3. Teste de integração
  4. Mostre ao cliente e receba feedback.
  5. Melhore a API e repita.
m3th0dman
fonte
0

Comece com o frontend, mas primeiro, por que eles não conseguem encontrar um aplicativo que já existe? Isso daria mais algumas dicas sobre este projeto. Eles têm alguns requisitos exclusivos ou acham que você pode construir mais barato?

Obtenha uma compreensão completa das expectativas de segurança e do que a lei exige. Não tenho certeza de que tipo de escola é essa, mas as informações dos alunos geralmente exigem alguma confidencialidade.

Se os possíveis alunos estiverem inserindo os dados em um site, o design gráfico será mais um problema.

Com base em suas solicitações, desenhe maquetes do front end. Se você acha que o gui não é direto, talvez seja necessário tornar algo funcional, para que ele possa vê-lo em ação. Eles podem ver a inscrição como algum tipo de 'assistente' que se ramifica em direções diferentes, com base na entrada de dados.

Em seguida, você pode começar a obter informações persistentes no banco de dados.

JeffO
fonte
1
o problema em começar com o front-end (com base na experiência) é que quando você se esquecer de algumas funcionalidades, que pode mexer o seu back-end e pode acabar lo circulando em torno de tentar corrigi-lo
drexsien
1
@andsien - você está falando sobre projetar ou construir? Eu não começaria a criar um front-end sem antes projetar o back-end.
JeffO 8/03
ops minha culpa estou pensando em construir ... obrigado por esse jeff.
drexsien
0

Sim, eu percebi que o OP pediu um tempo atrás. Comece pelo back-end, mas MOCK UP do front-end para permitir que o usuário veja o que você imagina. O front end, pelo que vale a pena, são apenas os sinos e assobios. O back-end é onde está o dinheiro, e uma vez que você entenda bem, o FE é apenas o molho sobre a carne.

Fabasard
fonte
Infelizmente, é o que os clientes querem, normalmente, mas acho que esse comportamento deve ser desencorajado. Não os deixe pendurados no visual e permaneçam com a aparência do seu protótipo até que possam verificar se estão obtendo o comportamento básico que desejavam. Muitas vezes, os clientes não conseguem separar os colírios dos recursos úteis e gastam muito tempo com as coisas menos importantes para culpar você quando o aplicativo falhar em sua intenção final a longo prazo.
Erik Reppen
@ErikReppen Eu já tive essa experiência muitas vezes - queria mostrar ao cliente "o usuário inserirá dados em um campo de texto" e o cliente vê "o campo do formulário terá exatamente 400 pixels de largura e a página terá um azul claro background with Arial 11pt text ... "Mas ainda acho que é melhor do que nunca demonstrar um front end. Caso contrário, é possível construir um sistema inteiro que entre em conflito com alguma suposição não declarada em seu caso de uso principal.
outubro
Você pode demonstrar um front end, mas mantenha-o claro e simples. Afaste-os da tolice exata do photoshop, a menos que seja assim que eles exigem que seja vendido a eles. E é aí que reside o problema. É o que eles esperam, mas na maioria das vezes são idiotas demais para priorizar pixels de "realmente fazem nossos clientes fazerem o que gostaríamos que eles fizessem".
Erik Reppen
errr, não é por isso que temos CSS? (embora eu não sinto sua dor). Eu sempre e deliberadamente tenho uma FE feia, mas funcional, e deixo claro que estamos discutindo casos de uso, fluxo de trabalho ... e posso fingir isso mais tarde. (mas a verdadeira resposta é Requisitos-> database-> FE)
MAWG
0

Expandindo meu comentário:

Primeiro reúna os requisitos e depois transforme-os em Casos de Uso e design.

Primeiro, vem uma definição detalhada do banco de dados. Eu não me importo se o cliente não o entender totalmente, forço-o a sentar e olhar para ele - e assino (possivelmente forçando-o a perceber que uma vez que seus caras mais experientes em tecnologia deveriam fazê-lo) ), antes de proceder.

Como você pode começar com FE, sem BE? FE para quê ??? Defina seu banco de dados !! Isso é o que a FE manipula.

Ok, não haverá problemas e ajustes posteriores, e eu fazer concordam que é bom para obter um simples, amostra, GUI na frente do cliente o mais rápido possível, uma vez que a ponta particular do iceberg é o que mais mais entender.

No entanto, eu 1) enfatizo que isso é apenas uma simulação grosseira, para botos de discussão, e 2) deliberadamente a torna feia, mas funcional , para que aqueles que não entendem possam escolher e me pedir para fazer exatamente essa caixa de entrada 400px largo e o fundo azul claro.

Descobri que a maioria das respostas aqui (e as segui) tende a se concentrar muito no cliente, mas, de um ponto de vista puramente s / w, afirmo que você não pode criar um FE para manipular um BE sem primeiro projetando esse BE.

Mawg
fonte
"você não pode projetar um FE para manipular um BE sem antes projetá-lo". Ah, sim, você pode - isso é chamado de "protótipo". Pode ser um primeiro passo valioso ao iniciar um novo sistema.
sleske
o que é prototipagem? Sem guerra de chamas, apenas surgiu na minha cabeça. Eu entendo o que é um protótipo, mas talvez porque eu vim de um campo diferente, eu sempre o veja como: obtenha os requisitos, transforme-os em casos de uso e design. Se você não tiver o d / b pregado, fará muita coisa para retrabalho desnecessário; portanto, resolva isso primeiro e depois descubra como manipulá-lo (conforme os requisitos). YMMV ... Continua ...
MAWG
É indiscutivelmente não preto e branco, caso contrário a pergunta não teria sido feita, mas SEJA primeiro, sempre, IMO. Na verdade, eu estou fazendo isso dessa maneira agora para os clietns que têm apenas um vago sentimento confuso no lugar dos requisitos (eu nunca deveria ter tocado neles, mas essa é uma história totalmente diferente :-)
Mawg
1
Minha experiência é que os requisitos do usuário devem vir primeiro e a arquitetura deve seguir. Mas é claro que isso depende dos detalhes técnicos, algumas coisas são difíceis de mudar mais tarde. Pelo menos, é importante estar ciente das vantagens e desvantagens.
sleske
Eu suspeito que pode estar dizendo a mesma coisa de formas diferentes (+1)
MAWG