Not every project needs React or Angular to be zippy and modern.
After three more years of revisions and lots of help and advice from the community, I'm ready to release it to the public.
The central idea behind Mozart is to treat your web application like a set of components.
Once we stick to that idea, we can define events, actions, and routes within the scope of each component and not worry about them running into each other.
Consider this simple example where we want to build a contacts application. Users can go through a list of contacts in the bottom left, click on a contact to see their full details in the bottom right, or create a new contact at the top.
To make this easy for ourselves, we might want to make this one big component. Maybe this helps us to separate it from the rest of the things going on in the application.
Or maybe we make this into three components and let each one call out to the other to pass some data or execute a fucntion.
Every Mozart component is a class that extends the Mozart base class. To enable the most customization, we recommend you always extend the Mozart base class with one called Component.
Your new component automatically has a set of methods. You might notice some funny stuff going on there, especially that _$ variable. We'll go through each one of these methods and cover that along the way.
Mozart doesn't provide any tooling at the moment to assist with CSS styling, but then again, you don't really need that overhead anyway.
Simply use the attirbute selector syntax to easily style only the elements in your component. This is even easier when nesting with SCSS/Sass, or a similar precompiler.
Actions are stored in a dictionary to allow for calling by name either from within the component or from another.
The idea of actions is to compartmentalize atomic concerns of your application into named routes.
This allows you to separate out event-driven logic which we'll cover next, and to make it easy to follow your code as different components talk to one another.
You may have noticed each method has two arguments, _$ and args. When you actually call the action, you can omit the _$ as this is added in automatically.
Events are simply the events that can happen on your component or an element in the component.
Mozart provides a "scoped selector" to make this easier. You can name it however you want, but we like to use _$.
_$ is a pass through for either jQuery's $, or document.querySelectorAll if you're not using it.
However, it provides an additional function by automatically scoping the query to the component. That's why we're free to be a little reckless here and just refer to the button as button. It's not necessary to use a class or ID here but I could if I wanted to.
In both examples, this event fires off a generate action. We'll cover actions next, but normally the actions would be referenced with m.generator.acts. This is another helper function _$ provides, by giving us a shorthand to the component's own methods.
Routes allow you to quickly spin up the right AJAX parameters for an AJAX call given a few parameters.
so you can multiply and manipulate it with minimal strain on DOM redraw.
Mozart provides the .template method only as a shorthand to this native implementation.
For root methods on jQuery such as $.ajax, continue using $ while using _$ for component scoped selections.
Private methods allow you to define methods only the component itself can reach. Other components will not have access.
By default, the scoped selector _$ only pulls up elements within the scope of your compoonent, not parent elements.
However, you may need to call the component itself. There are two ways to do this.
If you only have one instance of the component, you can just call _$.me(). However, if you need to pull up a specific
instance of the component, just pass in any unique node that is in the component you wish to target. Usually this can be done for actions
called up from an event.