DEV Community

Cover image for Full-Stack App with VueJs and Flask
Bek Brace
Bek Brace

Posted on • Updated on

Full-Stack App with VueJs and Flask

This is a game library full-stack web app using VueJs for Frontend design and Flask for backend server
Vue is a progressive open-source JavaScript framework for building UI

The word "progressive" means its implemented as additional markup to html. it basically a template model bound to a data model.

If the model is updated the browsers html is updated, that is it reacts to model updates. Vue js in an example of progressive framework.

Vue is not created by a Big companies such as Google for Angular or Facebook for React; but it was created by an independent software developer called Evan You.

Comparable to React and Angular, it's much more approachable, and easy to grasb, so beginners can get up and running quickly.

It's also as powerful as react and angular, so it provides all the features you'll need to create modern front-end applications.

There are severl Vue version, but the main versions are Vue2 and Vue3. And in this tutprial we will work with Vue2

https://vuejs.org/v2/guide/index.html

Vue provides a way to build components that encapsulate state in your javascript in a reactive way to your HTML template using what's called Declarative rendering where you can render data to the browser with straightforward template syntax, it reminds of jinja2 or the django template language with these double curly braces, where you can plug any variables and it gets to be rendered in the DOM, so the same data input will always produce the same output rendered in the DOM.

FLASK

https://flask.palletsprojects.com/en/2.0.x/

Flask is a Python microframework like Pyramid, bottle or CherryPy, and with it we'll build a a RESTful API today, I also have a tutorial to show you how to create a restful API in Flask in two different ways. And I have a crash course on Flask, you can check it out if you like

The good thing about microframeworks like Flask, is we don't have out of the box tools and features like in Django or TurboGears, so you will have to build everything manually which is a great thing for learning and self-improvement as a developer in my opinion.

Shoutout to Michael Hermann, for letting me use his codebase to create this tutorial

https://twitter.com/mikeherman

https://mherman.org

GitHub Link : https://github.com/BekBrace/VueJS-Flask-Full-Stack-Application
Website : https://bekbrace.com
Peace out,
Bek

Discussion (0)