4

Estou trabalhando em um sistema que usa MVC da seguinte forma,

 View       ->  HTML,CSS
 Model      ->  PHP
 Controller ->  JS

Básicamente todas as ações do sistema funcionam passando pela seguinte ordem:

Usuário aciona alguma ação no js ele valida e manda para o php, no php ele faz as consultas e validações necessárias e retorna para o js poder atualizar o html com os dados.

Minha preocupação e que, com o aumento das páginas o meu layout fica cada vez mais "Poluído, cheio de repetições de código, totalmente Ante-DRY,rsrs."

Para tentar melhorar esta situação, criei um arquivo chamado funcoes.js, nele esta as funções de uso geral, e as funções de inicialização do app,por exemplo:

 versao();
 validaUsuario();
 permissoesUsuario();
 favoritos();

e agora

 menu();
 rodape();

Esse menu pega o arquivo menu.html e carrega em todas as páginas que estiverem uma
<div id='menu'></div> usando a função .load() do jQuery.

O rodapé funciona da mesma forma. Porém usando load ou append sempre da alguma demora/falha de renderização do html.

Minhas dúvidas:

1° - E possível criar um template tipo o blade do laravel usando apenas HTML/JS/CSS?

2° - Sei que para utilizar rotas devemos ter o mod_rewrite do php habilitado e usar o .htacess, como eu poderia usar rotas usando como referencia o meu padrão MVC?

3
  • 1
    Achei curiosa a forma como você identificou parte do seu MVC no cliente (JS e CSS), parte no servidor (php) e parte nos dois (HTML). Normalmente quando se fala em MVC, ou é a arquitetura do cliente (Angular, Backbone, Ember) ou a arquitetura do servidor (CakePHP, Symfony, e o próprio Laravel, entre outros tantos). Commented 17/09/2015 às 20:38
  • 1
    claro, eu comecei a estudar laravel e vi que a estrutura era bem diferente, eu não vejo como algo tão ruim esta organização, na verdade me ajuda bastante na hora de dar manutenção. Commented 17/09/2015 às 20:46
  • Eu não estou nem querendo dizer que é ruim. Desculpe se soou dessa maneira. Commented 17/09/2015 às 20:49

1 Resposta 1

5
+50

1° - E possível criar um template tipo o blade do laravel usando apenas HTML/JS/CSS?

Sim, existem várias bibliotecas para isso, porém a mais famosa, utilizada, e mais completa é a Handlebars.js: http://handlebarsjs.com/

Exemplo

Template:

<script id="some-template" type="text/x-handlebars-template">
  <table>
    <thead>
      <th>Username</th>
      <th>Real Name</th>
      <th>Email</th>
    </thead>
    <tbody>
      {{#users}}
        <tr>
          <td>{{username}}</td>
          <td>{{firstName}} {{lastName}}</td>
          <td>{{email}}</td>
        </tr>
      {{/users}}
    </tbody>
  </table>
</script>

Adicionando o model e transformando o template em HTML:

var source   = $("#some-template").html();
var template = Handlebars.compile(source);
var data = { users: [
    {username: "alan", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
    {username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" },
    {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
  ]};
$("#content-placeholder").html(template(data));

Porém, a verdadeira recomendação é utilizar um framework MVC JavaScript

O AngularJS resolve a arquitetura que você detalhou, mas de forma muito mais poderosa e completa.

O AngularJS tem binding de dados de duas mãos: ao alterar o model, o view atualiza "automaticamente". Logo, você não precisa se preocupar em passar dados para o template e nem lidar com elementos do DOM diretamente (por exemplo: adicionar um novo <li> numa lista, o Angular faz sozinho se você setar o template como tal). Veja esse exemplo de um loop:

<!-- Itera no array produtos, criando um <li>Nome do Produto</li> para cada produto -->
<ul>
  <li ng-repeat="produto in produtos">{{produto.nome}}</li>
</ul>

Ao obter dados do servidor (pode ser do seu projeto PHP ou qualquer API), o HTML é atualizado automaticamente.

O Angular é do Google e é uma das bibliotecas mais quentes no momento. Aliás, no mundo do desenvolvimento web não se fala em outra coisa hoje em dia a não ser Angular (e Node, e outras relacionadas).

Um exemplo básico:

<html ng-app="app">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"/>
    <script>
      angular.module("app", [])
        .controller("HomeCtrl", function HomeCtrl($scope) {
          $scope.botao = "Texto do Botão";
        });
    </script>
  </head>
  <body ng-controller="HomeCtrl">
    <!-- O que você digitar aqui será refletido automaticamente no botão -->
    <input ng-model="botao"/>
    <button>{{botao}}</button>
  </body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .