pyramid and react working together?

[Lukasz Szybalski]

Hello
Are there any documentation on how to get pyramid and react working together.

I'm currently working on a new website, and I'm going to need to build an app that looks and behaves exactly as the site and I would like to do it once.

1. What I need is react bootstrap, to easily build the nice views.
2. react tables (filter, sort, export to csv)
3. Then throw in authentication and registration both on the web and app.

Any suggestions or cookiecutter template that has some samples already setup?

or is toscawidgets http://www.toscawidgets.org/ still the recommended way to build a front end UI?

Thank you
Lucas

[Bert JW Regeer]

Nothing like that exists… although it doesn’t need to.

Write your Pyramid app as a simple REST api that exposes a bunch of endpoints that speak JSON. Put authentication and registration on there like you would with any API.

Then as a completely separate application write your React app using whatever components you want to use, then have it talk to the Pyramid app using the REST api.

There is no dependency on Pyramid for React or vice-versa.

Bert

--
You received this message because you are subscribed to the Google Groups "pylons-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pylons-discus...@googlegroups.com.
To post to this group, send email to pylons-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pylons-discuss/4cd429ed-ec75-403b-9f4b-cdb903eb8b91%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mikko Ohtamaa]

Hi Lukasz,

1. What I need is react bootstrap, to easily build the nice views.

 

2. react tables (filter, sort, export to csv)
3. Then throw in authentication and registration both on the web and app.

Any suggestions or cookiecutter template that has some samples already setup?

There is not yet a cookiecutter template, but it is quite trivial to set up.

Some suggestions

* Front end and back end codebases can live in separate repositories, with some third repository for integration tests if needed

* Use any React front end scaffold to set up your front application, e.g. https://github.com/cafreeman/generator-mobx-react

* Communicate with the backend using REST, AJAX

* Backend views can be built e.g. in https://github.com/Cornices/cornice https://github.com/striglia/pyramid_swagger https://github.com/mikeckennedy/restful-services-in-pyramid 

* You can use Colander to validate incoming REST data

* React does its own routing using history JavaScript API. Set URL spoofing using Nginx.

* For sign up and authentication  - cookie authentication works fine

* For widgets use your favorite React + Bootstrap widget kit

Best regards,

Mikko

 

or is toscawidgets http://www.toscawidgets.org/ still the recommended way to build a front end UI?

 

Thank you
Lucas

--

You received this message because you are subscribed to the Google Groups "pylons-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pylons-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to pylons-discuss@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pylons-discuss/4cd429ed-ec75-403b-9f4b-cdb903eb8b91%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Mikko Ohtamaa
http://opensourcehacker.com
http://twitter.com/moo9000

[Christoph Zwerschke]

Am 25.08.2017 um 09:00 schrieb Mikko Ohtamaa:
> * Front end and back end codebases can live in separate repositories,
> with some third repository for integration tests if needed

It makes also sense to separate them as IDE projects, as most IDEs do
not understand the concept of a hybrid projects very well. Better to
have one Pyramid project and one React project.

> * Communicate with the backend using REST, AJAX

Or use GraphQL (with graphene and webob-graphql). If you use REST, you
can make good use of Pyramid's traversal mechanism with e.g. SQLAlchemy
objects as resources. When you use GraphQL, you do the traversal outside
of Pyramid in the resolvers.

Besides React, you should also consider other frontend frameworks (a
good overview is here
https://www.sitepen.com/blog/2017/06/13/if-we-chose-our-javascript-framework-like-we-chose-our-music/).
I particularly like Angular and Vue.js. I found that it is much more
enjoyable to write the frontend code with TypeScript, not only because
of the typing aspect, but because you can use all the modern JavaScript
features which make JavaScript more similar to Python.

-- Christoph

[Bert JW Regeer]

ES7 with Babel and you get the same thing. Let the transpiler worry about converting it to something the browser is happy with.

Other thing is that he mentioned wanting to write both a web app and a mobile app, using React with React-Native for the mobile app and React-Dom for the web may allow him to re-use most of his components and code.

[Christoph Zwerschke]

Am 25.08.2017 um 09:35 schrieb Bert JW Regeer:
> ES7 with Babel and you get the same thing. Let the transpiler worry
> about converting it to something the browser is happy with.

Right. With TypeScript you have the additional big advantage of types -
the typescript compiler will show you errors earlier and the IDE has
better intellisense. These feature should not be underestimated, they
give you a big boost in productivity and software quality.

> Other thing is that he mentioned wanting to write both a web app and
> a mobile app, using React with React-Native for the mobile app and
> React-Dom for the web may allow him to re-use most of his components
> and code.

And if you prefer Angular, you have Ionic which does something similar.

-- Christoph

[Laurent DAVERIO]

> And if you prefer Angular, you have Ionic which does something similar.

Hmm, don't get me starting with Ionic :/ I have been struggling with it
for a few month, it seems to be framework with a very unstable
development path.

AngularJS 2 was in beta for months, it evolved a lot during that time
(in my book, it should be called "alpha", not "beta", then), and the
various tutorials which were written during that time are more or less
irrelevant now. Right after its release, Angular was renumbered from 2.0
so 4.0.

Similarly, Ionic 2 was in beta for months, waiting for Angular 2 to be
released. And similarly, after its release, it was renumbered from 2.0
to 3.0... Since July, It has gone through versions 3.6, 3.7, 3.9.0,
3.9.1, 3.9.2 (was there even a 3.8? The changelog on Github is stuck at
3.6). There were significant changes between them (significant enough to
stump a beginner), and no hints about it in the doc. Not all scaffolds
are up-to-date, for example "ionic generate component" will generate
non-functional code...

You have been warned ;)

Laurent.

[Paul Everitt]

On Aug 25, 2017, at 3:33 AM, Christoph Zwerschke <ci...@online.de> wrote:

Am 25.08.2017 um 09:00 schrieb Mikko Ohtamaa:
> * Front end and back end codebases can live in separate repositories,
> with some third repository for integration tests if needed

It makes also sense to separate them as IDE projects, as most IDEs do not understand the concept of a hybrid projects very well. Better to have one Pyramid project and one React project.

Obviously I’m biased, but…PyCharm Professional (which embeds WebStorm) does a really good job on this front. I do hybrid projects frequently.

> * Communicate with the backend using REST, AJAX

Or use GraphQL (with graphene and webob-graphql). If you use REST, you can make good use of Pyramid's traversal mechanism with e.g. SQLAlchemy objects as resources. When you use GraphQL, you do the traversal outside of Pyramid in the resolvers.

Besides React, you should also consider other frontend frameworks (a good overview is here https://www.sitepen.com/blog/2017/06/13/if-we-chose-our-javascript-framework-like-we-chose-our-music/). I particularly like Angular and Vue.js. I found that it is much more enjoyable to write the frontend code with TypeScript, not only because of the typing aspect, but because you can use all the modern JavaScript features which make JavaScript more similar to Python.

+1 for the use of TypeScript. It takes some extra fiddling. But this extension to create-react-app makes the pain go away: https://github.com/wmonk/create-react-app-typescript

—Paul

[Mikko Ohtamaa]

It makes also sense to separate them as IDE projects, as most IDEs do not understand the concept of a hybrid projects very well. Better to have one Pyramid project and one React project.

Obviously I’m biased, but…PyCharm Professional (which embeds WebStorm) does a really good job on this front. I do hybrid projects frequently.

As a non-biased person, I can tell that PyCharm is worth of every Euro cent when working with codebases that mix HTML, Python, JavaScript, CSS, JSX, LESS, Stylus and few of more marginal technologies.

Here is an old tutorial for people who are looking to migrate from Sublime Text to PyCharm: https://opensourcehacker.com/2015/05/02/pycharm-vs-sublime-text/

Thank you for the good work, Paul and your team!

Mikko

 

[Christoph Zwerschke]

Am 25.08.2017 um 13:59 schrieb Paul Everitt:
> Obviously I’m biased, but…PyCharm Professional (which embeds WebStorm)
> does a really good job on this front. I do hybrid projects frequently.

Yes, it works in principle. However, in PyCharm when you create a new
project, you cannot create a hybrid project with e.g. support for
Pyramid *and* "Angular CLI", you must select one of these two project
templates. I.e. you only have the special support for Pyramid *or* for
Angular. Of course you can still edit Python files in an Angular project
and TypeScript files in a Pyramid project etc. But as far as I see,
every project in PyCharm is of exactly one type that has special
support. (Just checked: you *can* select both templates when creating a
new project, but the second one is in fact ignored when it's created).

But I think it makes sense to create separate projects anyway. It also
allows you to use different settings (like different colors and fonts so
you see immediately the context), restrict searches to the relevant
project when searching in files etc.

> +1 for the use of TypeScript. It takes some extra fiddling. But this
> extension to create-react-app makes the pain go away:
> https://github.com/wmonk/create-react-app-typescript

Same for Angular if you use Angular-CLI. Everything out of the box.

Also +1 for PyCharm and your Webinars.
Highly appreciated and recommended.

-- Christoph

[Paul Everitt]

> On Aug 25, 2017, at 5:24 PM, Christoph Zwerschke <ci...@online.de> wrote:
>
> Am 25.08.2017 um 13:59 schrieb Paul Everitt:
> > Obviously I’m biased, but…PyCharm Professional (which embeds WebStorm)
> > does a really good job on this front. I do hybrid projects frequently.
>
> Yes, it works in principle. However, in PyCharm when you create a new project, you cannot create a hybrid project with e.g. support for Pyramid *and* "Angular CLI", you must select one of these two project templates. I.e. you only have the special support for Pyramid *or* for Angular. Of course you can still edit Python files in an Angular project and TypeScript files in a Pyramid project etc. But as far as I see, every project in PyCharm is of exactly one type that has special support. (Just checked: you *can* select both templates when creating a new project, but the second one is in fact ignored when it's created).

That’s correct that, during project *creation*, you can only choose one. I simply choose Angular for the project type, then after the directory appears, I run cookiecutter in it. I have to manually do a couple of things for Pyramid (make a run config, set the template type, mark the directory as templates) but not that much. After that, everything on hybrid works well.

—Paul

[Zsolt Ero]

Yes, it works perfectly. The only interesting bit is integrating create-react-app's watch mode with Pyramid, or any classic backend for that matter, if you use server side routing.

Not very complicated, but to set up watch mode, you need to:

1. Eject the app

2. Make it look for a different port compared Pyramid. For example 3000 to Webpack and 6543 to Pyramid or your favourite ports. By default it's hard coded to use the window.location's port, so change that to 3000 manually.
3. I use the following Jinja2 snippet to eject the live script in devel mode and just use the built js file in production.

  {% if request.webpack %}
    <script src="http://localhost:3000/static/js/bundle.js"></script>
  {% else %}
    <script src="{{ find_hash('wp/static/js/main.js') }}"></script>
  {% endif %}