🦊 Javascript ecosystem is driving me crazy.

🦊 Javascript ecosystem is driving me crazy.

Wait, you ain't familiar with the javascript ecosystem. lemme take you into my hilarious journey :)

Every other developer, who blindly stepped into the land of javascript, still figuring out their { escape } 🥲

Haha just kidding 🫣 😅

Lemme take you on a flashback

The story begins with my desperate desire to be called a developer. It didn't matter what kind of developer I become, as long as I could build something with code. I was limited to programming syntax and found it difficult to break through the barrier :/ So, I decided to call for HELP. I randomly came across Angela Yu's Web Development course and without a second thought, I enrolled in it.

Before I kicked off the course, I didn't know much about HTML and CSS. The backend stuff was also not my strong suit, so I just went with the flow of the course and let it take me wherever it went.

Whoa! Can you believe it's been over a year developing web apps now? My skill set has gone from zero to hero, and it's blowing my mind! When you invest enough time in something, it's like putting on a pair of magic glasses - suddenly, everything looks different!

Let's look at a bigger picture

Before diving into the specifics of the ecosystem lemme show your brain a quick look, at how the javascript world looks like from my experience till now.

Starting out in whatever field in tech is like exploring the never-ending map of Minecraft. There is so much to learn and to keep yourself updated. it might turn out to be overwhelming and annoying after hitting the threshold of brain power to suck up every ounce of information present there. Instead, I would recommend enjoying the process which, I didn't do, haha how paradoxical I'm being here.

Enjoy the process

What do I exactly mean by "enjoying the process"? You don't necessarily need to force yourself to enjoy rather you should focus on tweaking the learning mindset. grasping concepts little by little via project building. This could go in a cycle, you learned something new, just make a project on that or, You made a project which made you learn something new.

Let's dive into the Javascript map

Lemme make it clear that I'm totally focused on the web side of things but also will brief about everything else present on the map, just to give a broad understanding.

Javascript is a land of experiments, where every other day new framework or library pops up. Imagine boxes in the JS map as Bubbles in the JS world. are we good? alright, let's dive now.

Backend

For doing the backend in javascript there is an option to write your code at the runtime level or you could utilize the infinite power of frameworks out there at https://www.npmjs.com/ till eternity. we call them "Backend Frameworks" or if it's specific to runtime like Node.js then it's called "Node.js framework". These frameworks add up sugar on top of the runtime environments and create a sweet spot for the developers to work.

Here is an example of what an HTTP server looks like without a framework in Node.js --> https://github.com/Blaize15/raw-node

There is a list of never-ending backend frameworks you might look into. Btw I learned Express.js.

Each framework provides its own functionality, some functionality makes it stand out from other frameworks. therefore we need to choose frameworks wisely. For instance, Express.js provides Routing, templating, middleware, etc.

You might be wondering about Node.js being the single most Runtime available for javascript at the backend, then you are wrong🥲 Javascript is the language with a billion choices🥹 What are the other Runtimes then :

  1. https://deno.com/

  2. https://bun.sh/

Frontend

Frontend has interesting evolution right from Jquery.js. Why do we need a framework here, even if everything is possible with Vanilla Javascript? I guess you know it already, those who have used juicy frameworks like React.js, Angular.js, Vue.js, and many more popping up every other second. Obviously, they make application development a breeze.

You might know browsers live in noisy and chaotic environments where we cannot guarantee cross-browser compatibility. To have maximum utilization across multiple leading browsers frameworks need to make sure of it.

  1. Module bundler: A module bundler is a web development tool that bundles different kinds of modules with dependencies into static assets.

    webpack module bundler

  2. Babel: A javascript compiler that compiles your javascript code to a specific version that you want.

Javascript transpilers

A transpiler, also known as a source-to-source compiler, is a tool that translates source code written in one programming language (the source language) into equivalent code in another language (the target language). Transpilers are commonly used to convert modern or alternative language features into a more widely supported language, allowing developers to leverage new language capabilities while maintaining compatibility with existing platforms.

Some of the cool-sounding transpilers are :

  1. Typescript - The Grandaddy

  2. Elm - purely functional in case you are wondering.

  3. ClojureScript

  4. pureScript

Native capabilities

Javascript is also used to build native applications supporting Desktop and Mobile. Surely you can take advantage of npm ecosystem to build your native apps.

  1. React Native for Mobile - https://reactnative.dev/

  2. Electron for Desktop - https://www.electronjs.org/

IoT

This could be fairly new stuff in front of web developers, but there is a great saying Dig deeper into whatever scares you the most haha.

Do :

$ npm i mqtt

& You are good to create your next IoT product 💥 ( Smile in pain ) 🥲

A mess, How?

I'll point out some of my personal experiences with the javascript ecosystem in general just to be safe from Js wizards 🪄🥲

It ain't consistent

I mean there is a billion other way of doing the exact same thing. it has a multitude of frameworks, libraries, and tools for various purposes, such as frontend development, backend development, testing, and build processes. The rapid pace of innovation has led to fragmentation in the ecosystem, with new tools and frameworks emerging frequently. This can create decision paralysis for developers and a steep learning curve when trying to navigate the ecosystem.

Lack of standardization

JavaScript lacks strict standardization compared to some other programming languages. This flexibility allows for creativity and experimentation but can also lead to inconsistencies in coding styles, patterns, and best practices across projects and libraries. It can make it challenging for developers to adopt new libraries or collaborate on projects.

Compatibility issues

Compatibility Issues: JavaScript runs in different environments such as browsers, server-side with Node.js, and mobile applications with frameworks like React Native. Each environment has its own set of APIs, behaviors, and limitations. Ensuring cross-platform compatibility and dealing with browser inconsistencies can be time-consuming and challenging.

Despite these challenges, it's important to note that the JavaScript ecosystem is also vibrant and filled with innovation. The large community, extensive package availability, and flexibility of the language have contributed to its popularity and power. The ecosystem is constantly evolving, and efforts are being made to address the challenges and improve the developer experience. With time, experience, and familiarity, developers can effectively navigate and leverage the rich JavaScript ecosystem to build robust and scalable applications.