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:

$3

- 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

$3

$3

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

$3

- Close the loop to server side flow ...

Contributing

$3

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