Mavo: An HTML-based language for creating many kinds of web applications

http://lea.verou.me/2017/05/introducing-mavo-create-web-apps-entirely-by-writing-html/

by jessaustin • 9 years ago

158 43 9 years ago

lea.verou.me

jlebrech3• 9 years ago

shame, that's the part i dislike the most

pplonski86• 9 years ago

why?

jlebrech3• 9 years ago

because markup is so 1990

moron4hire• 9 years ago

To make markup expressive enough for general purpose logic, you have to extend it to such a degree that it becomes much more complex than the tools it replaces. This is especially so when dealing with an XML-like syntax, with its verbose, interleavable end-tags, rather than the much more succinct S-Expression style of Lisp. Mixing data and logic basically requires homoiconicity or else tooling requirements explode.

YCode3• 9 years ago

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.

speps• 9 years ago

Previous discussion : https://news.ycombinator.com/item?id=14354911

Official website : http://mavo.io/

petecooper• 9 years ago

…and the associated GitHub:

https://github.com/mavoweb/mavo

purerandomness• 9 years ago

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

carsongross• 9 years ago

tfw I don't have to shill my own library in this thread

pygy_• 9 years ago

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

NiLSPACE• 9 years ago

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

shireboy2• 9 years ago

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_

leaverou4• 9 years ago

There's an FAQ item on this! http://mavo.io/faq/#angular

romaniv• 9 years ago

Plug for a somewhat different take on "attribute-driven" development: 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".

z3t4• 9 years ago

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.

ghostly_s• 9 years ago

I don't think the audience here is "non-programmers", it's traditional front-end web developers who are comfortable with HTML and CSS but have no formal scripting knowledge.

leaverou4• 9 years ago

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.

accordionclown2• 9 years ago

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...

misterbowfinger• 9 years ago

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.

reedlaw• 9 years ago

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.

retox• 9 years ago

Introducing: spam

shireboy2• 9 years ago

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.

mrborgen• 9 years ago

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

bauerd• 9 years ago

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.

jdironman2• 9 years ago

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

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.

leaverou4• 9 years ago

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

jdironman2• 9 years ago

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.

Mavo: An HTML-based language for creating many kinds of web applications

Related Stories