Designing a Hybrid Web Application Architecture with JavaScript and Python

Get the project source code below, and follow along with the lesson material.

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Lesson Transcript

[00:00 - 00:11] Welcome, in this lesson we will design our high level architecture. We will take the best of both worlds where we will live in a JavaScript and Python address thing.
[00:12 - 00:23] This is possible thanks to the entire application architecture. The first tier is the JavaScript content, the second tier is the Python backend and the third tier is the database.
[00:24 - 00:33] In this course we will not focus on the database but you may have one if you need some persistence. And each tier must communicate using the network.
[00:34 - 00:39] So let's describe in detail each tier. First we have a front end.
[00:40 - 01:01] We should use React which is the most popular library to build front end user interface and we will build it as a single page application. The great advantage is that as we can run JavaScript directly in the browser we can instantly respond to user inputs and in few milliseconds adapt the UI to user.
[01:02 - 01:05] Let's take a look at React. React is not easy but it's simple.
[01:06 - 01:17] It's a component based library where we construct our UI component per component. So for instance you have a button so I want a button component.
[01:18 - 01:24] To construct a component I simply need to declare a function in JavaScript. This is a React component.
[01:25 - 01:35] Then my rule up is another component and another component is another function. And to reuse my component I just need to create a year.
[01:36 - 01:43] So that's a basic UI. In our use case we are going to face a bit more complexities.
[01:44 - 01:47] We will need to use hooks. What are hooks?
[01:48 - 01:52] Hooks? Functions that are used to encapsulate stateful work.
[01:53 - 01:57] Let us look at what is the stateful workflow. Here I have a component with a button.
[01:58 - 02:09] I click, click, click, click and now it's written clicked four times. This component is stateful as the UI depends on what happened in the past.
[02:10 - 02:16] I clicked four times, therefore there is a four here. And if I click now it's a five.
[02:17 - 02:25] That's a stateful behavior. In order to under stateful behavior we need a hook which the functions are functions beginning by use.
[02:26 - 02:37] And here you can see use state, a hook with a value and a setter which is an updated on click. And if I want I can change it to increment by two.
[02:38 - 02:49] Can push two and when I click it it's increment by two. So in this course we will write react hook, specially dedicated to under streaming and AI functionalities.
[02:50 - 02:59] Then we have the backend. For the backend we will pick fast API which is a Python library, very famous, very easy to use and very convenient.
[03:00 - 03:18] You simply need to install the package, pip install fast API, you then write a few lines of code for your impostfast API, you create your server, you register your endpoint and you launch your shell and here you can see I launched in my shell and on power at 1000 I get the message hello world. And that's all you need.
[03:19 - 03:36] So that's the idea of another advantage is that documentation is auto generated , you simply need to go to slash doc and you get exactly the definition of each endpoint, here we have a get root endpoint which is where the word example I just showed you. We have an app chat endpoint that we will talk later about.
[03:37 - 03:50] How is this made possible? It's possible first to buy the package of a very popular library in Python that lets you define and this model will be leveraged for fast API to validate queries and to build automatically documentation.
[03:51 - 04:14] I think that we say there's a lot of advantage for this architecture but there is a price to be paid is that we need to synchronize the front end with the backend in both directions. We need every action taken by the model to be visible in the UI and we want user action to be sent to the backend and we need to pass part of the network.
[04:15 - 04:29] This is a parameter because we will need to maintain two types of data representation. One data structure like a list, an object, a dictionary that live in memory are optimized for the pre manipulation and use pointer.
[04:30 - 04:39] Here you can see an example of an object. Your subject cannot be sent to the network as a pointer as no meaning outside of a local execution context.
[04:40 - 04:52] We need to encode it or sometimes the word serialization is used to encode it as a sequence of bytes. Here you can see a byte, a sequence of 0 and 1.
[04:53 - 05:06] You will need to encode your data structure into bytes and then to decode it and so on and synchronize everything. This will be troublesome and this will be the subject of our next lesson.

[00:00 - 00:11] Welcome, in this lesson we will design our high level architecture. We will take the best of both worlds where we will live in a JavaScript and Python address thing.

[00:12 - 00:23] This is possible thanks to the entire application architecture. The first tier is the JavaScript content, the second tier is the Python backend and the third tier is the database.

[00:24 - 00:33] In this course we will not focus on the database but you may have one if you need some persistence. And each tier must communicate using the network.

[00:34 - 00:39] So let's describe in detail each tier. First we have a front end.

[00:40 - 01:01] We should use React which is the most popular library to build front end user interface and we will build it as a single page application. The great advantage is that as we can run JavaScript directly in the browser we can instantly respond to user inputs and in few milliseconds adapt the UI to user.

[01:02 - 01:05] Let's take a look at React. React is not easy but it's simple.

[01:06 - 01:17] It's a component based library where we construct our UI component per component. So for instance you have a button so I want a button component.

[01:18 - 01:24] To construct a component I simply need to declare a function in JavaScript. This is a React component.

[01:25 - 01:35] Then my rule up is another component and another component is another function. And to reuse my component I just need to create a year.

[01:36 - 01:43] So that's a basic UI. In our use case we are going to face a bit more complexities.

[01:44 - 01:47] We will need to use hooks. What are hooks?

[01:48 - 01:52] Hooks? Functions that are used to encapsulate stateful work.

[01:53 - 01:57] Let us look at what is the stateful workflow. Here I have a component with a button.

[01:58 - 02:09] I click, click, click, click and now it's written clicked four times. This component is stateful as the UI depends on what happened in the past.

[02:10 - 02:16] I clicked four times, therefore there is a four here. And if I click now it's a five.

[02:17 - 02:25] That's a stateful behavior. In order to under stateful behavior we need a hook which the functions are functions beginning by use.

[02:26 - 02:37] And here you can see use state, a hook with a value and a setter which is an updated on click. And if I want I can change it to increment by two.

[02:38 - 02:49] Can push two and when I click it it's increment by two. So in this course we will write react hook, specially dedicated to under streaming and AI functionalities.

[02:50 - 02:59] Then we have the backend. For the backend we will pick fast API which is a Python library, very famous, very easy to use and very convenient.

[03:00 - 03:18] You simply need to install the package, pip install fast API, you then write a few lines of code for your impostfast API, you create your server, you register your endpoint and you launch your shell and here you can see I launched in my shell and on power at 1000 I get the message hello world. And that's all you need.

[03:19 - 03:36] So that's the idea of another advantage is that documentation is auto generated , you simply need to go to slash doc and you get exactly the definition of each endpoint, here we have a get root endpoint which is where the word example I just showed you. We have an app chat endpoint that we will talk later about.

[03:37 - 03:50] How is this made possible? It's possible first to buy the package of a very popular library in Python that lets you define and this model will be leveraged for fast API to validate queries and to build automatically documentation.

[03:51 - 04:14] I think that we say there's a lot of advantage for this architecture but there is a price to be paid is that we need to synchronize the front end with the backend in both directions. We need every action taken by the model to be visible in the UI and we want user action to be sent to the backend and we need to pass part of the network.

[04:15 - 04:29] This is a parameter because we will need to maintain two types of data representation. One data structure like a list, an object, a dictionary that live in memory are optimized for the pre manipulation and use pointer.

[04:30 - 04:39] Here you can see an example of an object. Your subject cannot be sent to the network as a pointer as no meaning outside of a local execution context.

[04:40 - 04:52] We need to encode it or sometimes the word serialization is used to encode it as a sequence of bytes. Here you can see a byte, a sequence of 0 and 1.

[04:53 - 05:06] You will need to encode your data structure into bytes and then to decode it and so on and synchronize everything. This will be troublesome and this will be the subject of our next lesson.

LessonEditor