Code Monkey home page Code Monkey logo

metaexplorer's Introduction

Introduction-Video

https://youtu.be/iJUnQRw52Ds

...and here you can build your own App with the POC:

metaExplorer starter template

Vision

MetaExplorer aims to build user interfaces that adapt to different people and circumstances. These people can be the end-users or your team members, who solve a user's problem. MetaExplorer aims to build a general human-machine interface that can interact with different devices, operating systems and individual needs of a person.

It is inspired by the communities who share and combine complex technical work. Namely blender3D, node-red, the numerous 3D printing communities and creators of many software development frameworks.

How does it work?

  • every re-usable part gets a URL, based on schema.org
  • type-checks happen with URLs as types
  • synchronous state is modeled as a Directed Acyclic Graph, asynchronous state updates (side effects) can be any graph
  • data is modeled in 'any graph', described in JSON-LD
  • existing JSON doesn't have to change, with JSON-LD's @context, variables can migrate their full domain (so a Button becomes a mydomain.com/Button and can change into an example.com/Button or a localhost/Button)
  • if it's clear which Button-type is meant, a UI component or other code can be run after getting it from a Retriever
  • if there is more than one possible option, or to change the UI after the @context has changed, a Matcher can choose from multiple Retrievers

And that's about it. This approach is independent of UI frameworks, since it works on data and the descriptive names we give to parts of that data. The names go into a generalized vocabulary, but stay locally modifyable. Unlike most content management systems and nocode-tools, the UI data can be saved both in git or in a database.

Proof of Concept

The proof of concept was started as UI tech for hydra APIs. Slowly GraphQL has taken over, and now that I've worked with REST, GraphQL and websockets I want something that's independent of that to the backend, and similarly independent to the frontend. The POC contains a node-editor similarly to blender's, but you can crash it by creating a cyclic graph. It updates everything asynchronously, which puts a limit to performance. The page at metaexplorer.io was created with the POC, and so you can try out the performance of that approach.

License

This project was started in Europe, therefore we chose the EUPL license. It's compatible with a lot of other Open Source licenses and fit for commercial use. More info:

Why this license?

Which license(s) you choose for add-ons to MetaExplorer under your domain should be up to you. It's only important for open source projects that overall improvements to the core technology stay open.

metaexplorer's People

Contributors

dependabot[bot] avatar shnydercom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

metaexplorer's Issues

404 or Route-Failed explanation

Issue:

  • when a route like /doesnotexist is accessed directly, the editor preview simply stays blank
  • when some routes are defined in a top-block, and more routes are defined in sub-blocks, changing the sub-block leads to no visual change

Proposed solution:

  • when nothing gets displayed, the available route-tree in the currently edited block should be displayed as a 404 message

component re-instanciation

if a text input component is used inside of another interpreter, it gets re-constructed on each change

port RefMap-Handling to redux/redux-observable

RefMap-Handling will be split into two parts: prefill and fill

  • implement and test reducer for prefill

  • implement and test interpreter-matcher changes for prefill

  • implement and test reducer for fill

  • implement and test interpreter-matcher changes for fill

enforce type safety in designer

Basic type safety scaffolding has been set up in src/ldaccess/ldtypesystem.

  • Deny linking in Designer for ports with non-matching types

  • Highlight (in-)ports that work when dragging a (out-)port (and vice versa)

feature: canInterpretType takes any such typed kv, interpretableKeys are props on that type

State-generatorFns should be able to take a canInterpretType as a single Kv

When there's a BlueprintConfig declaring that it canInterpretType (e.g. schema.org/ImageObject), and it has some interpretableKeys that exist on that type (e.g. schema.org/contentUrl or schema.org/name), and it doesn't fill those keys but instead has a possible singleKV with that type, then the generatorFunctions

  • getDerivedItptStateFromProps
  • getDerivedKVStateFromProps
  • initLDLocalState

should take the values from that singleKv instead and distribute it among ldTypes, localValues and compInfos. Determining the singleKv should be done with determineSingleKVKey

Move components to React 16.X flow

All components should use the React 16.X flow without deprecated functions

game/

  • PureFourFieldsView
  • PureSingleFieldView

generic/

  • PureBaseContainerRewrite
  • PureRefMapItpt

md/content/

  • PureBaseDataTypeInput
  • PureSingleImageSelector

md/interaction/

  • PureMDButton

md/navigation/

  • PureBottomNavigation
  • PureNavBarWActions
  • PureNavProcessAtom
  • PureNavSearchBar

peripherals/camera/

  • EANScanner

routing/

  • PureRouteComponent

visualcomposition/

  • PureImgDisplay
  • PureImgHeadSubDesc

swagger/Api support in designer

create a node in the designer from an API access point, either by dragging and dropping a typescript file and getting information about functions and types from it, or by hooking into a swagger-generator

Create external output marker

components like bottom navigation and EAN scanner export values. It should be possible to set them as dynamic output of a RefMap-BlueprintConfig containing that component

optimize CSS for build

  • fix error, where ripple-effect from react-toolbox doesn't "grow" (only shows maximum size)
  • fix huge filesize of js-file (containing css) by separating/trimmming CSS modules, SCSS etc. (file size is displayed after running "yarn build"

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.