Universal Web apps con JavaScript

Repositorio: https://github.com/hpneo/pokedexjs
Demo: https://pokedex.herokuapp.com

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