Slides de la charla que di en la PyConEs 2017 en Cáceres, el 24 de Septiembre.
Explicaba cómo montar un entorno de desarrollo ágil con Django en el back, Vue en el front y webpack para empaquetar el front y proporcionar Hot Module Reloading
Javier Abadíahaving loads of fun as Lead Developer at StyleSage
2. SPAs - Single Page Applications
initial request
HTML
GET url
HTML
POST form
HTML
initial request
HTML
GET url (AJAX)
JSON
POST url (AJAX)
JSON
page
reload
Ciclo de Vida Tradicional
de una Página Web
Ciclo de Vida
de una App SPA
page
reload
20. La experiencia ‘óptima’ de desarrollo
• Trabajar de forma unificada
(mismo IDE)
• Desarrollo en el backend
• debugging
• breakpoints, etc
• Desarrollo en el frontend
• con agilidad
• usando Hot Module
Replacement (HMR)
21. El puente entre Django y Webpack
$ cd frontend
$ npm install --save-dev webpack-bundle-tracker
# (en un virtualenv, por supuesto)
$ pip install django-webpack-loader
36. ¿Es Django el mejor backend?
código
isomórfico
server-side
rendering
async I/O
37. Comentarios Finales
• APIs
• REST?
• ‘a pelo’
• django-tastypie
• django-rest-framework
• GraphQL
• graphene (django)
• apollo (vue)
• (no lo he probado)
• Server Side Rendering
• nope
• seeding
• sip
• SEO
• pre-render
• inyectar contenido en Django
como el ng-click
funciona con todos los eventos: @hover @load
ver las herramientas de desarrollo
$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev
$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev
webpack
HMR
DevTools
ver el index.html
Vistas, Templates
ORM, Modelos: migraciones, esquemas…
Middleware, Autenticación
Formularios, Administración
Django has neatly packaged the best of web development in a very convenient project
yo uso PyCharm
pero funciona igual lanzando los comandos desde el terminal y usando SublimeText u otro editor
webpack-bundle-tracker
plug-in de webpack
genera un fichero ’webpack-stats.json’ con los resultados de la compilación
django-webpack-loader
módulo de django
lee el fichero ‘webpack-stats.json’ y renderiza las tags <script> apropiadas en una plantilla de Django
Django debe servir el index.html de nuestra app
El index.html ‘tira’ de los bundles generados por webpack
webpack escucha, implementa HMR
En el servidor
Simplemente usar JsonResponse()
Django REST Framework
no es necesario
experiencia similar a los formularios de Django
En el cliente
axios
Django sirve 2 vistas
vista de login
vista de SPA
Django mantiene las sesiones
que se comparten con el cliente mediante una cookie
Django comprueba la cookie/sesión en cada llamada
podemos embeber la identidad en la plantilla
Hay otras formas
SPA -> TokenAuthentication (Django REST Framework)
Types of authentication
SessionAuthentication
TokenAuthentication
…
https://stackoverflow.com/a/27582256/79536
http://www.django-rest-framework.org/topics/ajax-csrf-cors/
la vista principal tiene un <router-view></router-view>
el router selecciona un componente para renderizar en ese punto a partir de la URL
y mucho más: rutas anidadas, parámetros, guardas…
Django devuelve lo mismo para todas las rutas
El vue-router selecciona la vista correcta
node es la elección natural cuando pensamos en un backend para vue
un solo lenguaje
isomorphic code
server-side-rendering
async I/O
django
Django has neatly packaged the best of web development in a very convenient project
Access to other libs
p.ej. pandas, machine learning, image recognition, ORM…
laravel: default front-end for laravel (Jul 2016), made the framework take off