Universal Web apps con JavaScript

Universal Web apps con JavaScript

10a0e11595c04259f746f31bf0715e4b?s=128

Gustavo Leon

October 24, 2015
Tweet

Transcript

  1. Universal Web Apps con JavaScript Front-end y Back-end con el

    lenguaje favorito de la web
  2. @hpneo • 25 años • Full-stack developer desde 2011 •

    Ceviche.js, DOMScope, gmaps.js, CodePicnic • #1 en JavaScript en Perú, según GitHub Awards
  3. ¿Universal Web Apps? ¿Universal JavaScript?

  4. Single Page Apps • La aplicación funciona en una sola

    ventana • Arquitectura MVC: Modelo - Vista - Controlador Client Model View (DOM) Controller (Router) Server Model View (HTML) Controller (Router) API (REST + JSON)
  5. Universal JavaScript Client Server • El mismo código usado en

    el back-end (servidor) y en el front-end (cliente) • Ideal para Single Page Apps • Posible gracias a Browserify Universal JavaScript Lee  más:  https://medium.com/@mjackson/universal-­‐ javascript-­‐4761051b7ae9
  6. Universal Web Apps • Universal Web Apps: El futuro de

    las SPA • Posible gracias a Universal JavaScript + React.js Fuente:  Making Netflix.com Faster.   http://techblog.netflix.com/2015/08/making-­‐netflixcom-­‐ faster.html Client Client-side code: jQuery, HTML5, DOM events Server Server-side code: REST API, databaseaccess, web services Model, View, Controller (Universal JavaScript)
  7. Creando una Universal Web App ¿Qué necesitamos?

  8. React.js • Crear HTML con JavaScript: render y renderToString •

    Patrones y buenas prácticas para la construcción de vistas • Nos olvidamos del DOM, React se hará cargo Más  información:  https://facebook.github.io/react/
  9. Browserify • No más <script> para cargar tu código: Un

    solo archivo bundle • Escribe módulos al estilo Node.js en el browser • Usa módulos del repositorio NPM en el browser Más  información:  http://browserify.org/
  10. Gulp • Automatiza tus tareas de desarrollador: testing, minificación y

    transformación de código, análisis, etc • Delega las tareas repetitivas a la máquina y ocúpate de lo importante: Desarrollar Más  información:  http://gulpjs.com/
  11. Demo: github.com/hpneo/pokedexjs