#user experience

I'm going to be speaking about concurrency within React and how you can use it to improve performance within your applications. Concurrency is crucial for optimizing responsiveness and ensuring a good user experience in complex applications. React breaks up the rendering process into render and commit phases, allowing interruption of the render phase for prioritizing user interactions. React's task scheduler handles tasks in small chunks, ensuring a fluid user experience and responsiveness. High-priority tasks include user interactions, while lower priority tasks involve fetching data or rendering long lists. React introduced new hooks, useTransition and useDeferredValue, for handling state update priorities. The deferred value hook allows for deferring the updates of non-critical UI values, while Suspense for Data Fetching improves the performance of data fetching in React applications. Concurrency is useful for handling real-time search inputs, seamless tab or component switching, rendering large lists, and animating transitions. However, there are drawbacks to concurrency, such as potential delays in non-urgent updates and limited benefits for expensive components. Concurrency may add CPU strain and requires an understanding of React's background behavior for effective debugging. Use suspense on parent level components for data fetching. Performance profiling can help test the effectiveness of transition hooks.

This is a background jobs one-on-one talk focusing on the challenges and benefits of using background jobs in software development. It explores the complexity of software development and the impact of distributed applications. The talk highlights the use of Ingest as a reliable solution for executing functions in the background and building drip campaigns. It emphasizes the importance of reliability and architectural choices in software development and discusses the features and capabilities of Ingest, including local development, handling failures, and data retrieval.

Progressive enhancement is a strategy that provides a baseline experience for all users while enhancing it for those with modern browsers. Feature detection and graceful degradation are complementary approaches to achieve this. Polyfills can emulate new browser functionality in old browsers. Progressive enhancement is about meeting user needs while considering performance. Building apps in SvelteKit allows for easy development of progressively enhanced apps. Svelte components and DOM content provide a convenient way to structure and update the UI. Form submission and progressive enhancement can be achieved by enabling file upload and processing when JavaScript is disabled.

Daphne uses Remix for their web application, benefiting from its resilience, error boundaries, cache boundaries, and progressive enhancement. Remix simplifies form submission, authorization, and validation, and allows for easier refactoring and code duplication avoidance. Next and Remix are used together, with Remix serving as the backend for the frontend and handling data aggregation. Remix provides query functions for fetching data, mutations for form data validation and API calls, and custom conventions using the handle export. Migrating to Remix resulted in smaller JavaScript files, faster navigation, and the ability to preload data and assets. The migration process took around nine months and involved mixing Next.js and Remix using Express. Hiring someone to work on Remix is easier than hiring for other frameworks.

Today's Talk discusses Remix and Personalization, highlighting the benefits of personalized experiences in websites and web applications. Different types of personalization are explained, along with the steps to implement a personalization strategy. The use of Remix and Storyblock to implement personalized experiences on a website is demonstrated. The structure of a page with personalized content for different user types is shown, along with the use of cookies to identify user interests. The implementation of a personalization strategy using React components and the Storyblock API is explained.

Today's Talk discusses the new frontier of e-commerce at the edge, focusing on headless commerce and the benefits it offers. The edge, an intermediate server, can improve website loading by rendering HTML on the server and reducing latency. Venger, an open-source headless e-commerce framework, is introduced as a solution to cache API responses at the edge and improve performance. The Venger online shop demonstrates excellent performance, highlighting the benefits of headless and edge computing in e-commerce.

This Talk discusses Harvey's performance journey and how it led to the adoption of Remix. The engineering team addressed scaling and performance issues through backend fixes and frontend improvements. The redesign focused on loading products by category and prioritizing performance. The implementation of Remix resulted in improved performance and a reduction in API requests. The focus on long-term scalability is essential for handling a growing product list and customer base.

This talk is about animations in React Native, specifically focusing on React Native Reanimated. It covers the use of interpolations and extrapolations in animations, animating items in a carousel or list, sticky elements and interpolation, and fluidity and layout animations. The talk provides valuable tips and tricks for creating performant animations and explores the use of math formulas for natural movements.

The panel discusses the overlap between UX and developers, emphasizing the importance of collaboration and learning about design. The lack of decent developer and designer tooling is a big issue, and there is a need for a tool that bridges the gap between design and development. Understanding the promise and challenges of design systems and improving developer experiences requires a focus on UX and design as a discipline. Developers skilled in design can improve DX tooling, and getting involved in the design process and user testing is crucial. The language of React can help bridge the gap between developers and designers through conceptual modeling and object-oriented UX.

This Talk explores the concept of subtle loading in software development, focusing on techniques to provide a fast and seamless user experience. Tips include avoiding waterfall loading, optimizing loading sequences, and handling loading scenarios for users on faster connections. The use of React 18 APIs, such as start transition, is recommended to achieve an optimistic loading experience. Overall, the Talk emphasizes the importance of improving user experience through subtle loading techniques.

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.

Today's Talk discusses software performance and optimizing the frontend for the user. It emphasizes the importance of passive performance, which is a subjective measure of how well users perceive the application's performance. Techniques to improve performance include using a shared cache, HTTP2, preloading requests, and CDN. Optimizing frontend performance involves avoiding blocking the main thread, loading necessary resources first, using progress bars, and implementing optimistic patterns. It also highlights the importance of considering users' changing expectations throughout their interaction with the application.

Today's Talk covers the importance of building Asynchronous UX with React and single-page applications, providing code and UX examples. It explores data fetching, adding progress indicators, handling errors, and user-initiated actions. The Talk also discusses handling component unmounts, multiple actions, idempotency, and context loss. Finally, it touches on considerations for optimistic updates and the use of CRDT or other technologies for collaborative applications.

Quick tips on how to utilise the native mobile platform to help provide your users an upgraded experience with sounds, vibrations and animations. Small changes can have a huge difference UX-wise.

How to properly hide modals / dialogs / drawers functionalities behind buttons that spawn them without cluttering container components.

Welcome to Designing with Coding Minds. Having a designer who codes in your team can help work faster and bridge the gap between developers and designers. Designers who can code can improve design systems and create components for design tools. GitHub is used at Elastic for collaboration between designers and developers. At Elastic, the code is prioritized over the final design, allowing the code to go live first.

Animations can enhance the user experience and provide context in interface design. Using frame and motion in React can create smooth fade-in effects and improve navigation. Optimistic updates and instant comment appearance can eliminate waiting time and improve user experience. Motion can be used in multiple ways to give context and enhance user experience. Accessibility and performance should be considered when implementing animations. Choosing the right library, such as frame of motion or React Spring, can simplify animation implementation. Animations can enhance perceived performance and influence users' perception of speed.