Advanced Vue Component Design [Adam Wathan]

Advanced Vue Component Design [Adam Wathan]

The full course clocks in at 34 lessons totaling 4 hours of content.

It covers topics like:

• Building custom controlled components
• Strategies for keeping logic encapsulated and making components more portable
• Using composition to extend components instead of mixins or inheritance
• How and why to use render functions, even if you aren’t using JSX
• Using “data provider components” to reuse non-UI logic
• Creating “renderless UI components” that are completely customizable
• Designing “compound components” using Vue’s provide and injectfeatures
• Real-world case studies on building robust sortable list and search select components

1. The Essentials Package

• Includes the first 24 lessons, totaling 2.5 hours of content
• Stream and download access
• Interactive source code examples for each lesson
• Launch price: $149 $99 (over 30% off)

2. The Pro Package

• Includes all lessons from the Essentials Package plus 10 additional lessons, totaling 34 lessons and 4 hours of content
• Stream and download access
• Interactive source code examples for all 34 lessons
• Access to any new bonus material added to the course (I've already got a few ideas!)
• Launch price: $249 $139 (over 40% off)

Спойлер: Полный список уроков

Скрытая ссылка


Essentials Package

1. Building Controlled Components (12:21)
   
   Learn the fundamentals of component communication best practices, and how you can use that knowledge to create your own components that work with Vue's v-model directive.
   
   
2. Customizing Controlled Component Bindings (01:28)
   
   Learn how to customize v-model so you can use more expressive names in your controlled components.
   
   
3. Wrapping External Libraries as Vue Components (12:46)
   
   There's a lot of high quality libraries out there designed to be used as just vanilla JS or as jQuery plugins. In this lesson you'll learn how to turn those libraries into Vue components so you can maintain a single JS paradigm within your own applications.
   
   
4. Encapsulating External Behavior: Global event handling (11:57)
   
   In this lesson you'll learn why and how it can sometimes be useful to break outside of Vue's built-in event handling system to write more portable components.
   
   
5. Encapsulating External Behavior: Directly manipulating external DOM elements (08:09)
   
   Like with event handling, sometimes you need to bypass Vue's reactivity system and do old-school DOM manipulation to keep a component's logic encapsulated. This lesson will teach you how and when to do it.
   
   
6. Encapsulating External Behavior: Portals (14:03)
   
   When a single interaction involves multiple disconnected parts of the DOM (think a button that opens a modal that lives at the end of the body), a component's implementation details can quickly leak to other parts of your application and cause unnecessary coupling. Learn how you can use the portal pattern to avoid this.
   
   
7. Encapsulating External Behavior: Reusing Portal Targets (03:33)
   
   Learn how to reuse generic portal targets to avoid leaking knowledge to the root component about what's actually being rendered.
   
   
8. Injecting Content Using Slots (06:10)
   
   Learn the fundamentals of using slots to customize a component's content.
   
   
9. Native-Style Buttons Using Slots and Class Merging (01:48)
   
   In this lesson, you'll learn how to apply our knowledge of slots to build a custom button component that behaves just like a native HTML element.
   
   
10. Extending Components Using Composition (10:22)
    
    You'll often have situations in an application where two components share quite a bit of logic but also have a few notable differences. In this lesson, you'll learn how slots can be used to "extend" a common base component using composition, instead of resorting to mixins or inheritance.
    
    
11. Passing Data Up Using Scoped Slots (09:59)
    
    Scoped slots are easily one of Vue's most powerful features, but can be a bit tricky to wrap your head around. In this lesson, you'll learn how to see scoped slots as callback props, making them a lot easier to understand.
    
    
12. Render Functions 101 (03:31)
    
    For most components you'll use templates to construct your HTML, but Vue also supports building a component's HTML using render functions. In this mini-series, you'll learn how render functions work and why they are still useful even if you aren't using JSX.
    
    
13. Render Functions and Components (04:18)
    
    In this lesson you'll learn how to render other components from inside of a render function.
    
    
14. Render Functions and Children (02:21)
    
    In this lesson you'll learn how to write render functions that contain multiple children, and how to replace directives like v-for using array transformations.
    
    
15. Render Functions and Slots (03:59)
    
    Learn how to interact with slots inside of render functions, and how a special property of render functions that templates don't support can open up a lot of new component design possibilities.
    
    
16. Building Data Provider Components (11:54)
    
    Using render functions and scoped slots, components don't have to generate any of their own HTML. Learn how to leverage this concept to build a FetchJson component that can be used to make AJAX calls directly in your markup.
    
    
17. Getting Started with Renderless Components (04:46)
    
    One of the biggest headaches with traditional JS UI libraries is that they are a pain to customize. In this mini-series, you'll learn how to use render functions and scoped slots to separate presentation and behavior into separate components; making it easy to completely customize a component's appearance without reimplementing any logic.
    
    
18. Passing Data Props from Renderless Components (02:14)
    
    Slot props come in three general flavors. In this lesson you'll learn about "data props" and how to use them.
    
    
19. Passing Action Props from Renderless Components (02:19)
    
    In this lesson you'll learn about "action props", and how they can be used to provide behavior to a parent component.
    
    
20. Passing Binding Props from Renderless Components (09:40)
    
    In this lesson you'll learn about "binding props", which let you attach prop and event bindings to a parent element, while keeping all of the implementation details encapsulated inside the child component.
    
    
21. Using Functions as Binding Props with Renderless Components (03:05)
    
    Sometimes binding props need context to work correctly. Learn how to use functions as "lazy" binding props that can accept parameters from the parent.
    
    
22. Implementing Alternate Layouts with Renderless Components (04:08)
    
    In this lesson we'll take the renderless component we've built throughout the previous five lessons and use it to implement a drastically different layout, without rewriting any of the component logic.
    
    
23. Configuring Renderless Components (01:46)
    
    Scoped slots are ideal for customizing how a component looks, but it still makes sense to use configuration to customize a component's behavior. In this lesson we'll add a configuration prop to our renderless component to change its functionality.
    
    
24. Wrapping Renderless Components (06:10)
    
    Renderless components create a lot of work for the consumer compared to a traditional component that combines presentation and behavior in one unit. Learn how to create opinionated wrapper components that ease the burden on the consumer while still providing the flexibility of renderless components when needed.

Pro Package

1. Building an Element Query Data Provider Component (07:45)
   
   In this lesson, we'll use the data provider component pattern to write a transparent wrapper component that can be used to give a component access to its current dimensions, which we can then use to customize how that component looks based on the space available to it.
   
   
2. Building Compound Components with Provide/Inject (09:55)
   
   There are certain types of components that have multiple related pieces, like tabs and tab panels, or items in an accordion list. Learn how to use Vue's provide and inject features to make it possible for these related components to communicate without forcing the consumer to wire everything up manually.
   
   
3. Building a Compound Sortable List Component (21:17)
   
   In this lesson, we'll combine a lot of the patterns we've used so far to build a compound, renderless, controlled sortable list component that also wraps up an external library. It's the kitchen sink of component design!
   
   
4. Building a Search Select: Data Bindings (06:02)
   
   In this mini-series, we'll build a robust search select component by applying the principles covered through the rest of the course.
   
   
5. Building a Search Select: Filtering (05:03)
   
   In this lesson we'll add filtering support to the search select, working through all of the edge cases to make sure it behaves intuitively.
   
   
6. Building a Search Select: Focus Management (02:42)
   
   In this lesson we'll tackle focus management, making sure that the search is focus when the component is opened and the trigger is re-focused when the component closes.
   
   
7. Building a Search Select: Making It Controlled (05:40)
   
   In this lesson we'll convert the search select into a controlled component, pushing the state into the parent. We'll also make the filtering logic controllable from the outside.
   
   
8. Building a Search Select: Keyboard Navigation (14:53)
   
   In this lesson we'll add comprehensive keyboard navigation to the search select, including handling things like scrolling highlighted items into view.
   
   
9. Building a Search Select: Click Outside Component (05:12)
   
   In this lesson we'll make it possible to close the search select by clicking outside of it, but with a catch: we implement this behavior from scratch as its own renderless component, not using an existing directive-based library.
   
   
10. Building a Search Select: Integrating Popper.js (05:46)
    
    In this lesson, we'll integrate Popper.js with our search select component so that the dropdown position reacts intelligently to the size and scroll position of the viewport.

Курс на английском языке.

Бесплатные уроки, упобликованные автором, смотрите под хайдом.

Автор довольно известен в мире Laravel, в том числе своими прежними курсами