Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Uno de los grandes errores
que comete la gente es
tratar de forzar sus intereses.
Tu no eliges tus pasiones, tus
pasiones ...
Ejemplo MVC en FRONT (Backbone)
Cambio URL / History API

Router

DOM

VISTAS (renderizado + eventos)

( Manual )

FRONT

...
Phantom js
Phantom js nos permite
obtener “snapshots” de
nuestra web renderizada en
javascript. Es un navegador
sin interf...
Todo precioso pero en mi caso..
Ya habia una plataforma creada
Toda la lógica estaba en backend, pero nada de
RESTFULL
Imp...
Routers y controladores
Organizo el frontend de la misma forma
Que el backend, en controladores.
Web.com/Users/profile/par...
“/account/profile”

---->

“/account/media”

Puedo utilizar la HISTORY API para cambiar la url de forma
asíncrona.
Como mi...
Desde el backend
No tengo que cambiar mi estructura de url, tan solo
tengo que hacer una comprobación cuando recibo una
pe...
Ajax y automatización de tareas:
Automatizo cosas como mostrar los errores de
los formularios, Sacar popups de alerta,
pop...
Reutilización y dependencia del dom
Asigno automaticamente los eventos la dom con la propiedad
doAction, pero Sin abusar =...
Resumiendo
¿Que tengo que modificar en el
backend?
Si es ajax devuelve la vista parcial dentro de un json,
si no es ajax l...
Resumiendo
¿Como organizo el frontend?
Automatiza tus ruters con respecto a las urls usando una
librería como history.js y...
A tener en cuenta
Las peticiones al servidor son mas pesadas porque
contienen todo el html renderizado, por tanto mas
lent...
linkedin.com/in/ivangvillar
@ivangvillar
ivangvillar@gmail.com

Hazme un review en:

Pickevent.com/IvanGV
Upcoming SlideShare
Loading in …5
×

Mudate a ajax sin morir en el intento.

605 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mudate a ajax sin morir en el intento.

  1. 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. 2. Ejemplo MVC en FRONT (Backbone) Cambio URL / History API Router DOM VISTAS (renderizado + eventos) ( Manual ) FRONT MODELOS y COLECCIONES BACK RESTFULL API
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  13. 13. linkedin.com/in/ivangvillar @ivangvillar ivangvillar@gmail.com Hazme un review en: Pickevent.com/IvanGV

×