timsim00 / mark42

Frameworkless, buildless, single-page, micro-frontend, web component pattern

What if we could make (highly scalable) apps that act like Tony Stark's Mark 42?

(ie. components fly in as needed)

Status

Experimental, WIP

Installation

$ yarn install
$ npm run paths  (be prepared to run this after every any node_modules change)
$ npm run start

Contact

Love it, hate it, or anywhere in between, drop me a line.

Help make it better (criticism and PR's welcome).

Features

• Tiny footprint
• No framework
• No build step (just cmd-R to reload)
• Micro-frontend in nature (as opposed to monolithic)
• Prehensile modules (send the minimum bytes to client on load, send non-essential modules as needed)
• Views can have multiple templates (eg. Loading template and main template)
• Modules can
  • be single-file (eg. see core-about) inspired by this article,
  • be standard HTMLElement (eg. see app-root),
  • be plain script (eg. see corePage)
  • have or not have a UI
• Templates engine included (tiny version of mustache)
• Tiny uni-directional central state management included
  • Central store can have namespaced modules
  • Subscribers are notified of state changes
• Router keeps URL in sync with fetched modules (ie. deep link your views)
• Static server included
• Tachyons is awesome, give it a shot.

Why?

• Loosely-coupled modules are better than monoliths.
• Vanilla JS is better than yet another API to learn.
• Simple is better than complicated.
• Fast is better than slow.
• Small is better than large.
• Scalable is better than hitting an upper limit.
• Easy to reason about is better than hard to reason about.

Component Collections

• UI5
• Elix
• Moerkerke
• Weightless
• Nuclei
• Gulick

(Some are faster than others.)

TODO:

• Mailjet MJML and and and
• Coral-Spectrum github
• Stripe
• Costello
• Morbidick
• Codepen
• Aurelia Materialize +
• Aurelia.io plugin?
• Carbon Custom Elements
• PatternFly / Redhat
• Material Components
• Polymer
• Vaadin
• Smart
• NPM search
• Oracle JET min github
• Nuxeo
• Ionic
• Vaadin
• Material Chip Input
• Paper chip input
• Aybolit

UI Patterns

• flowstate

Fine print

To enable deep linking we have to have a 1-1 correlation between the route and the file path of the view. This can be modified for your use-case. Views can be kept in a db instead of the file system and this would not be an issue. Another option would be let your routes match your file path.

Needs work:

• Naming conventions/logic
• FOUC (esp. when using tachyons within shadowdom)
  • Constructible style sheets are the answer for this?
• Experiment with bundling core components/assets
• Support for older browsers, more