Improve the developer experience by choosing a UI framework or creating an API

[daggerhart]

This issue relates to a discussion had on twitter about adopting a frontend framework for easier development.

Original thread: https://twitter.com/nmdmatt/status/860206053048414209

Angular 2

I attempted to work Angular 2 into the project (seen here) but it is incomplete to say the least.

The main issue I ran into was that the frontend scripts could not access electron related data/objects.

Apparently systemjs overrides the require() function, which results in the inability to access node_modules- related stuff. There are a supposed work around or 3, but none of them have worked in my attempts.

This means that in an angular route or component, I couldn't call fs = require('fs');, because systemjs would look in the wrong location and not find it.

I've seen a number of videos which show the interaction between angular2 to be easy, and without the issue around require(). They all use webpack.

If we're to continue with angular, maybe we start from a working angular-electron skeleton, and rebuild the conductor functionality on top of it. I believe angular-cli uses webpack, and when using webpack we can use the cheat-code (video2, ~3:20m) to get it to import election.

Alternatively we look at another frontend framework.

[mglaman]

If we're to continue with angular, maybe we start from a working angular-electron skeleton, and rebuild the conductor functionality on top of it. I believe angular-cli uses webpack, and when using webpack we can use the cheat-code (video2, ~3:20m) to get it to import election.

Agreed. We'd have to start from a new generator and add in functionality on top.

I was also looking at https://github.com/docker/kitematic, which uses React instead. Could provide some examples. And I was actually thinking the UI works out. Left bar is Global, Project, Project, Project.

I haven't found any good Angular2+Electron repositories to reference. And given that Electron and Angular aren't part of my day job, I'm leaving towards something I can more easily reference.

[daggerhart]

@mglaman Some updates & a competitor:

I help organize drupal camp asheville, and this year we've accepted a speaker who is discussing react and electron -- https://www.drupalasheville.com/2017/session/react-json-api-drupal-8-my-choice-desktop-application

I've emailed him and asked if he is interested in sprinting on the conductor project with me at the camp to get us jump started into react, he has agreed to help. 👍

In other news, someone recently released a beta for a composer UI: https://www.getcomposercat.com/ -- I don't see anything about that project being open source, and the "beta" tag makes me think they are considering monetizing. But I'm curious how you feel this effects the conductor project.

[mglaman]

@daggerhart this should still be developed.

Composercat is amazing. But I do feel it'll be freemium. I think we need an open source tool. Just like how we have VSCode and Atom.

[daggerhart]

I submitted PR #44 that converts the project into vue.js apps.

Recently played w/ vue for a personal project and really appreciated the low barrier to entry. There are no additional build tools involved, just including the vue.js on each page.

If you want to go with this as the frontend framework, we would be in a really good place to convert the multiple windows into more of a single page app where reusable components share a global state. And since it's so simple, it should be relatively easy to move to another frontend framework in the future if we want.

Let me know what you think

[daggerhart]

Since we've chosen a js view layer for now, I'm wanting to get thoughts for next steps working with the UI.

1. Should we adopt a CSS framework to simplify implementation of design. Some options that jump out to me are:
   • Minimal: PureCSS - https://purecss.io/
   • Expansive: Vuetify (like bootstrap for vue.js, includes components) - https://vuetifyjs.com/
2. How would you like for me to proceed w/ UI work? Should I make mockups and submit them in the issue queue for approval? Or will PRs w/ screenshots be fine?

Edit: Because I'm a lazy developer, I'd vote for Vuetify for the CSS framework. I like material design okay, and there is value in the speed in which we could implement and have a great looking app.

[mglaman]

Vuetify works for me