Target Browser platforms? about volumio2-ui

[apinner]

@kurtommy is our lead front end developer, he is best placed to answer a lot of those questions.

Edit: sorry i thought this was the main repo.

[volumio]

Hi alfatreze, thank you for your sensible comments. I'll try to explain some of the main design choices.

As you may know, previous UI was built with php + jquery on top on a restful interface. This worked quite well, but it had quite lots of limitations.

Then, being fascinated by the rise of full stack js, it was made the choice to steer on a total different approach:

• Node.js as backend
• Angular.js powered frontend. Instead of letting it be served directly by express and its routing, we decided to have a standalone UI. As you noted, one big advantage is that it can be easily packed into an app (on our roadmap). Also, we decided to script it as much as possible, and to make it modular (exactly as the backend).
  We took lots of inspiration from polymer, and treated each element as standalone.
• Communication handled by socket.io , for faster and event-driven communication.

Using socket.io itself drops automatically compatibility with older browsers, and that's the reason why we don't care that much of supporting old ones.

When we started building the UI we decided to use bootstrap (actually just few elements, like grid system and few other stuff..), and we decided to stick with 3 instead of embracing 4 (which was beta state at the time).

Also, another interesting consideration, is that performances are especially important in such player. For example, to render long lists, we dropped entirely angular (for that particular element) and wrote it in pure js. Sometimes less is better.

That being said, try to dive a bit into the UI project, and where you think you can improve this project, let us know. We'll be really happy to hear what you think, and curious to know how to improve this project.

[alfatreze]

I had a fairly good grasp of the overall architecture, but thank you for the further insights.

Interesting about angular lists too. Have you considered react at places though?

I did take a look at the UI, saw the customized bootstrap imports, the in need of a cleanup styles :P. Also since there is only a small subset of bootstrap, it indeed bears the question of why using it, giving that it is bound to cause issues and maintainability as you develop further. Also being an app and with no browser restrictions, flexbox has a fair number of benefits for the app.

I do need to set up my Pi again, and will start hacking away at it, while registering improvements with the changes.

Some elements benefit from being redone, like icons (css styled svg's), logos, and other interface elements. I have already redone the volumio logo in svg, with some quick kerning corrections. I will send it after properly redoing with a grid and proper spatial relationships.

In time I would love to incorporate more advanced functionality where it helps further the user experience and provide a richer UI.

[apinner]

All sounds very promising, I'm looking forward to seeing what you can contribute!

There is so much more that can be done with the UI to make it a richer experience. The focus has been on getting something out of the door though.

Flexbox is something I have read a fair bit about but yet to use so i'm intrigued.

[volumio]

Yes absolutely. I'm curious to see where you would want to intervene. I suggest discussing before PR...

[alfatreze]

It's a world of difference, especally for building webapps. Takes a fair number of pain points away, especially pertaining to using grid systems with floats and vertical positioning.

This is a really fun way for you to grasp flexbox better: http://flexboxfroggy.com/

[volumio]

Didn't knew about flex, but it seems quite convenient!!!!

[kurtommy]

Hi @alfatreze welcome!
We don't have a proper UX UI designer, the design is "community driven" and there is a lot to improve for sure.
You can start to make wireframes mocks, prototypes and everything you like to share with us.
About Flexbox: yes is great (not as much as grid, still in early stage) but we decided to adopt bootstrap because is more popular and maybe is one of the best choice for OS projects like this one.
We are using some components and the grid system which is good, tested, and used by major companies.

[kurtommy]

Hi @alfatreze welcome!
We don't have a proper UX UI designer, the design is "community driven" and there is a lot to improve for sure.
You can start to make wireframes mocks, prototypes and everything you like to share with us.
About Flexbox: yes is great (not as much as grid, still in early stage) but we decided to adopt bootstrap because is more popular and maybe is one of the best choice for OS projects like this one.
We are using some components and the grid system which is good, tested, and used by major companies.
About documentations: you can start to add automatic docs take a look also to this one: http://atomicdocs.io/

[alfatreze]

Hi @kurtommy,

I'm keen on picking up a few things, starting with a few small improvements, cleanups and restructuring and get the pulse for the community before committing to proposing major changes.

As for grid, hmm yes, waiting for it. Not for a couple more years unfortunately :(.

The question of bootstrap being well tested if fair, as for popularity - meh - not really a big factor. The benefits it brings as a framework are not that great for the scope and purpose of what we are using and it does come with drawbacks, also a fair number of issues that testing benefits, are mitigated by using flexbox, especially for layout, so i believe in general we'll benefit from dropping it to either custom css, a flexbox grid framework or a big framework like Foundation for Apss, although the last one is a bit more involved for integration.

[alfatreze]

Well, not really the place, but: insanely cool http://tympanus.net/Development/RecordPlayer/

This is more in the level on sophistication and interactivity I would love volumio to grow into 👯

[apinner]

Yeah that's pretty nice. I actually think I've seen it before.

I would say that's a long way off though. Whats possible isn't really the issue, it will be resistance to what is seen as unnecessary. Remember that Volumio is essentially a stripped down OS designed to be fast and provide the best sound possible. We have already had some resistance to the changes in the new UI being too "fancy" as it is. Seems people still like that stripped down and simple feel and sticking to the core value of the system.

I am completely behind new animations and transitions that improve the current UI though. There is so much that could be done to make the whole experience slicker.

Here is another example of one that i liked; http://codepen.io/pixelass/pen/zxZmYj

[alfatreze]

I do understand the view, but the impact on the OS should be minimal, as the UI will in many cases be rendered by a remote device. I do have to consider the use cases when evaluating the UI and consider possible benefits and drawbacks for each specific target.

These would also be easy enough to enable/disable with either a system toggle or reduce complexity through feature detection. though these would be musings for a later discussion.