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 AUTOMAGICAMENTE. 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 como é "mágicow":
<!-- 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>