Weaveworld
Weaveworld (ῶ) is an experimental framework for interactive web applications, to provide the theoretically shortest (!) representation for "data-intensive" applications (forms, etc.) using simple HTML and JS techniques, without loss of readability. Only basic (!) HTML/CSS/JavaScript(ES6 or ES5) skills are required to create applications. See "intro video on youtube".
License: it is free to use for any purpose, but not open-source during its experimental phase (i.e., it is not allowed to use elsewhere parts or modified versions of the source, but the original files), however the framework is totally customizable and redefinable. (Weaveworld is about the one tenth of the Weaveworld-ONCE web framework. Patent pending for the "type-binding" technique.) See: licence.
For comparison, there's a simplified demo page, which functional equivalent versions are also available in Vue, React and Angular.
In case of full-scale business web applications, the code based on Weaveworld is about 2-4 times smaller and simpler than the usual methods.
Usage (where VERSION: MAJOR.MINOR.DATE; suggested use: MAJOR.MINOR, e.g., .../Weaveworld@0.14/
...)
<script src="https://cdn.jsdelivr.net/gh/weaveworld/Weaveworld@VERSION/w.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/weaveworld/Weaveworld@VERSION/w.css" rel="stylesheet"/>
Using Weaveworld is extremely simple. (see: A simple example to do list tutorial.)
- Create an HTML page with example data.
- Provide some data (constant data or results of AJAX-call).
- Put HTML attributes to control data-binding.
--> Now, the page is filled with the current values. - Declare types of DOM parts in
class
and/orw:type
attributes. - Create "type-handlers" containing "rules". "Rules" covers
- event handling,
- derived (computed) values of current data,
- data transformation, view controls,
- constant or computed attributes of form fields.
- Furthermore, Weaveworld is highly customizable.
Weaveworld (ῶ) main features:
-
Template engine: example HTML is filled with current data.
-
Expression:
- current data, (sub)fields,
X\A.B.C
, - values:
true
,false
,null
,undefined
,0
,1
,""
,''
, expressions -
!
,= !
,|
,? :
,[ ]
, Transformations
- current data, (sub)fields,
-
Transformations,
[?]
,[??]
,[?1]
,[!]
,[!!]
,[!1]
,[{}]
-
Navigation:
w:item
,w:each
(w:when
),w:if
, (w:else
) -
Element properties:
w:attr:X
,w:data:X
,w:style:X
,w:set:X
,w:value
,w:show
,w:warning
-
Expression:
-
Event-handling: events can be handled in so called "type-handlers" (simple JS objects).
-
High-level Event-handling,
w:on:X
-
Event-handling, parameters and return values, X
$arg
-
w:on:X:menu
,w:on:X:data
,w:on:X:set
,w:on:X:action
- Low-level Event-handling
-
High-level Event-handling,
-
Two-way data-binding: changing data causes DOM-element updates.
-
'Weaving' -
w$refresh
,w$weave
; Server call -W$CALL
-
Initial data -
W$DATA
,W$START
; Initialization -W$ONLOAD
-
'Weaving' -
- "Type-handlers": data derivation, transformation, view control, etc.
-
Type-binding -
class
, Prototype type-binding -w:type
-
Type-handler registration -
W$TYPE
, Type-handler rules
-
Type-binding -
-
Validation: basic methods to check and display validation errors.
-
X
$warning
,_w
,_w
$X,w:warning
, -
X
$check
, X$valid
-
X
$message
,_m
,_m
$X,
-
X
- "Super-templates": setting defaults based on type-handler rules.
-
w:name
,w:named
-
-
Access-control: levels of view, update, delete, etc.
-
w:for
,w:show:for
,w:enable:for
-
-
(Re)action contexts: complex reactions for events.
-
w:at
,$at$
X
-
- Basic localization: string translation using a dictionary.
- Utility functions
- Customization: practically everything can be redefined.