htmx Is Pro-JavaScript

In this talk we will take a look at an idiosyncratic javascript library, htmx, which is designed to make HTML more powerful as a hypermedia. It does this by generalizing the idea of hypermedia controls such as anchor tags and forms. Web developers who use htmx typically do not write nearly as much javascript as they would if they chose a more popular SPA javascript library for their front end needs. In this way, htmx can help address "JavaScript Fatigue", a general sense of being overwhelmed by the JavaScript world.


htmx is sometimes held up as a library "for people who hate JavaScript". Ironically, however, by dramatically reducing the amount of JavaScript a web developer must write to build a web application, htmx can make the JavaScript that a developer wants to write much more enjoyable, making writing JavaScript a playful, high-value and fun part of a broader web application rather than a chore that must be dealt with to accomplish simple tasks.

Rate this content
Bookmark
Video Summary and Transcription
HTMX is a JavaScript library that redefines how HTML interacts with the web by using attributes to drive Hypermedia exchanges. Unlike traditional JavaScript frameworks that replace HTML, HTMX extends it, allowing for a more seamless integration of HTML and JavaScript. This approach is particularly evident when comparing HTMX vs React, where HTMX offers a less JavaScript-heavy method to create interactive web applications. Key attributes like hx-get, hx-post, and hx-trigger enable elements to issue HTTP requests and handle responses without extensive JavaScript coding. HTMX debounce functionality allows developers to manage request frequency, preventing server overload during actions like active search, which filters results as you type. HTMX also supports partial page updates, ensuring efficient content refreshes without reloading the entire page. By focusing on declarative hypermedia controls, HTMX reduces the need for JavaScript, allowing it to focus on advanced UI manipulations, making it a pro-JavaScript tool. This synergy is further highlighted in HTMX Sortable.js integration, where HTMX works with JavaScript libraries to enhance user experience through features like drag-and-drop.
Available in Español: htmx es Pro-JavaScript

FAQ

HTMX is a Hypermedia-oriented front-end library written in JavaScript that extends HTML and allows developers to create interactive web applications with minimal JavaScript.

HTMX allows for partial page updates by using the hx-target attribute to specify where the returned HTML content should be inserted, without replacing the entire viewport.

Key attributes in HTMX include hx-get, hx-post, hx-put, hx-delete, hx-trigger, and hx-target, which allow elements to issue HTTP requests and handle responses.

Yes, with HTMX, you often don't need to write a lot of JavaScript. Instead, you use HTML attributes to define behaviors and interactions.

Hypermedia controls in HTMX are elements like links and forms that use attributes to trigger HTTP requests and handle responses, allowing for interactive web applications.

Unlike libraries such as React, which replace HTML and work with a JSON API to update the user interface, HTMX extends HTML and uses attributes to drive Hypermedia exchanges without requiring a lot of JavaScript.

With HTMX, you can build interactive web applications that have functionalities similar to single-page applications (SPAs) without relying heavily on JavaScript.

Carson Gross is the creator of HTMX.

You can find more examples of HTMX capabilities on the HTMX website at htmx.org/examples.

No, HTMX is not anti-JavaScript. It aims to complement JavaScript by handling server synchronization, allowing JavaScript to focus on client-side scripting and user interface enhancements.

1. Introduction to HTMX and its Benefits#

Short description:

Hi, I'm Carson Gross, the creator of HTMX, an alternative front-end library in JavaScript. In this talk, I'll explain what HTMX is and why it can be a pro JavaScript library. I'll provide an overview, discuss the relationship between HTMX and JavaScript, and demonstrate an HTMX demo. HTMX is a Hypermedia-oriented front-end library that extends HTML and works with a JSON API, unlike other libraries that replace HTML. As an HTMX developer, you don't need to write a lot of JavaScript.

Hi, my name is Carson Gross and I'm going to give a talk on HTMX. I'm the creator of HTMX, which is sort of an alternative front-end library written in JavaScript. And the title of this talk is that HTMX is pro JavaScript. And so what I'm going to talk about is what HTMX is and then talk to you about how I feel that it can be a pro JavaScript library, despite what some people say about it.

So just some background on me. I have a consulting company called Big Sky Software, and that's mainly for open source work. I've got some projects like HTMX. It's probably the biggest one. And then a couple of other ones, HyperScript. I've got a somewhat funny page on development called Gregbrain.dev. And then I've got a book out of the HTMX that I show you. And this talk is of interest to you. You might check out Hypermedia Systems. It's available online for free, or you can buy a hard copy or a Kindle version if you'd like.

So what are we going to do in this talk? Well, I'm going to look at HTMX really quick. Give people who don't know about it, or maybe you've just heard about it in passing, an overview of what it is. And look at the relationship between HTMX and JavaScript. And then I'm going to show an HTMX demo. And then what I want to do after that demo is think a little bit about how HTMX and JavaScript interact. And maybe, again, try and change the way that people are talking about HTMX and JavaScript. So HTMX, what is this thing? Well, it's what I call a Hypermedia-oriented front-end library. And what it does is a lot of JavaScript libraries that people are familiar with today, like React and so forth, what they do is they tend to replace HTML. So you don't use links and forms in the traditional way that you would have in the past with HTML. Instead, you have a fairly elaborate front-end code base that's working with a JSON API. And then React or whatever is reactively updating the user interface. And so HTMX is a little different in that it really tries to extend HTML and live in the Hypermedia world that HTML sort of gives us. So with an HTMX-based application, you're typically not writing a ton of JavaScript yourself. HTMX itself is written in JavaScript. I'll emphasize that again a couple of times. But you, as an HTMX developer, often don't need to write a ton of JavaScript.

2. Understanding HTMX and Hypermedia Controls#

Short description:

With HTMX, you put attributes in your HTML that drive Hypermedia exchanges. HTMX is a JavaScript library that hooks into these attributes and adds behaviors. It builds on the idea of Hypermedia controls, such as links and forms. Links allow for nonlinear branching, while forms give HTML authors more control over requests. HTMX generalizes these concepts and handles events like clicking on elements.

Instead, what you do with HTMX is you put attributes in your HTML, and those attributes sort of drive what I call Hypermedia exchanges. And so what HTMX does is a JavaScript library that looks those things up and then hooks in behaviors, sort of the standard event handler mechanism for that. So at a conceptual level, what HTMX is building on is this idea of Hypermedia controls. And Hypermedia controls, again, not super JavaScript-oriented, but just let me give you the background on this.

What Hypermedia controls are are things like links and forms. So this is sort of the link in HTML. This is the canonical Hypermedia control. This was sort of the original Hypermedia control. And the thing that makes this a Hypermedia control in particular is this little attribute, this href, which effectively tells the browser, when someone clicks on this link, get this page. And this allows for what's called nonlinear branching.

Now there's one other major Hypermedia control, for user interactivity anyways, in HTML, and that's the form tag. And form tags are a little bit more sophisticated than links. I won't go into the details of it, but except to note that the form tag with this method attribute gives HTML authors more control over the form of the request that's issued. So links issue gets and that's all they can do. Forms can issue gets and posts. And they also have a more complicated relationship with the tags inside of them. So to understand what HTMX is trying to do, let's really zero in on what this anchor tag means. What does this mean? Again, I'm sorry. I apologize if you're just interested in JavaScript, but we're going to talk a little bit about HTML here.

So what does this really mean for a browser? Well, what it tells the browser is, okay, render this bit of text on the page and probably show it in some mechanism with an affordance, with some sort of visual cue indicating that it's clickable. And then, when a user clicks on that, what it's going to do is it's going to issue an HTTP get to this about URL, and it's going to get back an HTML response, typically. And what that HTML response is going to then do is it's going to replace the entire viewport of the browser. So that's what links, from a hypermedia mechanic standpoint, that's what links do. So what HTML, or excuse me, what HTMX does is it generalizes each of these ideas. So there's an event here. I clicked on this thing.

3. Generalizing Hypermedia Controls with HTMX#

Short description:

HTMX generalizes the functionality of links and forms, making any element in HTML a potential hypermedia control. It gives control over the form of the request and allows for partial replacements of HTML content. Using attributes such as hxput, hxtrigger, and hxtarget, HTMX enables any element to trigger an HTTP request and specify the type of request, event, and target for the response content. This generalized approach expands the capabilities of HTML.

So that's what links, from a hypermedia mechanic standpoint, that's what links do. So what HTML, or excuse me, what HTMX does is it generalizes each of these ideas. So there's an event here. I clicked on this thing. So HTMX generalizes that and says, okay, any event can trigger an HTTP request. HTMX also makes pretty much any element in HTML a potential hypermedia control. So default HTML, all you have is links and forms. With HTMX, now anything can be a hypermedia control. It gives you control over the form of the request, whether or not it's a get or a put post, but it also gives you access to put and a bunch of other ones as well. And then perhaps most importantly, this link, when you click on links or you submit forms in traditional web apps, you've got to replace the entire viewport with whatever comes back. So I do have to say, you can use iframes to do partial replacements, but iframes suffer from their own issues.

So what HTMX does is it says, okay, let's generalize that so that when the request is made and the HTML comes back, let's make it so that we can put that HTML anywhere on the page rather than having to replace the whole viewport. So let's go through the attributes in HTMX that let you do this stuff. So here's a like button that's been done in HTMX, and let's just go through the attributes on it that are being used by the author using HTMX to make this like button work. The first thing to note is this hxput. And so HTMX has a series of attributes, hxget, post, put, delete, and patch, that allow you to effectively say on this thing, on this, whatever this element is, when the triggering event occurs, and we'll talk about that in a second, when a triggering event occurs, issue this type of request. So now any element in your HTML document can effectively become a hypermedia control. It can issue a hypermedia request to a server and get back HTML. That's the first part. The second part is hxtrigger, and this is what generalizes that event. So with links, you have the event as a click. When you have forms, the event is a submit, and so with HTMX, you can use any event, so mouseover or whatever. Here we're using click, which is pretty obvious for a button. In this case, you could actually omit this, because of the default trigger for a button is going to be click, but it's here just for, you know, so you can see this sort of explicitly. So we have this ability to sort of trigger an HTTP request on anything, not just clicks and submits on links and forms respectively.

And then the last real big step for generalization here is this hxtarget, and what this says is after you issue this put to this URL and you get back some HTML, what I want you to do is I want you to take the response content, and I want you to put that into the thing with the ID output. This is using a CSS selector, so this is a standard CSS selector that says the thing with the ID, that's what this hash means, output. And below, we have an output tag with, sure enough, an ID on it called output, and so what's going to happen is when a user clicks on this button, it's going to issue a put to like on the click, and then it's going to get some HTML content back, and that content's going to be inserted inside of this output. And this turns out to be a really important generalization of HTML. It really opens up what you can achieve with HTML.

4. Advanced Attributes and Core Functionality of HTMX#

Short description:

HTMX allows for declarative hypermedia controls, reducing the need for JavaScript code. Attributes like hxSwap, hxIndicator, hxInclude, and hxSelect provide control over content swapping, request indicators, including input values, and selecting specific response content. With around a dozen core attributes, HTMX simplifies the implementation of hypermedia functionality.

Now, you know, what you'll notice about all of these attributes is that they're all very declarative. They're very much like that href attribute and that method attribute that we saw on links and forms respectively, where they sort of specify what to do, but there's not imperative code here. You're not writing a lot of JavaScript to make this functionality work. Instead, you're just sort of saying, here's what I want to have happen, and then the JavaScript of HTMX in the background looks these attributes up and hooks in the necessary event handlers and so forth.

That's only a few attributes, and that's a pretty good generalization of hypermedia controls. There are a couple of other attributes that are worth knowing about. For example, hxSwap, which will indicate exactly how you want the content swapped in, so this would replace the output tag rather than inserting the content inside of it. hxIndicator shows an element while a request is in flight, so you can show an indicator so the user knows something's going on. hxInclude lets you include the value of inputs in a request, and hxSelect lets you pull out part of a response to insert somewhere in the DOM. In general, there are about a dozen core attributes that make up HTMX, probably less than 10 of the real core ones.

5. Advanced Usage of HTMX Attributes: Active Search#

Short description:

hxSelect lets you pull out part of a response using a CSS selector. HTMX has around a dozen core attributes, with less than 10 being the real core ones. Check out htmx.org/reference for more details. One powerful example of HTMX and hypermedia controls is active search, which allows for filtering results as you type without overloading the server with frequent requests.

And then hxSelect is another attribute that's useful, which lets you pull out part of a request, again, using a CSS selector, so the response, I should say, not request, when the response comes back, you only want to pull out a small section of it to insert somewhere in the DOM, then you can use hxSelect for that. And there's a few more attributes in there, but those are the major ones.

In general, I'd say there's about a dozen core attributes to make up HTMX, probably less than 10 of the real core ones. You can check out htmx.org slash reference. That's like 12 attributes. Most of them have fairly straightforward syntax. The trigger can get a little hairy, but hxTarget, a lot of them use CSS selectors, things you're already used to. So it's just not a very complicated library, so cool.

But what can we do? What can we do with these few attributes or hypermedia controls? Well, let's take a look at one example. There's a whole page, if you go to htmx.org slash examples, there's a whole page of examples for you that you can look at to see all the stuff that can be accomplished with these 10 or 12 attributes. But one that I think really shows off the power of HTMX and generalized hypermedia controls is something called active search. And so this is an example of that active search pattern. And we've got four attributes on here. We're not going to go too much into the details, but it's going to issue a post and it's going to issue it on an input event.

And this is a really common pattern in applications where you've got some table of things and you want to filter it down. So Google does this with search results. You see this UI all over the place. And it's a very useful UI. It's really nice to see these results sort of as you type. And I can hit delete and it won't update until there's a little bit of a pause. We're not hammering on the server every time a key down occurs. That's what that debounce is for.

6. HTMX and Generalized Hypermedia Controls#

Short description:

This is a common pattern in applications where you filter down a table of things. HTMX allows you to achieve powerful results with just four attributes and HTML. It can create UI that rivals thick JavaScript-based applications without writing much JavaScript. HTMX is not anti-JavaScript but rather takes over the job of synchronizing with the server from heavy JavaScript-based frameworks. However, there are limitations to what can be done with HTMX.

And this is a really common pattern in applications where you've got some table of things and you want to filter it down. So Google does this with search results. You see this UI all over the place. And it's a very useful UI. It's really nice to see these results sort of as you type. And I can hit delete and it won't update until there's a little bit of a pause. We're not hammering on the server every time a key down occurs. That's what that debounce is for.

And so this, I think, is a really good example of, again, four attributes, just four attributes. And it's using nothing but HTML. So if we look at the responses to this post, these responses are just HTML. And that HTML, for example, on the last search, we got back two rows. And you can see those two rows got inserted into the DOM just by HTMX. And that's it. So relatively simple, but at the same time, you're able to accomplish some pretty cool stuff like this. So that, I think, shows off. This is one of the good examples that I think shows off the power or the idea of what you can achieve with generalized hypermedia controls.

Yeah, HTMX, generalized hypermedia controls. You can create UI that often rivals SPAs, like thick JavaScript-based applications without writing much JavaScript. It's just HTML with some more attributes inside of it. So we can build more applications without JavaScript. Why am I giving a talk at a JavaScript conference then? And does that mean that HTMX is anti-JavaScript? And I do have to admit that HTMX does appeal to people that don't like JavaScript. We have a lot of people that are big fans of HTMX because they don't like JavaScript. And because of that, I think, unfortunately, HTMX has gotten a reputation as being an anti-JavaScript library. But I don't think that's correct. I think from a different perspective, HTMX is actually deeply pro-JavaScript. And the way that I think it is pro-JavaScript is that HTMX sort of takes over the job of synchronizing with the server from these heavy JavaScript-based frameworks. And it's not, you know, you can't do everything in HTMX. There are definitely limitations to it.

7. HTMX: Simplifying JavaScript and Sortable Demo#

Short description:

HTMX takes the responsibility off of JavaScript, allowing it to focus on being a lightweight scripting language. The sortable demo showcases HTMX working with a JavaScript library to enable drag-and-drop behavior. It synchronizes the order with the server and provides functionality that the browser lacks.

There are definitely limitations to it. But you can do an awful lot with it. And so what I like, the way I like to think about this is that HTMX takes the responsibility for everything off of the shoulders of JavaScript. So JavaScript no longer needs to be this general-purpose programming language for everything in your web application. And instead, it can focus on what it was sort of originally designed to be, which was a relatively lightweight scripting language for the web that allows for extensibility.

So there's another demo that I want to take a look at, which is the sortable demo. Let me bring that up real quick. Examples. Sortable. Sorry, I should add this up. This is another example of HTMX. And what this example is using is it's using a sortable JS library. And what that library allows for is drag-and-drop behavior. And so there's this is some code in HTMX. Again, we're not going to get into the gory details of it. But basically, what this does is it hooks up on any element that has the sortable class on it, the sortable JavaScript library.

And so what this is going to do, and then this form is marked as sortable. And so all the stuff inside of here is going to be drag-and-dropable. And so what that's going to allow me to do in HTMX is grab these things and drop them and then synchronize the order with the server. If we look down here, you can see requests are being made and we're posting, depending on what the order is, we're going to post to the server with the stuff in the new order. And then we can save that and persist it and re-render it and so forth. And so this is an example in my mind, this is an example in my mind of a use of HTMX where it's working in concert with a JavaScript library. Sortable.js is obviously a JavaScript library. And it's providing functionality that the browser doesn't have. The browser does not support drag-and-drop, at least not as smoothly as sortable.js supports it.

8. HTMX and JavaScript Integration#

Short description:

Using HTMX in conjunction with JavaScript libraries, such as Sortable.js, enhances user experience by providing functionality that the browser lacks. JavaScript, as a strong scripting language, complements HTMX and extends the web's capabilities. Roy Fielding's dissertation on the web highlights the benefits of scripting, enabling the extension of client functionality and reducing the need for pre-implemented features. Downloading and executing code through scripts simplifies clients and improves system extensibility.

And then we can save that and persist it and re-render it and so forth. And so this is an example in my mind, this is an example in my mind of a use of HTMX where it's working in concert with a JavaScript library. Sortable.js is obviously a JavaScript library. And it's providing functionality that the browser doesn't have. The browser does not support drag-and-drop, at least not as smoothly as sortable.js supports it. And so we're able to support a better user experience by using both JavaScript and HTMX. So there's not an opposition there. Instead, they're complementary to one another. HTMX could not achieve that user interface by itself. You'd have to do a hypermedia exchange and it wouldn't be nearly as smooth. So this is an example in my mind where HTMX and JavaScript or JavaScript library are working together in concert. We're taking advantage of the fact that JavaScript is there in the browser. It's a very strong scripting language. Say what you will about it for large-scale projects and all the rest of it. But we're here using JavaScript in the manner in which it was designed for. Client-side scripting to extend and improve the user experience.

So Roy Fielding is someone who wrote a sort of a famous dissertation on the web. He was one of the original engineers who worked on the early web. And his dissertation gave us terms like rest and hideous, which you may have heard. But he talked about scripting in that dissertation. And this is what he had to say. And when he says rest here, what he means is the web. You can think of rest as being like the web. He's talking about a restful system, which was his description of the web. So what he said is, rest allows client functionality to be extended by downloading and executing code in the form of applets or scripts. This simplifies clients by reducing the number of features required to be pre-implemented. So drag and drop. We didn't have to pre-implement that in the browser. The browser doesn't have to have an API for that, because we've got JavaScript to help us do that. And allowing features to be downloaded after deployment improves system extensibility.

9. HTML and JavaScript Collaboration#

Short description:

HTML and JavaScript work together in concert, complementing each other's capabilities. HTML relieves JavaScript of the burden of handling everything, allowing JavaScript to shine in providing extensibility and advanced user interface manipulation. For more advanced situations in HTMX, JavaScript expertise is essential. HTMX and JavaScript have a complementary relationship, with HTMX assisting JavaScript and JavaScript enabling additional extensibility. HTMX is not anti-JavaScript, but a pro-JavaScript library.

Exactly. This is what we just saw in that demo. Drag and drop is not something that's baked into the web. At least not as well as it is with sortable JS. And so you can use sortable JS to achieve that user interface, that extensibility, using JavaScript. But then HTML can plug into that using events. And it can take over the job of synchronizing with the backend server and actually retain that original model, the restful model of the web.

So again, I want to stress that HTML is working in concert with JavaScript here. The two are complementary to one another. And HTML is relieving JavaScript of this burden of doing everything. You don't have to do everything in JavaScript. And you can really use JavaScript for what it shines at, for this sort of thing. For this sort of extensibility, the user interface manipulation on the client side to provide functionality in the browser that's just not there by default for whatever reasons. It just hasn't been standardized yet. Or it's just advanced behavior. Something that needs to be achieved in JavaScript.

There's no shame in using JavaScript and quite a bit of JavaScript with HTMX. And similarly, I don't think someone who is very interested in JavaScript and is a JavaScript developer should shy away from taking a look at HTMX. I think some of the best developers, best HTMX developers over the next five years are going to be people who have a really good understanding of JavaScript. Because when you get into advanced situations in HTMX, declarative programming like HTMX allows, hypermedia oriented programming like HTMX allows is great, but it can only go so far. So if you really want to do those more advanced user interfaces, if you really want to get that interactivity, if you want to push HTMX, you're going to have to write JavaScript. And you're going to have to be a pretty good JavaScript developer.

I think there's a complementary there. Complementarity. What's the word I want to say? I think there's a complement between these two technologies. HTMX can help JavaScript by relieving it of the burden of doing everything. And JavaScript can help HTMX by providing that additional extensibility that just doesn't make sense to be integrated into HTMX, the HTMX library itself. So I think, again, what I want people to take away from this is that HTMX is not anti-JavaScript. HTMX is a pro-JavaScript library. Thank you for listening to my talk.

Carson Gross
Carson Gross
22 min
17 Jun, 2024

Comments

Sign in or register to post your comment.
  • Va Da
    Va Da
    P4
    Thanks, very nice exposition of HTMX capabilities.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.

Workshops on related topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop
Build a Universal Reactive Data Library with Starbeam
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships
Build a Product Page with Shopify’s Hydrogen Framework
React Advanced 2022React Advanced 2022
81 min
Build a Product Page with Shopify’s Hydrogen Framework
WorkshopFree
David Witt
David Witt
Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.You will know:- Get started with the hello-world template on StackBlitz- File-based routing to create a /products/example route- Dynamic routing /products/:handle- Hit the Storefront API with GraphQL- Move the query into the Hydrogen app- Update the query to fetch a product by handle- Display title, price, image & description.- Tailwind styling- Variant picker and buy now button- Bonus if there’s time: Collections page
Prerequisites: - A Chromium-based browser (StackBlitz)- Ideally experience with React. A general web development background would be fine.