DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • 5 Best Node.js Practices to Develop Scalable and Robust Applications
  • Building a Receipt Scanner App With OCR, OpenAI, and PostgreSQL
  • Mastering Full-Stack Development: A Comprehensive Beginner’s Guide to the MERN Stack
  • Development of Custom Web Applications Within SAP Business Technology Platform

Trending

  • Top Book Picks for Site Reliability Engineers
  • Artificial Intelligence, Real Consequences: Balancing Good vs Evil AI [Infographic]
  • Ethical AI in Agile
  • Agentic AI for Automated Application Security and Vulnerability Management
  1. DZone
  2. Coding
  3. JavaScript
  4. A Beginner's Guide to the JavaScript Ecosystem

A Beginner's Guide to the JavaScript Ecosystem

Take a look at front-end frameworks, mobile development frameworks, and the Node.js ecosystem in this comprehensive look at all things JavaScript.

By 
Kristian Poslek user avatar
Kristian Poslek
·
Aug. 18, 15 · Analysis
Likes (4)
Comment
Save
Tweet
Share
8.8K Views

Join the DZone community and get the full member experience.

Join For Free

The ecosystem of JavaScript has grown. Long gone are the days of simply inserting jQuery into your website and fading stuff in or out.

Entering the world of JavaScript today is an overwhelming task with lots of possibilities. It also means that it’s a world that’s brimming with opportunity. In the words of Jeff Atwood (http://blog.codinghorror.com/the-principle-of-least-power/):


Any application that can be written in JavaScript, will eventually be written in JavaScript.

The Different Aspects of JavaScript

There was never a better time to find a niche within the JavaScript ecosystem. Here’s a list of aspects you can dive into and which this article will explore deeper:

  1. Front-end development
  2. Command line interface (CLI) applications
  3. Desktop (GUI) applications
  4. Mobile applications
  5. Back-end development
  6. Any combination of the above

Front-end Development

Image title

Developing the user facing part of websites has become increasingly complex by becoming highly interactive and offloading traditional server-side tasks to the front-end. It was once unfathomable that we’ll be running the likes of Google Maps, Spotify or YouTube in our web browsers but here we are, with a varied toolset to make complex web applications.

Front-end web development has grown exponentially in the last few years and I’ll offer just a glimpse of that here.

The Basics of Front-end Web Development

For a long time, JavaScript has been used solely for DOM manipulation with the odd animation thrown in for good measure. Since the beginnings, there was a big discrepancy between browser features.

jQuery started a revolution with abstracting the aforementioned browser features and making DOM manipulation easy while also bringing quite a few utilities to the table.

Nowadays, it’s quite easy to manipulate the DOM with pure JavaScript and there’s a very nice cheat sheet just for that purpose.

Efficiency Through Frameworks

With the growing complexity of websites and websites growing to web applications, there was a need to address the complex issues of web applications (state handling, data binding, view rendering, etc.). Many frameworks rose to that challenge and two that are probably most popular today are AngularJS and React.

It’s clear that Angular and React gained such traction since the former is backed by Google and the latter by Facebook. While Angular contains the whole MVC paradigm, React is somewhat leaner and mostly considered the V of MVC.

New frameworks show up all the time and time will only tell which one will reign supreme (of course, if something like that even happens).

What’s In A Name?

There’s a good chance that you won’t be using  JavaScript any more, but any of the languages that transpile to JavaScript like:

  • EcmaScript 6 — the newest spec of JavaScript
  • TypeScript — Microsoft’s superset of JavaScript featuring types

Apart from just adding new features to a language, there’s a good chance you’ll be modularising your application by using ES6 native modules orCommonJS (mostly for Node.js development) or RequireJS (async module loading mostly for websites).

Transpilation and connecting of modularised applications is done via build tools (Gulp and Grunt, mentioned in detail later), using transpile tools (like Babel or Traceur) and module builders (like Browserify or Webpack). You’ll most likely transpile and build your modules in every aspect of JavaScript development.

There is a boatload of tools that weren’t mentioned. It is left to the reader to explore them and a good starting place is the awesome list of front-end development.

Command Line Interface (CLI) Applications

Gulp running a gulpfile

Gulp running a gulpfile

Many developers rely mostly on the CLI in their day-to-day development — be it code linting, task running or starting a server, there’s a certain beauty in the efficiency of executing a task purely from the command line.

CLI applications are written using Node.js (or io.js, a fork of Node.js which is going to be merged back into Node.js soon). Node.js is an open source, cross-platform runtime environment that allows you to execute your JavaScript code everywhere through Chrome’s JavaScript runtime (not just in the browser, like before). In essence, once someone installs Node.js and takes your CLI application (package), it can be executed.

Package Managers

It would be really bad if you’d have to write every functionality of every app from scratch. That’s where npm steps in. npm is a package manager forNode.js modules and using packages is really simple — install and require them.

The CLI application that you write can also be packaged as a Node.js module and distributed via npm. That is the preferred way of getting your CLI application (or Node.js modules for that matter) to other people.

Many popular libraries and tools have CLI applications for easier use likeGulp or Grunt. There’s also a list of awesome Node.js CLI apps.

Build Tools

Build tools (and task runners) get a special mention because they’re the most basic tools you’ll be using no matter what type of application you’re building.

The most popular build tools nowadays are Grunt and Gulp which make the process of transforming your code to something usable much easier. A typical scenario is to:

  • transpile your JavaScript from EcmaScript 6 to EcmaScript 5
  • compile your SCSS to CSS
  • minify and concatenate the resulting files
  • copy everything to a distribution folder

 Desktop (GUI) Applications

Slack

Slack

Applications are mostly moving to the web or onto mobile devices. Still, desktop applications offer an immersion mostly unavailable to web applications.

The biggest advantage of writing your desktop applications with JavaScript is abstraction of the platform for which you are coding. Your applications are cross-platform and the modules you use simplify the usage of typical desktop features (such as tray icons, notifications, global keyboard shortcuts, etc.).

Having a good project structure allows you a lot of code reuse between your web and desktop application. That in turn leads to easier maintenance.

Available Tools

There are two popular projects which allow you to write a desktop application via HTML/JS:

  • NW.js — formerly known as node-webkit, it’s the most popular way of writing native desktop applications
  • Electron — a newer contender made by GitHub which already gained big traction in the same space

Notable Applications

Both of the mentioned projects are used in quite a few popular desktop applications.

Notable applications done with NW.js or Electron include Slack, Game Dev Tycoon, GitHub Atom, WhatsApp Desktop, Facebook Messenger Desktop, Popcorn Time and Microsoft Visual Studio Code. There’s an extensive list of projects made with NW.js and an extensive list of projects made withElectron (both containing links to Repositories for learning or contributing purposes).

Mobile Applications

Facebook Mobile applications made with React Native

Facebook Mobile applications made with React Native

With such a booming market, it makes sense to develop mobile applications. The JavaScript ecosystem provides a few solutions to developing cross-platform (iOS, Android and Windows Phone) applications. The most popular projects providing cross-platform mobile application include:

  • Ionic
  • React Native
  • Phonegap

Ionic and Phonegap use a browser wrapper around your HTML/JS and provide access to otherwise unavailable features of the platform (camera, various sensors, etc.). Ionic is leveraging the power of Angular to provide a well-tested and stable platform.

Facebook’s React Native has an interesting approach in which they render your written application to higher-level platform-specific components to achieve a truly native look of the app. This means that you’ll have to write a separate view layer for each platform but you’ll do it in a consistent manner.In the words of Tom Occhino, a software engineer at Facebook, they’re trying the approach of “learn once, write anywhere” which is completely in the spirit of such a diverse ecosystem as this one.

Notable Applications

While React Native doesn’t support Android just yet, it’s great that Facebook is using it in their own apps already (Facebook Groups and Facebook Ads Manager). Android support should arrive in less than two months.

Mobile applications written in Ionic or Phonegap include popular applications such as Sworkit, Mallzee, Chefsteps, Snowbuddy and Rormix. There are extensive lists of applications built with Ionic and applications built with Phonegap.

Back-end Development

Node.js

Node.js is also the main driving force in back-end development in JavaScript.

The main advantage of Node.js is it’s event-driven, non-blocking I/O model. That said — Node.js is great at handling data-intensive real-time applications with many concurrent requests. Node.js does it by handling all these concurrent requests on a single thread and thereby greatly reducing needed system resources and allowing for great scalability.

A typical example for these benefits are chat applications. They require uninterrupted connections from clients to a chat room (real-time, non-blocking) and notifications of new messages (event-driven) where you’re supposed to support large numbers of clients and rooms (data-intensive).

You can also have a fairly decent web server written in JavaScript. The main takeaway here is that its main purpose shouldn’t be CPU intensive tasks or connections to a relational database, but a high volume of connections.

The most popular modules associated with back-end development are:

  • express — simple web framework for Node.js
  • socket.io — module for building real-time web applications
  • forever — module for ensuring that a given Node.js script runs continously

How These Modules Fit Together

First of all, you need a web server which can process typical HTTP request on various routes like http://localhost:3000/about. That’s where express comes in.

To have an uninterrupted connection with the server, socket.io is used with a server-side and client-side component of establishing connections.

Since express runs on one thread, we must ensure that an exception doesn’t stop the process (and server altogether). For that purposes, we use forever.

To learn more about these modules, visit their respective websites which feature many tutorials (socket.io even has you building a chat server and client as a hello world application).

Any Combination of the Above

Meteor JavaScript app platform

Meteor JavaScript app platform

It’s easy to imagine how all these aspects come together.

One of the most popular way of combining them is having a full-stack JavaScript framework like MEAN or Meteor.

MEAN combines express, Angular, Node.js and MongoDB to offer a web platform whose back-end as well as front-end are written in JavaScript.
Meteor is a platform offering full-stack web and mobile application development in JavaScript.

Another example could be a JavaScript minifier for which you write the base module for Node.js and then use that module in a CLI application, a desktop application, a mobile application and a web application (served by express, of course) — all in JavaScript.

The possibilities are endless and we’re probably just scratching the surface. This ecosystem is exploding with new techniques, frameworks, modules and even language specs being defined all the time. It’s really exciting.

Where Should I Start?

That depends on how familiar with JavaScript you are right now.

Should you only be starting out, there are great resources to start with JavaScript (or programming, for that matter) like Codecademy, Nodeschoolor Codeschool which are all interactive and fun.

If you’ve got some jQuery knowledge under your belt and have been dabbling with pure JavaScript, know that no framework or library is ever going to replace a good understanding of core JavaScript. Start with really digging into the nitty-gritty of JavaScript. For that purpose, I can’t recommend Kyle Simpson’s You don’t know JS series enough. It’s open source and available on GitHub. The open source nature makes it really easy for you to contribute with errors you notice in the books. The books are also available as hard copies if you prefer reading that way with the added benefit of supporting the author.

With a strong JavaScript core, it would be wise to brush up on Node.js. As you’ve seen, it’s the basis for almost all of the aspects. Node.js promotes asynchronous programming which takes a while to get accustomed to but solves the problem of blocking UI. The aforementioned learning sources (Nodeschool and Codeschool) can also be used here.

After that, just follow the path that seems the most interesting. Chances are, you’ll fall deeper down the rabbit hole, discover new things and enjoy the experience even more.

JavaScript framework mobile app Command-line interface Node.js MERN (stack)

Published at DZone with permission of Kristian Poslek. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • 5 Best Node.js Practices to Develop Scalable and Robust Applications
  • Building a Receipt Scanner App With OCR, OpenAI, and PostgreSQL
  • Mastering Full-Stack Development: A Comprehensive Beginner’s Guide to the MERN Stack
  • Development of Custom Web Applications Within SAP Business Technology Platform

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!