README
Experience Elements
These elements encapsulate application functionality using HTML-like elements. This approach keeps the semantics of a web application declarative and 'semi-mono-linguistic'.
The goal of this project is to empower the next generation of personalized, interactive web-experiences with less friction and less semantic-diversion.
Application Functionality, Expressed in HTML
Declarative applications are more deterministic and easier to understand for more levels of expertise. These components are segmented into option sub-systems to only require what you need:
<x-action-*>
Actions: - Declared Reactive Actions
- Async Functions
<x-app-view*>
Routing: - URL/Hash-based Routing (within a single page!)
- Fast, SPA-like navigation between pages
- Guided navigation, wizards & workflows
<x-app-view-do>
Navigation: - Guided Navigation
- Media-Timed Actions
- Interactive Video
- Reactive Audio
<x-data>
Data: - Expression Evaluation & Binding
- Data-Template Rendering
- Data-driven Rule Evaluation for Navigation
<x-content>
Content: - Dynamic Content Rendering
- Deferred Content
- Markdown Rendering
- Remote HTML
<x-ui>
UI: - Interface Management
- Theme Management
- UI Component Integrations
<x-elements>
Elements: - HTML Manipulation w/ Declared Actions
- "JQuery as an Async Tag"
Installation
Add a single script-reference tag into your HTML page's head so the browser can figure out how to interpret our elements -- and that's it.
This is a pre-release project and is subject to breaking-changes and incomplete features. Thank you for trying it out!
CDN
<head>
...
<script
type="module"
src="https://unpkg.com/@viewdo/x-ui/dist/x-ui/x-ui.esm.js"
></script>
....
</head>
NPM
npm i @viewdo/x-ui
<head>
...
<script
type="module"
src="~/node_modules/@viewdo/x-ui/dist/x-ui/x-ui.esm.js"
></script>
....
</head>
Learn More
The best way to see what these elements can do for your HTML is to take a look at the documentation/demo. The site is built using these elements as a single HTML file with partials pulled in, as-needed.
Contact
If you like the idea, join us! Or give it a star.
If you have requests, ideas or feedback, join the discussion on Gitter:
Reach out to me personally:
Contributions
Built on the shoulders of giants!
Thank you to the Ionic team and their fabulous Stencil.js SDK for the best way to build lightening fast, native elements.
Also, thank you to the creators and contributors to all open-source efforts, but especially to the libraries we love and use in our plugin components:
<x-data>
Data - SilentMatt: expression evaluator for a declarative expression parser
- JSONata: JSONata another declarative approach for solving problems, this uses expressions to query JSON.
<x-audio>
Audio - howler.js: howler-js best audio library for managing audio files
<x-content-markdown>
Markdown - remarkable: remarkable Ridiculously fast markdown to HTML processing.