A Single Page Application with Flask and Vue. Slides to Talk "Pain Free Web Development" of PyConWeb 2018 in Munich

1. SPA with Flask & Vue | @vannsl
Pain Free Frontend Development
SPA with Flask and Vue

2. Vanessa Böhner
Frontend Developer
@vannsl
@vannsl
vannsl.io

3. SPA with Flask & Vue | @vannsl
Codebase
github.com/Vannsl/spa-flask-vue

4. SPA with Flask & Vue | @vannsl
past
index.html
main.js
styles.css

5. SPA with Flask & Vue | @vannsl
now
Frontend development logos

6. SPA with Flask & Vue | @vannsl
SPA with Flask and Vue

7. SPA with Flask & Vue | @vannsl
😱
Another FE Framework?

8. SPA with Flask & Vue | @vannsl
Progressive JS framework
• Approachable
• Versatile
• Performant

9. SPA with Flask & Vue | @vannsl
Core Features

10. SPA with Flask & Vue | @vannsl
Declarative Rendering
Reactive Data Binding

11. SPA with Flask & Vue | @vannsl
Small & Reusable Components
Composing with Components
Single File Components

12. SPA with Flask & Vue | @vannsl
Vue Lifecycle Hooks
The Vue Instance

13. SPA with Flask & Vue | @vannsl
index.html
main.js
styles.css
App.vue

14. SPA with Flask & Vue | @vannsl
And that’s why: Webpack
Webpack 4

15. SPA with Flask & Vue | @vannsl
The good news:
You don’t have to care
🤷

16. SPA with Flask & Vue | @vannsl
vue-cli
• CLI für rapid Vue.js development
• Scaffolding the project
• Ready-to-use app skeletons

17. SPA with Flask & Vue | @vannsl
vue-cli

18. SPA with Flask & Vue | @vannsl
Project Structure

19. SPA with Flask & Vue | @vannsl
Project Structure

20. SPA with Flask & Vue | @vannsl
Sources

21. SPA with Flask & Vue | @vannsl
HelloWorld.vue

22. SPA with Flask & Vue | @vannsl
Sources

23. SPA with Flask & Vue | @vannsl
Vue Router
mode hash: localhost:8080/#/faq
mode history: localhost:8080/faq

24. SPA with Flask & Vue | @vannsl
Add router to App.vue

25. SPA with Flask & Vue | @vannsl
Create the backend
- FAQ - Endpoint…

26. SPA with Flask & Vue | @vannsl
Component FAQ.vue

27. SPA with Flask & Vue | @vannsl
npm run dev
&&
FLASK_APP=run.py
FLASK_DEBUG=1 flask run

28. SPA with Flask & Vue | @vannsl

29. SPA with Flask & Vue | @vannsl
www.awesome-vue.com
• Datepicker
• Spinner
• Waterfall Layout
• Adsense
• Electron
• i18n
• Google Analytics

30. SPA with Flask & Vue | @vannsl
Thanks 🙏Thanks 🙏