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.

Mudate a ajax sin morir en el intento.

607 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

×