Transcrypt and Numscrypt - Sample code
Fork me on GitHub

jQuery

Despite competition, jQuery is still ubiquitous. Transcrypt and jQuery wear well together.

Run the 'jquery_demo' example

Code in jquery_demo/jquery_demo.html:

Code in jquery_demo/jquery_demo.py:

Back to index

React

The React library makes it possible to create fast reacting interactive GUI's, by modifying a virtual DOM first and then adapting the real DOM in a minimal way. This example shows how it can be used in combination with Transcrypt.

Run the 'react_demo' example

Code in react_demo/react_demo.html:

Code in react_demo/react_demo.py:

Back to index

Pong: Multiple classes and encapsulating Fabric.js

This example illustrates the clean application structure that can achieved by using class based object orientation in combination with encapsulating a JavaScript library as a Python module. Encapsulating JavaScript libraries is never necessary and in many cases it's overkill, all libraries can be used as-is. Moreover in this example the use of the voluminous Fabric.js library, encapsulated or not, is in itself overkill as well. The same functionality could have been achieved easily directly on top of the HTML5 canvas. But it serves to illustrate the principle.

A case where such encapsulation on the contrary is very useful, is the implementation of the Fast Fourier Transform in Numscrypt. The API is modeled after Numpy, utilizing an ndarray of type complex. Under the hood an efficient JavaScript open source library is used. By marrying the two, this functionality smoothly fits into Numscrypt, complete with operator overloading and slicing. This case was less suitable as an example here, since it requires mathematical knowledge.

Run the 'pong' example

Code in pong/pong.html:

Code in pong/pong.py:

Back to index

D3.js

D3.js is a graphics library that offers data driven animation of the DOM. Using Python's 'classical' object orientation, D3.js programs are easy to comprehend and maintain.

Run the 'd3js_demo' example

Code in d3js_demo/d3js_demo.html:

Code in d3js_demo/d3js_demo.py:

Back to index

'Dice' iOS Web App

Web Apps for iOS are full screen iOS browser applications that have a hidden address bar, while zooming and scrolling are blocked. By including a so called "cache manifest", they are cached on your iOS device, they don't need an internet connection to function. Also they can access the user's location. Starting them up happens by clicking a customized icon on your home screen. In other words: They behave like an app, but without the hassle. Rather than requiring admission to the app store, they can be downloaded from any site. With Transcrypt you just program them in Python. As an extra, they also feel at home in any browser, not just running under iOS.

Run the 'ios_app' example

Code in ios_app/ios_app.html:

Code in ios_app/ios_app.py:

Code in ios_app/cache.manifest:

Back to index

Riot

The Riot library also uses a virtual DOM, just like React. It works with custom tags that define structure, style and behaviour of reusable components.

Run the 'riot_demo' example

Code in riot_demo/riot_demo.html:

Code in riot_demo/color.py:

Code in riot_demo/riot_tag.py:

Code in riot_demo/riot_demo.py:

Back to index

Plotly: live scientific plotting in the browser

The free version of the plotly.js library offers a rich set of scientific plots. As with any JavaScript library, Transcrypt is able to use plotly.js directly in the browser. There's no need to go through a special Python interface layer as would be the case when running plotly from a desktop Python installation. This means that the full native functionality of plotly.js is at your disposal, using plain Python syntax. For convenience, __pragma__ ('jskeys') can be used to void the need for quotes in dictionary keys.

It should be stressed that your complete computational application runs in the browser. While this restricts the scale of computations to what a browser running JavaScript can handle, it offers the possibility to change computation parameters live and see the result immediately. Rather than putting the outcomes of your computations on the internet, you can make available the live computations themselves.

To achieve presentation quality results, plotly.js uses WebGL for its 3D graphs, something not all browsers currently support. The compiled Transcrypt code to use plotly.js is tiny and fast, but the plotly.js library itself has a large download and performs a lot of time consuming arithmetic. So loading the example page below may take quite some time.

Run the 'plotly_demo' example

Code in plotly_demo/plotly_demo.html:

Code in plotly_demo/plotly_demo.py:

Back to index