
Mavo: An HTML-based language for creating many kinds of web applications - jessaustin
http://lea.verou.me/2017/05/introducing-mavo-create-web-apps-entirely-by-writing-html/
======
speps
Previous discussion :
[https://news.ycombinator.com/item?id=14354911](https://news.ycombinator.com/item?id=14354911)

Official website : [http://mavo.io/](http://mavo.io/)

~~~
petecooper
…and the associated GitHub:

[https://github.com/mavoweb/mavo](https://github.com/mavoweb/mavo)

------
romaniv
Plug for a somewhat different take on "attribute-driven" development:
[https://github.com/QuickenLoans/Behaviors.js](https://github.com/QuickenLoans/Behaviors.js)

No centralized framework. Everything is decomposed into "behaviors" that have
no direct dependencies. Attributes are used for configuration _and_ storing
the running "state" of all libraries. Liberal use of CSS selectors as a kind
of query language to remove the need for tree-traversal code.

The interesting thing about this approach is that it enables
libraries/behaviors to interact and effectively "compose" at run-time without
any direct code dependencies. It has some similarities to the idea of agent-
oriented programming, which I think is a powerful idea worth a deeper look.

Of course, this is more of a proof-of-concept than a complete set of libraries
needed for a complex website. However, I find this "behavioral" approach very
enjoyable to use, because it makes development very immediate and incremental.
Add an attribute, observe that it works, add another attribute, observe that
it works, etc.

You also get progressive enhancement "by default".

------
bauerd
Nowhere does it say this is a project intended to be used by non-technical
people. Yet both times this got posted here everyone assumes it is. Am I
missing something? In the Smashing Magazine blog post, it clearly states:

>Make a website that non-technical folks (clients? family members?) can edit
right in the browser

I think the author is well aware that your average Joe is not gonna pump out
web apps only "because it's just HTML". Saying that Mavo is simple to use can
be misleading in this context. Simple compared to what? As developers,
behaviour-enriched HTML seems simple to us because we have frontend stacks as
an anchor for comparison. In almost all cases, average Joe won't even know
about the structure of HTML documents, nor will he have a GitHub account to
authorize against.

I think if you take Mavo for what it markets itself as, namely a "new,
approachable way to create Web applications", it is great work.

------
purerandomness
That's absolutely awesome and probably goes well with
[http://intercoolerjs.org/](http://intercoolerjs.org/) as it's doing the same,
only for AJAX requests.

~~~
carsongross
_> tfw I don't have to shill my own library in this thread_

------
z3t4
HTML is a simple "programming language", but my experience is that when non-
programmers see anything that even resembles "code" they throw their arms up
and scream "UNACCEPTABLE!".

I love the concept though. It kind of reminds me of Excel. It's really hard to
tell if "the users" will like it or not, you have to test it on them. But I
think "the users" will want some sort of GUI/WYSIWYG.

~~~
leaverou
Note that as is mentioned on the website, this has indeed been tested on
users, and the results of the study have gone through rigorous peer review and
published at a top tier academic conference on HCI. And yes, the audience is
programming novices who do know HTML and CSS. For now. Since Mavo is a
language, one can easily imagine an integration with a visual editor, to make
it accessible to the average Joe.

~~~
accordionclown
lea, since you're here...

i'm creating a mavo project right now and i wanna use a simple textarea as a
mavo field. (tinymce makes me feel a little icky inside.) but i didn't see
anything in the documentation about how i would do that. can i? if so, how?

edit: oh hey. i just acted like it would work, tried it out, and bingo! hey,
that makes me happy...

~~~
leaverou
Glad you figured it out! Btw if TinyMCE makes you icky, you may like the
Markdown plugin:
[https://plugins.mavo.io/plugin/markdown](https://plugins.mavo.io/plugin/markdown)

~~~
accordionclown
light-markup is definitely the way to go, yes.

except markdown also makes me feel a bit icky -- too many inconsistencies in
the various flavors.

markdown's redeeming value is that it's "popular".

which is also why it's so frightening now, since it desperately needs to be
replaced. (it cannot be improved, because xkcd 927.)

speaking of "popular", that's how you describe the showdown converter that
your plug-in uses.

one reason it's popular is because it was fast -- the fastest converter, at
one time, it claimed.

note the past-tense "was"...

because that time has now passed.

other converters, also coded in javascript (the other big reason showdown got
popular) are now much faster and far more powerful.

without getting into all the surrounding drama, i'd recommend that you use
markdown-it instead: it's blazingly fast, and has much functionality.

> [https://github.com/markdown-it/markdown-it](https://github.com/markdown-
> it/markdown-it)

(functionality is now a better differentiator of the worth of a markdown
converter than speed.)

mavo's choice of converter is more consequential than it might appear at the
first glance because follow-on effects of differential functionalities will
surely impact the success of a mavo project, as will the inconsistencies that
will bite users.

all this aside, mavo is a fascinating little tool. :+)

------
reedlaw
This is really impressive. It combines a lot of good ideas for making
collaboration easier for non-technical users (Github auth, live editing). I
see some negative comments about HTML but I see this being a great solution
for marketing sites with basic interactions.

------
shireboy
I wouldn't call this for "non-programmers", but I have lots of customers who
can handle HTML and some basic server code, but who find Angular a bit of a
leap. They want a way to crank out modern web-based forms-on-data apps with
little ceremony. Will definitely keep an eye on this.

------
pygy_
It should be noted that this is a tool intended for non-programmers (think:
people who can use spreadsheets), not for (pro) developers.

------
misterbowfinger
I don't get the JSX vs. HTML argument. The whole point is that non-technical
people can use this to create websites that work well enough, and it'd be
simple (comparatively) to build a WYSIWIG on this.

------
mrborgen
Hey, this is truly awesome. Lowers the threshold for people to start creating
web apps.

I created a quick 'Hello world' tutorial on Mavo here btw, hope you like it:

[https://scrimba.com/casts/cEZ3TE](https://scrimba.com/casts/cEZ3TE)

------
jdironman
The only thing I do not like about it is the math functionality is quiet
limited.

[https://mavo.io/docs/mavoscript/#math-
functions](https://mavo.io/docs/mavoscript/#math-functions)

You would have to nest functions to get proper order of operations. Using
function names instead of actual symbols. Seems like it would be easier to do
something like math(a+b/2) and have it know that whatever was inside that
function is math to be parsed.

I might be nitpicking.

~~~
leaverou
Not sure where you got this from. Operators are supported as normal and are
listed there too.

~~~
jdironman
I honestly couldn't gather from the documentation that it did support
operands. My apologies if I was wrong, I will be re-reading it and slower this
time.

------
NiLSPACE
Looking at the official website it seems very similar to Angular. Could
somebody explain the differences?

~~~
shireboy
I think the gist is the person creating the app would not write any javascript
at all. Just the markup and reference the mavo js/css. In Angular and any
other framework, you would typically write a JS component and HTML or other
format template that eventually renders to HTML. There could be pros and cons
to each approach, but I can see a niche for something like this where there
isn't a need/desire to do anything besides _just HTML_

------
retox
Introducing: spam

------
jlebrech
shame, that's the part i dislike the most

~~~
pplonski86
why?

~~~
YCode
After working with JSX, HTML/templating just feels like a step backwards.

Web pages these days are far less about the template and far more about the
logic and interactions involved.

Subsequently building up from HTML the way pages used to be built and then
embedding code doesn't really line up with the way modern web apps are
developed.

While it may have a niche in front-end design, for the kind of work I do at
least it comes off as though the platform "allows" devs to build web apps
entirely written in CSS.

~~~
marvindanig
> Subsequently building up from HTML the way pages used to be built and then
> embedding code doesn't really line up with the way modern web apps are
> developed.

Unfortunately the data doesn't agree with you. JSX, react and all that jazz is
not used by 99.99% of the web. And NEVER will be! In fact react/vuejs/front-
end frameworks are fancy only these days, the majority of web developers don't
even use preprocessors for CSS or a templating engine like HAML/Markdown to
begin with [1].

There's a reason why writing HTML has been kept simple. And forgiving.

[1] [https://blog.codepen.io/2013/04/08/statistics-on-
preprocesso...](https://blog.codepen.io/2013/04/08/statistics-on-preprocessor-
usage/)

Edits: Downvoted because it doesn't fit your narrative? Lame.

~~~
YCode
> the way modern web apps are developed.

I suppose that could have been worded differently, I meant it in the context
of the original person mentioning HTML is their least favorite part of web
design.

For your 0.01% of us who use all that jazz HTML-first design feels like a step
backwards and especially trying to inject application logic comes off as a
ham-handed method of design when compared with a logic-first design that spits
out and manages the UI (HTML/CSS).

I'm not sure what CSS preprocessors has to do with that, but I'm also confused
- what is your opinion of Mavo?

~~~
marvindanig
> I'm not sure what CSS preprocessors has to do with that…

That even simpler step-ups like preprocessors with lower learning curves have
not been adopted by the majority. Simplicity and lazy has a very high bar for
any sort of competing tech.

I agree with you that technical simplicity of HTML-first would feel a step
backward because you have already climbed over the fence and accepted the
issues of over-engineering that come with React/JSX/Webpack and 1000 other
components.

This of course doesn't mean HTML-first approach would be replaced anytime
soon. Even with likes of Facebook betting their entire ass behind it.

On Mavo: Not tried it yet, but I do see a promise in it. Also, coming from Lea
Verou makes it all the more compelling.

~~~
YCode
It's true, there is a steep learning curve. I'm not sure that's a good
comparison though, for example I don't use CSSPS but it has nothing to do with
the learning curve.

So for comparison, how do the majority of people design sites? Say you're
making a HN or Twitter clone, what is the process from cradle to production to
get the site up and running?

