2

I like python for quick prototypes of (sometimes) quite complex systems. On the other hand, I also like the "modern" web frameworks (react, angular) flexibility and rapid development for UI.So I'm trying to find a way to use both together, exclusively for my own prototyping purposes.

For example, I was playing with React and Transcrypt (python compiled to javascript) and it seems to work quite well.

What I can't find is working example / recommended way how to include Redux/Flux or otherwise connect React with global state (and ultimately Python data model).

Has anyone tried this? Any good article / example to recommend?

EDIT: To clarify, I'm trying to use both (Python and modern web UI) in browser, to achieve two things:

  1. Code ALL the logic in python (which is at least for me extremely fast for both coding and refactoring - thus ideal for prototyping)

  2. Use modern UI which is very interactive and also very fast to prototype (templating, data binding, quick custom components, etc)

IgorJ
  • 418
  • 4
  • 8

1 Answers1

0

From what you've described, you're probably looking for a way to do React server side rendering (SSR). There is a pip package for that: https://github.com/markfinger/python-react

On the other hand, considering you're using Transcrypt (which is IMHO not the best idea) and this is for prototyping only, you can just pass your data to the code that runs through Transcrypt. They actually have the example on the website: https://www.transcrypt.org/examples#react_demo

But you'll probably need a custom JSONEncoder for that. Consider the code below:

Hello = React.createClass({
    'getInitialState': lambda: ModelJsonEncoder.encode(CustomModel),
    ...
})

# Render the component in a 'container' div
element = React.createElement(Hello)
render(element, 'container')

Hope that helps.

t1gor
  • 1,244
  • 12
  • 25
  • Tried the demo already, it works fine. What I'm not able to do is make Redux work with it. I'm thinking of implementing Flux pattern myself (shouldn't be too hard), if no other solution comes up. Btw here is flux pattern explained: https://facebook.github.io/flux/docs/in-depth-overview.html#content – IgorJ Dec 27 '18 at 07:26