Image-sequencer: Use babel for UI files

[harshkhandeparkar]

Please describe the problem (or idea)

We can use babel while compiling ui files. As we have recently started adding ui files to dist/ directory, we can write es6 code for the ui and compile it using babel. This will allow us to shorten the long lines of step.ui which contain \ every line break and + operator for every dynamic field which is loaded from module files using template literals. We can also use many other features like destructuring and arrow functions to write efficient code.

---

Thank you!

[harshkhandeparkar]

@publiclab/is-reviewers is this issue helpful?

[Divy123]

I think the idea is awesome.
Your opinion please @jywarren .

[harshkhandeparkar]

@tech4GT @jywarren this issue can potentially shorten a lot of code but implementing this may be a bit difficult as the index.html will have to include the compiled code and not es6 code. Potentially webpack might also be required for pulling this off.

[Divy123]

Thanks @HarshKhandeparkar for opening this issue.
Can make a big change for the good.

[harshkhandeparkar]

I have an idea, the examples/ directory can be divided into two parts the src folder and the index.html file. All the js source can go inside the src folder inside the examples/ directory and images etc. can remain where they are.

Instead of requiring each js file from src/ or lib/ folder, the index.html can require dist/image-sequencer-ui.min.js. Everything else will remain the same including the /examples/ URL if this is implemented this way.

The only problem will be that UI files will have to be watched and compiled on change too.

[jywarren]

Agreed! Actually the UI files are already compiled now, via a PR
from @Mridul97 -- and they'll be browserified too in a new PR! This is a
great idea and we could include Babel in the Gruntfile, right?

On Mon, Jan 14, 2019 at 7:17 AM Harsh Khandeparkar [e-mail]
wrote:

I have an idea, the examples/directory can be divided into two parts the
src folder and the index.html file. All the js source can go inside the src
folder inside theexamples/` directory and images etc. can remain where
they are.

Instead of requiring each js file from src/ or lib/ folder, the index.html
can require dist/image-sequencer-ui.min.js. Everything else will remain
the same including the /examples/ URL if this is implemented this way.

The only problem will be that UI files will have to be watched and
compiled on change too.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/image-sequencer/issues/670#issuecomment-453985737,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJzFMDgIH7CLPUlT1wGP5ovBUlRT_ks5vDHUzgaJpZM4Z9NMm
.

[Divy123]

Yes this is great to implement and I would like to work on this.

[jywarren]

That sounds great! Thank you.

On Mon, Jan 14, 2019 at 4:36 PM Slytherin [e-mail] wrote:

Yes this is great to implement and I would like to work on this.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/publiclab/image-sequencer/issues/670#issuecomment-454170489,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AABfJ00YtsphCigCu8ovlZWQzqTTVFiQks5vDPhGgaJpZM4Z9NMm
.

[akshaygupta533]

I am willing to contribute to this. @HarshKhandeparkar @jywarren can you guys guide me through this?

[Divy123]

@akshaygupta533 I am working on this.
You may look into some other issue.

[Divy123]

As I think we are discussing to use React and redux for the UI, this issue can be referrenced there and it can make better impact.