GAID

Please enter the google analytics ID for appData file.

Delve into using Transcrypt to seamlessly translate Python code to JavaScript for coherent web projects, unifying Python's back-end strengths with JavaScript's front-end flexibility.

tarball.tar.gz

ch02

ch03

ch04

ch05

ch06

ch08

ch09

ch10

ch01

ch12

ch13

ch14

ch15

ch16

ch17

ch18

ch19

ch20

ch21

ch24

ch10-2

ch06-exercise

ch12-jsx

ch19-2

ch25-copy

Python is already used in the back-end of most web-based applications. However, it does not work with the front-end of web browsers in those applications. This is where Transcrypt comes in. Transcrypt can help create more coherent web-based projects where Python is used to write the back-end and front-end. This course is primarily about using a transpiler called Transcrypt. It translates our Python code to JavaScript and then executes that JavaScript, letting us enjoy the neatness of Python with the front-end flexibility of JavaScript.

Using the Python Transcrypt Transpiler for Front-end Coding

## Introducing Parcel

We have one more piece to add to our development toolchain that will enable us to integrate several of our development steps. As a bonus, it also gives us a much simpler way to import our JavaScript libraries.


As mentioned earlier, a **web application bundler** is a program that takes all of the JavaScript code that our application requires and packages it into optimized files that are quicker to download to a web browser. This includes code transpiled into JavaScript and any JavaScript libraries that the application may use. While Webpack is probably the most widely used web application bundler, it has a reputation for being configuration-heavy.

## Why Parcel?

Since our needs are a bit simpler, we will be using Parcel instead, which is advertised as a “zero-configuration” bundler. One of our goals here is to keep the development toolchain as unobtrusive as possible. The relative simplicity of Parcel helps us meet that goal.

## Run the terminal

Let’s run the terminal below and then follow the instructions given to us.

Parcel is a JavaScript package itself, and is installed with npm using this command:

```
$ npm install parcel-bundler --save-dev -g
```
To test Parcel and make sure it is installed properly, let’s run the following command in the terminal window to make sure that there are no errors:
```
$ npx parcel --help
```
For Parcel to automatically transpile our Python code, we’ill  also need to install a Parcel plug-in for Transcrypt with this npm command:
```
(venv) $ npm install parcel-plugin-transcrypt --save-dev -g
```
The `--save-dev` option in the npm command tells it to add the package being installed as a development dependency in the `package.json` file (as opposed to an application dependency like React).

The `-g` option allows the package to be installed globally and be used in the command line without the `require()` keyword. 

## Using Transcrypt with Python

The Transcrypt plug-in for Parcel adds Transcrypt as one of the steps when bundling our application so that we no longer have to run it manually. By default, it will run Transcrypt with the `--nomin`, `--map`, and `--verbose` options. If necessary, we can  override them by adding additional configuration information to the `package.json` file, but the default configuration is sufficient for our needs.


# Introducing Parcel

We have one more piece to add to our development toolchain that will enable us to integrate several of our development steps. As a bonus, it also gives us a much simpler way to import our JavaScript libraries.


As mentioned earlier, a **web application bundler** is a program that takes all of the JavaScript code that our application requires and packages it into optimized files that are quicker to download to a web browser. This includes code transpiled into JavaScript and any JavaScript libraries that the application may use. While Webpack is probably the most widely used web application bundler, it has a reputation for being configuration-heavy.

# Why Parcel?

Since our needs are a bit simpler, we will be using Parcel instead, which is advertised as a “zero-configuration” bundler. One of our goals here is to keep the development toolchain as unobtrusive as possible. The relative simplicity of Parcel helps us meet that goal.

# Run the terminal

Let’s run the terminal below and then follow the instructions given to us.

Parcel is a JavaScript package itself, and is installed with npm using this command:

```
$ npm install parcel-bundler --save-dev -g
```
To test Parcel and make sure it is installed properly, let’s run the following command in the terminal window to make sure that there are no errors:
```
$ npx parcel --help
```
For Parcel to automatically transpile our Python code, we’ill  also need to install a Parcel plug-in for Transcrypt with this npm command:
```
(venv) $ npm install parcel-plugin-transcrypt --save-dev -g
```
The `--save-dev` option in the npm command tells it to add the package being installed as a development dependency in the `package.json` file (as opposed to an application dependency like React).

The `-g` option allows the package to be installed globally and be used in the command line without the `require()` keyword. 

# Using Transcrypt with Python

The Transcrypt plug-in for Parcel adds Transcrypt as one of the steps when bundling our application so that we no longer have to run it manually. By default, it will run Transcrypt with the `--nomin`, `--map`, and `--verbose` options. If necessary, we can  override them by adding additional configuration information to the `package.json` file, but the default configuration is sufficient for our needs.


Let’s learn about Parcel and how it helps us optimize our application for the web.

Introduction

The Setup

Write a “Hello, World” Application

JavaScript Functions

Sourcemaps

External JavaScript Libraries

Intro to React

React Concepts

Cleaner Code

Managing JavaScript Packages

Package Bundler

Text Input

Lists

Forms

React Components

JavaScript Examples

CSS

Material-UI

Parcel Web Proxy

Asynchronous Requests

React Context Hook

Transcrypt Miscellany

Application Versioning

Google Analytics

Developer Tools

Appendix

Parcel

Introducing Parcel