Hypermedia Systems

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