Universal Web apps con JavaScript

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