Comments (13)
@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.
from volumio2-ui.
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.
from volumio2-ui.
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.
from volumio2-ui.
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.
from volumio2-ui.
Yes absolutely. I'm curious to see where you would want to intervene. I suggest discussing before PR...
from volumio2-ui.
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/
from volumio2-ui.
Didn't knew about flex, but it seems quite convenient!!!!
from volumio2-ui.
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.
from volumio2-ui.
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/
from volumio2-ui.
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.
from volumio2-ui.
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 👯
from volumio2-ui.
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
from volumio2-ui.
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.
from volumio2-ui.
Related Issues (20)
- Suggestion re. virtual keyboard
- Lot of 404 due to multiroom dock HOT 2
- Mouseover on top "repeat off" icon shows message "repeat" not "repeat off"
- [2.915 on RPi2] first-run wizard immediately disappears
- [2.915 on Pi 2] UI not accessible, ssh works HOT 15
- Adding a 'sort by' dropdown on the Browse Albums page
- Outdated/Unused dev-dependencies
- Support NVM HOT 1
- Add bower as package dev dependency HOT 2
- Add to favorites stays 'on' on my local songs [v.3.179]
- Toast message of type "stickyerror" does not stick HOT 4
- Security Issue - Point of contact request HOT 2
- no graphic elements and album art in the web version ui HOT 17
- Suggestion: library navigation modification HOT 1
- Is it still used by Volumio v3 or not? HOT 1
- Feature Request: Update Font Awesome
- Alignment of items in a track listing inconsistent
- Alignment of track details on mobile (or narrow browser window) slightly off
- Track times not aligned if both one and two digit minutes appear
- Volume control not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from volumio2-ui.