Nautilus Cyberneering
Replies: 3 comments
-
|
Hi @grmbyrn I think we started using this https://daisyui.com/components/ in the Index. The amount of Web Components Libraries is overwhelming: https://www.frontendplanet.com/top-ui-component-libraries/ And I would include the option of maintaining ours. Anyway, I think it depends on what you are going to use it for:
From my experience, unless you have a really complex app (in UI), I would continue using ours for simple static websites. For the Torrust Index, I would consider a library like https://daisyui.com/. I think I would choose one that is:
|
Beta Was this translation helpful? Give feedback.
-
|
I think in this case, choosing a library that is going to have support in the future is key. It's always interesting to experiment in personal projects with new and exciting libraries, but for something that is going to be in production or used by users, future support would avoid a lot of pains further down the road. I would chose Skeleton out of the three, because it seems like the one that is going to have support from both the devs and the community in the long term. Learning Tailwind and Svelte can take time but at the end of the day, they are really famous technologies and I suppused are not that different from other front end libraries/frameworks, so it can be a good investment. What worries me the most about Skeleton is the lack of good documentation. Also I agree with what Jose suggests, I've just checked and daisyUI is agnostic, so we can use it with the new Git secure guide, Torrust website, etc. That is my opinion, I don't have a lot of experience on this topic, I would try to do some more research because I think this is a really important decision, but at the end of the day, you only know if something works once you start using it, maybe doing some small demos would help clear things out. |
Beta Was this translation helpful? Give feedback.
-
|
I've just found this one: https://github.com/squaresapp/rawjs |
Beta Was this translation helpful? Give feedback.
-
Hi @da2ce7, @cgbosse, @mario-nt, @josecelano, @WarmBeer. After the meeting yesterday I started going deeper into some of the suggested web components options. There are a lot more options out there, but it seems like maintainers abandoning projects is a recurring theme, and adopting newer options could risk this happening in the future. These three were the main ones I looked into, but more are mentioned in this video, or if there are any other options you'd like to look at, just let me know.
Skeleton:
Skeleton is a UI toolkit designed for Svelte and Tailwind. It leverages Svelte's data features like components, stores, and actions while embracing Tailwind for styling. Unlike other libraries, Skeleton UI doesn't impose a rigid design system, allowing users to easily customise the appearance of components.
Pros:
Skeleton allows for extensive customisation of styles, leveraging Tailwind classes and variants. Users can easily modify the appearance of components without being restricted to a predefined design system.
The development team behind Skeleton is active and responsive, actively seeking feedback from the community to improve the library. Users can reach out on Discord or GitHub to ask questions, suggest features, or report issues, fostering a collaborative development environment.
The library provides a theming system with a theme generator, allowing users to create and customise themes in real-time. This includes options for adjusting font family, text colour, border radius, and other design tokens, providing a powerful way to manage the overall design system.
Cons:
While Skeleton UI offers powerful features, its extensive capabilities may result in a steeper learning curve for beginners. Users need to familiarise themselves with Svelte, Tailwind, and Skeleton's specific approaches to achieve optimal results.
As a toolkit tailored for Svelte and Tailwind, users who are not already familiar with these technologies may need to invest time in learning them before effectively using Skeleton. This could be a drawback for those who prefer different frameworks or CSS methodologies.
While the library has comprehensive documentation, some users might find it challenging to navigate due to a lack of in-depth examples or detailed explanations for certain features. Clearer documentation could enhance the learning experience for users, especially those new to Svelte and Tailwind.
Shoelace:
Shoelace is a web components library designed to provide a collection of customisable UI components that can be easily integrated into web projects. Web components are encapsulated, reusable elements that offer both customisable appearances and functionalities through events.
Pros:
Shoelace offers a straightforward integration process, allowing users to quickly include the library via a CDN or npm. The library's documentation provides clear instructions, making it accessible for developers, even those new to web components.
The library allows for extensive customisation of individual components. Users can modify appearance and behaviour using properties, events, and methods provided by each component. Additionally, the use of CSS parts and custom properties provides a high level of control over styling.
Shoelace provides a diverse set of UI components, including alerts, avatars, buttons, and more. This rich collection makes it suitable for a wide range of web applications, saving development time and effort by offering pre-built, stylable components.
Cons:
While Shoelace provides a comprehensive set of components, it may not be as widely recognised or adopted as some other UI component libraries. This could result in a smaller community for support and fewer resources available compared to more established libraries.
For developers unfamiliar with web components, there might be a learning curve to understand the concepts and how to leverage the full potential of Shoelace. However, the library's documentation aims to assist users in getting started.
Shoelace primarily relies on JavaScript for integration and interaction with components. For projects emphasising server-side rendering or those with minimal JavaScript, this could be considered a drawback, as it may not align with certain development philosophies.
Grail UI:
Grail UI is a Svelte library that provides tree-shakeable components, actions, and utilities for building accessible and high-quality web applications efficiently. It emphasises flexibility by allowing developers to selectively include only the required functionality in their projects, optimising performance and reducing bundle size. The library follows a reactive approach, using Svelte stores and actions for state management and event handling.
Pros:
Grail UI's tree-shakeable package allows developers to include only the necessary components, actions, and utilities, optimising bundle size and improving performance by reducing unnecessary dependencies.
Grail UI provides a flexible approach to styling, enabling developers to define the DOM structure and apply DOM props according to their preferences. This allows for complete customisation and integration with various CSS frameworks.
By leveraging Svelte stores and event delegation, Grail UI minimises the impact on bundle size and runtime performance. This approach allows for efficient handling of state and event interactions, contributing to better overall performance.
Cons:
As with any library or framework, there may be a learning curve for developers who are new to Svelte or Grail UI. Understanding the reactive model, stores, and actions may take time for those unfamiliar with these concepts.
Depending on the specific needs of a project, the ecosystem around Grail UI may be more limited compared to larger frameworks or libraries. This could result in fewer available plugins or community support.
While tree shaking is a powerful feature, it may not be suitable for all projects or development environments. In some cases, developers may face challenges related to dependency management, especially if the project requires compatibility with specific versions of other libraries or frameworks.
Beta Was this translation helpful? Give feedback.
All reactions