Week 169 was posted by Charanjit Chana on 2021-01-18.
My feelings about front-end web development are clear; compress everything you can, only send what the user needs to see.
It's not rocket science, but it's not how a lot of websites are put together today. Whether it's ads or invasive tracking tools, there is a lot of bloat and then there's the inclusion of JavaScript frameworks that are no longer necessary.
For me, we're at a point where there's lot of convenience for developers and a lot of that is at the expense of the end user.
From the perspective of a website, I have some rules that help with this. By all means, make your website as beautiful as it can be, but make it fast.
- Respect the privacy of your visitors
- Only send the javascript required for the current page
- Compress your images and choose the most appropriate format
- Avoid auto-loading and auto-playing videos and audio
- Cache, cache & cache again
That last point in particular is one that's worth driving home. Even if you choose not to use Cloudflare (or an equivalent service), you can cache dynamically generated content and refresh it only when required. Lazy loading is all well and good, but if you're generating content on the fly along with any network latency, that's just time spent waiting. Keep the content cached until it becomes stale or at least for a reasonable amount of time and you'll be on to a winner.
Web Application Development
Web applications are a bit of an exception, but lazy loading is an important part of it all that should never be overlooked.
React, Vue and Angular dominate the landscape at the moment, and with good reason. They make maintenance and development far easier. They are no-brainers for large scale applications but for smaller pieces they might be overkill? It's hard to judge without knowing more about a particular project but in my own experience adopting a framework genuinely meant we could move 10x faster. In fact the team I worked in doubled the amount of features and code in year 1 and then doubled it again in years 2 and 3. It was very satisfying from that point of view.
I need more hands on time with Hotwire, but it really looks like an interesting solution to the whole dilemma. Render server side, get the client to fetch it and then swap out the content. It's what a lot of people probably still use jQuery for, even though you can do this with a few lines of vanilla JavaScript - scroll down to the AJAX example.
Turbo is the piece in Hotwire that's really captured my imagination and got me thinking about how much faster it would be to build fully interactive websites with just a little bit of logic. I've only built a demo project so far to prove it worked at all and it was satisfying to see it working without writing any additional JavaScript. Lazy loading to boot.
That's the world I came from after all, degrading gracefully / progressive enhancements. It's a philosophy I continue to believe in because it means it works for everyone. The progressive enhancements make it richer for those that can afford the time/bandwidth/power and degrading gracefully means you're not punishing those that can't.
I'm refining an idea and I hope to get stuck into it soon.
So, does the internet have an obesity crisis?
Undoubtedly, sadly it's probably only going to get worse before it gets better. But my hope is for an internet that is fast for everybody and not just for those with the latest and greatest at their fingertips.
I recently had my portfolio reviewed by RealToughCandy and her very first comment is about how fast the site loads. A huge sense of pride for me to hear that from a peer. My portfolio is already very minimal but I've gone that little bit further and made it as fast as possible.
Over the coming weeks, I'll be playing with Hotwire some more to build a very basic web app. Turbo is what I'll kick off with but I want to see what I can do with Stimulus too.
Tags: development, front-end, hotwire, development, front-end, hotwire