Hypermedia Systems

✍ Scribed by Carson Gross, Adam Stepinski, Deniz Akşimşek 

• Tongue: English
• Leaves: 338
• Category: Library

✦ Synopsis

lol lmao

✦ Table of Contents

Foreword
Contents
Hypermedia Concepts
Introduction
What is a Hypermedia System?
Hypermedia-Driven Applications
Goals
Book Layout
Hypermedia: A New Generation
HTML Notes: Hypermedia In Practice
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
HTML Notes:

Soup
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
HTML Notes: HTML5 Soup
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//edit
Deleting A Contact
Contact.app…​ Implemented!
HTML Notes: Framework Soup
Hypermedia-Driven Web Applications With Htmx
Extending HTML As Hypermedia
A Close Look At A Hyperlink
Why Only Anchors & Forms?
Why Only Click & Submit Events?
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
HTML Notes: Budgeting For HTML
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
HTML Notes: Caution With Modals and "display: none"
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
HTML Notes: Accessible by Default?
A Dynamic Archive UI
UI Requirements
Beginning Our Implementation
Adding the Archiving Endpoint
Conditionally Rendering A Progress UI
Polling
Using Polling To Update The Archive UI
Adding The Progress Bar 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
HTML Notes: Markdown soup
Tricks Of The Htmx Masters
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
HTML Notes: Semantic HTML
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 of Behavior
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
HTML Notes: HTML is for 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
HTML Notes: Microformats
Bringing Hypermedia To Mobile
Hyperview: A Mobile Hypermedia
The State of Mobile App Development
Hypermedia for Mobile Apps
Web Views
Hyperview
The format
The client
Extensibility
Which Hypermedia Architecture Should You Use?
Introduction to HXML
Hello World!
UI Elements
Lists
Images
Inputs
Styling
Custom elements
Behaviors
Actions
Navigation actions
Update actions
System actions
Custom actions
Triggers
Long-press
Load
Visible
Refresh
Focus, blur, and change
Using multiple behaviors
Summary
Hypermedia, for Mobile
Hypermedia Notes: Maximize Your Server-Side Strengths
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
Contact.app, in Hyperview
Hypermedia Notes: API Endpoints
Extending The Hyperview Client
Adding Phone Calls and Email
Adding Messages
Swipe Gesture on Contacts
Designing The Component
Implementing The Component
Using the component
Mobile Hypermedia-Driven Applications
Hypermedia Notes: Good-Enough UX and Islands of Interactivity
Conclusion
Conclusion
Pausing, and Reflecting
Index