mirror of
https://github.com/bigskysoftware/hypermedia-systems.git
synced 2025-12-05 00:03:55 -05:00
edit, standardize hypermedia-driven with hyphen
This commit is contained in:
parent
b7e585dcdc
commit
d39ebcafd9
@ -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?
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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.
|
||||||
|
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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.
|
||||||
****
|
****
|
||||||
|
|||||||
@ -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.
|
||||||
|
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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.
|
||||||
|
|
||||||
|
|||||||
@ -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
Loading…
x
Reference in New Issue
Block a user