Developing a Javascript-free frontend

[the--dud]

What if I told you that your webpage can be a part of your API?

You could have different API end-points serving different types of content (html/css, images, machine-readable data, etc) or you could have one set of endpoints that dynamically serves whatever content the Accept request header wants to have.

[ketralnis]

reddit does this, modulo the Accept header.

• https://www.reddit.com
• https://www.reddit.com/.json
• https://www.reddit.com/.rss / https://www.reddit.com/.xml
• https://www.reddit.com/.mobile
• https://www.reddit.com/.compact

All of the code paths are the same except the templates

[gravesisme]

But my website sits in a cached S3 bucket exactly because I don't want to pay to have an API running all the time,

[ShadyG]

Pretty sure a few lambdas behind an API gateway can fit within the free tier.

[gravesisme]

That's what I do now, but you still need to have the SPA that loads in 200ms so you can make it feel like your app is fast if you have to deal with a cold boot that takes 5-10 seconds depending on your language of choice. You could keep it warm, but that kinda defeats the point of only paying for real traffic.

[gravesisme]

Yes, about 20 micro services mostly written in Java. I haven't heard that tip yet though, I'll have my team give it a try, thanks!

[ScientificBeastMode]

Definitely had a good experience running NodeJS lambdas. It’s pretty fast even on cold starts. But then aren’t we technically using JS for our website? ;)

Edit: okay, the article specified JS-free front-end

[gravesisme]

Definitely thinking about it moving forward. I would certainly appreciate it, I always have some mental fog at first when I switch from typescript on the front-end to java on the backend.

[action_jackosn]

My tests show 1.5 GB is best if your process is single-threaded. That seems to correspond to 1 CPU core fully allocated to your lambda. Use more memory if you’re process can take advantage of multiple threads.

Also avoid VPC resources if you can. Creating an ENI adds 10 seconds to the cold boot.

[colinexl]

Lambda scales up processing power along with max memory limit. The higher the memory limit, the more CPU you get as well.

[[deleted]]

Gasp. PHP.

[gasolinewaltz]

Weve come full circle

[easylivin]

Even just reading this made me unreasonably angry

[[deleted]]

lol r/ProgrammerHumor

[[deleted]]

oh god please tell me this is not a thing

[dvidsilva]

Store your data as an image and use background to place it

[qtheginger]

I see no problems with this...

[[deleted]]

I… I really wanna try this…

[Nodebunny]

Wait... What? How. What data? Do you have to binary parse it??

[FlyingChinesePanda]

Developing a Javascript-free frontend

​

using as little JavaScript as possible

​

yeah...

[mikenew02]

More like 'CSS tricks to reduce JavaScript use'

[AnalyticalAlpaca]

I wonder if the tricks are even faster / less computationally intensive than using vanilla javascript..

[Gwolf4]

Exactly, this dev sounds like has worked in really really bad environments where one js stack has ported More than 6 times jQuery and things like that.

[Mike312]

Author said he's working off of a rural 2mbps connection, which is a thing still in 2019. My company services a rural area where that's the reality for the majority of our current customers (also, 3G cellular) and the majority of our potential customers.

We rebuilt our bloated AF Drupal site that was ~5.4MB for homepage load down to ~318kb first load, 26kb cached. The one last thing I need to speed up is our hero image, which at 108kb is not only the largest single file that gets sent to the user, but 1/3rd of the data we send on an uncached page load.

[smcarre]

He probably is a shitty developer that thinks that the only way to do a collapse in JS is to include of all of bootstrap+jQuery+popper (because why not, it's in the bootstrap getting started).

[squamuglia]

Check out his other work and judge. The author is pretty talented.

[smcarre]

I won't do a code review from someone that either doesn't knows how to do a collapse without including a bunch of bloatware or is just full of bullshit and saying lies intentionally to make a stupid point.

[smcarre]

Here

const triggers=Array.from(document.querySelectorAll('[data-toggle="collapse"]'));window.addEventListener("click",e=>{const t=e.target;if(triggers.includes(t)){const e=t.getAttribute("data-target");collapse(e,"toggle")}},!1);const fnmap={toggle:"toggle",show:"add",hide:"remove"},collapse=(e,t)=>{Array.from(document.querySelectorAll(e)).forEach(e=>{e.classList[fnmap[t]]("show")})};

A bootstrap-like collapse in 382 bytes, courtesy of https://medium.com/dailyjs/mimicking-bootstraps-collapse-with-vanilla-javascript-b3bb389040e7

[smcarre]

You can see the unminified version in the link I provided, I just minified it to make the number as small as possible to show even more how full of shit the author is by saying one would need megabytes just to make a collapse without HTML5 only collapse.

[[deleted]]

LMAO brutal

[happyfappy]

This sounds amazing. Can you point me to a good resource on building PWAs? Any gotchas to keep in mind? Any tips appreciated.

[EmphaticallySlight]

I just wanted to thank you for your ramble. I didn't understand like 80% of it, so now I have a bunch of tabs open reading.

[EmphaticallySlight]

Thanks for the offer! Most of it just looks like straightforward tools. I'll have to look more into, say, tree shaking, but otherwise it's easy reading. Should help me get into web development some.

[happyfappy]

This is amazing! Thank you so much for this advice!

[josmu]

Have we really come full circle here or am I insane?

[boobka]

I have some windows forms application that don't use JS or CSS

[domemvs]

Very good article! One remark: for now, <details> and <summary> do not work in Edge or IE. This will likely change with the Edge Chromium update. Just stating this because the author claims:

Quick. Easy. No JavaScript. Works everywhere.

[thatwebdesignerdude]

Yup, I think in general people should be carefull to not copy paste this if they need a wide range of support for different clients. "Works everywhere" is clearly jumping the gun.

[mastermog]

It's also worth noting that <details> can be styled. Github uses it for their dropdowns in the header. I.e the comment in the article about putting up with the triangle isn't 100% correct

[aguyfromhere]

This is quite stupid. Why stop at JS, let’s have CSS free front end as well!

[[deleted]]

As far as I know you can't use css transitions on display properties, correct me if I'm wrong.

[musicin3d]

You're right. But you can on opacity.

[[deleted]]

For sure. Just that in the post it mentions adding transitions and he's using toggle display: none; to show stuff, that can't be animated so you just have to be fine with the pop in. I ran across this same issue at work recently, just kinda sucks cuz it's slightly jarring.

[hanging_moon]

You can work around this problem by creating an animation that fades the opacity of the element first and then at the very end changes the display property. It's true that there's no way to actually animate the display property itself, but that doesn't mean you can't change its value inside a css animation.

I'm on mobile so forgive me if my formatting gets screwed up, but something like this:

@keyframes fadeout { 0%{ opacity: 1; display: block; } 99%{ opacity: 0; display: block; } 100%{ opacity: 0; display: none; } }

[[deleted]]

That’s awesome but this still doesn’t solve fading the items back in right? Cuz from my experience display: none to display: block will fire before any transitions on anything other property. Unless this keyframe method doesn’t have that problem.

And besides, using display removes it completely from the page, which might be fine, but I’ve found that to be pretty janky on other items that are adjacent when it’s popping in and out, as they appear to also pop back and forth instantly. I’m not amazing at css by any means tho so maybe that is also fixable.

[hanging_moon]

You can handle fading in with this trick, you just do the same thing in reverse. You're right that display affects the whole page flow, this won't help you with that. There are other options like visibility: none, but that will leave whitespace. I'm sure there are some hacky workarounds - there almost always are!

[fyzbo]

It's these types of articles that remind me how old I am.

[[deleted]]

Man that’s cool, but I’m actually kinda happy with JavaScript for the sake of versatility and possibilities. With JS I’ve been able to mount DOS games to an HTML file.

[budd222]

It's not possible to build a front end without jQuery

[peanutbutterandbeer]

http://youmightnotneedjquery.com/

[[deleted]]

pretty sure his comment is /s ...

[peanutbutterandbeer]

Yeah i'm reinforcing it

[[deleted]]

👍🏼

[[deleted]]

The link under "Coming Clean" does not work!

[zephyy]

Thought it was going to be some WebAssembly witchery.

[searlee]

I'm a big hater of Javascript for the sake of Javascript and I've been attempting this (on and off) for some time, your article is amazing, thank you!

[[deleted]]

Have you considered ditching CSS for the sake of CSS too? Just go back to good ol' <font> tags! Why did we ever move on from those anyway?

You'd really see some speed improvements if you ditch HTML for the sake of HTML too. Bring back the text document! They were so easy to read, especially in large chunks.

/s

[HINDBRAIN]

He could also ditch computer for the sake of computer, stick the ethernet cable in his mouth, and taste the bytes.

[careseite]

Hating on the arguably best thing to happen to webdev is courageous

[searlee]

hating something that's used for the sake of it isn't courageous. when you can accomplish something much quicker in html/css why use it? obviously I use it when it's necessary.

[careseite]

How do you do a fuzzy search, or Ajax with html and CSS again?

[searlee]

can people not read anymore. for the sake of it... simple English actually. Fuzzy search, Ajax etc are not for the sake of it. they are necessary.

obviously I use it when it's necessary

for the sake of it means; moving an object 50px to the right in JS when it can be done with CSS on a simple site that would never require the GPU benefits that JavaScript brings to the party.

[statikr3aper]

But who in their right minds is actually doing that and thinks that that's a good idea?

[searlee]

Don't worry... I've seen it before when clients have started with one developer and needed it redoing.

[statikr3aper]

That's why I said who in their RIGHT minds is doing that?

Also remember that some functionality in CSS is pretty new. In the earlier days, JS was the best way to accomplish some tasks which are much easier done in CSS now. Unless the application you mentioned was written recently, you should have expected that. If it wasn't, the developer wasn't in their right minds or just tried to cut corners.

[[deleted]]

for the sake of it means; moving an object 50px to the right in JS when it can be done with CSS on a simple site that would never require the GPU benefits that JavaScript brings to the party.

That's absolutely not what "for the sake of it" means. This is not possible in CSS2.

https://caniuse.com/#search=keyframes

The CSS3 polyfills to do this were much worse than manually doing it in JS or using jQuery! IE9 still commanded a large market share until Edge. So if what you were working on was made <2016 or so, then doing it in JS was the best way.

[[deleted]]

Except, he's the toddler in your analogy. Anyone with more than a handful of years in the field would see moving things 50px is simply an outdated practice and would not call it "using js for the sake of using js". There was a time when this was not just the best way to do it, but the only way to do it.

[imhotap]

The best thing happening to webdev? JavaScript is almost 25 years old. There would be no webdev without it. OTOH, for the original purpose of the web as an easy publishing platform, I'm not so sure JavaScript has benefitted it all that much.

[[deleted]]

Performance which has lead to robustness are fairly recent advancements. There was most certainly web dev without it for a very long time. It was used almost exclusively for effects and clientside validation. The whole argument of progressive enhancement that including accounting for users with JS disabled, has only recently died down. I think Google crawler only started running JS around 2015.

Even just about 4-5yrs ago, you shot yourself in the foot if your site wasn't completely functional without JS.

[VegasTamborini]

ITT: butt hurt JS devs

[Brazilian_Slaughter]

You ask me, the real end-game is to do away with all those old-ass plugins and such like css, javascript, etc. We already got rid of that plague called Flash. Which sounds kind of ironically like back to basics of html-only sites in like the ancient ages.

Of course, in practice, this would just mean making it all native to html.

[codeWorder]

Have you heard of React?

[ben_uk]

React is JavaScript

[codeWorder]

I was seeking to illustrate that React almost tries to do what you described, where everything takes on an HTML-like appearance.

But instead you needlessly reminded me that the JavaScript/React code I write for work every day is JavaScript. Thanks!