Log in
JavaScript Conferences
JSNation US 2024JSNation US 2024
EN

Video: No Seriously: htmx is Pro-JavaScript!

Carson Gross
Carson Gross
The Creator of htmx, a Hypermedia-oriented JavaScript Library.

From Author:

Yes, using htmx to build a web application means you will write less overall JavaScript for your web application. No, this does not make htmx anti-JavaScript. While there are certainly htmx enthusiasts who hate JavaScript, nonetheless, htmx can be looked at from a pro-JavaScript angle: by relieving JavaScript from having to be everything for your web application, you can focus on using it where it was designed to be used. And, in doing so, rediscover the joy of JavaScript!

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

Rate this content
Bookmark
React article version of this talk
Video summary
HTMX is a hypermedia-oriented front-end library that enhances HTML as a hypermedia. It generalizes the concept of hypermedia controls in HTML, allowing any element to become a hypermedia control. HTMX provides practical attributes like HX swap and HX indicator. The active search demo showcases the dynamic behavior achievable with HTMX. HTMX allows developers to build web applications without writing a ton of JavaScript. It works well for traditional web apps but may not be suitable for offline functionality or fast interactions. HTMX can be integrated with JSX and various backend stacks, and TypeScript can be used alongside HTMX.

FAQ

HTMX is a hypermedia-oriented front-end library that enhances HTML as a hypermedia. It allows HTML elements to become hypermedia controls that can issue various types of HTTP requests, thus enabling more sophisticated interactions without relying heavily on JavaScript.

Hypermedia controls in HTML are elements like hyperlinks and forms that allow for non-linear linking and interaction with a server. HTMX generalizes these controls to enhance web development.

HTMX is written in JavaScript but allows developers to achieve dynamic web interfaces with minimal JavaScript. It can work in conjunction with JavaScript libraries to enhance user experiences, focusing on HTML and hypermedia interactions.

HTMX is best suited for CRUD-type applications or traditional web apps with some modern enhancements. It is not ideal for applications requiring offline functionality or highly interactive apps like Google Maps.

Yes, HTMX can be integrated with other JavaScript libraries such as SortableJS, Alpine.js, and even view components for enhanced interactivity, allowing JavaScript to handle complex features.

HTMX has limitations in offline functionality and may not be ideal for applications that require real-time updates without server interactions. It relies on server interactions for state management.

HTMX can scale well for performance as it simplifies the client-server interaction model, but it might challenge organizational structures that rely on a clear front-end/back-end split.

HTMX can be used alongside server-side JSX as a templating language, allowing developers to leverage familiar tools while adopting HTMX for less complex interactions.

HTMX works well with any backend stack, allowing developers to choose based on their specific needs rather than being constrained by front-end technology compatibility.

HTMX can be used with TypeScript for server-side rendering, although it is not written in TypeScript itself. The integration could be effective depending on project requirements.

frameworksweb apps
Carson Gross
Carson Gross
29 min
18 Nov, 2024

Comments

Sign in or register to post your comment.
Video transcription
Sign in to access video transcription and chapter summary.
Available in other languages:

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
Michael Jackson
Michael Jackson
React Training
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.
reactremixframeworks
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
Miško Hevery
Miško Hevery
Qwik, Angular & AngularJS creator, Karma co-creator.
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.
performanceframeworksbuilders and foundersqwikreact less
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Rich Harris
Rich Harris
Svelte Creator
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.
frameworkssveltedocumentation
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Ryan Carniato
Ryan Carniato
SolidJS Creator / Netlify
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.
react queryframeworksbuilders and founderssolidjspreact vs solidjssolidjs vs react
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 Preston-Werner
Tom Preston-Werner
GitHub cofounder, RedwoodJS author
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.
frameworksgraphqlredwoodjsbuilders and founders
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
Tom Preston-Werner
Tom Preston-Werner
GitHub cofounder, RedwoodJS author
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.
jamstackfullstackframeworksredwoodjsreact full stack framework

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.
performanceframeworksqwik
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)
remixweb developmentframeworks
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
frameworksmachine learningartificial intelligence
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
javascriptaccessibilityweb apps
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
node.jsframeworksfastify