{"id":377169,"date":"2023-02-09T11:45:48","date_gmt":"2023-02-09T19:45:48","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377169"},"modified":"2023-02-09T11:45:53","modified_gmt":"2023-02-09T19:45:53","slug":"healthcare-selling-lemons-and-the-price-of-developer-experience","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/healthcare-selling-lemons-and-the-price-of-developer-experience\/","title":{"rendered":"Healthcare, Selling Lemons, and the Price of Developer Experience"},"content":{"rendered":"\n

Every now and then, a one blog post is published and it spurs a reaction or response in others that are, in turn, published as blogs posts, and a theme starts to emerge. That’s what happened this past week and the theme developed around the cost of JavaScript frameworks \u2014 a cost that, in this case, reveals just how darn important it is to use JavaScript responsibly<\/a>.<\/p>\n\n\n\n\n\n\n

Eric Bailey: Modern Health, frameworks, performance, and harm<\/a><\/h3>\n\n\n

This is where the story begins. Eric goes to a health service provider website to book an appointment and gets… a blank screen.<\/p>\n\n\n\n

\n

In addition to a terrifying amount of telemetry<\/a>, Modern Health\u2019s customer-facing experience is delivered using React and Webpack.<\/p>\n\n\n\n

If you are familiar with how the web is built, what happened is pretty obvious: A website that over-relies on JavaScript to power its experience had its logic collide with one or more other errant pieces of logic that it summons. This created a deadlock.<\/p>\n\n\n\n

If you do not make digital experiences for a living, what happened is not obvious at all. All you see is a tiny fake loading spinner that never stops.<\/p>\n<\/blockquote>\n\n\n\n

D’oh.<\/em> This might be mere nuisance \u2014 or even laughable \u2014 in some situations, but not when someone’s health is on the line:<\/p>\n\n\n\n

\n

A person seeking help in a time of crisis does not care about TypeScript, tree shaking, hot module replacement, A\/B tests, burndown charts, NPS, OKRs, KPIs, or other startup jargon. Developer experience does not count for shit<\/a> if the person using the thing they built can\u2019t actually get what they need.<\/p>\n<\/blockquote>\n\n\n\n

This is the big smack of reality. What happens when our tooling and reporting \u2014 the very things that are supposed to make our work more effective \u2014 get in the way of the user experience? These are tools that provide insights that can help us anticipate a user’s needs, especially in a time of need<\/a>.<\/p>\n\n\n\n

I realize that pointing the finger at JavaScript frameworks is already divisive. But this goes beyond whether you use React or framework d’jour<\/em>. It’s about business priorities and developer experience conflicting with user experiences.<\/p>\n\n\n

Alex Russell: The Market for Lemons<\/a><\/h3>\n\n\n
\n

Partisans for slow, complex frameworks have successfully marketed lemons as the hot new thing, despite the pervasive failures in their wake, crowding out higher-quality options in the process.<\/p>\n\n\n\n

These technologies were initially pitched on the back of “better user experiences”<\/em>, but have utterly failed<\/a> to deliver on that promise outside of the high-management-maturity organisations<\/a> in which they were born. Transplanted into the wider web, these new stacks have proven to be expensive duds<\/a>.<\/p>\n<\/blockquote>\n\n\n\n

There’s the rub. Alex ain’t mincing words, but notice that the onus is on the way frameworks haved been marketed to developers than developers themselves. The sales pitch?<\/p>\n\n\n\n

\n

Once the lemon sellers embed the data-light idea that improved “Developer Experience” (“DX”) leads to better user outcomes, improving “DX” became and end unto itself, and many who knew better felt forced to play along. The long lead times in falsifying trickle-down UX was a feature, not a bug; they don’t need you to succeed, only to keep buying.<\/p>\n\n\n\n

As marketing goes, the “DX” bait-and-switch<\/a> is brilliant, but the tech isn’t delivering for anyone but<\/em> developers.<\/p>\n<\/blockquote>\n\n\n\n

Tough to stomach, right? No one wants to be duped, and it’s tough to admit a sunken cost when there is one. It gets downright personal if you’ve invested time in a specific piece of tech and effort integrating it into your stack. Development workflows are hard and settling into one is sorta like settling into a house you plan on living in a little while. But you’d want to know if your house was built on what Alex calls a “sandy foundation”<\/a>.<\/p>\n\n\n\n

I’d just like to pause here a moment to say I have no skin in this debate. As a web generalist, I tend to adopt new tools early for familiarity then drop them fast, relegating them to my toolshed until I find a good use for them. In other words, my knowledge is wide<\/em> but not very deep<\/em> in one area or thing. HTML, CSS, and JavaScript is my go-to cocktail<\/a>, but I do care a great deal about user experience and know when to reach for a tool to solve a particular thing.<\/p>\n\n\n\n

And let’s acknowledge that not everyone has a say in the matter. Many of us work on managed teams that are prescribed the tools we use. Alex says as much, which I think is important to call out because it’s clear this isn’t meant to be personal. It’s a statement on our priorities and making sure they along to user expectations.<\/p>\n\n\n\n

Let’s alow Chris to steer us back to the story…<\/p>\n\n\n

Chris Coyier: End-To-End Tests with Content Blockers?<\/a><\/h3>\n\n\n

So, maybe your app is built on React and it doesn’t matter why it’s that way. There’s still work to do to ensure the app is reliable and accessible<\/a>.<\/p>\n\n\n\n

\n

Just blocking a file shouldn\u2019t totally wreck a website, but it often does! In JavaScript, that may be because the developers have written first-party JavaScript (which I\u2019ll generally allow) that depends on third-party JavaScript (which I\u2019ll generally block).<\/p>\n\n\n\n

[…]<\/p>\n\n\n\n

If I block resources from tracking-website.com<\/code>, now my first-party JavaScript is going to throw an error. JavaScript isn\u2019t chill. If an error is thrown, it doesn\u2019t execute more JavaScript further down in the file. If further down in that file is transitionToOnboarding();<\/code>\u2014 that ain\u2019t gonna work.<\/p>\n<\/blockquote>\n\n\n\n

Maybe it’s worth revisiting your workflow and tweaking it to account to identify more points of failure.<\/p>\n\n\n\n

\n

So here\u2019s an idea: Run your end-to-end tests in browsers that have popular content blockers with default configs installed. <\/p>\n\n\n\n

Doing so may uncover problems like this that stop your customers, and indeed people in need, from being stopped in their tracks.<\/p>\n<\/blockquote>\n\n\n\n

Good idea! Hey, anything that helps paint a more realistic picture of how the app is used. That sort of clarity could happen a lot earlier in the process, perhaps before settling on development decisions. Know your users. Why are they using the app? How do they browse the web? Where are they phsically located? What problems could get in their way? Chris has a great talk on that, too.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Every now and then, a one blog post is published and it spurs a reaction or response in others that are, in turn, published as blogs posts, and a theme starts to emerge. That’s what happened this past week and the theme developed around the cost of JavaScript frameworks \u2014 a cost that, in this […]<\/p>\n","protected":false},"author":2508,"featured_media":377173,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[16102,1076,1512,19003,932],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/react-lemons.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":307618,"url":"https:\/\/css-tricks.com\/the-cost-of-javascript-frameworks\/","url_meta":{"origin":377169,"position":0},"title":"The Cost of Javascript Frameworks","date":"April 26, 2020","format":false,"excerpt":"I expect this post from Tim Kadlec to be quoted in every performance conference talk for the next few years. There is a lot of data here, so please check it out for yourself, but the short story is that JavaScript-framework-powered sites are definitely heavier and more resource-intensive than non-JavaScript-framework-powered\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":333262,"url":"https:\/\/css-tricks.com\/components-server-side-vs-client-side\/","url_meta":{"origin":377169,"position":1},"title":"Components: Server-Side vs. Client-Side","date":"January 28, 2021","format":false,"excerpt":"Building a website in 2021? I\u2019m guessing you\u2019re going to take a component-driven approach. It\u2019s all the chatter these days. React and Vue are everywhere (is Angular still a thing?), while other emerging frameworks continue to attempt a push into the spotlight. Over the last decade or so we\u2019ve seen\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/s_B88F21F40E255B01805BDE26E3615C774E5A4E88B986EDD4271F833852A3D101_1610624153511_server-vs-client-comps-ssr-render.jpg?fit=910%2C613&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":265682,"url":"https:\/\/css-tricks.com\/2017-2018-javascript\/","url_meta":{"origin":377169,"position":2},"title":"2017\/2018 JavaScript","date":"January 19, 2018","format":false,"excerpt":"There has been a lot of research on the landscape this year! Here are a few snippets from a bunch of articles. There is a ton of information in each, so I'm just picking out a few juicy quotes from each here. Perhaps the most interesting bit is how different\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":310812,"url":"https:\/\/css-tricks.com\/5-myths-about-jamstack\/","url_meta":{"origin":377169,"position":3},"title":"5 Myths About Jamstack","date":"June 9, 2020","format":false,"excerpt":"Jamstack isn't necessarily new. The term was officially coined in 2016, but the technologies and architecture it describes have been around well before that. Jamstack has received a massive dose of attention recently, with articles about it appearing in major sites and publications and new Jamstack-focused events, newsletters, podcasts, and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336024,"url":"https:\/\/css-tricks.com\/web-frameworks-why-you-dont-always-need-them\/","url_meta":{"origin":377169,"position":4},"title":"Web Frameworks: Why You Don\u2019t Always Need Them","date":"March 9, 2021","format":false,"excerpt":"Richard MacManus explaining Daniel Kehoe's approach to building websites, which he calls \"Stackless\": There are three key web technologies underpinning Kehoe\u2019s approach: ES6 Modules: JavaScript ES6 can support import modules, which are also supported by browsers. Module CDNs: JavaScript modules can now be downloaded from third-party content delivery networks (CDNs).\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/6d65f352-painter-2798557_1280-1024x576-1.jpg?fit=1024%2C576&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325619,"url":"https:\/\/css-tricks.com\/rendering-spectrum\/","url_meta":{"origin":377169,"position":5},"title":"Rendering Spectrum","date":"November 24, 2020","format":false,"excerpt":"Here are the big categories of rendering websites: Client: ship a

<\/div> and let a JavaScript template render all of it.Static: pre-render the HTML.Server: let a live server process requests and generate the HTML response. They are not mutually exclusive. A website could statically pre-render 75% of it's pages\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/page-transitions.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377169"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=377169"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377169\/revisions"}],"predecessor-version":[{"id":377177,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/377169\/revisions\/377177"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/377173"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=377169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=377169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=377169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}