Using the Python Transcrypt Transpiler for Front-end Coding/

...

/

Optimized Imports & Theming

Optimized Imports & Theming

Improve the way we import the Material-UI library.

We'll cover the following...

Optimized imports

Rather than importing the entire Material-UI library, which is fairly large, we will change the imports in the pymui.py module to directly import just the components that we need. This can help reduce the download time required by the web browser. Making a nuanced change to our pymui.py file accomplishes this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="app.py"></script>
    <link rel="stylesheet" 
          href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500,700&display=swap"
    />
    <link rel="stylesheet" 
          href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Adding necessary Material-UI components to our application

We employ the technique described earlier to get the proper form of the import required for each individual JavaScript function we want to utilize, based on how the respective JavaScript module is structured.

After doing this, we no longer need to pull in the entire @material-ui/core library and can remove it from our pymui.py module. By structuring our imports this way, the size of the JavaScript bundle file that is generated by the Parcel bundler gets cut in half.

Theming

In addition to providing slick reusable components, one of the major features that Material-UI brings to the table is theming. This allows us to not only set our color scheme but we can also provide default properties for the Material-UI components that we will use throughout our application. Due to its flexibility, understanding the theming and styling mechanisms of Material-UI can be one of the more challenging aspects of using it. But once we find a pattern we like to use, it becomes pretty straightforward to implement.

Let’s start by first adding a few more Material-UI components to our pymui.py module so we can get a little fancier with our UI:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="app.py"></script>
    <link rel="stylesheet" 
          href="https://fonts.googleapis.com/css?
family=Roboto:300,400,500,700&display=swap"
    />
    <link rel="stylesheet" 
          href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Adding theming to our application
...