Flask vs React

Overview

Flask

Stacks19.3K

Followers16.2K

Votes60

React

Stacks182.6K

Followers147.0K

Votes4.1K

GitHub Stars240.3K

Forks49.7K

Flask vs React: What are the differences?

Flask and React are two popular frameworks used for web development, but they have significant differences in their approach and functionality. Here are the key differences between Flask and React:

Language and Purpose: Flask is a Python microframework used for back-end server-side development, while React is a JavaScript library used for front-end client-side development. Flask focuses on creating server-side functionality, handling requests, and generating HTML templates, whereas React is primarily used for building interactive user interfaces.
Architecture: Flask follows the Model-View-Controller (MVC) architecture, where the back-end logic, data management, and views are kept separate. React, on the other hand, follows a component-based architecture known as the Virtual DOM. It allows developers to create reusable UI components that update efficiently when the underlying data changes.
Server-side vs. Client-side Rendering: Flask generates HTML templates on the server-side and sends them to the client. Any changes or updates to the UI require a complete page refresh. React, on the other hand, uses client-side rendering, where the initial HTML is sent to the client, and subsequent updates are handled by the React components without refreshing the entire page. This provides a smoother and more responsive user experience.
Routing: Flask provides a routing system that maps URLs to specific functions or views in the application. It allows developers to define routes, handle different HTTP methods, and manage request parameters. React, on the other hand, relies on a client-side routing system, where the URL changes are handled by the React Router library. It enables the creation of single-page applications (SPAs) with dynamic routing.
State Management: Flask does not have built-in state management capabilities. It usually relies on libraries like Flask-SQLAlchemy or Flask-RESTful for managing database or application states. React, on the other hand, has its own state management system called "React State" that allows components to maintain and update their own internal state. React also provides the Redux library for complex state management across multiple components.
Development and Complexity: Flask is relatively easy to learn and has a lower learning curve compared to React. It is well-suited for smaller projects or applications that require server-side functionality. React, on the other hand, has a steeper learning curve due to its component-based architecture and the need to learn JavaScript. It is more suitable for complex, single-page applications that require dynamic and interactive user interfaces.

In summary, Flask focuses on server-side development using Python, while React is a JavaScript library for building interactive user interfaces on the client-side.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Flask, React

Cyrus

Aug 15, 2019

Needs adviceon

Vue.js

React

I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?

884k views884k

Comments

Saurav

Application Devloper at Bny Mellon

Mar 27, 2020

Needs advice

I have just started learning Python 3 weeks ago. I want to create a REST API using python. The API will be used to save form data in an Oracle database. The front end is using AngularJS 8 with Angular Material. In python, there are so many frameworks to develop REST APIs.

I am looking for some suggestions which REST framework to choose?

Here are some features I am looking for:

Easy integration and unit testing, like in Angular. We just want to run a command.
Code packaging, like in java maven project we can build and package. I am looking for something which I can push in as an artifact and deploy whole code as a package.
Support for swagger/ OpenAPI
Support for JSON Web Token
Support for test case coverage report

Framework can have features included or can be available by extension. Also, you can suggest a framework other than the ones I have mentioned.

337k views337k

Comments

Cyrus

Aug 15, 2019

Needs advice

Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"] would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.

For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.

How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...

401k views401k

Comments

Detailed Comparison

Flask	React
Flask is intended for getting started very quickly and was developed with best intentions in mind.	Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
-	Declarative; Component-based; Learn once, write anywhere
Statistics
GitHub Stars -	GitHub Stars 240.3K
GitHub Forks -	GitHub Forks 49.7K
Stacks 19.3K	Stacks 182.6K
Followers 16.2K	Followers 147.0K
Votes 60	Votes 4.1K
Pros & Cons
Pros 10 For it flexibility 9 Flexibilty and easy to use 7 User friendly 6 Secured 5 Unopinionated Cons 10 Not JS 7 Context 5 Not fast 1 Don't has many module as in spring	Pros 837 Components 674 Virtual dom 579 Performance 509 Simplicity 442 Composable Cons 41 Requires discipline to keep architecture organized 30 No predefined way to structure your app 29 Need to be familiar with lots of third party packages 13 JSX 10 Not enterprise friendly

What are some alternatives to Flask, React?

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

ExpressJS

Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.

Vue.js

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Svelte

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.

Django REST framework

It is a powerful and flexible toolkit that makes it easy to build Web APIs.

Sails.js

Sails is designed to mimic the MVC pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps: data-driven APIs with scalable, service-oriented architecture.

Sinatra

Sinatra is a DSL for quickly creating web applications in Ruby with minimal effort.

Lumen

Laravel Lumen is a stunningly fast PHP micro-framework for building web applications with expressive, elegant syntax. We believe development must be an enjoyable, creative experience to be truly fulfilling. Lumen attempts to take the pain out of development by easing common tasks used in the majority of web projects, such as routing, database abstraction, queueing, and caching.

Related Comparisons

Bootstrap vs Materialize

Django vs Laravel vs Node.js

Bootstrap vs Foundation vs Material UI

Node.js vs Spring-Boot

Flyway vs Liquibase

Flask vs React: What are the differences?

Flask and React are two popular frameworks used for web development, but they have significant differences in their approach and functionality. Here are the key differences between Flask and React:

Language and Purpose: Flask is a Python microframework used for back-end server-side development, while React is a JavaScript library used for front-end client-side development. Flask focuses on creating server-side functionality, handling requests, and generating HTML templates, whereas React is primarily used for building interactive user interfaces.
Architecture: Flask follows the Model-View-Controller (MVC) architecture, where the back-end logic, data management, and views are kept separate. React, on the other hand, follows a component-based architecture known as the Virtual DOM. It allows developers to create reusable UI components that update efficiently when the underlying data changes.
Server-side vs. Client-side Rendering: Flask generates HTML templates on the server-side and sends them to the client. Any changes or updates to the UI require a complete page refresh. React, on the other hand, uses client-side rendering, where the initial HTML is sent to the client, and subsequent updates are handled by the React components without refreshing the entire page. This provides a smoother and more responsive user experience.
Routing: Flask provides a routing system that maps URLs to specific functions or views in the application. It allows developers to define routes, handle different HTTP methods, and manage request parameters. React, on the other hand, relies on a client-side routing system, where the URL changes are handled by the React Router library. It enables the creation of single-page applications (SPAs) with dynamic routing.
State Management: Flask does not have built-in state management capabilities. It usually relies on libraries like Flask-SQLAlchemy or Flask-RESTful for managing database or application states. React, on the other hand, has its own state management system called "React State" that allows components to maintain and update their own internal state. React also provides the Redux library for complex state management across multiple components.
Development and Complexity: Flask is relatively easy to learn and has a lower learning curve compared to React. It is well-suited for smaller projects or applications that require server-side functionality. React, on the other hand, has a steeper learning curve due to its component-based architecture and the need to learn JavaScript. It is more suitable for complex, single-page applications that require dynamic and interactive user interfaces.

In summary, Flask focuses on server-side development using Python, while React is a JavaScript library for building interactive user interfaces on the client-side.