Show / hide element using actions
What is AvoidJS
AvoidJS is a simple experimental library the main purpose of which is too provide a tool and the code style that helps to separate HTML and JS code completely.
Actions and events
The cornerstone of AvoidJS is events and actions. UI part reacts to the events that JS part produces and performs actions based on them. This makes JS code 100% UI-agnostic, which means that JS code now can focus solely on application logic and don't worry about UI.
So if regular code would loook something like this:
With AvoidJS it will look something like this:
So as you can see JS code doesn't care how UI will react to the result of the action, while HTML code only cares about UI and waits for events to fire.
# Benefits
- cleaner JS code and explicit HTML code
- macros - define complex actions as a set of instructions
- extensibility - create your own actions
- templates - define and reuse HTML templates
- test UI with fake events (no need to execute application logic to test UI, just fire events)
- better unit testing of JS code (probably, why not)
Disclosures:
- currently AvoidJS is just a prototype, it's not intended to be used without precautions
- it's not a rip off from any other library, framework or even code samples if such even exists
- as of right now the library isn't covered with any tests
- this documentation doesn't cover all details and features of the library and mainly serves as an introduction page
# Examples
Show / hide element using macros
Toggle display of element using macros
Render element
Render template
Propery expressions
Action variables
# What next
While the future of the project remains uncertain, these are current priorities:
- cover code with unit tests
- improve implementation of certain components
- expand documentation
If you want to learn more about the library, you can take a look at the source code on github or view the source code of this website as it uses AvoidJS for every UI part.