Using react js framework for frontend of the generator app

[pranav1698]

I'm submitting a ... (check one with "x")

• [ ] bug report
• [x] feature request
• [ ] support request => Please do not submit support requests here, instead ask your query in out Gitter channel at https://gitter.im/fossasia/meilix

Actual Behaviour At this moment, We are using normal html, css, js to code for our generator app; but we can use react library for our frontend as this will allow us to divide our one big html file into seperate files;

Expected Behaviour The react library will allow us several benefits:

• We can make components for our project and use them anywhere we want in our project(for.eg; the present header)
• We can use react-modal for displaying various information(for e.g; we can preview the wallpaper in a seperate modal)
• We can use react-forms and their great functionalities
• This will help us to increase the appeal of our generator; We can have a whole new about section for the users
• We can use many other great functionalities provided with react

Other information:

How to use react with flask

I have done a brief research on this topic and have some good documentation on this note:- https://medium.com/@timmykko/django-flask-with-react-js-3c6da2d47b52 http://aviadas.com/blog/2015/08/05/evaluating-react-dot-js-and-flask/ A complete tutorial is given in these articles: https://medium.com/@riken.mehta/full-stack-tutorial-flask-react-docker-420da3543c91 https://www.bedjango.com/blog/how-to-build-web-app-react-redux-and-flask/

Would you like to work on the issue? All contributors are invited

[sarnava1]

Seems nice issue to me. But our present site is small enough to do with flask templates I guess. Require more suggestions from mentors and other contributors though.

[xeon-zolt]

can you explain more why should we move to react looks like a epic issue

[sarnava1]

Yes @xeon-zolt this would be an epic issue.

[pranav1698]

Thanks for supporting the issue @xeon-zolt @sarnava1; I know that the site is small but we are doing a lot of things(lot of functionalities in a single file) that is increasing the lines of code to a large number of lines making the code style and the rendering time a bit more which is natural for a single large file

Reusablity(Making the completion faster)

Even after using code editor like vsc it gets tiresome to reproduce some issues;The most great advantage of react is we can break some of the complex tables and forms that we are using in the generator into smaller UI components; The concept of components makes react unique as we do not have to worry about the whole app; focussing on smaller UI components once at a time;

With reaactjs we can write our code more efficiently just importing some modules will make our work easier and also for future contributors;Beacause you can use concepts like loops and conditional rendering which normal html does not provide

Flexiblity

At this moment we are using many bootstrap files for every page; with react writing that line on a single file will make us able to use that code everywhere that will increase the efficiency and also other great use is that of css variables using scss and sass; these will also allow us that dynamic coding making our job much easier and fundamental rather than just copy and pasting

Third party modules can be easily integrated with react like webpack that makes work for web development.

Apart from that we can create whole new UI feature easily and also it is great for business
It will make us to provide other features in the app that we would need in the future easily when the generator will scale up and also attract more contributions to both on the generator and the server or on the artworks;

You can find more information on these following links: https://medium.com/@thinkwik/why-reactjs-is-gaining-so-much-popularity-these-days-c3aa686ec0b3 https://www.c-sharpcorner.com/article/what-and-why-reactjs/ https://stories.jotform.com/7-reasons-why-you-should-use-react-ad420c634247

Atlast, I would say that using react will not only beautify our code but make us able to use the Virtual DOM in a effective way;

[sarnava1]

If the site becomes huge in future then we can really dive into react as it is a great tool. But presently even in flask we can render templates in different pages. Anyways let us see what everyone has to say.

[pranav1698]

The idea is not multiple template rendering; but to make a single UI component and render it into multiple pages; other than that react is made to make UI better and efficient

On Sat, Oct 13, 2018, 20:49 Sarnava Konar notifications@github.com wrote:

If the site becomes huge in future then we can really dive into react as it is a great tool. But presently even in flask we can render templates in different pages. Anyways let us see what everyone has to say.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fossasia/meilix-generator/issues/278#issuecomment-429550120, or mute the thread https://github.com/notifications/unsubscribe-auth/AhJO2XsJLOX0Wghb0_GRSeAS1P4eSsn3ks5ukgRwgaJpZM4XafvM .

[abishekvashok]

I vote against it. Why should we change the whole project to another language. I would advise to discard this, and focus on other issues instead.

[pranav1698]

Thanks @abhishekvabhishek, for your suggestion, But I still think that we should use react atleast for the frontend; Why are we uaing the same plain old way of using html, css, js when there are so many modern day frameworks that make the job of developers abd user more easy Use of react will also make it easier to solve those big problems as we will only see a small part of code rather than a big html with all the js where a lot of code is unnecessary and could be written in a better way; Atleast we can create a seperate branch for it and start working on it

[pranav1698]

Issues like #266 that is a major issue will be eventually solved using react

[sarnava1]

@pranav1698 your suggestions are perfect if we get a big enough site but for the present condition I think we can stick to flask and maybe later when this project expands we can start off with react from scratch. Isnt it @abishekvashok ?

[pranav1698]

I understand your point @sarnava1, but i think that seeing the current pace of web development, react will be replaced by a more effective framework that have their base on react, Why are we still using html, css, js for even a small site when using react we can easilly scale up further also routing that will be a problem can be easilly solved uding client side routing that react provides

[tabesin]

Please do not mix frameworks. It is a flask app.

[pranav1698]

Ok @tabesin