What is this? A templating library built on top of Typescript
Dependencies? No external library or framework is needed, only Visual Studio, VSCode or tsc
The idea of this library is to give the opportunity to develop web applications quickly, without needing to use Gulp, Grunt, Bower, Node.js, Babel or other transpiler. Only Typescript, which is included in VSCode or Visual Studio.
It's simple, you tap Cmd+S and your code is compiled, then you can try out your changes easily. You are happy, the PM is happy, you ship your product faster and everything without (a drop of rum!) setting up the right version of node, or fighting hours with a gulp file, bower dependencies, compilers, etc.
Are you familiar with Typescript and HTML? ... We then have the job almost done
Our crowd was familiar with C#, jQuery, plain HTML and . Our business grew up, our products too, became more complex and almost impossible to maintain built on plains HTML and hardcoded scripts. But there was a problem: nobody ever used Angular, React, Ember or similar technology. Even Node.js.
Then I thought: can I keep the basic HTML layout, and attach a simple controller to it without spend resources dealing with controllers, directives, scopes, virtual dom or weird syntaxes on templates? This library is the answer
You have to know few things to get started:
- There is Views and Widgets Widgets use Views to draw themselves
- Views are XML or HTML
- Widgets are Typescripts classes (controllers on MVC pattern)
- All widgets extends
mz.Widgetor derivated class - Unless other libraries, widgets do not includes mutation detectors, everything who needs constant update on views is decorated with
@mz.MVCObject.proxyin order to propagate changes to the view
- It can be statically defined as a template on code or it can be loaded from a HTML or XML
- Everything inside braces (expressions)
<span>{Math.round(counter * 2)}</span>is evaluated as javascript. Without restrictions. - If you want to scape a brace, just add
<span>\{ non evaluated fragment }</span>or CDATA<style><![CDATA[ .button { color: red } .link { color: blue } ]]></span> - Inside expressions,
thisis the Widget's instance. - All user events' arguments implements
mz.IMZComponentEvent, which contains information of the original event, and for ex: the clicked node
@HelloWorld.Template(`
<div>
Hello world!
</div>
`)
class HelloWorld extends mz.widgets.BasePagelet { /* empty */ }
new HelloWorld().appendTo('body');This snippet would append a <div>Hello world!</div> into the body.
@Clock.Template(`
<div>
Time: {this.time}
</div>
`)
class Clock extends mz.widgets.BasePagelet {
@Clock.proxy
time: Date;
interval = setInterval(() => this.time = new Date, 1000);
}
new Clock().appendTo('body');Renders <div>Time: Sun Feb 07 2016 17:11:03 GMT-0300 (ART)</div> and update the time every 1 second
@ColorTest.Template(`
<div>
<button
onclick="{this.toggleColor}"
style="color: {this.isRed ? 'red' : 'black'}">
Toggle color!
</button>
</div>
`)
class ColorTest extends mz.widgets.BasePagelet {
@ColorTest.proxy
isRed: boolean = true;
toggleColor(){
this.isRed = !this.isRed;
}
}
new ColorTest().appendTo('body');A button, when pressed toggle it's font color
@InputTest.Template(`
<div>
<input mz-model="my_text" />
<span>{my_text.toUpperCase()}</span>
</div>
`)
class InputTest extends mz.widgets.BasePagelet {
@InputTest.proxy
my_text: string;
}
new InputTest().appendTo('body');$ bower install mzcore --savethen include this script at the top of your html
<script src="bower_components/mzcore/mz.boot.js"></script>First, download a release, then include the file "mz.boot.js" in your file
<script src="mzcore/mz.boot.js"></script>