search

volumio / Volumio2-UI

Volumio2 Web Based User Interface
http://volumio.org
168 stars 163 forks source link

Target Browser platforms? #136

Closed alfatreze closed 7 years ago

alfatreze commented 8 years ago

Hi,

I've been following volumio for a long time, and although loading it only as a test on my pi (oh the shame), and thinking of building a proper one for wayy too long - being a front-end designer I would love to help this new AWESOME, forward looking version to shape up.

I have only skimmed at the code, but some things do worry me a little (bootstrap3), and I would like to know what are the target browser platforms as well as technical considerations defined for the development of volumio 2.0.

As an example, looking at the index.html, it would seem to be => IE10 and probably evergreen browsers. This would pull to question the use of flexbox, as it solves some layout problems with simpler more maintainable code.

Also the use of bootstrap instead of a custom codebase could be questioned, as bootstrap 3 generally needs a lot of resets with heavy modifications. Might as well use foundation for Apps as it is already built on Angular and built on mixins which makes building a more customized, easier to maintain stylesheet. Could also go more in depth and build with bourbon, perhaps susy and/or other more specialized libraries (ex: animate.css) as well as more custom code.

Other useful features to add would be automatic sass documentation (http://sassdoc.com) as well as feature detection (modernizr) to create more specialized rules and easily allow for progressive enhancement.

I hope my view on a few things doesn't clash with the active development community and I'm quite keen on getting my hands dirty and contribute with my knowledge to this wonderful project.

Regards,

apinner commented 8 years ago

@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 commented 8 years ago

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:

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

alfatreze commented 8 years ago

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 commented 8 years ago

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

kurtommy commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 :dancers:

apinner commented 8 years ago

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 commented 8 years ago

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.