Adaptive Cards: Platform-agnostic snippets of UI, authored in JSON

I first heard of this project here on HN when I shared a project I finished with a friend to accomplish a similar goal for iOS widgets[1]. I still use a server-delivered JSON file for a live widget on my iPhone. I think there's a lot of value to this type of delivery even if you can't fully customize the UI.

[1] https://wd.gt/

felixfbecker• 2 years ago

I get that XML is not cool anymore but JSON is really a terrible language to define user interfaces. This smells like using JSON for the sake of using JSON.

There's a reason why JSX (basically XML in JS) is so popular and not some JSON definition of HTML. Even Windows apps have XAML so the UI doesn't have to be defined in C# objects.

itslennysfault2• 2 years ago

I think Flutter does a great job of doing UI using objects with zero xml.

I also can't stand JSX. It feels like inverted PHP to me (which I suppose makes sense since it's Facebook)... but I guess it's all just a matter of taste.

dleeftink• 2 years ago

Could you share an example as to why you think JSX feels like inverted PHP? I think it is an interesting perspective.

blackoil• 2 years ago

Flutter does some job, definitely not great.

vineyardmike• 2 years ago

If I recall, Alexa Presentation Language, the way to define UI for Alexa skills, is also some unholy JSON nightmare.

JSON is great for programmatic manipulation, but horrible to read as a programmer.

incrudible• 2 years ago

JSX is not XML, it is Javascript. The point of XAML (and this JSON thing) is to build declarative UI that can be authored and displayed without evaluating something like Javascript.

For that use case, I do not believe JSON is any worse than XML for authoring, but really you want some sort of GUI for it. Programmers, especially those living in terminals, tend to hate such stuff, of course.

jcoletti2• 2 years ago

Is it just me or is the design (and especially typography) of this website atrocious?

murermader• 2 years ago

No idea why your comment is gray, but I agree. The site looks horrible. The text is so thin, it is almost unreadable (at least on macOS). Not to speak of the constantly changing visuals styles and fonts, which make the website feel like a mess, something a backend developer (no offense, not everybody has to be able to make nice looking landing pages) threw together in a day before the deadline.

jcoletti2• 2 years ago

Could not have articulated it better, especially when compared to other MS project sites like https://www.fast.design/. Maybe the dev or someone on the team downvoted me :/

dang• 2 years ago

Adaptive Cards - https://news.ycombinator.com/item?id=31449834 - May 2022 (35 comments)

edit: also - related ongoing thread I assume?

Microsoft's Fast - https://news.ycombinator.com/item?id=39294360

Dachande663• 2 years ago

If Microsoft want to use this, they need to use it. I was engaged in a 9 week battle with the MS Teams review team who were wholly and utterly incompetent.

They wanted fields added and moved that could not be because all of the layout was determined by the card and MS Teams own rendering (namely they wanted a settings link on a card list). It took three calls with their “engineers” to make them realise. Microsoft will never commit to something long enough for them to learn it internally so why should anyone else bother?

Rant over.

taneq• 2 years ago

They really are trying to be Google from 2015. :P

packetlost• 2 years ago

Based on how fucking terrible Teams is, I'm not surprised to learn that the devs on it are wildly incompetent.

heisgone• 2 years ago

This one UI might survive for a while as Microsoft doesn't have anything else to fill that role, and with conversation AI becomming a thing, this can of UI have their use.

modulovalue• 2 years ago

There's a similar project from Google: https://github.com/flutter/packages/tree/main/packages/rfw

rfw is used by Google's Gemini LLM to generate UI.

rfw runs on the web/android/ios/macos/linux/windows, anywhere where Flutter runs.

andrewstuart• 2 years ago

I like that Microsoft innovates alot but I'm wary of the long trail of UI technologies that have fallen by the wayside.

ChrisArchitect• 2 years ago

(2021)? (2016)?

klysm• 2 years ago

I don't know how many times we are going to try and define UI as data (XML/JSON/whatever). Has it not been sufficiently demonstrated that it doesn't really work in practice?

treve• 2 years ago

HTML seems to be doing pretty well.

kaliqt• 2 years ago

Why not evolve (or use HTML) and move from there, use HTML on native?

Theoretical_Cat• 2 years ago

This format is supported by Webex Teams, and I've used it to make alerts from Alertmanager actually readable. When it's used in conjunction with go templating, it can create some pretty useful results.

npunt4• 2 years ago

This is so weird. Why would anyone adopt a UI framework from a team that can't even put together decent website for their UI framework?

The site shows exactly one example (a very ho-hum weather widget) and that requires squinting to see it among all the other things in the video. It shows no other examples, nor the code to construct them. Nor does their documentation home [1]. The text is also illegible with ultra-thin 200 weight straight out of 2013.

Like, there's hundreds of examples of developer tool sites that get the basics right, and they're not even about UI.

(normally its bad form on HN to comment on the site vs the content, but in this case the site really is the content)

[1] https://learn.microsoft.com/en-us/adaptive-cards/

Terretta• 2 years ago

Here are 24 samples, some quite nice, with the code:

https://adaptivecards.io/samples/

npunt4• 2 years ago

Thanks. Guess I'm not impressed, some are fine layout-wise but overall these look like basic rather ugly forms. These might have been fine 10-15 years ago but the bar is higher these days, the style you get out of the box is essentially html 1.0. (fwiw I designed & built a json-based form-builder several years back)

awinter-py• 2 years ago

is it like some sort of hypertext markup language that can be styled using a cascading class-based DSL

bern4444• 2 years ago

I was on a team building tweet tiles[0][1] which required a cross platform UI system that would allow 3rd party developers to register a schema that would be used to render a custom UI under certain circumstances (usually by including a link in your post). We made it to beta, but never beyond given the internal turmoil.

We considered Adaptive Cards, but ultimately decided against it in favor of our own schema especially since we already had platform specific UI libraries.

Why?

Adaptive cards proved inflexible for uses not part of its core capabilities.

Adaptive cards doesn't allow for interactive elements IE charts or graphs with tool tips.

Adaptive cards doesn't appear to be well maintained or supported for ongoing future needs.

There were some other reasons but they are fuzzy a couple of years after the fact. This was one of the most fun projects I've worked on, I had to write a mini parser which is always a fun exercise, and I think it had massive potential. Would have been a very cool project to ship to prod fully but it wasn't meant to be.

[0]https://twitter.com/XDevelopers/status/1585707921433923585

[1]https://twitter.com/ashevat/status/1562862418514288640

zarathustreal• 2 years ago

How many times are we going to “invent” data as code before we admit everyone should be using Lisp?

emorning3• 2 years ago

I've played around with Lowdefy, https://lowdefy.com/. I kinda liked it. A similar concept but uses YAML instead of JSON.

Adaptive Cards: Platform-agnostic snippets of UI, authored in JSON

Related Stories