React development environment for creating react version of xul dialog boxes

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

React development environment for creating react version of xul dialog boxes

Arshad Khan
Hi everyone,

I am an engineering student from India and I will be working on Convert XUL to HTML[1] project this summer as a GSoC-17 candidate. I will be converting some xul dialog boxes into their React version.

[1] https://wiki.mozilla.org/Community:SummerOfCode17#Calendar

I will be first making react dialog boxes in local react environment and then I will be testing them out in Thunderbird. For the local development environment I can't use any build tools or any other way that involves an extra compile step so I am only left with an option of importing React via script tags. I also won't be able to use jsx as well since it also need an extra step.

I am not sure what are the best possible options that we have for react development environment so I am looking forward to hear any suggestions or advises regarding this.

Regards,
Arshad
_______________________________________________
dev-apps-thunderbird mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-apps-thunderbird
Reply | Threaded
Open this post in threaded view
|

Re: React development environment for creating react version of xul dialog boxes

gNeandr-12
You may have a look at the project a project team at the VUW was working
on last year: start a new TB/Addressbook based on modern technologies. I
was aimed to replace the mature MORK based current TB/AB. Also it was
not finished, it could be a good starting point for you because it's
using indexedDB and React!
The project setup also uses ICAL.js (because that lib also supports
vcard definitions).
The dev environment was very simply and it generates a XPI which ca be
loaded with normal procedures into TB.
Currently I'm working on that project. Also it has not much progress
right now compared to the last years VUW project status I would
recommend to move to this GIT repro:
> https://github.com/neandr/vContacts

The last years VUW Git repro is here:
> https://github.com/Thunderbird301/react-addon

Feel free to contacts me for any further questions or if you need more help.
Guenter



On 03.06.2017 02:05, Arshad Khan wrote:

> Hi everyone,
>
> I am an engineering student from India and I will be working on Convert XUL to HTML[1] project this summer as a GSoC-17 candidate. I will be converting some xul dialog boxes into their React version.
>
> [1] https://wiki.mozilla.org/Community:SummerOfCode17#Calendar
>
> I will be first making react dialog boxes in local react environment and then I will be testing them out in Thunderbird. For the local development environment I can't use any build tools or any other way that involves an extra compile step so I am only left with an option of importing React via script tags. I also won't be able to use jsx as well since it also need an extra step.
>
> I am not sure what are the best possible options that we have for react development environment so I am looking forward to hear any suggestions or advises regarding this.
>
> Regards,
> Arshad
>

_______________________________________________
dev-apps-thunderbird mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-apps-thunderbird
Reply | Threaded
Open this post in threaded view
|

Re: React development environment for creating react version of xul dialog boxes

Arshad Khan
On Sunday, June 4, 2017 at 3:17:48 AM UTC+5:30, gNeandr wrote:

> You may have a look at the project a project team at the VUW was working
> on last year: start a new TB/Addressbook based on modern technologies. I
> was aimed to replace the mature MORK based current TB/AB. Also it was
> not finished, it could be a good starting point for you because it's
> using indexedDB and React!
> The project setup also uses ICAL.js (because that lib also supports
> vcard definitions).
> The dev environment was very simply and it generates a XPI which ca be
> loaded with normal procedures into TB.
> Currently I'm working on that project. Also it has not much progress
> right now compared to the last years VUW project status I would
> recommend to move to this GIT repro:
> > https://github.com/neandr/vContacts
>
> The last years VUW Git repro is here:
> > https://github.com/Thunderbird301/react-addon
>
> Feel free to contacts me for any further questions or if you need more help.
> Guenter
>
>
>
> On 03.06.2017 02:05, Arshad Khan wrote:
> > Hi everyone,
> >
> > I am an engineering student from India and I will be working on Convert XUL to HTML[1] project this summer as a GSoC-17 candidate. I will be converting some xul dialog boxes into their React version.
> >
> > [1] https://wiki.mozilla.org/Community:SummerOfCode17#Calendar
> >
> > I will be first making react dialog boxes in local react environment and then I will be testing them out in Thunderbird. For the local development environment I can't use any build tools or any other way that involves an extra compile step so I am only left with an option of importing React via script tags. I also won't be able to use jsx as well since it also need an extra step.
> >
> > I am not sure what are the best possible options that we have for react development environment so I am looking forward to hear any suggestions or advises regarding this.
> >
> > Regards,
> > Arshad
> >

Thanks for the reply. Well I have found out another solution that basically serves up all my need for this project.

This repo[1] uses gulp and babel to convert jsx into vanilla js and maintain the exact directory structure of source files. I am right now using this, and it works well for making short components like dialog boxes of thunderbird with jsx.

[1] https://github.com/arshdkhn1/gsoc17-convert-xul-to-html

Please do take a look at it and comment if there is any kind of improvement that I can do.
_______________________________________________
dev-apps-thunderbird mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-apps-thunderbird
Reply | Threaded
Open this post in threaded view
|

Re: React development environment for creating react version of xul dialog boxes

R Kent James
With the requirement being to run in Thunderbird with no transpiling and
minimal use of outside libraries, I am surprised that you are starting
in a JSX environment with full node tools available. There is the
existing event-in-a-tab work using React in Lightning, I would think
that would be a better starting place than a nodejs environment with
babel, express, gulp, etc as dependencies.

My guess is that you are more familiar with tooling in a browser
environment than in a Thunderbird/Mozilla environment, and there is
certainly more information available on getting started there. But you
really need to face the issues of running in Thunderbird with minimal
tooling sooner rather than later. I would encourage you to move as
quickly as possible to doing your work in a XUL addon environment, where
you can fully integrate into Lightning. If you get too far down the path
of JSX, express, and other technologies that are not what Fallen wants,
then you are asking to go astray.

That being said, we in the Caspia Contacts project are actually pursuing
a path very similar to what you have outlined here, that is starting
with minimal apps that run in a variety of environments. But our goals
are different than yours, we are explicitly exploring how code needs to
be organized to run in Thunderbird, Electron, web/express, and
Progressive Web App environments.

:rkent


_______________________________________________
dev-apps-thunderbird mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-apps-thunderbird
Reply | Threaded
Open this post in threaded view
|

Re: React development environment for creating react version of xul dialog boxes

Arshad Khan
On Saturday, June 10, 2017 at 10:42:31 PM UTC+5:30, Kent James wrote:

> With the requirement being to run in Thunderbird with no transpiling and
> minimal use of outside libraries, I am surprised that you are starting
> in a JSX environment with full node tools available. There is the
> existing event-in-a-tab work using React in Lightning, I would think
> that would be a better starting place than a nodejs environment with
> babel, express, gulp, etc as dependencies.
>
> My guess is that you are more familiar with tooling in a browser
> environment than in a Thunderbird/Mozilla environment, and there is
> certainly more information available on getting started there. But you
> really need to face the issues of running in Thunderbird with minimal
> tooling sooner rather than later. I would encourage you to move as
> quickly as possible to doing your work in a XUL addon environment, where
> you can fully integrate into Lightning. If you get too far down the path
> of JSX, express, and other technologies that are not what Fallen wants,
> then you are asking to go astray.
>
> That being said, we in the Caspia Contacts project are actually pursuing
> a path very similar to what you have outlined here, that is starting
> with minimal apps that run in a variety of environments. But our goals
> are different than yours, we are explicitly exploring how code needs to
> be organized to run in Thunderbird, Electron, web/express, and
> Progressive Web App environments.
>
> :rkent

Hi Kent,

I completely agree with you but let me explain why I am using these tools.

Babel - transpiling react jsx to vanilla js and live reload

Gulp - Copying html and css files from src to dist directory(the code in dist directory will be the code that we will be testing out in thunderbird)

Express - There was no need to use it. I was getting some BOM issues with the minifiled babel file and I thought these issues can be removed by explicitly setting the headers of js files so I ended up serving react and babel scripts via express server.

Well I only had one option of using react via scipt tags and do development without jsx and any other tool and then check that code in thunderbird.
I later thought why not use jsx and transpile the code when I am done with the development and check the transpiled code in thunderbird.
Following any of the above options, I ended up having same code and same files but with the second option I can use jsx to save some time.

The final code that we'll be testing out in Thunderbird will be vanilla js and will not need any outside libraries. The development environment that Paul (event in a tab project candidate) had was plain react via script tags. Maybe I am missing something here, but I dont understand how it will create any issues in future?

Regards,
Arshad
_______________________________________________
dev-apps-thunderbird mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-apps-thunderbird
Reply | Threaded
Open this post in threaded view
|

Re: React development environment for creating react version of xul dialog boxes

Philipp Kewisch-2
In reply to this post by R Kent James
On 6/10/17 7:12 PM, Kent James wrote:
>  If you get too far down the path
> of JSX, express, and other technologies that are not what Fallen wants,
> then you are asking to go astray.

Hey Kent,

from what I gathered from Arshad, using babel it is easy to generate
pure JS from the jsx that he is currently using. What we are doing this
year is a slightly different than in previous SoC's, but I think it may
turn out to be more effective.

Instead of having Arshad spend extra time at the beginning getting used
to XUL, I'd rather have him work in an environment where he is effective
and using tools he is used to. This will allow rapid development of the
dialog UI. Especially the live reload features will accelerate this

Separately, we will work towards integrating the dialog with XUL. This
will mean using something like babel to turn jsx into js, or using some
templating library that would allow separating the html parts.

We are working on the calendar properties dialog at the moment, which is
simple to implement. Arshad will soon attempt to integrate it with the
xul dialog, at which point we will be able to see how well it works out
and make changes as necessary.

Philipp
_______________________________________________
dev-apps-thunderbird mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-apps-thunderbird