Slide 1

Slide 1 text

Universal Web Apps con JavaScript Front-end y Back-end con el lenguaje favorito de la web

Slide 2

Slide 2 text

@hpneo • 25 años • Full-stack developer desde 2011 • Ceviche.js, DOMScope, gmaps.js, CodePicnic • #1 en JavaScript en Perú, según GitHub Awards

Slide 3

Slide 3 text

¿Universal Web Apps? ¿Universal JavaScript?

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

Creando una Universal Web App ¿Qué necesitamos?

Slide 8

Slide 8 text

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/

Slide 9

Slide 9 text

Browserify • No más 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/

Slide 10

Slide 10 text

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/

Slide 11

Slide 11 text

Demo: github.com/hpneo/pokedexjs