Web Application Development made easy
<script info="if you see this tag, please navigate to https://rozek.github.io/webapp-tinkerer "></script>This file is meant to be read as a "GitHub Page". If it looks "strange" because of visible <script> tags (or others), you should probably navigate to https://rozek.github.io/webapp-tinkerer
The WebApp Tinkerer (WAT) allows novices, casual and professional programmers to easily develop web applications directly in a browser. Both the development environment and the final application may be run on many operating systems (such as Windows, Linux, macOS, iOS, iPadOS, Android, ChromeOS) and on devices with multiple form factors (such as desktops, notebooks, convertibles, tablets, smartphones). Smartwatches may run WAT applications if they provide a modern browser and the applications have been designed with such small displays in mind.
(WAT is currently under active development, please stay tuned - it is planned to be finished by end of August)
(current Version, Browser Requirements)
(runtime and designer, nested visuals, categories, applets, cards, compounds, controls, containers, components, master, builtin and custom, resources, configuration, custom properties, scripts, active and pending, event handling, bubbling, applet-wide, publish and subscribe, reactive programming, unique names)
WAT was inspired by the incredibly brilliant HyperCard, but it is by no means any kind of HyperCard "clone".
Compared to HyperCard, WAT lacks
- the built-in bitmap drawing tool (WAT uses vector-oriented graphics components instead),
- multiply usable Card backgrounds and
- the novice-friendly scripting language (WAT uses JavaScript instead)
On the other side, WAT offers
- support for many platforms and form factors,
- access to all Web APIs (e.g., Bluetooth, RTC, Speech Synthesis and Recognition, AR/VR and many more)
- no need for an explicit installation
- automatic updates (if desired)
(active Personal Notebook, active Presentations)
(Designer Button, Toolbox, Layout Mode, Layouting (Matte, Positioning Guides), Nudger, Configuration Dialog (for Applet, Container, Component Selection), Script Editor (for Applet, Card, Component Selection), Applet Import, Applet Export) (min. size for development: 320x480px)
(Runtime with/without Designer, dependencies, applet template or serialization)
(Master Scripting, defineName/Category/Template/Method[s]/Property/Properties, on)
(special compound, simple group/ungroup, x/y configurable, automatic width/height, no other configuration possibilities, use compound for configuration and scripting)
(t.b.c.)
The initial version of WAT is the smallest "minimal viable product" (MVP) the author could think of - usable to develop (yet very simple) web applications, but lacking many features users would normally expect from professional software. These features are planned to be integrated until end of August 2022:
- test on multiple platforms and browsers (Chrome, Firefox, Safari)
- full support for mobile and touch devices, including convertibles (still requires some tweaks)
- test on Electron and NW.js with internal dialogs
- Keyboard Bindings
- Undo/Redo
- (Card) Visit History
- local Backup in the Browser (using localForage)
- Synchronisation with external Server (develop the same WebApp from several computers)
- Support for designing "Compounds"
- Support for designing multiple cards
- Resource Handling (Resources are additional, usually external, CSS and Script files an applet may need)
- Master Scripting (develop your own masters, directly in the browser)
- extended Import (import one or multiple cards or components)
- additional import sources (i.e., from a given URL or from GitHub, with authentication)
- allow Drag-and-Drop import from filesystem onto applet itself (rather than Inspector)
- native Drag-and-Drop
- additional export targets (i.e., to a given URL or to GitHub, with authentication)
- export complete web applications
- Applet Overview (choose from all applets on a given web document)
- Card Overview (manage presence and order of all cards in an applet)
- Overview of Visuals with prominent names
- Overview of Visuals with reactive Variables
- Overview of currently known reactive Variables
- Overview of all Masters (and their actual usage)
- applet-wide event handling (aka message bus, publish/subscribe)
- find visuals containing a given text
- find visuals with a given state (e.g., pending script, pending error)
- remove jQuery dependency
- support for Electron and NW.js with external dialogs (yet to be developed)
- integrate JS-Interpreter (yet to be developed)
- inspect and debug JS-Interpreter scripts (yet to be developed)
- optional: add predefined "interactions" (to avoid scripting, yet to be developed)
- optional: perhaps integrate Blockly (yet to be developed)
and, of course, many additional masters
(in reverse chronological order)
- 0.1.0 Initial Release (absolutely Minimum Viable Product, MVP)
(to be launched on Tuesday, June 21, 2022)
WAT internally uses the following open-source software:
- jQuery - temporarily only, to be removed
- JavaScript Interface Library
- localForage
- download
CodeFlaskPell
<style> html { width:100%; height:100% } body { min-width:100%; min-height:100% } </style> <script name="JIL" src="js/javascript-interface-library.js"></script> <script name="jquery" src="js/jquery-1.12.4.min.js"></script> <script name="localforage" src="js/localforage.min.js"></script> <script name="download" src="js/download.min.js"></script> <script name="codeflask" src="js/codeflask.min.js"></script> <script src="js/WAT-Runtime.js"></script> <script src="js/WAT-Designer.js"></script>