Algumas lições e frameworks para se trabalhar com o paradigma Model-View no Frontend

1. JavaScript
Model View
Trabalhando com objetos ao invés de elementos HTML

2. HenriqueGogó
Ex-designer
Licenciatura em letras
Programador desde 2009
(antes era PHP e não conta)
Instituto Atlântico since 2012
Organização eventos JS
• BrazilJS 2011
• JSConfBR 2013 e 2014
• Comunidade CE.JS
(Eventos e hackatons)

3. Como o JavaScript
começou
“JavaScript was created in 10 days in May 1995 by
Brendan Eich (Netscape)”
https://www.w3.org/community/webed/wiki/A_Short_History_of_JavaScript

4. var person = prompt("Please enter your name");
if (person != null) {
document.write("Hello " + person + "!");
}

5. 1995: Netscape cria o JavaScript
1996: ECMA padroniza
1997: ES1
1998: ES2
1999: ES3 - regex, try/catch
2005: Jesse James Garrett cunhou o termo Ajax
- Prototype, jQuery, Dojo and Mootools
2008: ES4 (abandonado)
2009: ES5 - strict, JSON, Reflect
2015: ES6 - class, arrows

6. Templates
EJS
Jade
Mustache.js
Microtemplating
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
{{#stooges}}
<b>{{name}}</b>
{{/stooges}}

7. Sobre o uso de templates
VANTAGENS
- Mudanças dinâmicas no HTML
- Interage com objetos e varáveis JS
de view
- Renderização no client-side
- Reuso
PROBLEMAS
- Código JS no HTML
- Pode ficar difícil manter
- Delay de renderização (compilação
em runtime)
- Renderiza mas a página ainda é
“burra” – não tem binds
- Reuso (sim, reuso) – pré-
carregamento = mais uma
requisição

8. jQuerye DOM
Seletores
Eventos
Binds
Callbacks
$("input[name=age]").on("change", function() {
if ($(this).val() > 15) {
console.log("Velhote");
}
});
$("form").submit(function() {
$.post("/users", $("form").serialize());
return false;
});

9. Sobre o uso de jQuery e binds
VANTAGENS
- Separação JS/HTML
- Plugins
- Compatibilidade multibrowser
- Extensível
PROBLEMAS
- Lidar com seletores e callbacks
pode deixar seu código bagunçado
- Se o designer alterar o HTML /
DOM, o código quebra
- Só olhando o código HTML não se
sabe os binds e ações dos
elementos
- Baixo reuso e alta acoplação

10. Precisamos de modelos para as views

11. Model-view-controller(MVC)
https://pt.wikipedia.org/wiki/MVC
• Um modelo (model) armazena dados e notifica suas visões e controladores
associados quando há uma mudança em seu estado. Estas notificações
permitem que as visões produzam saídas atualizadas e que os controladores
alterem o conjunto de comandos disponíveis. Uma implementação passiva do
MVC monta estas notificações, devido a aplicação não necessitar delas ou a
plataforma de software não suportá-las.
• A visão (view) Gera uma representação (Visão) dos dados presentes no
modelo solicita do modelo.
• O controller não vem ao caso no momento

12. Model-view-controller(MVC)
Segundo eu mesmo
Modelo é a inteligência em forma de objeto/classe
View é a apresentação desse objeto na tela.
Model-View são modelos de tela ou de partes da
tela no qual podem ser usados e reusados como
classes ou objetos JavaScript.
*Controller eu já disse que não vem ao caso no momento

13. class StatusBar extends React.Component {
constructor() {
super();
this.state = { icon: '', message: '' };
}
done = (message) => {
this.setState({ icon: 'info-sign', message: message });
}
error = (message) => {
this.setState({ icon: 'exclamation-sign', message: message });
}
render() {
return (
<span>
<span className = {'glyphicon glyphicon-' + this.state.icon}></span>
{this.state.message}
</span>
);
}
}

14. var statusBar = ReactDOM.render(
<StatusBar />,
document.querySelector("#statusbar")
);
statusBar.done(message);

17. // Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
var self = this;
self.name = name;
self.meal = ko.observable(initialMeal);
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
// Non-editable catalog data - would come from the server
self.availableMeals = [
{ mealName: "Standard (sandwich)", price: 0 },
{ mealName: "Premium (lobster)", price: 34.95 },
{ mealName: "Ultimate (whole zebra)", price: 290 }
];
// Editable data
self.seats = ko.observableArray([
new SeatReservation("Steve", self.availableMeals[0]),
new SeatReservation("Bert", self.availableMeals[0])
]);
}
ko.applyBindings(new ReservationsViewModel());
<h2>Your seat reservations</h2>
<table>
<thead>
<tr>
<th>Passenger name</th>
<th>Meal</th>
<th>Surcharge</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: seats">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: meal().mealName"></td>
<td data-bind="text: meal().price"></td>
</tr>
</tbody>
</table>

18. class HeaderViewModel {
constructor() {
this.user = new User();
this.sync(this.apply);
}
sync(callback) {
// Get USER from server and...
this.user = new User({
name: "Carlos Barda Wellington",
avatar: "assets/imgs/atlantes/bardawil.jpg",
position: "Coordenador"
});
if (callback) callback(this);
}
apply() {
Template.render(this, document.querySelector('header'));
}
}

19. var headerViewModel = new HeaderViewModel();
headerViewModel.user = new User({
name: "Henrique Gogó",
avatar: "assets/imgs/atlantes/henrique.jpg",
position: "Coordenador"
});
headerViewModel.apply();

20. O que ganhamos com isso
1. Modelos que correspondem à tela
2. Programadores irão programar classes/objetos JavaScript e
não mais mexer com DOM/HTML
3. Reuso de componentes e comportamentos
4. Código conciso e com responsabilidades
5. Usamos um pattern bem difundido e amplamente aceito
(MVC)

21. Alguns frameworks
- Backbone.js (um dos primeiros, poucos usam hoje)
- Knockout.js (Microsoft adotou)
- Angular.js (Google)
- React.js (Facebook)

22. Obrigado!
(Perguntas?)