SPA Flask Vue

SPA with Flask & Vue | @vannsl
Pain Free Frontend Development
SPA with Flask and Vue
Vanessa Böhner
Frontend Developer
@vannsl
@vannsl
vannsl.io
SPA with Flask & Vue | @vannsl
Codebase
github.com/Vannsl/spa-flask-vue
SPA with Flask & Vue | @vannsl
past
index.html
main.js
styles.css
SPA with Flask & Vue | @vannsl
now
Frontend development logos
SPA with Flask & Vue | @vannsl
SPA with Flask and Vue
SPA with Flask & Vue | @vannsl
😱
Another FE Framework?
SPA with Flask & Vue | @vannsl
Progressive JS framework
• Approachable

• Versatile

• Performant
SPA with Flask & Vue | @vannsl
Core Features
SPA with Flask & Vue | @vannsl
Declarative Rendering
Reactive Data Binding
SPA with Flask & Vue | @vannsl
Small & Reusable Components
Composing with Components
Single File Components
SPA with Flask & Vue | @vannsl
Vue Lifecycle Hooks
The Vue Instance
SPA with Flask & Vue | @vannsl
index.html
main.js
styles.css
App.vue
SPA with Flask & Vue | @vannsl
And that’s why: Webpack
Webpack 4
SPA with Flask & Vue | @vannsl
The good news:
You don’t have to care
🤷
SPA with Flask & Vue | @vannsl
vue-cli
• CLI für rapid Vue.js development

• Scaffolding the project

• Ready-to-use app skeletons
SPA with Flask & Vue | @vannsl
vue-cli
SPA with Flask & Vue | @vannsl
Project Structure
SPA with Flask & Vue | @vannsl
Project Structure
SPA with Flask & Vue | @vannsl
Sources
SPA with Flask & Vue | @vannsl
HelloWorld.vue
SPA with Flask & Vue | @vannsl
Sources
SPA with Flask & Vue | @vannsl
Vue Router
mode hash: localhost:8080/#/faq
mode history: localhost:8080/faq
SPA with Flask & Vue | @vannsl
Add router to App.vue
SPA with Flask & Vue | @vannsl
Create the backend
- FAQ - Endpoint…
SPA with Flask & Vue | @vannsl
Component FAQ.vue
SPA with Flask & Vue | @vannsl
npm run dev
&&
FLASK_APP=run.py
FLASK_DEBUG=1 flask run
SPA with Flask & Vue | @vannsl
SPA with Flask & Vue | @vannsl
www.awesome-vue.com
• Datepicker

• Spinner

• Waterfall Layout

• Adsense

• Electron

• i18n

• Google Analytics
SPA with Flask & Vue | @vannsl
Thanks 🙏Thanks 🙏
1 von 30

Recomendados

Pain Free Frontend Development von
Pain Free Frontend DevelopmentPain Free Frontend Development
Pain Free Frontend DevelopmentVanessa Böhner
181 views30 Folien
Infinum - Building API based apps without an API von
Infinum - Building API based apps without an APIInfinum - Building API based apps without an API
Infinum - Building API based apps without an APIInfinum
430 views18 Folien
Angular PWA von
Angular PWAAngular PWA
Angular PWAVinci Rufus
837 views13 Folien
Serverless Application Model - Executing Lambdas Locally von
Serverless Application Model - Executing Lambdas LocallyServerless Application Model - Executing Lambdas Locally
Serverless Application Model - Executing Lambdas LocallyAlex
85 views12 Folien
Driving Pipeline Automation With Newman and the Postman API von
Driving Pipeline Automation With Newman and the Postman APIDriving Pipeline Automation With Newman and the Postman API
Driving Pipeline Automation With Newman and the Postman APIPostman
3.2K views25 Folien
How and why test Azure Front Door with AWS Lambda & PowerShell? | Osman Sahin... von
How and why test Azure Front Door with AWS Lambda & PowerShell? | Osman Sahin...How and why test Azure Front Door with AWS Lambda & PowerShell? | Osman Sahin...
How and why test Azure Front Door with AWS Lambda & PowerShell? | Osman Sahin...UK DevOps Collective
191 views38 Folien

Más contenido relacionado

Was ist angesagt?

Is Serverless The New Swiss Cheese? von
Is Serverless The New Swiss Cheese?Is Serverless The New Swiss Cheese?
Is Serverless The New Swiss Cheese?Chase Douglas
207 views59 Folien
Demystifying Web Performance von
Demystifying Web PerformanceDemystifying Web Performance
Demystifying Web PerformanceAtlassian
1K views40 Folien
Reasonable app development von
Reasonable app developmentReasonable app development
Reasonable app developmentArnar Þór Sveinsson
349 views20 Folien
Writing Performant Front-end Code von
Writing Performant Front-end CodeWriting Performant Front-end Code
Writing Performant Front-end CodeLyubomir Bozhinov
90 views59 Folien
RxJS: A Beginner & Expert's Perspective - ng-conf 2017 von
RxJS: A Beginner & Expert's Perspective - ng-conf 2017RxJS: A Beginner & Expert's Perspective - ng-conf 2017
RxJS: A Beginner & Expert's Perspective - ng-conf 2017Tracy Lee
5.3K views61 Folien
Building for, perceiving and measuring performance for mobile web von
Building for, perceiving and measuring performance for mobile webBuilding for, perceiving and measuring performance for mobile web
Building for, perceiving and measuring performance for mobile webRobin Glen
1.5K views65 Folien

Was ist angesagt?(20)

Is Serverless The New Swiss Cheese? von Chase Douglas
Is Serverless The New Swiss Cheese?Is Serverless The New Swiss Cheese?
Is Serverless The New Swiss Cheese?
Chase Douglas207 views
Demystifying Web Performance von Atlassian
Demystifying Web PerformanceDemystifying Web Performance
Demystifying Web Performance
Atlassian1K views
RxJS: A Beginner & Expert's Perspective - ng-conf 2017 von Tracy Lee
RxJS: A Beginner & Expert's Perspective - ng-conf 2017RxJS: A Beginner & Expert's Perspective - ng-conf 2017
RxJS: A Beginner & Expert's Perspective - ng-conf 2017
Tracy Lee5.3K views
Building for, perceiving and measuring performance for mobile web von Robin Glen
Building for, perceiving and measuring performance for mobile webBuilding for, perceiving and measuring performance for mobile web
Building for, perceiving and measuring performance for mobile web
Robin Glen1.5K views
Develop and Deploy Outside the Repo von afragen
Develop and Deploy Outside the RepoDevelop and Deploy Outside the Repo
Develop and Deploy Outside the Repo
afragen805 views
Common design principles and design patterns in automation testing von KMS Technology
Common design principles and design patterns in automation testingCommon design principles and design patterns in automation testing
Common design principles and design patterns in automation testing
KMS Technology1.2K views
20 quick wins to improve your website speed von Aymen Loukil
20 quick wins to improve your website speed20 quick wins to improve your website speed
20 quick wins to improve your website speed
Aymen Loukil1K views
GAB2017 - Azure function to build serverless SharePoint apps von Riwut Libinuko
GAB2017 - Azure function to build serverless SharePoint appsGAB2017 - Azure function to build serverless SharePoint apps
GAB2017 - Azure function to build serverless SharePoint apps
Riwut Libinuko262 views
Application Performance Monitoring for WordPress von WP Engine
Application Performance Monitoring for WordPressApplication Performance Monitoring for WordPress
Application Performance Monitoring for WordPress
WP Engine819 views
Magnolia Conference Basel 2016 SysEleven von Simon Pearce
Magnolia Conference Basel 2016 SysElevenMagnolia Conference Basel 2016 SysEleven
Magnolia Conference Basel 2016 SysEleven
Simon Pearce124 views
Cloud Native Batch Processing von VMware Tanzu
Cloud Native Batch ProcessingCloud Native Batch Processing
Cloud Native Batch Processing
VMware Tanzu944 views
Scaling Without Expanding: a DevOps Story von Atlassian
Scaling Without Expanding: a DevOps StoryScaling Without Expanding: a DevOps Story
Scaling Without Expanding: a DevOps Story
Atlassian19.7K views

Similar a SPA Flask Vue

Vue.js Component Tools von
Vue.js Component ToolsVue.js Component Tools
Vue.js Component ToolsVanessa Böhner
392 views48 Folien
Exploring pwa for shopware von
Exploring pwa for shopwareExploring pwa for shopware
Exploring pwa for shopwareSander Mangel
705 views42 Folien
Azure Static Web Apps von
Azure Static Web AppsAzure Static Web Apps
Azure Static Web AppsJen Looper
4 views17 Folien
Quinoa: A modern Quarkus UI with no hassles | DevNation tech Talk von
Quinoa: A modern Quarkus UI with no hassles | DevNation tech TalkQuinoa: A modern Quarkus UI with no hassles | DevNation tech Talk
Quinoa: A modern Quarkus UI with no hassles | DevNation tech TalkRed Hat Developers
1.8K views22 Folien
SharePoint Framework - Developer Preview von
SharePoint Framework - Developer PreviewSharePoint Framework - Developer Preview
SharePoint Framework - Developer PreviewSean McLellan
613 views18 Folien
Migrating a modern spring web application to serverless von
Migrating a modern spring web application to serverlessMigrating a modern spring web application to serverless
Migrating a modern spring web application to serverlessJeroen Sterken
1.4K views41 Folien

Similar a SPA Flask Vue(20)

Exploring pwa for shopware von Sander Mangel
Exploring pwa for shopwareExploring pwa for shopware
Exploring pwa for shopware
Sander Mangel705 views
Azure Static Web Apps von Jen Looper
Azure Static Web AppsAzure Static Web Apps
Azure Static Web Apps
Jen Looper4 views
Quinoa: A modern Quarkus UI with no hassles | DevNation tech Talk von Red Hat Developers
Quinoa: A modern Quarkus UI with no hassles | DevNation tech TalkQuinoa: A modern Quarkus UI with no hassles | DevNation tech Talk
Quinoa: A modern Quarkus UI with no hassles | DevNation tech Talk
Red Hat Developers1.8K views
SharePoint Framework - Developer Preview von Sean McLellan
SharePoint Framework - Developer PreviewSharePoint Framework - Developer Preview
SharePoint Framework - Developer Preview
Sean McLellan613 views
Migrating a modern spring web application to serverless von Jeroen Sterken
Migrating a modern spring web application to serverlessMigrating a modern spring web application to serverless
Migrating a modern spring web application to serverless
Jeroen Sterken1.4K views
NodeJS Interactive 2019: FaaS meets Frameworks von Chris Bailey
NodeJS Interactive 2019:  FaaS meets FrameworksNodeJS Interactive 2019:  FaaS meets Frameworks
NodeJS Interactive 2019: FaaS meets Frameworks
Chris Bailey346 views
How to build a static website in two and a half days with Nuxt and Tailwind CSS von Vanessa Böhner
How to build a static website in two and a half days with Nuxt and Tailwind CSSHow to build a static website in two and a half days with Nuxt and Tailwind CSS
How to build a static website in two and a half days with Nuxt and Tailwind CSS
Vanessa Böhner717 views
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development von Sébastien Levert
SharePoint Saturday Ottawa - From SharePoint to Office 365 DevelopmentSharePoint Saturday Ottawa - From SharePoint to Office 365 Development
SharePoint Saturday Ottawa - From SharePoint to Office 365 Development
Sébastien Levert201 views
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ... von Sébastien Levert
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...
Sébastien Levert723 views
SharePoint Fest Chicago - From SharePoint to Office 365 Development von Sébastien Levert
SharePoint Fest Chicago - From SharePoint to Office 365 DevelopmentSharePoint Fest Chicago - From SharePoint to Office 365 Development
SharePoint Fest Chicago - From SharePoint to Office 365 Development
Sébastien Levert436 views
Building a Single Page Application with VueJS von danpastori
Building a Single Page Application with VueJSBuilding a Single Page Application with VueJS
Building a Single Page Application with VueJS
danpastori340 views
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development von Sébastien Levert
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 DevelopmentSharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development
SharePoint Fest DC 2019 - From SharePoint to Office 365 Development von Sébastien Levert
SharePoint Fest DC 2019 - From SharePoint to Office 365 DevelopmentSharePoint Fest DC 2019 - From SharePoint to Office 365 Development
SharePoint Fest DC 2019 - From SharePoint to Office 365 Development
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx) von Brian Culver
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver182 views
Essentials in JavaScript App Bundling with Webpack von Khaled Al-Ansari
Essentials in JavaScript App Bundling with WebpackEssentials in JavaScript App Bundling with Webpack
Essentials in JavaScript App Bundling with Webpack
Khaled Al-Ansari296 views
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development von Sébastien Levert
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 developmentSharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development
Sébastien Levert110 views
Building your own calendly using amazon app sync von Dhaval Nagar
Building your own calendly using amazon app syncBuilding your own calendly using amazon app sync
Building your own calendly using amazon app sync
Dhaval Nagar160 views
Full-Stack Development with Spring Boot and VueJS von VMware Tanzu
Full-Stack Development with Spring Boot and VueJSFull-Stack Development with Spring Boot and VueJS
Full-Stack Development with Spring Boot and VueJS
VMware Tanzu965 views

Último

Transport Management System - Shipment & Container Tracking von
Transport Management System - Shipment & Container TrackingTransport Management System - Shipment & Container Tracking
Transport Management System - Shipment & Container TrackingFreightoscope
6 views3 Folien
Supercharging your Python Development Environment with VS Code and Dev Contai... von
Supercharging your Python Development Environment with VS Code and Dev Contai...Supercharging your Python Development Environment with VS Code and Dev Contai...
Supercharging your Python Development Environment with VS Code and Dev Contai...Dawn Wages
9 views51 Folien
University of Borås-full talk-2023-12-09.pptx von
University of Borås-full talk-2023-12-09.pptxUniversity of Borås-full talk-2023-12-09.pptx
University of Borås-full talk-2023-12-09.pptxMahdi_Fahmideh
13 views51 Folien
Automated Testing of Microsoft Power BI Reports von
Automated Testing of Microsoft Power BI ReportsAutomated Testing of Microsoft Power BI Reports
Automated Testing of Microsoft Power BI ReportsRTTS
13 views20 Folien
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile... von
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...Stefan Wolpers
49 views38 Folien
Mobile App Development Company von
Mobile App Development CompanyMobile App Development Company
Mobile App Development CompanyRichestsoft
6 views6 Folien

Último(20)

Transport Management System - Shipment & Container Tracking von Freightoscope
Transport Management System - Shipment & Container TrackingTransport Management System - Shipment & Container Tracking
Transport Management System - Shipment & Container Tracking
Freightoscope 6 views
Supercharging your Python Development Environment with VS Code and Dev Contai... von Dawn Wages
Supercharging your Python Development Environment with VS Code and Dev Contai...Supercharging your Python Development Environment with VS Code and Dev Contai...
Supercharging your Python Development Environment with VS Code and Dev Contai...
Dawn Wages9 views
University of Borås-full talk-2023-12-09.pptx von Mahdi_Fahmideh
University of Borås-full talk-2023-12-09.pptxUniversity of Borås-full talk-2023-12-09.pptx
University of Borås-full talk-2023-12-09.pptx
Mahdi_Fahmideh13 views
Automated Testing of Microsoft Power BI Reports von RTTS
Automated Testing of Microsoft Power BI ReportsAutomated Testing of Microsoft Power BI Reports
Automated Testing of Microsoft Power BI Reports
RTTS13 views
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile... von Stefan Wolpers
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
How To Make Your Plans Suck Less — Maarten Dalmijn at the 57th Hands-on Agile...
Stefan Wolpers49 views
Mobile App Development Company von Richestsoft
Mobile App Development CompanyMobile App Development Company
Mobile App Development Company
Richestsoft 6 views
Bootstrapping vs Venture Capital.pptx von Zeljko Svedic
Bootstrapping vs Venture Capital.pptxBootstrapping vs Venture Capital.pptx
Bootstrapping vs Venture Capital.pptx
Zeljko Svedic17 views
predicting-m3-devopsconMunich-2023-v2.pptx von Tier1 app
predicting-m3-devopsconMunich-2023-v2.pptxpredicting-m3-devopsconMunich-2023-v2.pptx
predicting-m3-devopsconMunich-2023-v2.pptx
Tier1 app14 views
Google Solutions Challenge 2024 Talk pdf von MohdAbdulAleem4
Google Solutions Challenge 2024 Talk pdfGoogle Solutions Challenge 2024 Talk pdf
Google Solutions Challenge 2024 Talk pdf
MohdAbdulAleem447 views
tecnologia18.docx von nosi6702
tecnologia18.docxtecnologia18.docx
tecnologia18.docx
nosi67026 views
predicting-m3-devopsconMunich-2023.pptx von Tier1 app
predicting-m3-devopsconMunich-2023.pptxpredicting-m3-devopsconMunich-2023.pptx
predicting-m3-devopsconMunich-2023.pptx
Tier1 app10 views
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P... von NimaTorabi2
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...
Unlocking the Power of AI in Product Management - A Comprehensive Guide for P...
NimaTorabi219 views
Top-5-production-devconMunich-2023-v2.pptx von Tier1 app
Top-5-production-devconMunich-2023-v2.pptxTop-5-production-devconMunich-2023-v2.pptx
Top-5-production-devconMunich-2023-v2.pptx
Tier1 app9 views

SPA Flask Vue