Contribute to LemmyNet/lemmy-ui-leptos development by creating an account on GitHub.

For any UI devs:

I’ve starting working on a lemmy front end called lemmy-ui-leptos using leptos, a Rust UI framework with isomorphic support, and tailwind + daisyUI for the component styling. This could eventually replace the frankenstein’s monster that lemmy-ui has become.

Some reasons for doing this:

  • lemmy-ui uses infernojs, which is based on the react model. IMO is largely superseded by signal-based reactivity in use in android jetpack-compose, SolidJS, and most new UI frameworks.
  • I had to hack on isomorphic support / server-side-rendering to infernoJS, and it’s very messy. Leptos has isomorphic support out of the box.
  • All the benefits of Rust over javascript.
    • Since leptos is in Rust, we can import the lemmy types directly.
    • I’ve been waiting for years for a good rust UI framework, and I think we’re finally here with leptos or sycamore.
  • lemmy-ui uses bootstrap, which is showing its age and limitations. Tailwind (and daisyUI) seem to be much more future-proof.

I plan on leaving the site design and component styling to other, more skilled UI devs, while I work mostly on the auth, services, params, and overall back-end structure.

  • Please use daisyUI classes tho whenever possible over exhaustive tailwind ones.
  • I’d also like it if the UI could match that of jerboa’s (whenever possible), so that a change in one could be represented in the other, and so that things like badge appearance for admins, could be recognizeable across lemmy’s front ends.

You don’t really need to learn rust to help out with this, as the components look very similar to JSX. Instructions for running it are in the CONTRIBUTING.md . Feel free to contribute!

Right now only the home page, and post pages are working, but ready to be styled.

  • Dessalines@lemmy.mlOPEnglish
    51·
    1 year ago

    With Tailwind you’re supposed to style your elements faster with atomic classes directly in your HTML.

    Tailwind is a very low-level utility framework, so you never have to add custom css, ever. Every front-end styling dev can now speak the same language, rather than constructing their own from scratch.

    DaisyUI you’re using semantic class names, so it’s basically going full circle to plain old CSS?

    Tailwind also uses class names, the point of both of these is to never have to make your own custom css. DaisyUI is useful because it has helper classes (you can also make these yourself in tailwind), that combine a bunch of tailwind low-level ones. Check out the daisyUI homepage, it shows this perfectly.

    I’ve also read that Tailwind has horrible performance for development since it moves around megabytes of utility CSS, that with DaisyUI, you are just not going to use, and will mostly be stripped out by a long build process before release.

    Tailwind compilers should only bring in the classes that you’re using, so it should be much smaller than almost any other framework.

    • sirdoriusEnglish
      32·
      1 year ago

      Every front-end styling dev can now speak the same language, rather than constructing their own from scratch.

      Ok, but with Tailwind it seems that they are just saying p-4 uppercase instead of padding: 1rem; text-transform: uppercase; which is shorter, but exactly the same thing since it maps 1:1 to ‘custom’ CSS. It also doesn’t abstract away the CSS underneath, it just gives it a new name, which you have to learn in addition to the CSS

      Tailwind compilers should only bring in the classes that you’re using, so it should be much smaller than almost any other framework.

      In theory yes, but in practice look at the link in my original post for how it becomes slow with hot reloading in Vite. I don’t know if it would have the same problem with leptos, but probably yes, since it is an architectural flaw of generate the world, strip it down later.

      DaisyUI is useful because it has helper classes

      I do get DaisyUI, and it does fulfill the goal of getting devs to speak the same language. <button class="btn btn-primary"> totally makes sense. What I don’t get is why couple and build it on top of Tailwind which becomes useless at this point, since it’s just shorthand for some CSS. Maybe I am missing some big feature of Tailwind? Quoting the creator of Tailwind from the main page

      So he is clearly against the approach that DaisyUI advertises as a selling point.

      • AnarchoYeasty@beehaw.orgEnglish
        4·
        1 year ago

        Just a tip. If you aren’t a frontend engineer probably don’t take stances on technologies based off of a blog post created 2 years ago. Tailwind is fast as hell, even a few years ago. It is only the dev build that had this issue and this issue has been solved for years. It’s no longer an issue. Tailwind is amazing and most devs who use it agree and will never go back to writing old css by hand again.

      • dreugeworst@lemmy.mlEnglish
        2·
        1 year ago

        From the little that I’ve used it, I believe Bootstrap for example provides both the lower-level classes like like p-4 uppercase and ui building blocks like btn btn-primary. So I guess by building daisyUI on top of Tailwind it will provide what frontend devs expect?