- Objects
- Classes
- npm
- NodeJS
- Schemas
- Ajax
- Events
- Functions
- OAuth
- Databases
- JSON
- Virtual DOM
- DOM
- Components
- MVC
- Data binding
- JavaScript
- HTML
- CSS
Framework | SLOC |
---|---|
React | 421 |
Backbone | 297 |
Angular | 294 |
Polymer | 246 |
“Our default workflow has been complicated
by the needs of large web applications”— Mikeal Rogers https://medium.com/@mikeal/ive-seen-the-future-it-s-full-of-html-2577246f2210
<link rel="stylesheet" href="//get.mavo.io/mavo.css"/>
<script src="//get.mavo.io/mavo.js"></script>
or just visit play.mavo.io!
<div mv-app="appName">
<!-- Mavo app -->
</div>
<div mv-app mv-storage="local">
<!-- Mavo app -->
</div>
<div mv-storage="http://github.com/leaverou">
<!-- Mavo app -->
</div>
mv-autosave
How multiple element types get edited , mv-multiple, hobbies collection
strength / 100, add <p>, font-size: [strength]px;
$now * 6 / 1000 mod 360
refresh, count(cat), count(age > 6), count(age), average(age)
Age μ = 35.9, σ = 10.2
property
mv-multiple
[foo]
[count(foo)]
[average(foo)]
Average of averages
count(foo > 5)
if(foo < 5, yes, no)
Concatenation
HTML fragment (goal) | Success |
---|---|
</meter> [rating] |
100% |
title="Overall rating: [rating]" |
100% |
</meter> [weight] |
100% |
style="background: url([pic])" |
77.8% |
class="weight-[weight]" |
75% |
class="answer-[answer]" |
75% |
Conditionals if(score > 0, Yes, No)
Especially nested if(score > 0, Yes, if(score < 0, No, Maybe))
Just seeing those if statements...I did a little bit of Java and I remember those always screwed me over in that class. No surprise that that also tripped me up here.
<div mv-if="score > 0">Yes</div>
<div mv-if="score = 0">Maybe</div>
<div mv-if="score < 0">No</div>
Application | Before Mavo | After Mavo | Difference |
---|---|---|---|
Decisions | 2.875 | 1.375 | ⬇︎1.5 |
Foodie log | 3.667 | 1.223 | ⬇︎2.445 |
It's very simple. It's as logical as HTML. You are eliminating a huge step in coding.
It's simpler than I expected. My anxiety expects it to be hard, then I just say write what you think, and it turns out to be right. It’s very intuitive.
It’s so expressive, it tells you exactly what it’s doing!
It didn't seem like a lot of new things had to be learned. Naming properties was just the same as giving classes and ids.
It seems much more straightforward, everything is right there. It's almost too easy!
Being able to do that... right in the HTML and not have to fool with a whole other JS file... That is fantastic. I can't say how awesome that is. I want this thing now.
When is this going to be available? This is terrific. This is exactly the stuff I have a hard time with.
I'm convinced it's magic to write templating logic and have it show up and be editable.
<-- Mavo right now
<-- Our vision
Bacon ipsum dolor amet leberkas turducken ball tip strip steak. Venison burgdoggen leberkas doner beef ground round andouille turkey ham hock bresaola pork kevin biltong fatback.
Biltong tri-tip corned beef spare ribs tail capicola cow ground round kevin ham hock shoulder chuck jowl shank.
Meatball ham hock andouille capicola, kielbasa ham doner shankle. Hamburger bacon frankfurter, leberkas pancetta brisket shoulder pork chop venison.