Onboarding newbies and documentation

[gavinpotter]

First, can I say, this is way above any other package that I've used for trying to make front ends for python projects. I'm a very experienced python developer, but have little to no knowledge of javascript html and css - which I guess is your target group. As I understand the library you have essentially abstracted away all the html and javascript but the user still has to have a knowledge of css. I like the way that you can use tailwind or raw css. However...

1. I think you need to provide some explanation of the flex system or a reference to it (Quasar has a nice explanation) which will be new to a number of your users.
2. I initially found the use of context managers confusing because - again for newbies - its not clear what is happening underneath the context manager. I guess you are creating an html element that is a child of the html element providing the context. It might be good to explain that somewhere. Personally, I would have prefered an "add" method on each element which would add a child to the parent element as that would make it more specific and clear, which enables you to write something like :

page.main_content.add(ui.label,text="This is text").add(ui.row, id="first row")

I have implemented this and implemented an id system so it was easy to name and refer to elements such as "main_content" above, which allowed easy separation of different parts of the interface I was building which I again I found easier than using context managers. I have 30 lines or so of code that does that if you are interested in adding it as an alternative approach that I'm happy to provide.

I also found it slightly confusing because most of your examples (because they are very simple) don't use context managers. I would have prefered it if you always had to use a context manager even if you were adding items directly to the main page.

These are all minor comments and suggestions, but I thought it might be useful to document the issues I found in the first two days playing with the library. Congratulations on a really excellent and well documented library.

[v479038280]

IFirst, can I say, this is way above any other package that I've used for trying to make front ends for python projects. I'm a very experienced python developer, but have little to no knowledge of javascript html and css - which I guess is your target group. As I understand the library you have essentially abstracted away all the html and javascript but the user still has to have a knowledge of css. I like the way that you can use tailwind or raw css.

I agree with you
So,I also suggest that besides the use of classes,props,and style, It's better to provide some ready to use template ,we need to adjust the classes,but we don' need to adjust them for every element,we only need to adjust them for some specific tasks.
And I also suggest that the default UI could be nicer , which now I think is simple but not beautiful
Here is some example I think is simple and beautiful

And I think the default components of Qussa looks better than the one in nicegui,

[gavinpotter]

I agree that having some stylish templates would definitely help together with some more documentation on how the layout components of css work for those of us who are new to css.

[v479038280]

It takes some time to familiar with Css especially the layout ,I also have such feeling

[rodja]

And I think the default components of Quasar looks better than the one in nicegui,

We try to use all elements "as is" and not modify the styling default styling of Quasar. Do you have examples where NiceGUI deviates?

It's better to provide some ready to use template

This was already suggested on #1461 and I would like everyone to comment over there so we have a single place for this topic.

[v479038280]

We try to use all elements "as is" and not modify the styling default styling of Quasar. Do you have examples where NiceGUI deviates?

For example ,the button color ,I think the primary is better

[rodja]

@v479038280 Yes, the color is different. We use the NiceGUI color as default which can easily be changed with https://nicegui.io/documentation/colors. But other stylings (font, lowercase, no-shadow etc) of the button with the text "primary" are non-default so this is not a good example of where we deviate from default.

[rodja]

I think you need to provide some explanation of the flex system or a reference to it (Quasar has a nice explanation) which will be new to a number of your users.

I agree! Currently we have only https://nicegui.io/documentation#styling which generally hints to Quasar and mentions props, classes and style. We also have a whole section about layout, showing card, row, column etc. Maybe that is a good place to add a subsection "complex layouts" which explains the general use of css, tailwind etc for arranging elements and link to further documentation in Quasar etc. Anyone interested in creating a pull request for that?

I would have prefered an "add" method on each element which would add a child to the parent element

@falkoschindler explained in #247 why we think nesting with context managers is the right way for a layout framework. He also plans a talk at the nex Pycon Ireland about this. But don't get us wrong. We love discussing architecture and design decisions. To not mix up so many topics in one discussion I suggest you create a new one surrounding the possibility to use .add or similar.

I would have prefered it if you always had to use a context manager even if you were adding items directly to the main page

I'm not quite sure how that would look like. Could you open a third discussion surrounding that topic and provide some examples?