PyScript and Flask: Basic PyScript Frontend and DOM manipulations | PyScript tutorial

This is a very simple project built with PyScript and Flask.
Flask on the backend side, and Pyscript as the frontend.
The main idea of the video is to show how to use only Python both for backend and frontend.
I wanted to show how to make AJAX (asynchronous) GET and POST requests with Pyscript to Flask application, and how to manipulate DOM with Pyscript.
The frontend of the project is written with PyScript. When i'm clicking on the red button ... PyScript sends a GET request to my Flask application and gets a random number from 1 to 10...
When I click on a card... Pyscript sends a POST request to the Flask app and gets the float version of the sent numbers.
And again the video is about how to use Pyscript to send GET and POST requests to Flask, and how use Pyscript to manipulate with DOM
Follow me @:
Telegram: t.me/red_eyed_coder_club
Twitter: / codereyed
Facebook: redeyedcoderclub
=== 📎 The source code is available via Patreon ===
/ 68004918
Timecodes:
00:00 - Description of the Pyscript Flask project, attaching Python module to HTML template.
03:01 - Pyscript basic example.
03:40 - Basic Pyscript on-click event handler and event listener.
06:41 - Creating a basic function to send GET requests from Pyscript to Flask
08:40 - Using of pyfetch to send requests to Flask
10:13 - Creating a Pyscript event handler for a button. Pyscript DOM manipulations.
13:41 - The Flask side: handling requests from Pyscript
16:59 - How to send a POST request with Pyscript to Flask.
24:13 - Result of using Pyscript on Flask frontend.
** Other Flask Tutorials **
Flask AJAX Tutorial: Basic AJAX in Flask app: • Flask AJAX Tutorial: B...
Python Flask and Vue Tutorial: • Python Flask Vue Tutor...
Flask tutorial - blog project: • Python Flask Tutorial ...
Pyscript and Flask: Basic Pyscript Frontend and DOM manipulations | Pyscript tutorial
• PyScript and Flask: Ba...
#pyscript #flask #redeyedcoderclub

[@RedEyedCoderClub]

What video should I make next? Any suggestions? Follow me @: Telegram: t.me/red_eyed_coder_club Twitter: twitter.com/CoderEyed Facebook: fb.me/redeyedcoderclub Timecodes: 00:00 - Description of the Pyscript Flask project, attaching Python module to HTML template. 03:01 - Pyscript basic example. 03:40 - Basic Pyscript on-click event handler and event listener. 06:41 - Creating a basic function to send GET requests from Pyscript to Flask 08:40 - Using of pyfetch to send requests to Flask 10:13 - Creating a Pyscript event handler for a button. Pyscript DOM manipulations. 13:41 - The Flask side: handling requests from Pyscript 16:59 - How to send a POST request with Pyscript to Flask. 24:13 - Result of using Pyscript on Flask frontend. Help to promote the channel. Please, like, share and subscribe!

[@j1351209]

pyscript and django...pyscript and fastapi

[@RedEyedCoderClub]

@@j1351209 Thank you for you suggestions. I'll make them a bit latter.

[@zoiapelevina3539]

This is exactly the information I needed. Thank you.

[@RedEyedCoderClub]

Thank you

[@user-yv2zg6hw3k]

Excellent. Everything is described in detail.

[@RedEyedCoderClub]

Thank you

[@innochka9107]

Thank you for the detailed explanation.

[@RedEyedCoderClub]

Thanks a lot!

[@kostya9169]

Thank you very much for the interesting and informative video.

[@RedEyedCoderClub]

Thanks for comment

[@user-fw4od8cg5s]

Excellent and very useful lessons on your website. Thank you so much for your efforts!

[@RedEyedCoderClub]

Thanks for comment

[@vadimsamoilov9452]

It was really interesting, for me personally. Thank you.

[@RedEyedCoderClub]

Thank you!

[@user-kv1dd9yv8c]

Great video lesson. Everything is clearly explained.

[@RedEyedCoderClub]

Thank you!

[@annaaniytkina5963]

This is something new for me. Thank you.

[@RedEyedCoderClub]

Thank you

[@olenkafomina9471]

quite detailed and understandable. The author of the video is well done.

[@RedEyedCoderClub]

Thanks for comment

[@user-uq4wt4gz6e]

Video is great!

[@RedEyedCoderClub]

Thanks for comment

[@rangabharath4253]

Awesome Python for both frontend and backend 🎉🥳👌

[@RedEyedCoderClub]

Yep. Under the hood PyScript translates Python code to JavaScript code. But yeah... we can use Python on frontend.

[@TdadadT9]

​@@RedEyedCoderClub are you sure? I read that python compiles directly to webassembly instead of JS. And only some parts of python code translates into js But we still have no native support of python :( Anyway, its a big step for python

[@RedEyedCoderClub]

My bad, and you are right. PyScript is running with a WebAssembly build of CPython. PyScript doesn't translate Python code to JavaScript. I was confused with this description: pyodide.org/en/stable/ "Pyodide comes with a robust Javascript ⟺ Python foreign function interface so that you can freely mix these two languages in your code with minimal friction. This includes full support for error handling (throw an error in one language, catch it in the other), async/await, and much more."

[@Candy-qe3nd]

Thank you for showing me how to use Python on this project.

[@RedEyedCoderClub]

Thank you!

[@annadornt6442]

It was interesting, and most importantly, useful.

[@RedEyedCoderClub]

Thank you!

[@dariafrimen4816]

Video is great! It was interesting.👍👍👍

[@RedEyedCoderClub]

Thank you!

[@OlegBosi]

very good!!1

[@RedEyedCoderClub]

Thanks for comment

[@chdddhfffgfgf1782]

Good video, I went to learn Python thanks for the video and for motivation)

[@RedEyedCoderClub]

Glad to help :) Good luck!

[@andreylagno2372]

very good video

[@RedEyedCoderClub]

Thank you

[@user-yg6pm4yi5d]

exellent video

[@RedEyedCoderClub]

Thank you!

[@nadijalesina6864]

We learn any programming language from the basics and Basic Script is no exception. And then we replenish our knowledge and develop our capabilities. And they are limitless, believe me.

[@RedEyedCoderClub]

mmm... ok... thanks for comment, and have a nice day

[@jackbarlow5431]

Python is really very easy to use, and its objects and methods allow you to create a very diverse application in practice, with a good interface and high-quality functionality.

[@RedEyedCoderClub]

Thanks for comment

[@evalinor]

Oleg, thank you. maybe after few year we will see framework based on pyscript + flask, fastapi, drf etc.

[@RedEyedCoderClub]

It's my dream :) To use only one language for all.

[@RedEyedCoderClub]

Didn't find your last comment, but the minimal example with setInterval can be the following: import js from pyodide import create_proxy counter = 0 def interval(): global counter counter += 1 document.getElementById("msg").innerHTML = "Counter = " + str(counter) proxy = create_proxy(interval) js.setInterval(proxy, 1000) and the .setInterval() returns an id, that can be used to clear interval wit js.clearInterval(id)

[@gulrukh1386]

hi there, In document.getElementById('left'), document is red underlined, how to correct it, which library is required to import document. thanks

[@abrikosa717]

Thank you very much for the video. I'm wondering will the PyScript replace JavaScript or at least will compete with it.

[@RedEyedCoderClub]

Thank you! Yep, time will show :D

[@fuu9818]

It's biggest (or its only challenge in regards to python coders) is speed and scalability

[@erjiaxiao6577]

could i ask why we need await in front of pyfetch()? there is no task loop for async in the code, so does await make no sense here?

[@RedEyedCoderClub]

The fetch() function that works under the hood is an asynchronous function, and so we have to use async/await syntax. The event loop is also used under the hood.

[@erjiaxiao6577]

@@RedEyedCoderClubok i see. thanks a lot! it really help!

[@RedEyedCoderClub]

Glad that helped. Feel free to ask me anything. If I know I'll answer.

[@lecrowpus.]

Pyscript + Flask =Holy Shit!!💩

[@RedEyedCoderClub]

It's just an experimental technology

[@TdadadT9]

Oleg, Im watching you from the scratch of 2016 and today I understand that the way when you'r writing code and explaining details simultaneously seems too complicated for comprehansion. I recommend you to spend less time on writing code online and instead concentrate more on explaining details because that is the thing where you have no competitiors :) Its just an advice, so dont consider it as a negative comment or just something like this. Keep it up anyway =)

[@RedEyedCoderClub]

Thank you for your suggestions. I do this, because I always thought that explaining the already written code is a bad way to transfer the comprehension.

[@deymonster2u]

great theme about pyscript! It seems to me that your voice sounds similar to Oleg Molchanov? Are you Oleg? I saw your old videos about Flask

[@RedEyedCoderClub]

Thank you! Yep, it's me

[@ibrahimoglu]

👍

[@RedEyedCoderClub]

Thank you!

[@ibrahimoglu]

@@RedEyedCoderClub Ben teşekkür ederim.

[@RedEyedCoderClub]

Have a nice day :)

[@shinhaewon]

how can i use pyfetch that have json body with 'POST' method ?

[@RedEyedCoderClub]

The answer on your question is in this video. If you would like to post some form with PyScript, consider watching this video: kzbin.info/www/bejne/mqibhoCwn7qUisk

[@shinhaewon]

@@RedEyedCoderClub thank you

[@shinhaewon]

@@RedEyedCoderClub pyfetch's parameter 'url' works in 'py-script' tag, but it doesn't work in file

[@RedEyedCoderClub]

check you code please. It works in the file.

[@shinhaewon]

​@@RedEyedCoderClub I decided url /decode but program posts index page

[@Just_Saidd]

If the Pyscript will get popularity in production then a python developer will get more money ))

[@RedEyedCoderClub]

So true! Thanks for comment btw!

[@sashapomin]

I always search an easy money

[@RedEyedCoderClub]

I'm too... thanks for comment anyway

[@user-fc9gq1on1w]

Video is great! It was interesting.👍👍👍

[@RedEyedCoderClub]

Thank you!