Lukas Lumière’s Post

❓ How React works behind the scenes? 🤫 1. Virtual DOM: React creates a lightweight copy of the actual DOM, known as the virtual DOM. When a component's state changes, React updates this virtual DOM instead of the real DOM, making the process faster. 2. Diffing Algorithm: React compares the new virtual DOM with the previous version using a diffing algorithm. This helps identify what has changed. 3. Reconciliation: Once React knows what has changed, it updates only the specific parts of the actual DOM that need to be changed, rather than re-rendering the entire UI. This process is called reconciliation. 4. Component-Based Architecture: React applications are built using components, which are independent, reusable pieces of UI. Each component can manage its own state and lifecycle, making the development process more modular and easier to manage. 5. React Fiber: React Fiber is the new reconciliation engine in React 16 and above. It breaks rendering work into small units and spreads it out over multiple frames, resulting in a smoother user experience, especially for animations and complex applications. 6. Hooks: React hooks allow you to use state and other React features in functional components, providing more flexibility and a simpler API for managing state and side effects. By leveraging these techniques, React ensures efficient rendering and provides a smooth and responsive user experience.

Learn Design Tokens & UI Components with Nathan Curtis (https://lnkd.in/d-mgC7aD) Upcoming online training: Design Token and UI Component Architecture with Nathan Curtis  🗓️ Nov 18+19 2024 Online What's included: 📚 2x 4hours live workshop 🟢 Live Q&A with Nathan Curtis 📼 All recordings to rewatch anytime 🏆 Certificate of attendance This workshop exposes you to essential foundations of design system architecture — the kinds of naming, composition, configuration and process challenges involved — to equip you with techniques and activities to make, spread, and maintain a system yourself. What you will learn: Over two days, we’ll participate in presentations, collaborative activities, and in-depth discussions of design tokens and UI components. Day 1: Design tokens • Set a scope for your system’s visual foundation • Capture and name tokens for color, text, space, shape and size • Grow from generic and semantic into component-specific tokens • Tackle complicated challenges of composite tokens and theming • Plan an approach to start or refactor a token taxonomy Day 2: UI components • Organize a catalog, including naming, metadata and namespacing  • Establish a component anatomy of default, required, and varying elements • Architect prop configurations, including types, options and other models • Compose and arrange elements inside components • Balance flexibility and configurability in higher-order components Become a leading Design System expert - few spots left. 🔗 Link: https://lnkd.in/d-mgC7aD #uxdesign #ui #designsystems

Selecting a technology stack for a project requires careful consideration. It’s important to build a technology strategy that can deliver the requirements of the project both now and in the future. The consequences of the wrong decision can include: - Inefficient performance - Higher costs - Limited innovation/flexibility To uncover the right technology stack for the CTHRU project, led by engineering teams at the University of Cambridge and the University of Bath, we started with a discovery phase. Together, we explored questions such as: 🗣️ What were the strengths and weaknesses of existing Sankey diagram tools? 🗣️ How would our source data be structured and delivered? By answering these questions, we honed in on the tech required, gaining a clearer understanding of the UX possibilities. Our development journey for this project involved utilising React and NextJs, while visualisation was expertly handled using D3. We also employed RDF, the Resource Description Framework, to seamlessly integrate individual diagrams. Curious to dive deeper into our process and results? Read the full case study for insights into how we tackled the CTHRU challenge with precision and innovation here: https://lnkd.in/eUnPuzyz

I just published an article diving into Test Coverage for Design Systems. 🎨🧪 I recently shifted my thinking about test coverage when it comes to Design Systems and thought I'd share the reasoning. In the world of UI components and reusable design patterns, ensuring high-quality code is crucial. Other teams rely on your work to build new features and products. This article breaks down how we can leverage test coverage to build more robust and reliable Design Systems that scale effortlessly across teams. Whether you're building or maintaining a Design System, having the right testing strategies can help you catch issues early and provide more confidence in your components. Tools like Generative AI can also assist you when the pressure is on to deliver. Let me know what you think! 👋 https://lnkd.in/gQwzUWPF #DesignSystems #TestCoverage #UI

A great UI can't fix a crappy flow and bad information architecture. And crappy flows are expensive to fix because they require a lot of resources. Why? Because they require backend, frontend, devops and sometimes infrastructure committment. Test and re-test flows. Make sure they are rock solid before even thinking of adding a button anywhere. If the flow is too complex, redo it. If you want to improve user experience, don't offload complexity on the user because you want to ship faster. Because it's always going to bite you in the ass when it comes to retention, and will just grow your aquisition cost while forcing you to change things later down the road anyway, when you're strapped for resources. If you're a UX person that is worth a damn, don't even think of putting anything on a canvas before having a tested and proven information architecture and rock solid flow. Push back. Even when you think it doesn't make sense. If you're a UX-er, please, please, for the love of god, stop creating empathy maps and start flowcharting and invest in understanding information architecture. You cannot sticky-note your way out of every problem. Trust me.

Concurrent rendering in React 18 is a significant architectural change that improves performance and responsiveness in complex applications. Here's a deeper explanation: -> Traditional Rendering (Before React 18): React used a single-threaded, synchronous rendering approach. When a state update occurred, React would pause all other activities and completely re-render the component tree from scratch. This could lead to performance issues and jank (unsmooth UI updates) if the re-rendering was expensive (e.g., involving complex calculations or DOM manipulations). User interaction could also be affected during re-renders as the main thread was blocked. -> Concurrent Rendering in React 18: Introduces the concept of fibers. These are lightweight representations of the UI that React can create and manage concurrently. React can now work on multiple versions of the UI tree simultaneously. When a state update occurs, React creates a new fiber representing the updated UI. The new fiber is scheduled for rendering, but it doesn't necessarily interrupt the rendering of the current UI. Concepts in Concurrent Rendering: 1. Root: The entry point for React applications. Upgraded to createRoot in React 18, enabling concurrent features for the entire app or specific parts using the useSyncExternalStore hook. 2.Fiber Tree: A lightweight representation of the UI, similar to the component tree, but composed of fibers. 3.Scheduling: React prioritises rendering tasks based on their urgency. Urgent updates (e.g., user interactions) can interrupt lower-priority ones (e.g., data fetching) to maintain responsiveness. 4.Suspense: This mechanism helps manage data fetching and rendering while waiting for data. It allows for defining fallback UI elements to be displayed during the loading phase.

React: useOptimistic() + useTransition() The example provided in the image below is of a form that leverages React's useOptimistic() hook, but without using the form's action attribute. In this kind of implementation, the handleSubmit() MUST also be wrapped in startTransition(), but why? handleSubmit() contains the logic for both setOptimisticTodos() and setTodos(). When we wrap handleSubmit() in startTransition() we're essentially allowing React to treat the optimistic update and the final update as separate operations. Sometimes startTransition() is described as a way to "unbatch" state updates from each other. As a casual explanation that works, but technically I think they're still batched together in the sense that they're part of the same render cycle. However, wrapping handleSubmit() in startTransition() allows React to treat the state updates as separate (decoupled) operations in terms of user experience. The UI can then reflect the optimistic state immediately, while the final state update can be processed later. By wrapping handleSubmit() in startTransition(), we're saying, "Call setOptimisticTodos() and setTodos(), but don't wait for both of them to complete before updating the UI." In other words, we don't want to wait on setTodos() before updating optimisticTodos. We don't want setTodos() to block/prevent setOptimisticTodos() from updating the UI immediately.

Excited to share a detailed guide on the "Translate Selection Sidebar and Tooltip" script! This document covers everything from global variables to error handling, including core functions, UI management, and customization tips. Perfect for developers!

Discover why SwiftUI prefers structs over classes for building views. In my latest article, I explore the performance benefits, value semantics, immutability, and other key reasons behind this design choice. Learn how these concepts contribute to more efficient, predictable, and maintainable UI development. Check it out! https://lnkd.in/dhbYWm4m

🎯 Building UI Components: The Hidden Complexity Behind Simplicity Working on LinksBuddy reminded me how even the simplest UI components can hide surprising complexity. Let's break down what it really takes to build a production-ready Tabs component: 📐 Component Structure: • TabList: Manages list of tabs and keyboard navigation • Tab: Individual tab buttons with state management • TabPanel: Content container for each tab 🔑 Core Implementation Features: • Accessibility (ARIA roles, keyboard navigation) • State Management (active tab, disabled states) • Focus Management (keyboard navigation, focus trapping) • Event Handling (click, keyboard, touch events) • Styling System (states, transitions, themes) 🧪 Testing Requirements: • Component Logic • User Interactions • Keyboard Navigation • Accessibility Compliance • Visual Regression • Edge Cases 📚 Documentation Needs: • Component API • Usage Examples • Accessibility Guidelines • Edge Case Handling • Customization Options 👉 This raises an interesting question: Should we build custom components or use existing UI libraries? My Experience Building from Scratch: Pros: • Full Design Control • Optimized Bundle Size • Custom Functionality • Deep Learning Experience Cons: • Development Time • Testing Overhead • Maintenance Responsibility The reality? Both approaches have merit. Building from scratch taught me invaluable lessons, but sometimes using existing libraries is the right business decision. What's your approach? When do you choose to build versus reuse? #WebDevelopment #UI #React #FrontEnd #DeveloperExperience #UIDesign #Accessibility #Testing