Channel: JetBrainsTV

Category: Science & Technology

Tags: developer toolscsharpsoftware developmentdotnethtmxjetbrainsjetbrains rider.netdeveloperprogramming

Description: In this video, JetBrains developer advocate Khalid Abuhakmeh introduces you to HTMX. HTMX is a JavaScript library designed to bring the fun back into building robust client-side applications. HTMX relies on server-rendered HTML to create client-side experiences with an approachable declarative set of attributes that support all of the HTTP methods typically unavailable as part of traditional HTML forms. We’ll walk through 15 steps of using HTMX. From installing the library into an existing ASP.NET Core application to 13 examples of using HTMX to provide UI experiences from the simple to the extremely complex. Finally, we’ll look at a “real world” sample of HTMX in use in a shopping cart site. 0:00 HTMX for ASP.NET Core developers 0:03 Installation 2:01 Hello World 6:02 State Management 9:31 Cascading Selects 16:34 Typeahead Search 22:22 Infinite Scrolling 26:02 Modal dialogs 33:32 Server-side Tabs 38:21 Keyboard Shortcuts 40:04 Server-side Form Validation 45:22 Long Polling 49:09 Server-sent Events 55:17 HTMX NuGet Packages for ASP.NET Core 58:33 Client-side Templates with HTMX, Mustache.js, and ASP.NET Core 1:01:44 Out of Band Swaps 1:05:21 The JetSwag Store Demo All code shown in the video is available at github.com/khalidabuhakmeh/htmx-aspnetcore and you can read and follow along with the explanations at jetbrains.com/dotnet/guide Be sure to also check out JetBrains Rider at jetbrains.com/rider, which is used exclusively in this video as the development environment. Other links: HTMX - htmx.org .NET - dot.net JetBrains - jetbrains.com Khalid Abuhakmeh - twitter.com/buhakmeh #htmx #csharp #dotnet