mirror of
https://github.com/bigskysoftware/hypermedia-systems.git
synced 2025-12-04 00:05:18 -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
|
||||
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.
|
||||
|
||||
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
|
||||
_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).
|
||||
|
||||
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.
|
||||
|
||||
== What is a Hypermedia System?
|
||||
|
||||
@ -527,7 +527,7 @@ without compromising your user interface. You might even be able to use the hype
|
||||
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
|
||||
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.
|
||||
|
||||
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
|
||||
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
|
||||
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
|
||||
_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.
|
||||
|
||||
== 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
|
||||
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.
|
||||
****
|
||||
|
||||
@ -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
|
||||
|
||||
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
|
||||
|
||||
@ -201,7 +201,7 @@ The `hx-trigger` attribute certainly is the most complex in htmx. More details a
|
||||
|
||||
=== 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:
|
||||
|
||||
@ -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
|
||||
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].
|
||||
|
||||
== 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
|
||||
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
|
||||
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
|
||||
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
|
||||
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,
|
||||
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.
|
||||
|
||||
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,
|
||||
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.
|
||||
|
||||
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
|
||||
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.
|
||||
|
||||
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
|
||||
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
|
||||
@ -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
|
||||
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.
|
||||
* 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.
|
||||
****
|
||||
|
||||
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.
|
||||
|
||||
==== 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.
|
||||
* 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
|
||||
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
|
||||
`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.
|
||||
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.
|
||||
|
||||
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
|
||||
is trying to achieve.
|
||||
|
||||
== Using Off-the-Shelf Components
|
||||
|
||||
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
|
||||
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
|
||||
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
|
||||
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!
|
||||
|
||||
=== 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
|
||||
* 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.
|
||||
____
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
: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.
|
||||
|
||||
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
|
||||
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
|
||||
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
|
||||
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
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user