#component library

There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.

The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.

Today's Talk explores the concept of reusable components, focusing on levels of reusability such as inversion, extension, and nesting. Props are discussed as a means of achieving flexibility and configuration in components. Inversion of control and scoped slots are introduced to give components adaptability. Extension points provide the ability to override specific parts of an application within a single component. The Talk also covers the use of slots and nesting for component flexibility and reusability.

Scalable forms in Vue, approachable for all skill levels, with code reusability and best practices. Front-ends divided into websites and applications, with forms being highly interactive and logic-heavy. Form Components in Vue provide accessible markup, delightful validation, and customizable props. Using vModeling encourages code reuse and collaboration. FormKit offers a comprehensive solution to form problems, including structured data, unique form keys, and robust validation UX. It simplifies form creation, supports CMS-like experiences, and provides advanced features and TypeScript support.

Shed CN Vue is a component library that allows for easy customization of components and styling. It is built on top of RedixView, which enables the use of primitives and element customization. Tailwind CSS is used for easy customization of layout, styling, animations, classes, and icons. The documentation provides more details on how to leverage these features.

Jorge Rubiano, a Software Engineer from Colombia, shares puzzle, isometric, and board games developed using React.js and CSS. He demonstrates the use of WebGL and 3.js for creating 3D games on the web. ReactiveFiber, a renderer that combines React and 3.js, is showcased in movement-based and color-changing games. The Talk concludes with the development of a bowling game using ReactiveFiber and complex components.

Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.

CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.

The Talk discusses the importance of building an accessible UI component library, focusing on reusability, customizability, and responsiveness. It emphasizes the need for visual and functional consistency when developing components and highlights the key aspects of accessibility, including keyboard navigation, contrast, and content structure. The Talk also covers the building of accessible dialogues and provides tips for enhancing user experience. It emphasizes the significance of documentation, scalability, and customization in component planning. The Talk concludes by discussing the use of ARIA, accessibility testing, and strategies for persuading organizations to prioritize accessibility.

Jumbo, a grocery chain in the Netherlands, has a tech campus with over 400 developers working on digital solutions. They built a distributed component library called Kompas, allowing everyone to contribute and ensuring knowledge is not lost. They adopted a hybrid solution, combining centralized and decentralized approaches, for fast development while maintaining a clear vision and high-quality standards. The key takeaway is to be willing to change processes and find what works best for your organization or team.

This talk explores the migration and upgrading of a Component Library in Vue and Nuxt. It draws inspiration from nature's great migrations and emphasizes the need for collaboration and compatibility. The talk discusses the team setup, including microservices and standardized modules. It highlights the migration from Vuex to Pina or Apollo Clients in micro frontends. The distributed approach to maintaining the component library is emphasized, as well as the use of Vue Demi for upgrading to Vue 3. The talk emphasizes the importance of delivering value and supporting both Vue 2 and Vue 3 in the migration process.

Today's Talk discusses the importance of a good component API and the balance between rigidity and flexibility. The demo showcases the gradual evolution of a component's configurability while maintaining ease of use. Measuring the effectiveness of a component library involves factors like adoption rate and component coverage. Collecting data and embracing breaking changes are crucial for continuous improvement. Ensuring consumers are updated and on the cutting edge is a responsibility of the library provider.

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.

The Talk discusses putting the graph in GraphQL with the Neo4j GraphQL Library. It explores building GraphQL APIs backed by a graph database and the comparison between Cypher and GraphQL. The Neo4j GraphQL library provides powerful features such as CRUD functionality, authorization, and pagination. It also covers topics like database integration, hiring for the GraphQL team, and deploying a GraphQL API with the Neo4j GraphQL library.

This talk discusses the life of a GraphQL developer at Yelp, covering tooling, processes, and the scale of GraphQL usage. It emphasizes the importance of making good schema choices and using GraphQL Faker for quick iteration. The talk also highlights the challenges of using data loaders at Yelp and the solutions implemented, such as code generation and precommits. It mentions the significance of schema review, documentation, and GraphQL adoption. Lastly, it mentions the value of obsessive documentation and the use of vPress for generating markdown and an in-house UI for query reference.

React was built for component-driven development. Challenges of component sharing include the inability to easily share components across applications. Monorepos have benefits but can also present challenges such as slow IDE performance and merge conflicts. Onboarding developers and the deployment process can be time-consuming. Bit solves these challenges by allowing isolated and versioned components in a monorepo, providing easy component search, filtering, and versioning, and enabling component-driven development.

This Talk discusses modular architectures, patterns, and components in software development. It explores the concept of creating components and pattern libraries, as well as the challenges and benefits they present. The Talk also delves into managing code for flexible pattern usage and the responsibility of modules. It addresses issues such as class name injection, specialized patterns, and modifying components. Additionally, it emphasizes the importance of communication and collaboration with designers, testing UI complexity, and organizational responsibility for UI.

ReactJS is a JavaScript-based framework that emphasizes the importance of building amazing documentation to reduce questions. The speaker discusses the custom website built using Next.js and MDX, and the challenges of dealing with JSX and the compilation process. The talk also covers interacting with NAPs, extracting information from code using AST, and the benefits of using Babel and AST Explorer. The process of building and generating code with AST is explained, along with the importance of documentation and ReactVue. The speaker also provides insights on getting started with documentation, building custom documentation, and keeping it in sync with the code.

Paid UI components are not evil and offer benefits such as guaranteed support and long-term peace of mind. They solve harder problems and provide features and guarantees that free controls may not have. Paid components also establish a direct financial relationship with the authors, eliminating the need for sponsorship or donation models.

Today, I want to talk to you about building custom component libraries fast. Every company should have its own standard set of UI controls for consistency in design, technology, and accessibility. Companies shouldn't build the harder parts of those libraries themselves, such as date pickers and data grids. But as a software developer, your time is valuable. Building custom component libraries is a better use of your time than reinventing the wheel.