Which one is the best practice of Dash applications syntax?

Dash Python
1

Hey everyone,

I am developing some applications, Python packages, and planning to open-source these codes. But I am confused about syntax, mostly about “children”, which one is more clean and readable for you? Is there a standard that I can utilize from?

Code 1:

navbar = dbc.Navbar([
        html.A(
            dbc.Row([
                dbc.Col(html.Img(src=CEPEL_LOGO, id="cepel-logo")),
            ], align="center", no_gutters=True)
        ),

        dbc.NavbarToggler(id="navbar-toggler"),

        dbc.Collapse(
            dbc.Nav([
                dbc.NavItem(dbc.NavLink("Page 1", href="#")),
            ]),
            id="navbar-collapse",
            navbar=True
        )
    ]),

Code 2:

navbar = dbc.Navbar(
        [
            html.A(
                    dbc.Row(
                        [
                            dbc.Col(html.Img(src=CEPEL_LOGO, id="cepel-logo")),
                        ],
                        align="center",
                        no_gutters=True,
                    ),
                    href="https://plot.ly",
                ),

                dbc.NavbarToggler(id="navbar-toggler"),
                dbc.Collapse(
                    dbc.Nav(
                        [
                            dbc.NavItem(dbc.NavLink("Page 1", href="#")),
                            #nav_item_about,
                            #nav_item_github
                        ], className="ml-auto", navbar=True
                    ),
                    id="navbar-collapse",
                    navbar=True,
                ),
        ],
2

Hey @cepel This is a great question!

Plotly currently uses Black version 21.6b0 to format code.

I think Black is like magic. I run it regularly while I’m coding - it saves so much time. No need to focusing on things like spacing and alignment - - Black can do that for you in a sec! It also makes code easier to read and to debug.

Here is what your code example would look like after formatting with black v21.6b0

navbar = (
    dbc.Navbar(
        [
            html.A(
                dbc.Row(
                    [
                        dbc.Col(html.Img(src=CEPEL_LOGO, id="cepel-logo")),
                    ],
                    align="center",
                    no_gutters=True,
                )
            ),
            dbc.NavbarToggler(id="navbar-toggler"),
            dbc.Collapse(
                dbc.Nav(
                    [
                        dbc.NavItem(dbc.NavLink("Page 1", href="#")),
                    ]
                ),
                id="navbar-collapse",
                navbar=True,
            ),
        ]
    ),
)

Also, if you know that you will only have one item as children, then it doesn’t need to be in a list. Here is another version formatted with Black after the [ ] is removed:

navbar = dbc.Navbar(
    [
        html.A(
            dbc.Row(
                dbc.Col(html.Img(src=CEPEL_LOGO, id="cepel-logo")),
                align="center",
                no_gutters=True,
            )
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
        dbc.Collapse(
            dbc.Nav(
                dbc.NavItem(dbc.NavLink("Page 1", href="#")),
            ),
            id="navbar-collapse",
            navbar=True,
        ),
    ]
)
1 Like
3

Thank you so much @AnnMarieW! I was also thinking that Code 2 is easier to read and understand. However, using many square brackets increases complexity. I tend to use [] even don’t need it, thinking I can refactor the code again and add more items. But this seems unreasonable.

I have just tried black, as you said, it’s amazing! I will try no to use redundant [] and reformat the code with black, thank you for your answer.

1 Like