edit, standardize hypermedia-driven with hyphen

This commit is contained in:
Bill Talcott 2023-03-06 12:11:16 -05:00
parent b7e585dcdc
commit d39ebcafd9
10 changed files with 23107 additions and 16180 deletions

View File

@ -37,15 +37,15 @@ JavaScript library.
In these applications HTML becomes a (somewhat awkward) graphical interface description language that is used In these applications HTML becomes a (somewhat awkward) graphical interface description language that is used
because, for historical reasons, that's what happens to be there, in the browser. because, for historical reasons, that's what happens to be there, in the browser.
Applications built in this style are not _hypermedia driven_: they do not take advantage of the underlying hypermedia Applications built in this style are not _hypermedia-driven_: they do not take advantage of the underlying hypermedia
system of the web. system of the web.
To explain what a hypermedia driven application looks like, and to contrast it with the popular SPA approach of today, To explain what a hypermedia-driven application looks like, and to contrast it with the popular SPA approach of today,
we need to first explore the entire _hypermedia system_ of the web, beyond just discussing HTML. We need to look at the we need to first explore the entire _hypermedia system_ of the web, beyond just discussing HTML. We need to look at the
_network architecture_ of the original web, including how a web server delivers a hypermedia API, and how to effectively _network architecture_ of the original web, including how a web server delivers a hypermedia API, and how to effectively
use the hypermedia features available in the hypermedia _client_ (e.g. the browser). use the hypermedia features available in the hypermedia _client_ (e.g. the browser).
Each of these are important aspects of building an effective hypermedia driven application, and it is the entire Each of these are important aspects of building an effective hypermedia-driven application, and it is the entire
_hypermedia system_ that comes together to make hypermedia such a powerful architecture. _hypermedia system_ that comes together to make hypermedia such a powerful architecture.
== What is a Hypermedia System? == What is a Hypermedia System?

View File

@ -527,7 +527,7 @@ without compromising your user interface. You might even be able to use the hype
needs. needs.
Rather than having an SPA with a bit of hypermedia around the edges, or some mix of the two approaches, you can often create Rather than having an SPA with a bit of hypermedia around the edges, or some mix of the two approaches, you can often create
a web application that is _primarily_ or _entirely_ hypermedia driven, and that still satisfies the interactivity that your a web application that is _primarily_ or _entirely_ hypermedia-driven, and that still satisfies the interactivity that your
users require. users require.
This can _tremendously_ simplify your web application and produce a much more coherent and understandable piece of This can _tremendously_ simplify your web application and produce a much more coherent and understandable piece of

View File

@ -752,7 +752,7 @@ notion of "components". In JavaScript-oriented applications it is common to bre
client-side components that are then composed together. These components are often developed and tested in isolation and client-side components that are then composed together. These components are often developed and tested in isolation and
provide a nice abstraction for developers to create testable code. provide a nice abstraction for developers to create testable code.
With Hypermedia Driven Applications, in contrast, you factor your application on the server side. As we said, the above form could be With Hypermedia-Driven Applications, in contrast, you factor your application on the server side. As we said, the above form could be
refactored into a shared template between the edit and create templates, allowing you to achieve a reusable and DRY (Don't refactored into a shared template between the edit and create templates, allowing you to achieve a reusable and DRY (Don't
Repeat Yourself) implementation. Repeat Yourself) implementation.

View File

@ -180,7 +180,7 @@ requiring that they replace the _entire_ document.
This is actually a very old concept in hypermedia. Ted Nelson, in his 1980 book "`Literary Machines`" coined the term This is actually a very old concept in hypermedia. Ted Nelson, in his 1980 book "`Literary Machines`" coined the term
_transclusion_ to capture this idea: the inclusion of content into an existing document via a hypermedia reference. _transclusion_ to capture this idea: the inclusion of content into an existing document via a hypermedia reference.
If HTML supported this style of "`dynamic transclusion,`" then Hypermedia Driven Applications could function much more like If HTML supported this style of "`dynamic transclusion,`" then Hypermedia-Driven Applications could function much more like
a Single Page Application, where only part of the DOM is updated by a given user interaction or network request. a Single Page Application, where only part of the DOM is updated by a given user interaction or network request.
== Extending HTML as a Hypermedia with Htmx == Extending HTML as a Hypermedia with Htmx

View File

@ -827,7 +827,7 @@ image::screenshot_stacked_actions.png["All 3 table rows have Edit, View, Delete
It would be nice if we didn't show the actions all in a row, and, additionally, it would be nice if we only showed the It would be nice if we didn't show the actions all in a row, and, additionally, it would be nice if we only showed the
actions when the user indicated interest in a given row. We will return to this problem after we look at the relationship actions when the user indicated interest in a given row. We will return to this problem after we look at the relationship
between scripting and a Hypermedia Driven Application in a later chapter. between scripting and a Hypermedia-Driven Application in a later chapter.
For now, let's just tolerate this less-than-ideal user interface, knowing that we will fix it later. For now, let's just tolerate this less-than-ideal user interface, knowing that we will fix it later.
**** ****

View File

@ -43,7 +43,7 @@ To specify how to swap the returned HTML content into the DOM
To specify where in the DOM to swap the returned HTML content To specify where in the DOM to swap the returned HTML content
Let's dive into two of these attributes, `hx-swap` and `hx-trigger`, because they support a large number of Let's dive into two of these attributes, `hx-swap` and `hx-trigger`, because they support a large number of
options that might be useful when you are creating more advanced Hypermedia Driven Applications. options that might be useful when you are creating more advanced Hypermedia-Driven Applications.
=== hx-swap === hx-swap
@ -201,7 +201,7 @@ The `hx-trigger` attribute certainly is the most complex in htmx. More details a
=== Other Attributes === Other Attributes
Htmx offers many other less commonly used attributes for fine-tuning the behavior of your Hypermedia Driven Application. Htmx offers many other less commonly used attributes for fine-tuning the behavior of your Hypermedia-Driven Application.
Here are some of the most useful ones: Here are some of the most useful ones:
@ -271,7 +271,7 @@ The `hx-sync` attribute supports a few different strategies that allow you to, f
in flight, or queue requests with a particular queuing strategy. You can find complete documentation, as well as in flight, or queue requests with a particular queuing strategy. You can find complete documentation, as well as
examples, at the https://htmx.org/attributes/hx-sync/[documentation page] for `hx-sync`. examples, at the https://htmx.org/attributes/hx-sync/[documentation page] for `hx-sync`.
As you can see, htmx offers a lot of attribute-driven functionality for more advanced Hypermedia Driven Applications. As you can see, htmx offers a lot of attribute-driven functionality for more advanced Hypermedia-Driven Applications.
A complete reference for all htmx attributes can be found https://htmx.org/reference/#attributes[on the htmx website]. A complete reference for all htmx attributes can be found https://htmx.org/reference/#attributes[on the htmx website].
== Events == Events
@ -497,7 +497,7 @@ codes in your application. Full documentation on the `htmx:beforeSwap` event ca
Above we saw how to use a server-triggered event, via the `HX-Trigger` HTTP response header, to update a piece of the Above we saw how to use a server-triggered event, via the `HX-Trigger` HTTP response header, to update a piece of the
DOM based on the response to another part of the DOM. This technique addresses the general problem that comes up DOM based on the response to another part of the DOM. This technique addresses the general problem that comes up
in Hypermedia Driven Applications: "`How do I update other content?`" After all, in normal HTTP requests, there is only in Hypermedia-Driven Applications: "`How do I update other content?`" After all, in normal HTTP requests, there is only
one "`target`", the entire screen, and, similarly, in htmx-based requests, there is only one target: either the explicit one "`target`", the entire screen, and, similarly, in htmx-based requests, there is only one target: either the explicit
or implicit target of the element. or implicit target of the element.

View File

@ -22,7 +22,7 @@ and interactive experiences, including scripting.
It is true in many ways that HTML, as specified and implemented, lacks affordances needed to build the kinds of applications It is true in many ways that HTML, as specified and implemented, lacks affordances needed to build the kinds of applications
that were implemented within those older systems. None of this means, however, that hypermedia's _purpose_ is "`documents`" that were implemented within those older systems. None of this means, however, that hypermedia's _purpose_ is "`documents`"
over "`applications`". over "`applications.`"
Rather, while the theoretical foundation is there, the implementation is underdeveloped. With JavaScript being the Rather, while the theoretical foundation is there, the implementation is underdeveloped. With JavaScript being the
only extension point and hypermedia controls not being well integrated to JavaScript (why can't one click a link without only extension point and hypermedia controls not being well integrated to JavaScript (why can't one click a link without
@ -33,19 +33,19 @@ A goal of this book is to show that it is possible to build sophisticated web ap
of the web, hypermedia, without the application developer needing to reach for the abstractions provided by the large, of the web, hypermedia, without the application developer needing to reach for the abstractions provided by the large,
popular JavaScript frameworks. popular JavaScript frameworks.
htmx itself is, of course, written in JavaScript, and one of its advantages is that hypermedia interactions that go Htmx itself is, of course, written in JavaScript, and one of its advantages is that hypermedia interactions that go
through htmx expose a rich interface to JavaScript code with configuration, events, and htmx's own extension support. through htmx expose a rich interface to JavaScript code with configuration, events, and htmx's own extension support.
Because htmx expands the expressiveness of HTML so much it removes the need for scripting in many situations. Because htmx expands the expressiveness of HTML so much it removes the need for scripting in many situations.
This makes htmx attractive to people who don't want to write JavaScript, and there are many of those sorts of developers, This makes htmx attractive to people who don't want to write JavaScript, and there are many of those sorts of developers,
sick to death of the complexity of Single Page Application frameworks. wary of the complexity of Single Page Application frameworks.
However, dunking on JavaScript is not the aim of the htmx project. However, dunking on JavaScript is not the aim of the htmx project.
The goal of htmx is not less JavaScript, per se, but rather less code. The goal of htmx is not less JavaScript, per se, but rather less code.
Scripting has been a massive force multiplier for the web. Using scripting, web application developers are not only able Scripting has been a massive force multiplier for the web. Using scripting, web application developers are not only able
to enhance their HTML websites, but also create fully-fledged client-side applications that can often compete with to enhance their HTML websites, but also create full-fledged client-side applications that can often compete with
native, thick client applications. native, thick client applications.
This JavaScript-centric approach to building web applications is a testament to the power of the web and to the sophistication This JavaScript-centric approach to building web applications is a testament to the power of the web and to the sophistication
@ -77,7 +77,7 @@ other concerns of our application.
Note also that, especially in web development parlance, the humble "`server`" is usually a whole fleet of racks, virtual Note also that, especially in web development parlance, the humble "`server`" is usually a whole fleet of racks, virtual
machines, containers and more. Even a worldwide network of datacenters is reduced to "`the server`" when discussing machines, containers and more. Even a worldwide network of datacenters is reduced to "`the server`" when discussing
the server-side of a Hypermedia Driven-Application. the server-side of a Hypermedia-Driven Application.
**** ****
Satisfying these two constraints sometimes requires us to diverge from what is typically considered best practice for Satisfying these two constraints sometimes requires us to diverge from what is typically considered best practice for
@ -168,7 +168,7 @@ You can just start writing JavaScript in your web application, and it will simpl
That's the good news. The bad news is that, despite improvements over the last decade, JavaScript has some significant That's the good news. The bad news is that, despite improvements over the last decade, JavaScript has some significant
limitations as a scripting language that can make it a less than ideal as a stand-alone scripting technology for limitations as a scripting language that can make it a less than ideal as a stand-alone scripting technology for
Hypermedia Driven Applications: Hypermedia-Driven Applications:
* Being as established as it is, it has accreted a lot of features and warts. * Being as established as it is, it has accreted a lot of features and warts.
* It has a complicated and confusing set of features for working with asynchronous code. * It has a complicated and confusing set of features for working with asynchronous code.
@ -353,7 +353,7 @@ All of these tools achieve Locality of Behaviour by having you embed attributes
having code look up elements in a document through CSS selectors in order to add event listeners onto them. having code look up elements in a document through CSS selectors in order to add event listeners onto them.
**** ****
In a Hypermedia Driven Application, we feel that the Locality of Behaviour design principle is often more important than In a Hypermedia-Driven Application, we feel that the Locality of Behaviour design principle is often more important than
the more traditional Separation of Concerns design principle. the more traditional Separation of Concerns design principle.
==== What to do with our counter? ==== What to do with our counter?
@ -442,7 +442,7 @@ split out to a separate file:
* Reuse is _easy_ -- you can create another counter component on the page and it will just work. * Reuse is _easy_ -- you can create another counter component on the page and it will just work.
* The code is _well-organized_ -- one behavior per file. * The code is _well-organized_ -- one behavior per file.
All in all, RSJS is a good way to structure your vanilla JavaScript in a Hypermedia Driven Application. So long as the All in all, RSJS is a good way to structure your vanilla JavaScript in a Hypermedia-Driven Application. So long as the
JavaScript isn't communicating with a server via a plain data JSON API, or holding a bunch of internal state outside of JavaScript isn't communicating with a server via a plain data JSON API, or holding a bunch of internal state outside of
the DOM, this is perfectly compatible with the HDA approach. the DOM, this is perfectly compatible with the HDA approach.
@ -941,7 +941,7 @@ the element that has the `x-data` attribute declared on it. In this case, it wi
contacts. The `target`, or where the response HTML will be placed, is just the entire document's body, since the contacts. The `target`, or where the response HTML will be placed, is just the entire document's body, since the
`DELETE` handler returns a whole page when it completes. `DELETE` handler returns a whole page when it completes.
Note that we are using Alpine here in a Hypermedia Driven Application compatible manner. We _could_ have issued an Note that we are using Alpine here in a Hypermedia-Driven Application compatible manner. We _could_ have issued an
AJAX request directly from Alpine and perhaps updated an `x-data` property depending on the results of that request. AJAX request directly from Alpine and perhaps updated an `x-data` property depending on the results of that request.
But, instead, we delegated to htmx's JavaScript API, which made a _hypermedia exchange_ with the server. But, instead, we delegated to htmx's JavaScript API, which made a _hypermedia exchange_ with the server.
@ -1136,14 +1136,14 @@ Additionally, since +_hyperscript+ embeds so well in HTML, it keeps the focus _o
scripting logic. scripting logic.
Taken all together, given a certain style of scripting and certain scripting needs, +_hyperscript+ can provide an Taken all together, given a certain style of scripting and certain scripting needs, +_hyperscript+ can provide an
excellent scripting experience for your Hypermedia Driven Application. It is a small and obscure programming excellent scripting experience for your Hypermedia-Driven Application. It is a small and obscure programming
language, so we won't blame you if you decide to pass on it, but it is worth a look to understand what it language, so we won't blame you if you decide to pass on it, but it is worth a look to understand what it
is trying to achieve. is trying to achieve.
== Using Off-the-Shelf Components == Using Off-the-Shelf Components
That concludes our look at three different options for _your_ scripting infrastructure, that is, the code that _you_ write That concludes our look at three different options for _your_ scripting infrastructure, that is, the code that _you_ write
to enhance your Hypermedia Driven Application. However, there is another major area to consider when discussing client to enhance your Hypermedia-Driven Application. However, there is another major area to consider when discussing client
side scripting: "`off the shelf`" components. That is, JavaScript libraries that other people have created that offer side scripting: "`off the shelf`" components. That is, JavaScript libraries that other people have created that offer
some sort of functionality, such as showing modal dialogs. some sort of functionality, such as showing modal dialogs.
@ -1151,12 +1151,12 @@ Components have become very popular in the web development works, with libraries
providing rich user experiences with very little JavaScript code on the part of a user. Unfortunately, if these libraries providing rich user experiences with very little JavaScript code on the part of a user. Unfortunately, if these libraries
aren't integrated well into a website, they can begin to make an application feel "`patched together`". Furthermore, some aren't integrated well into a website, they can begin to make an application feel "`patched together`". Furthermore, some
libraries go beyond simple DOM manipulation, and require that you integrate with a server endpoint, almost invariably libraries go beyond simple DOM manipulation, and require that you integrate with a server endpoint, almost invariably
with a JSON data API. This means you are no longer building a Hypermedia Driven Application, simply because a particular with a JSON data API. This means you are no longer building a Hypermedia-Driven Application, simply because a particular
widget demands something different. A shame! widget demands something different. A shame!
=== Integration Options === Integration Options
The best JavaScript libraries to work with when you are building a Hypermedia Driven Application are ones that: The best JavaScript libraries to work with when you are building a Hypermedia-Driven Application are ones that:
* Mutate the DOM but don't communicate with a server over JSON * Mutate the DOM but don't communicate with a server over JSON
* Respect HTML norms (e.g. using `input` elements to store values) * Respect HTML norms (e.g. using `input` elements to store values)
@ -1289,7 +1289,7 @@ ____
In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
____ ____
We have shown you quite a few tools and techniques for scripting in a Hypermedia Driven Application. How should you We have shown you quite a few tools and techniques for scripting in a Hypermedia-Driven Application. How should you
pick between them? The sad truth is that there will never be a single, always correct answer to this question. pick between them? The sad truth is that there will never be a single, always correct answer to this question.
Are you committed to vanilla JavaScript-only, perhaps due to company policy? Well, you can use vanilla JavaScript effectively Are you committed to vanilla JavaScript-only, perhaps due to company policy? Well, you can use vanilla JavaScript effectively

View File

@ -1,5 +1,5 @@
= JSON Data APIs & Hypermedia Driven Applications = JSON Data APIs & Hypermedia-Driven Applications
:chapter: 11 :chapter: 11
:url: ./json-data-apis/ :url: ./json-data-apis/
@ -468,7 +468,7 @@ Maybe, but maybe not. This was a pretty specific need for our web application,
our JSON API, it doesn't make sense to include it for JSON consumers. our JSON API, it doesn't make sense to include it for JSON consumers.
And what if, by some miracle, the performance issues with `Contact.count()` that we were addressing with the Lazy Load And what if, by some miracle, the performance issues with `Contact.count()` that we were addressing with the Lazy Load
pattern goes away? Well, in our Hypermedia Driven Application we can simply revert to the old code and include the pattern goes away? Well, in our Hypermedia-Driven Application we can simply revert to the old code and include the
count directly in the request to `/contacts`. We can remove the `contacts/count` end point and all the logic associated count directly in the request to `/contacts`. We can remove the `contacts/count` end point and all the logic associated
with it. Because of the uniform interface of hypermedia, the system will continue to work just fine. with it. Because of the uniform interface of hypermedia, the system will continue to work just fine.

View File

@ -26,7 +26,7 @@ HTML:
We were able to build user interfaces that many developers would assume require a significant amount of client-side We were able to build user interfaces that many developers would assume require a significant amount of client-side
JavaScript, but using only hypermedia concepts. JavaScript, but using only hypermedia concepts.
The Hypermedia Driven Application approach is not right for every application (after all, no approach is right for The Hypermedia-Driven Application approach is not right for every application (after all, no approach is right for
_every_ application) but, for many applications, the increased flexibility and simplicity of hypermedia can be a huge _every_ application) but, for many applications, the increased flexibility and simplicity of hypermedia can be a huge
benefit. And, even if your application wouldn't benefit from this approach, it is at least worthwhile to _understand_ benefit. And, even if your application wouldn't benefit from this approach, it is at least worthwhile to _understand_
the approach, its strengths and weaknesses, and how it differs from the approach you are taking. The original web the approach, its strengths and weaknesses, and how it differs from the approach you are taking. The original web

File diff suppressed because one or more lines are too long