Complexity and Concerns Grow for Web Development
We make it both easier and harder to build or the web every year. It is a moving target. But at-least we are starting to focus on the right things.
A few years ago, we use to have a pretty strong definition of web apps, and web pages. People tried to explain that React should be used for an App, and Wordpress for a web page. I don't think these things were really ever true. Though we got better at making React more efficient with Next.js for web pages, and Wordpress has grown and can be a great fit for some types of apps.
As we move forward in time, we see the list of concerns and capabilities grow. Some of these things are just syntactical sugar on what we were already doing. For example the loading="lazy" attribute added for images.
#io19 #chrome loading=“lazy” as an attribute in Chrome to magically make image lazy loading available in Chrome without extra code pic.twitter.com/m2vWdIUDpo
— Stef Walter (@WalterStephanie) May 7, 2019
But other things have been added to give us more ability to mirror native experiences. As these become more commonplace, so does the expectation from users that it just works. To a user, they don't care about the context of "Native App" vs "Website". They care that they can do the thing they wanted to do.
Recently we got scroll-snap-type and scroll-snap-align which lets you build a neat slide workflow.
#CSS tip (8):
— StackBlitz (@stackblitz) December 28, 2020
You can implement a snap effect for scrollable content on your site with just 2 lines of CSS!
1️⃣ `scroll-snap-type` on parent
2️⃣ `scroll-snap-align` on children
💻 Play with the code:https://t.co/dvjzVJsCbW pic.twitter.com/6MPg8GBaCa
https://twitter.com/stackblitz/status/1343542443531247617
But we also see browser makers making changes to allow for more natural behavior. In iOS 13.4 you can now make horizontal scrollers that don't send the user to the previous history state when swiped from the left. This isn't that many lines of code, but it's not as easy as an html attribute or a few lines of CSS.
Since iOS 13.4+, it's possible to make touch-friendly carousels on the Mobile Web!
— Shu Ding (@shuding_) December 24, 2020
I just fixed this for Next.js Commerce:
Demo: https://t.co/irkA9dJMbw
PR: https://t.co/P43AFfyqc5 pic.twitter.com/ZhJwsOVGK3
And as the complexity grows, so does the concerns with performance. Next.js / Vercel recently had a massive flex where they shipped Next.js Analytics.
All this does is show the scores for real user data against the Web Vitals as defined by Google.
All of these are example that really how we will continue to change over time.
- Common items will become easier, with simple CSS and HTML setup and little JavaScript as the native logic will be baked into the browser itself.
- Browsers will enable richer interaction to rival native experiences, and developers will need to write more code to support it.
- Web Development will continue to get more complex, requiring that we pay attention to performance analytics.
- Analytics data will spark innovation around how we develop to be inclusive or all users.