Look, I’m no developer.
A few years ago, I couldn’t tell the difference between server and client-side development.
Vue.js, React, Node.js… what the hell?
I know I’m not the only one with so many questions about these subjects. Whether you’re new to web development or you need to work closely with devs, it can all get pretty overwhelming.
Working with developers on a daily basis has been a reality of mine for a while now, and I’m starting to get a solid grasp on concepts that once puzzled me.
Therefore, I want to use this post to answer these questions:
Even for experienced developers, it’s nice to stop for a second and remember where the tools you’re using are coming from and why you’re using them.
So let’s do this!
See, your browser needs three things for allowing you to consume this content:
- HTML structures the content
- CSS styles it
This makes it all sound straightforward, but trust me, there’s so much more to it. So let’s start smoothly, by going back in time.
A bit of history
Back then, the web was fully-static, powered by simple HTML & CSS. JS brought dynamism.
Even after the death of Navigator, it was eventually adopted by all succeeding web browsers, from Explorer to Firefox and Chrome.
Not enough history for you? Read the extended version here.
Why does the web need it?
Up to this point, one question that might stick is:
Why did Netscape need a whole new language for the web, wasn’t Java enough?
The perception at that time was that Java was not suited for an entire audience that could potentially adopt web development such as scripters, amateurs & designers. It was just too big for the role.
- Loading new content or data onto the page without reloading the page
- Rollover effects and dropdown menus
- Animating page elements such as fading, resizing or relocating
- Playing audio and video
- Validating input from forms
- … a LOT more
It achieved this status because it’s open, standardized, and, most importantly, whether you agree or not, a very good language. It’s well-suited to the web with its dynamic nature and tight integration with the DOM.
What’s the fuss all about, mate?
Why is that?
For answers, we need to look at the amazing ecosystem that was built on it. We’ve got ourselves a good ol’ “chicken or the egg” paradox here.
Language of the now powerful frontend
For a long time, websites were mostly powered by PHP-based CMSs, such as WordPress. Server-side code was handling the major part of the logic. Things are changing though—you might have heard that “static” sites are making a comeback. However, they’re nothing like the ‘90s statically generated websites I mentioned earlier.
Modern web trends were born from this new paradigm, like the JAMstack. I wrote a whole post on the subject that I invite you to read here.
Other than reducing the amount of time and efforts required for developing JS-based sites and apps, these frameworks helped shape new web experiences. Take Single-Page Applications (SPA), for instance. A SPA is a website that interacts with users by dynamically rewriting a page in the browser rather than loading entire new pages from a server, making them behave more like desktop applications.
Language of… many, many things
→ Server-side code
→ Mobile apps
Once again, this opened mobile app development to a more significant number of developers who no longer need to learn a new language.
Aforementioned frameworks like Vue.js and React are increasingly used to craft PWAs. You should check it out!
→ API integrations
Learn more about APIs and how they work in this piece.
But wait for a second here, this whole story doesn’t matter if it doesn’t bring benefits to developers and end-users.
Client-side execution of the logic brings faster user experiences. With the code running directly in the browser, the need for server calls is abstracted, hence a cut in loading times. Even with the presence of a server, the fact that JS is asynchronous means that it’s able to communicate with the server in the background without interrupting the user interaction taking place in the frontend.
For developers, JS is easy to learn and fast to get into active development. Its syntax is easy and flexible for newcomers. It also simplifies the development of complex applications by enabling developers to simplify the app’s composition. The many frameworks & packages out there also ease the life of developers to some extent.
Does this mean that JS is perfect? Not at all, there are indeed disadvantages to be aware of.
The thousands of packages that constitute the JS ecosystem allow developers to work quickly without reinventing the wheel for each new task. However, they also cause what some have called “dependency hell.” You need to learn how to deal with these often necessary dependencies, so they don’t become a hassle for you and the people using your projects.
What’s coming for JS?
Same at other levels where tools are built on these frameworks. Gatsby, Next.js & Nuxt are slowly becoming the leading static site & PWA generators.
One thing’s for sure, if you want to stay relevant in this field, you should never stop learning new stuff!
Here’s some that might be of interest to you if you want to go further in the world of JS:
— Picking the Best Static Site Generator for Your Next Project
— Should You Learn TypeScript? (Benefits & Resources)
If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!