Una metodología que te permitirá mudar tu proyecto estático a uno dinámico aprovechando al máximo lo que ya tienes y aportandote una estructura organizada y escalable.
1. Uno de los grandes errores
que comete la gente es
tratar de forzar sus intereses.
Tu no eliges tus pasiones, tus
pasiones te eligen a ti.
Jeff Bezos. Presidente y CEO de Amazon
2. Ejemplo MVC en FRONT (Backbone)
Cambio URL / History API
Router
DOM
VISTAS (renderizado + eventos)
( Manual )
FRONT
MODELOS y COLECCIONES
BACK
RESTFULL API
3. Phantom js
Phantom js nos permite
obtener “snapshots” de
nuestra web renderizada en
javascript. Es un navegador
sin interfaz, que podemos
ejecutarlo desde backend y
obtener el html para
devolver a los buscadores.
4. Todo precioso pero en mi caso..
Ya habia una plataforma creada
Toda la lógica estaba en backend, pero nada de
RESTFULL
Importante mantener el SEO
5. Routers y controladores
Organizo el frontend de la misma forma
Que el backend, en controladores.
Web.com/Users/profile/params
BACKEND
Controller users
→profile
Me aporta:
●
●
Al igual que en un framework en backend
mis controladores en frontend dependen
De la url y son automáticos
HTML
ROUTER
Estandarizar la organización
Automatizar la ejecucion del código js
FRONTEND JS
Controller users
→ profile
6. “/account/profile”
---->
“/account/media”
Puedo utilizar la HISTORY API para cambiar la url de forma
asíncrona.
Como mi ROUTER JS esta escuchando los cambios de la url
automaticamente se ejecutara el controlador de
“/account/media” en frontend
ROUTER
Si cambia la url o
accedes por primera ver
a la web..
BACKEND
Controller account
→ media
Si ha cambiado la url
asíncronamente...
Pido el parcial y lo
monto
7. Desde el backend
No tengo que cambiar mi estructura de url, tan solo
tengo que hacer una comprobación cuando recibo una
petición:
{
data:
{
Html: ”<b>Hola</b>”
},
Status:1
Account/profile
ES AJAX?
NO
HTML
Renderizado con layout HTML
SI
}
Como devuelvo el html
Dentro de un json puedo
Enviar mas datos, no solo
La renderización de la pantalla
JSON + VISTA PARCIAL HTML
8. Ajax y automatización de tareas:
Automatizo cosas como mostrar los errores de
los formularios, Sacar popups de alerta,
popups de validaciones gracias a una capa
intermedia
Controller_usuarios
→ pefil
Peticion
ajax
FRONT
DOM
JSON
$.post || $.get || $.ajax
Tareas
automáticas
JSON
BACK
AJAX LIBRARY
Controller_usuarios
→ perfil
PHP
{data: {
Html: ””,
Form_errors: {},
Popup_msj: {}
},
Status:1}
9. Reutilización y dependencia del dom
Asigno automaticamente los eventos la dom con la propiedad
doAction, pero Sin abusar = )
<div class=”button” doAction=”account_follow_user”>
Ejecuta
Controller_account → _action_follow_user()
En ocasiones es mejor asignarlos de la forma tradicional,
pero bien usado permite separar aun más la logica de los
eventos y hacerlos extremadamente faciles de reutilizar
10. Resumiendo
¿Que tengo que modificar en el
backend?
Si es ajax devuelve la vista parcial dentro de un json,
si no es ajax lo tienes hecho!
Puedes crearte una librería que te genere el json si
quieres automatizar tareas desde frontend.
11. Resumiendo
¿Como organizo el frontend?
Automatiza tus ruters con respecto a las urls usando una
librería como history.js y olvidate de hacerlo a mano
Comprueba si la url se ha cambiado asincronamente y
pide los parciales que te hagan falta
No tienes que preocuparte de renderizar vistas ni
controlar datos de modelos.
Crea una capa intermedia que escuche lo que devuelve tu
backend para automatizar tareas extendiendo $.get
$.post y $.ajax
12. A tener en cuenta
Las peticiones al servidor son mas pesadas porque
contienen todo el html renderizado, por tanto mas
lentas.
En parte se conpensa con que como desde front no
hay que renderizar ni tratar con modelos el cliente
necesitara procesar menos código javascript y la
ejecución sera más rápida
