Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Universal Web apps con JavaScript

Universal Web apps con JavaScript

Gustavo Leon

October 24, 2015
Tweet

More Decks by Gustavo Leon

Other Decks in Programming

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