Vue.js Live Conference

Vue.js Live 2024

Prime Vue is a comprehensive UI component suite with over 90 components, including date pickers, buttons, tables, and grids. It offers flexibility through styled and unstyled modes, allowing for customization using design tokens or Tailwind. Prime Vue is WCAG compliant and supports Material design. The upcoming version 4 introduces a new theming API using CSS variables, and it includes features like dark mode switching and integration with Figma. The team has plans to release a UI Designer, advanced components, and a drag-and-drop UI Builder in the future.

PrimeVue is a popular UI Component library for Vue 3 featuring over 80 components,  unstyled mode with Tailwind CSS presets, pass-through properties, design-agnostic theming, icons, blocks, and templates.PrimeVue is one of the most popular UI libraries in the Vue ecosystem. The talk begins with an overview of the feature set and dives into the detail for each of the content points below; - Overview- Best Practices of UI Component Development- Component Suite- Pass Through API- Design Agnostic Theming- Unstyled Mode- Tailwind CSS Presets- Icons/Blocks/Templates- Figma to Theme Generation- Roadmap

PrimeVue | The Next-Gen UI Component Library

Çağatay Çivici

Node Congress

Node Congress 2024

Serverless services like AWS Lambda allow developers to build modern applications without provisioning servers or additional infrastructure. LLRT is a low latency runtime designed specifically for serverless environments and JavaScript applications. LLRT uses a lightweight JavaScript engine called Quick.js, achieving fast execution and performance with minimal memory consumption. LLRT is ideal for latency-critical applications, high-volume functions, and integration with AWS services. It significantly improves performance, reducing cold starts and providing consistent warm start times. Users are encouraged to test LLRT and contribute to its development.

In today’s world of modern applications, swift responsiveness is essential. Users expect seamless interactions where every action triggers an immediate response.Serverless services such as AWS Lambda, allows developers to build modern applications without the need to manage traditional servers or infrastructure. However, Serverless services might introduce additional latency when new execution environments are provisioned and due to (by design) having less resources than traditional servers or containerized environments.To mitigate this problem, AWS have developed an experimental JavaScript runtime, called LLRT, built from the ground up for a Serverless environment. LLRT (Low Latency Runtime) is a lightweight JavaScript runtime designed to address the growing demand for fast and efficient Serverless applications. LLRT offers more than 10x faster startup and up to 2x overall lower cost compared to other JavaScript runtimes running on AWS Lambda.In this session you will discover how it's different from what's already out there, see its performance in action and learn how to apply it to your Serverless functions.

The Need for Speed: How AWS New JS Runtime is Redefining Serverless Latency

Richard Davison

TestJS Summit

TestJS Summit 2023

The Talk discusses the evolution of test automation from the original test automation pyramid to the testing pyramid. It explores modern approaches to UI component testing, including isolations and testing with a fake DOM. The importance of testing in a real browser and the emergence of tools like Selenium, WebDriver.io, Puppeteer, Cypress, and PlayWrite for browser automation are highlighted. The advantages of out-of-process browser automation are explained, along with the use of Storybook and Playwright for testing components. The distinction between end-to-end testing and component testing is also mentioned.

Yes, we do need to test our UI components but... If this rings a bell, and especially if your application has advanced UI functionality, this talk is for you.In this talk, we will cover what are the factors that need to be tested in UI components. We will challenge the testing pyramid when it comes to UI Components testing, and review the different tools that we have nowadays for making UI component testing complete Zen.

Zen and the Art of UI Components Testing

Tally Barak

JS GameDev Summit

JS GameDev Summit 2023

Welcome to the presentation of RightGui, an immediate mode CUI library for tools development. RightGui is a high-performance library that is stateless and uses small self-contained functions to process inputs and draw controls. It provides a variety of controls, customizable styles, and support tools for live style configuration. Additionally, there are tools like the icons editor and layout creator that allow for customizations and code generation. Reiki offers a variety of tools, including a sound editor, image manipulation canvas, and resource packer.

raygui is a very lightweight immediate-mode UI intended for tools development, combined with raylib, it allows the creation of small high-performant wasm web tools. In this talk we will analyze this specific use case for tools development.

Raygui: An Immediate-Mode C UI for Wasm Tools Development

Ramon Santamaria

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.

In this talk, I will share my experience in game development using ReactJS/CSS. We will explore how to make the most out of the component management provided by this library, along with the capabilities of CSS for creating an appealing user interface. Additionally, we will uncover how to leverage the React Three Fiber library to create games with a 3D experience.

Game Development with ReactJS, CSS, and React Three Fiber

Jorge Rubiano

JS Nation

JSNation 2022

The Workshop focused on developing a quiz game about the TV show 'Friends' using React and the Meet dependency. It emphasized the importance of separating UI and business logic, and implementing a layered architecture. The workshop also covered topics such as event handling, tracking, and audio integration. The use of typed events and the challenges of implementing game features like a lobby and character animations were discussed. Overall, the workshop provided valuable insights into software development best practices and performance optimization.

How many times did you say or hear “this is business logic, it should not be here”?In this workshop, we will create a modern frontend application using old patterns and you will learn how to build apps that have decoupled UI and services.We will start with a React application that has its whole logic in the UI. Then step by step we will extract the rules and operations to hit that sweet spot of independence.

Should we have business logic in the UI?

Samuel Pinto

This Talk discusses the new features of Modals and focus management in web development. The dialogue element allows for the creation of modal dialogs that appear on top of other elements and prevent interaction with elements below. The note element can mark a subtree of the DOM as inert, making it unusable. The field set component can group input elements together and disable them. Using these new primitives can improve focus control and user experience in web applications.

With *dialog* and the inert attribute landing in all major browsers in 2022, we as web developers now have simple yet powerful primitives to help build complex app-like flows on the web, rather than the over-engineered or leaky solutions we've relied on for years. Let's demystify these primitives and talk through how they make your code simpler: from plain HTML, Web Components, to React/similar.

Ensuring your Users are on the Right Path: the Future of Modals and Focus Management

Sam Thorogood

TestJS Summit 2021

Storybook is a powerful tool for building UI components and testing them. It allows for easy reuse and compatibility with other tools. Storybook 6.4 introduces interactive stories and live coding, making it easier to create and debug complex components. It also integrates with popular testing libraries like Jest and Testing Library. Storybook aims to bridge the gap between end-to-end testing and unit testing, providing automated testing options for UI components.

Imagine writing a complex function without unit tests. You would have to verify every scenario manually, over and over again. Cumbersome, but that's how most teams build user interfaces. Imagine if you could build UIs and test UIs in the same place. If your components included expectations for how they were supposed to behave, you'd know the instant they broke.Storybook provides an organized approach to building UIs. You document a component's use-cases as stories, which are then rendered in isolation. Stories are like tests, but for UI. Storybook interaction testing allows you to script interactions and check expectations in the story itself. That allows you to run and debug UI tests in the same environment UI components are developed for: your browser. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Test your UI in the REAL Browser

Gert Hengeveld

React Summit

React Summit 2020

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.

In this talk I’m going to convince you that paid UI components will solve all your problems, and that you should immediately give me all of your money. Maybe. Or perhaps I’ll draw on my experience working both on free and open source tools (jQuery, jQuery UI, NativeScript), as well as paid tools (Kendo UI, KendoReact), and discuss which type of tool makes sense depending on your team and needs. In any case the talk will go fast because lightning is in the title. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Why Paid UI Components Aren’t Evil

TJ VanToll

JSNation Live

JSNation Live 2021

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.

If your company is anything like the ones I’ve worked for, you have apps with seven different button designs, three different datepickers, and a bizarre collection of dropdowns that may or may not be accessible. A growing trend to deal with this inconsistency is to build a custom design system or component library. Essentially, you build The One Way™ to create a datepicker for your organization, and ask that the rest of your company to conform to your new system. But building a component library comes with a lot of challenges, like, which frameworks or libraries should you use (if any)? How do you make sure your components are accessible? And how to you distribute your components so your whole company can use them? In this lightning talk you’ll learn how to build a component library fast building on top of a library like Kendo UI. You’ll learn tips &amp; tricks on how to get up and running, how to customize components, and how to distribute components throughout your organization. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#user interfaces