Adaptive Cards: Platform-agnostic snippets of UI, authored in JSON(adaptivecards.io)
adaptivecards.io
Adaptive Cards: Platform-agnostic snippets of UI, authored in JSON
https://adaptivecards.io/
45 comments
Based on how fucking terrible Teams is, I'm not surprised to learn that the devs on it are wildly incompetent.
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.
They really are trying to be Google from 2015. :P
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.
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.
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.
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.
Could you share an example as to why you think JSX feels like inverted PHP? I think it is an interesting perspective.
I think the parent is referring to how you write PHP templates, which are HTML at the top level, but escape to raw PHP code inside particular delimiters (<?php>), whereas for JSX you write JS at the top level and 'escape' (kinda) to HTML in your returned element. Not exactly an inversion, but I can see the connection.
Really just the weird mix of xml and code
PHP is sticking code (php) in html
JSX is sticking xml (html-ish) in code (JavaScript)
PHP is sticking code (php) in html
JSX is sticking xml (html-ish) in code (JavaScript)
Flutter does some job, definitely not great.
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.
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.
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.
JSON is great for programmatic manipulation, but horrible to read as a programmer.
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/
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/
Here are 24 samples, some quite nice, with the code:
https://adaptivecards.io/samples/
https://adaptivecards.io/samples/
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)
A problem here is the "adaptive" in Adaptive Cards. The idea was a unified "backend" for UIs in Bing, Teams, Copilot (the app formerly known as Cortana), LinkedIn, and all sorts of other "hosts". The hosts all have their own, different design languages and so all show different designs of these cards. The examples given on its own webpage are truly "lowest common denominator" and expected to be further restyled by whatever hosting application is used. This design is kind of intentionally "HTML 1.0" because it is meant to be a low level "control framework" for design teams to build on top of, rather than a final design in and of itself.
Not that that entirely excuses the web page from trying some better styles or better yet a "theme chooser" style approach to better illustrate how the base concepts are meant to be design-flexible by maybe actually showing design flexibility in action.
Not that that entirely excuses the web page from trying some better styles or better yet a "theme chooser" style approach to better illustrate how the base concepts are meant to be design-flexible by maybe actually showing design flexibility in action.
Good point about the adaptivity. Yeah the omission of any examples with themes really shows the silo’d nature of Microsoft, and makes it look like the whole project was low effort and built by people who aren’t even designers and were just building to some abstract spec. If Microsoft really valued design they would build complete UI frameworks including visual style and then hand them to the respective teams (more wood behind fewer arrows), rather than making it a shared effort where no one team has made informed decisions about the whole thing end-to-end. I’m a bit spoiled right now because I’m deep in Apple’s HIG and it’s just on an entirely different plane of competence and thoughtfulness, whereas this looks like the little leagues.
Are you stuck on the actual design of Fluent UI?
To some extent. Fluent1 is utterly charmless and not even good at usability (is this square a button? why are these icons so thin and illegible?). It looked at the already bad trend of flat design and decided it wasn’t flat enough and needed some more hard edges to drive home the point. It honestly looks like it was designed primarily to be as difficult as possible for an engineer to screw up during implementation, rather than explore the possibility of making an interface anybody actually enjoyed using. It’s 100% downside protection, which at least shows some self awareness on the part of Microsoft about their own design capabilities.
Fluent2 looks to correct many of those sins in a big way, so kudos to Microsoft for course correcting. I like it better than Material.
As far as these cards, they don’t even seem to meet the Fluent1 bar, again they’re more HTML1, and the examples aren’t even great at typographic layout. They built a system that looks theoretically capable of containing good design, but it doesn’t seem they had any designers on staff to actually verify that. It looks like it was built to some abstract spec an engineer and PM came up with on their own.
(Sorry for sounding like a hater but this world deserves better than to have these kinds of low effort designs everywhere, and my guess is with Microsoft’s reach these designs are going to be everywhere)
Fluent2 looks to correct many of those sins in a big way, so kudos to Microsoft for course correcting. I like it better than Material.
As far as these cards, they don’t even seem to meet the Fluent1 bar, again they’re more HTML1, and the examples aren’t even great at typographic layout. They built a system that looks theoretically capable of containing good design, but it doesn’t seem they had any designers on staff to actually verify that. It looks like it was built to some abstract spec an engineer and PM came up with on their own.
(Sorry for sounding like a hater but this world deserves better than to have these kinds of low effort designs everywhere, and my guess is with Microsoft’s reach these designs are going to be everywhere)
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.
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.
I like that Microsoft innovates alot but I'm wary of the long trail of UI technologies that have fallen by the wayside.
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/
[1] https://wd.gt/
Related:
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
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
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
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
> Adaptive Cards are platform-agnostic snippets of UI
No macOS or Linux support...
No macOS or Linux support...
I've played around with Lowdefy, https://lowdefy.com/.
I kinda liked it.
A similar concept but uses YAML instead of JSON.
Someone showed up to say it would stick around (since 2016) 2 years ago.
https://news.ycombinator.com/item?id=31449834#31467664
https://news.ycombinator.com/item?id=31449834#31467664
This brings memories of Object Linking and Embedding...
Objects Lost Everywhere /s
More successful than Sun's "Distributed Objects Practically Everywhere".
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.
Now if this was a Qt/QML plugin I would actually pay money for it.
How many times are we going to “invent” data as code before we admit everyone should be using Lisp?
is it like some sort of hypertext markup language that can be styled using a cascading class-based DSL
Is the voice in the promo video TTS?
(2021)? (2016)?
Is it just me or is the design (and especially typography) of this website atrocious?
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.
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 :/
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.