Appxigon - A schema-based SPA runtime (Work in progress)

Update

• A show case: a slide presentation app made with Appxigon 0.1.x

  With live demo: https://appxigon-101.firebaseapp.com

  & source code: https://github.com/rlhk/appxigon-101

Project Goal

• Define a Domain Specific Language (DSL) schema YAML/JSON/EDN compatible format
• The DSL describes most common high level SPA use cases that we keep reinventing all the time
• The runtime is able to render a fully functional client-side application basing on the DSL

What is Appxigon ?

• An application framework instead of a technical framework (such as ReactJS, VueJS, AngularJS)
• It enables application developers to focus on the application rather than technical details
• A mini-framework in the form of a front-end application runtime by interpreting a JSON compatible schema. The schema itself is also dynamic at runtime
• The front-end application is completely de-coupled with backend. Appxigon app communicates with server only via RESTful APIs (GraphQL and Websockets are great-to-have developments)
• Apart from composing your SPA from Appxigon built-in components, writing custom Appxigon components and functions is the preferred way to complete your app
• After all, Appxigon is just a React component accepting schema as it's prop. It doesn't prevent you from mixing the 'usual-way' of building a React App.

What is NOT Appxigon ?

• Server-side rendering (SSR)

Audience

• SPA developers with reasonable React + Redux knowledge for setting up the main application entry Javascript source code. (Hopefully a generator could be provided in future)

Incidental simplification on React + Redux implementation

• No more messing with nested container/presentation components
• Appxigon is the only container for all leaf components (built-in or custom)
• All built-in and custom components should be presentational (dumb)
• Appxigon Item provides common props such as: value, data, errors, progress
• Redux state management is not necessary (most of the time)
• Reactivity is free by dynamic props binding from Redux (libs like Webx is unnecessary)
• Orchestration of async API/function calls comes free

How and where to start

• Firstly, take a look at /playground/schemas/kitchen-sink.yml, read through all comments to understand the syntax
  • TODO: conceptual diagram of Appxigon App
• Secondly, read /playground/app.js to see how to initialize the application entry JS

The Schema

• Internally, the schema is a JSON data object. As long as the schema conforms to what the demo kitchen-sink.yml format, the Appxigon app is renderable once the JSON is loaded into the global App state store: axgSchema. The YAML deom schema is converted and consumed by the app setup as JSON. YAML format is recommended for it's readable and comment-friend syntax

• Naming: entities in Appxigon schema should be named by their semantic function instead of presentation. Specific presentation concerns are addressed by subtypes

  • e.g. ItemType 'select' is an UI item which provides predefined values for user selection. In that sense, single select, multiple select, checkboxes, navigation bar are all 'select'. Some example subtypes are:
    • 'select' (same as 'select/select')
    • 'select/list'
    • 'select/checklist' ('option: multiple' indicates the multiple selectable attribute)
  • e.g. ItemType 'input' is an UI item which allows a user to input arbitrary value. Some subtypes examples are:
    • 'input/input' (default single line input box)
    • 'input/textarea'

NOTE

• Route handling for web SPA implementation stays with pre-v4 react-router
  • v4 introduces breaking changes from v3

TODO:

Internal

• cleaner app-level layout handling
• dynamic schema manipulation
  • cloning: group, item
• value validation (appxigon/input, submission action)
  • generic solution: middleware-like pluggable function (fully customizable)
• modal
  • real (traditional)
  • pseudo (full screen)
• import db schema for form generation

Nice-to-haves

Great-to-haves

• JS bin like playground with live schema editing and loading for developers
• GraphQL support
• WebSocket support
• Native implementation such as React Native

Greatest-to-haves

• Close the loop to server side flow ...

Contributing

Required background knowledge

• General understanding of Appxigon structure
• Basic React and Redux knowledge
• Livescript (The FP style replacement of CoffeeScript)