SPA Flask Vue

•

1 gefällt mir•698 views

Vanessa Böhner

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

Software

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-ﬂask-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

• Scaﬀolding the project

• Ready-to-use app skeletons

SPA with Flask & Vue | @vannsl
Project Structure

SPA with Flask & Vue | @vannsl
HelloWorld.vue

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 ﬂask run

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 🙏

Empfohlen

Pain Free Frontend DevelopmentVanessa Böhner

Infinum - Building API based apps without an APIInfinum

Angular PWAVinci Rufus

Serverless Application Model - Executing Lambdas LocallyAlex

Driving Pipeline Automation With Newman and the Postman APIPostman

How and why test Azure Front Door with AWS Lambda & PowerShell? | Osman Sahin...UK DevOps Collective

Selenium Conference Austin 2017 - Automate Windows and Mac Apps With The WebD...Selenium Conference Austin 2017

180929_NextBuild_From_Java_to_KotlinPaulien van Alst

Empfohlen

Pain Free Frontend DevelopmentVanessa Böhner

Infinum - Building API based apps without an APIInfinum

Angular PWAVinci Rufus

Serverless Application Model - Executing Lambdas LocallyAlex

Driving Pipeline Automation With Newman and the Postman APIPostman

How and why test Azure Front Door with AWS Lambda & PowerShell? | Osman Sahin...UK DevOps Collective

Selenium Conference Austin 2017 - Automate Windows and Mac Apps With The WebD...Selenium Conference Austin 2017

180929_NextBuild_From_Java_to_KotlinPaulien van Alst

Is Serverless The New Swiss Cheese?Chase Douglas

Demystifying Web PerformanceAtlassian

Reasonable app developmentArnar Þór Sveinsson

Writing Performant Front-end CodeLyubomir Bozhinov

RxJS: A Beginner & Expert's Perspective - ng-conf 2017Tracy Lee

Building for, perceiving and measuring performance for mobile webRobin Glen

Serverless with Azure FunctionsAndreas Willich

Develop and Deploy Outside the Repoafragen

Aptana Jaxerrajivmordani

Common design principles and design patterns in automation testingKMS Technology

20 quick wins to improve your website speedAymen Loukil

Mesos at OpenTablesamsalisbury

GAB2017 - Azure function to build serverless SharePoint appsRiwut Libinuko

Application Performance Monitoring for WordPressWP Engine

Panoramic view of web APIsKaren Immanuel

Magnolia Conference Basel 2016 SysElevenSimon Pearce

Ansible ALLTHETHINGSDan Chuparkoff

What DevOps means for QA TeamsChris Riley ☁

Cloud Native Batch ProcessingVMware Tanzu

Scaling Without Expanding: a DevOps StoryAtlassian

Vue.js Component ToolsVanessa Böhner

Exploring pwa for shopwareSander Mangel

Weitere ähnliche Inhalte

Was ist angesagt?

Is Serverless The New Swiss Cheese?Chase Douglas

Demystifying Web PerformanceAtlassian

Reasonable app developmentArnar Þór Sveinsson

Writing Performant Front-end CodeLyubomir Bozhinov

RxJS: A Beginner & Expert's Perspective - ng-conf 2017Tracy Lee

Building for, perceiving and measuring performance for mobile webRobin Glen

Serverless with Azure FunctionsAndreas Willich

Develop and Deploy Outside the Repoafragen

Aptana Jaxerrajivmordani

Common design principles and design patterns in automation testingKMS Technology

20 quick wins to improve your website speedAymen Loukil

Mesos at OpenTablesamsalisbury

GAB2017 - Azure function to build serverless SharePoint appsRiwut Libinuko

Application Performance Monitoring for WordPressWP Engine

Panoramic view of web APIsKaren Immanuel

Magnolia Conference Basel 2016 SysElevenSimon Pearce

Ansible ALLTHETHINGSDan Chuparkoff

What DevOps means for QA TeamsChris Riley ☁

Cloud Native Batch ProcessingVMware Tanzu

Scaling Without Expanding: a DevOps StoryAtlassian

Was ist angesagt? (20)

Is Serverless The New Swiss Cheese?

Demystifying Web Performance

Reasonable app development

Writing Performant Front-end Code

RxJS: A Beginner & Expert's Perspective - ng-conf 2017

Building for, perceiving and measuring performance for mobile web

Serverless with Azure Functions

Develop and Deploy Outside the Repo

Aptana Jaxer

Common design principles and design patterns in automation testing

20 quick wins to improve your website speed

Mesos at OpenTable

GAB2017 - Azure function to build serverless SharePoint apps

Application Performance Monitoring for WordPress

Panoramic view of web APIs

Magnolia Conference Basel 2016 SysEleven

Ansible ALLTHETHINGS

What DevOps means for QA Teams

Cloud Native Batch Processing

Scaling Without Expanding: a DevOps Story

Ähnlich wie SPA Flask Vue

Vue.js Component ToolsVanessa Böhner

Exploring pwa for shopwareSander Mangel

Azure Static Web AppsJen Looper

Quinoa: A modern Quarkus UI with no hassles | DevNation tech TalkRed Hat Developers

SharePoint Framework - Developer PreviewSean McLellan

Migrating a modern spring web application to serverlessJeroen Sterken

NodeJS Interactive 2019: FaaS meets FrameworksChris Bailey

How to build a static website in two and a half days with Nuxt and Tailwind CSSVanessa Böhner

SharePoint Saturday Ottawa - From SharePoint to Office 365 DevelopmentSébastien Levert

Short-Training asp.net vNextBetclic Everest Group Tech Team

ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...Sébastien Levert

SharePoint Fest Chicago - From SharePoint to Office 365 DevelopmentSébastien Levert

Building a Single Page Application with VueJSdanpastori

SharePoint Fest DC 2019 - From SharePoint to Office 365 DevelopmentSébastien Levert

SharePoint Fest Seattle 2019 - From SharePoint to Office 365 DevelopmentSébastien Levert

How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver

Essentials in JavaScript App Bundling with WebpackKhaled Al-Ansari

SharePoint Fest Chicago 2018 - From SharePoint to Office 365 developmentSébastien Levert

Building your own calendly using amazon app syncDhaval Nagar

Full-Stack Development with Spring Boot and VueJSVMware Tanzu

Ähnlich wie SPA Flask Vue (20)

Vue.js Component Tools

Exploring pwa for shopware

Azure Static Web Apps

Quinoa: A modern Quarkus UI with no hassles | DevNation tech Talk

SharePoint Framework - Developer Preview

Migrating a modern spring web application to serverless

NodeJS Interactive 2019: FaaS meets Frameworks

How to build a static website in two and a half days with Nuxt and Tailwind CSS

SharePoint Saturday Ottawa - From SharePoint to Office 365 Development

Short-Training asp.net vNext

ESPC 2016 - From SharePoint to Office 365 Development - The path to your new ...

SharePoint Fest Chicago - From SharePoint to Office 365 Development

Building a Single Page Application with VueJS

SharePoint Fest DC 2019 - From SharePoint to Office 365 Development

SharePoint Fest Seattle 2019 - From SharePoint to Office 365 Development

How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)

Essentials in JavaScript App Bundling with Webpack

SharePoint Fest Chicago 2018 - From SharePoint to Office 365 development

Building your own calendly using amazon app sync

Full-Stack Development with Spring Boot and VueJS

Kürzlich hochgeladen

%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...masabamasaba

WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...WSO2

Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...Bert Jan Schrijver

Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024VictoriaMetrics

%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...masabamasaba

WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital TransformationWSO2

%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...masabamasaba

%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...masabamasaba

%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfonteinmasabamasaba

VTU technical seminar 8Th Sem on Scikit-learnAmarnathKambale

Architecture decision records - How not to get lost in the pastPapp Krisztián

WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg

WSO2Con204 - Hard Rock Presentation - KeynoteWSO2

%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...masabamasaba

%in Bahrain+277-882-255-28 abortion pills for sale in Bahrainmasabamasaba

WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2

%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...masabamasaba

%in Midrand+277-882-255-28 abortion pills for sale in midrandmasabamasaba

WSO2CON2024 - It's time to go PlatformlessWSO2

Kürzlich hochgeladen (20)

%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...

WSO2CON 2024 - Building the API First Enterprise – Running an API Program, fr...

Devoxx UK 2024 - Going serverless with Quarkus, GraalVM native images and AWS...

Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024

%+27788225528 love spells in Colorado Springs Psychic Readings, Attraction sp...

WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation

%+27788225528 love spells in Toronto Psychic Readings, Attraction spells,Brin...

%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...

%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein

VTU technical seminar 8Th Sem on Scikit-learn

Architecture decision records - How not to get lost in the past

WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...

WSO2Con204 - Hard Rock Presentation - Keynote

%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...

%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain

WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity

%+27788225528 love spells in Boston Psychic Readings, Attraction spells,Bring...

%in Midrand+277-882-255-28 abortion pills for sale in midrand

WSO2CON2024 - It's time to go Platformless

SPA Flask Vue

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-ﬂask-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 • Scaﬀolding 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 ﬂask 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 🙏