HYPERMEDIA SYSTEMS
—
Contents
Show full table of contents
Hypermedia Concepts
=>
Introduction
What is a Hypermedia System?
Hypermedia-Driven Applications
Goals
Book Layout
Hypermedia: A New Generation
01
Hypermedia: A Reintroduction
What Is Hypermedia?
A Brief History of Hypermedia
Modern Implementation
The World’s Most Successful Hypertext: HTML
The Essence of HTML as a Hypermedia
Anchor tags
Form tags
Web 1.0 applications
So What Isn’t Hypermedia?
Single Page Applications
Why Use Hypermedia?
JavaScript Fatigue
A Hypermedia Resurgence?
Hypermedia-Oriented JavaScript Libraries
Hypermedia-Driven Applications
When Should You Use Hypermedia?
When Shouldn’t You Use Hypermedia?
Hypermedia: A Sophisticated, Modern System Architecture
02
Components Of A Hypermedia System
Components Of A Hypermedia System
The Hypermedia
Hypermedia Protocols
HTTP methods
HTTP response codes
Caching HTTP responses
Hypermedia Servers
Hypermedia Clients
REST
The “Constraints” of REST
The Client-Server Constraint
The Statelessness Constraint
The Caching Constraint
The Uniform Interface Constraint
Identification of resources
Manipulation of resources through representations
Self-descriptive messages
Hypermedia As The Engine of Application State (HATEOAS)
HATEOAS & API churn
Layered System
An Optional Constraint: Code-On-Demand
Conclusion
03
Effective HTML
Why relearn HTML?
<div>
soup
Remedy: Stay close to the output
HTML5 soup
Keep the spec on hand
Remedy: Know your budget
The S word
The A word
Screen reader rage
The Scrapeable Web
Where to next
04
A Web 1.0 Application
Picking A “Web Stack”
Python
Introducing Flask: Our First Route
Contact.app Functionality
Showing A Searchable List Of Contacts
The list & search templates
Adding A New Contact
Handling the post to /contacts/new
Viewing The Details Of A Contact
The Contact Detail Template
Editing And Deleting A Contact
Handling the post to /contacts/<contact_id>
Deleting A Contact
Contact.app… Implemented!
Hypermedia-Driven Web Applications with Htmx
05
Extending HTML As Hypermedia
A Close Look At A Hyperlink
Why Only Anchors & Forms?
Why Only Clicks & Submits?
Why Only GET & POST?
Why Only Replace The Entire Screen?
Extending HTML as a Hypermedia with Htmx
Installing and Using Htmx
No JavaScript Required…
Triggering HTTP Requests
It’s All Just HTML
Htmx vs. “Plain” HTML Responses
Targeting Other Elements
Swap Styles
Using Events
Htmx: HTML eXtended
Passing Request Parameters
Enclosing Forms
Including Inputs
Relative CSS selectors
Inline Values
History Support
Conclusion
06
Htmx Patterns
Installing Htmx
AJAX-ifying Our Application
Boosted Links
Boosted Forms
Attribute Inheritance
Progressive Enhancement
Adding “hx-boost” to Contact.app
A Second Step: Deleting Contacts With HTTP DELETE
Updating The Server-Side Code
A response code gotcha
Targeting The Right Element
Updating The Location Bar URL Properly
One More Thing…
Progressive Enhancement?
Next Steps: Validating Contact Emails
Updating Our Input Type
Inline Validation
Validating Emails Server-Side
Taking The User Experience Further
Debouncing Our Validation Requests
Ignoring Non-Mutating Keys
Another Application Improvement: Paging
Click To Load
Infinite Scroll
07
More Htmx Patterns
Active Search
Our Current Search UI
Adding Active Search
Targeting The Correct Element
Paring Down Our Content
HTTP Request Headers In Htmx
Factoring Your Templates
Using Our New Template
Updating the Navigation Bar With “hx-push-url”
Adding A Request Indicator
Lazy Loading
Pulling Out The Expensive Code
Adding An Indicator
But That’s Not Lazy!
Inline Delete
Narrowing Our Target
Updating The Server Side
The Htmx Swapping Model
Taking Advantage of “htmx-swapping”
Bulk Delete
The “Delete Selected Contacts” Button
The Server Side for Delete Selected Contacts
08
A Dynamic Archive UI
A Dynamic Archive UI
UI Requirements
Beginning Our Implementation
Adding the Archiving End Point
Conditionally Rendering A Progress UI
Polling
Using Polling To Update The Archive UI
Downloading The Result
Downloading The Completed Archive
Smoothing Things Out: Animations in Htmx
The “Settling” Step in Htmx
Our Smoothing Solution
Dismissing The Download UI
An Alternative UX: Auto-Download
A Dynamic Archive UI: Complete
09
Tricks Of The Htmx Masters
Advanced Htmx
Htmx Attributes
hx-swap
hx-trigger
Trigger filters
Synthetic events
Other Attributes
Events
Htmx-Generated Events
Using the htmx:configRequest Event
Canceling a Request Using htmx:abort
Server Generated Events
HTTP Requests & Responses
HTTP Response Codes
Updating Other Content
Expanding Your Selection
Out of Band Swaps
Events
Being Pragmatic
Debugging
Logging Htmx Events
Monitoring Events in Chrome
Security Considerations
Content Security Policies & Htmx
Configuring
10
Client-Side Scripting
Is Scripting Allowed?
Scripting for Hypermedia
Scripting Tools for the Web
Vanilla JavaScript
A Simple Counter
An inline implementation
Separating our scripting out
Locality
What to do with our counter?
RSJS
VanillaJS in Action: An Overflow Menu
Alpine.js
“x-on:click” vs. “onclick”
Reactivity and Templating
Alpine.js in Action: A Bulk Action Toolbar
Implementing actions
_hyperscript
_hyperscript in Action: A Keyboard Shortcut
Why a New Programming Language?
Using Off-the-Shelf Components
Integration Options
Integrating using callbacks
Integrating using events
Pragmatic Scripting
11
JSON Data APIs & Hypermedia-Driven Applications
JSON Data APIs
Hypermedia APIs & JSON Data APIs
Differences Between Hypermedia APIs & Data APIs
Adding a JSON Data API To Contact.app
Picking a Root URL For Our API
Our First JSON Endpoint: Listing All Contacts
Adding Contacts
Viewing Contact Details
Updating & Deleting Contacts
Additional Data API Considerations
Authentication in web applications
The “Shape” of Our Two APIs
The Model View Controller (MVC) Paradigm
Bringing Hypermedia To Mobile
12
Hyperview: A Mobile Hypermedia
The State of Mobile App Development
Hypermedia for Mobile Apps
Web Views
Hyperview
The format
The client
Which Hypermedia Architecture Should You Use?
Introduction to HXML
Hello World!
UI Elements
Lists
Images
Inputs
Styling
Custom elements
Behaviors
Actions
Triggers
Using multiple behaviors
Quick Sketch: Elements of Hyperview
Summary
13
Building a Contacts App With Hyperview
Creating a mobile app
A Searchable List of Contacts
Searching Contacts
Infinite scroll
Pull-to-refresh
Viewing The Details Of A Contact
Editing a Contact
Updating the Contacts List
Deleting a Contact
Adding a New Contact
Deploying the App
One Backend, Multiple Hypermedia formats
What is Content Negotiation?
Approach 1: Template Switching
Approach 2: The Redirect Fork
Summary
14
Extending the Hyperview Client
Adding Phone Calls and Email
Adding Toast Messages
Swipe Gesture on Contacts
Designing The Component
Implementing The Component
Using the component
Conclusion
Conclusion
15
Conclusion
Hypermedia Reconsidered
Pausing, And Reflecting
Entire book in one page