Giter VIP home page Giter VIP logo

progressive-element's Introduction

Towards a behavioral paradigm for building web interfaces

image

Principles

  • Subtractive mindset + remove layers of abstraction
  • Behavior is more important to understanding than UI hierarchy.
  • Leverage new (and old) features of the browser.
  • Optional patterns than can be layered together.
  • Stop combining the server/client into one.

Patterns

  • Use event delegation to avoid needing to attach event listeners directly to DOM elements or attaching global event listeners.
  • Declare "intentions" in HTML that map raw DOM event to semantically meaningful events. (e.g. <form on:submit="ADD_TODO">)
  • Use custom elements to organize & reuse behavior by the progressively enhancing the light DOM.
  • Progressively hydrate custom elements based on when they are used. This could be when the CPU first becomes idle, when the custom element becomes visible on the page, or when the custom element was first interacted with.
  • CSS "reactivity" that conditionally styles the page based on DOM attributes or other state-based selectors (e.g. :has). Originally written about by Noam.

Provided in the repo are some optional/unopionated helpers that implement these patterns.

For a more detailed explanation check out this

progressive-element's People

Contributors

chrisshank avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

jthodge

progressive-element's Issues

Composability

I really like the direction you are thinking here. I have been thinking in very similar directions recently, but I am coming from a Stimulus.js background (https://stimulus.hotwired.dev). One of my favorite features of Stimulus.js is the fact that "behaviors" can be composed onto the same sub-tree of the DOM. Custom elements currently 1-to-1, not N-to-1. Have you started exploring how you might support composable behaviors? For example, <ul is="sortable collapsible">. I personally find this much clearer and truer than something like:

<sortable>
  <collapsible>
    <ul>
    </ul>
  </collapsible>
</sortable>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.