Can JavaScript only run in a Web Browser?
Every single day, people are accessing the internet. New businesses are getting into the online marketplace, new websites and web services with interesting news and features are coming into existence. A fun fact – someone is still making his/her first Facebook account!
With the vastness of the internet, there will always be the necessity of web developers. It’s a profession that’s not going to extinct anytime soon. For the web, there are 3 major and inevitable components that must be present for each and every single service – HTML, CSS, and JavaScript.
95% of all the popular web pages on the World Wide Web use JavaScript in one form or the other. And there is a good reason for this also. For the purpose of this read, we will be going through some of the TOP Advantages of JavaScript. But first:
In the case of JavaScript, it’s pretty interesting. 95% of the popular web pages all over the World Wide Web integrates JavaScript code in one form or other. There’re pretty good reasons for that. JavaScript is such a powerful programming language that offers incredible flexibility in different scenarios.
Now, you may be wondering – is it possible to use JavaScript to do more than just web things?
Yes! It’s possible to use JavaScript to do more things than just showing dynamic content on web pages. In fact, using JavaScript, it’s possible to create the finest programs today!
A Brief Overview of JavaScript
Before jumping deep into the question, let’s get an overview of the programming language itself.
By its origin, JavaScript is a programming language that targets the web platform. It’s a high-level, interpreted programming language that conforms the ECMAScript specification. The language also comes up with other characteristics like dynamic, prototype-based, weakly typed and multi-paradigm.
JavaScript is supported on all the major web browsers, for example, Chrome, Firefox, Internet Explorer, Edge Browser, Opera and others. The implementation of JavaScript is so widespread that even the lowest-quality of browsers support running JavaScript code. Most of the mobile browsers also support JavaScript.
The primary usage scenario of JavaScript is enhancing the view and appearance of a webpage with dynamic contents and other visual effects to present the page as user-friendly and attractive as possible. The functions include dynamically updating web pages, enhancing user-interface, for example, the menus and dialog boxes, 2D/3D graphics, animations etc.
When considering the 3 major components that make up the web, the HTML describes the page, CSS customizes the look of the page and JavaScript adds dynamic components and other programmable elements.
How about having a look at an example code? Using JavaScript, we can mark HTML to give it structure and purpose.
<p> Example 1: Play</p>
Output: Example 1: Play
Why not add some CSS to make the thing look more interesting?
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(255, 0, 0);
background: rgba(0, 191, 255);
color: rgba(255, 255, 255);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
Output:
Finally, it’s time to add the dynamic behavior. Of course, JavaScript is going to help us out!
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Enter a new name');
para.textContent = 'Example 1: ' + name;
Now run this entire code into an editor and see what happens:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>JavaScript label example</title>
<style>
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(255, 0, 0);
background: rgba(0, 191, 255);
color: rgba(255, 255, 255);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<p>Example 1: Play</p>
<script>
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Enter a new name');
para.textContent = 'Player 1: ' + name;
}
</script>
</body>
</html>
History of JavaScript
Brendan Eich( Father of JavaScript)
The history of JavaScript goes way back. The development of the language started developing in 1995 at Netscape Communications, the makers of the super-successful Netscape browser back at that time. They realized that the web needed a “glue” language that would stick things together to make the user experience drastically. That’s why they brought in Brendan Eich for embedding the Scheme Programming language.
At that timeframe, Java was the newest STAR in the world of programming that started gaining popularity so rapidly. THat’s why the new, “being developed” language got its syntax similar to that of Java. Thus, the resultant language was JavaScript that integrates the feature of Scheme, object orientation from Smalltalk and the syntax of Java.
Interestingly, the name of the language, at first, wasn’t JavaScript. Instead, it was named Mocha in May 1995. Later in September 1995, it got renamed as LiveScript. Finally, the name JavaScript was assigned at the end of the following year (December 1995).
Another important achievement of JavaScript was earning the ECMAScript standardization. In 1996, JavaScript was submitted to ECMA International to finalize as a standard specification. The result came out the next year, in June 1997 when the first official specification for JavaScript went public as ECMA-262. The latest version of the language (ECMAScript 2017) went public in June 2017.
Throughout the lifetime, JavaScript has developed quite an enriched history. Interestingly, the language continues to be one of the most hated programming languages of the planet. Often times, the reasons for all the hate are topics of the past; old trinkets of the ancient ruins that no longer hold any value, any truth.
JavaScript in the Back-end
The power of JavaScript is not only limited to the front-end browsers. It has spread all over the hierarchy and of course, in a good way. The finest example would be Node.js.
Node.js is one of the best server environments available today. It’s a fast and lightweight back-end environment that allows running JavaScript code natively. In most cases, the usage of Node.js is within the back-end web servers that exposes APIs to the front for performing all the amazing actions.
The performance of JavaScript greatly depends on the runtime engine – how well it performs. Well, Node.js is based on the well-known, tested and proven JavaScript engine – V8 from Google Chrome. It’s an open-source project that’s ongoing pretty strong.
For any digital transformation, it’s paramount to have a fast development and scalable solutions. Node.js successfully satisfies the quota for the higher-end workspace. It’s extremely suitable for larger scaling with a large community of developers backing it up. That’s why it has gained so much space as a runtime environment.
Well, that’s not the only reason. As an open-source solution, it’s available on all the major platforms – Windows, macOS, Linux and everywhere. That’s an important thing for the web platform. Node.js is developed using C++ that offers the fastest performance than other popular programming languages like Python and Java.
With clever programming, it’s also possible to stack an entire website with JavaScript only!
With such performance and flexibility with tons of support from the community, Node.js is only going to become and more popular to the community.
Why is JavaScript so widely used?
As a programming language, JavaScript is obviously one of the most successful ones. Over the last 5 years, the language has stayed as one of the top ones. In fact, with the gradual growth of the World Wide Web, it’s only natural that JavaScript grows up in popularity more. In 2015, around 54% devs used JavaScript. The figure has improved a lot recently with about 62% programmers.
Why has JavaScript surpassed other popular alternatives like Java, Python, C#, PHP and even eclipsing SQL in 2014? With no sign of slowing things down, is the rising in popularity only a result of necessity?
Why not check out all the advantages and benefits of JavaScript? It will become easier to understand the reason behind the immense popularity of JavaScript.
- Cross-browser compatibility – This can be one of the most important factors of all. JavaScript is supported by all the browsers in the world. It doesn’t matter what platform you’re on, whatever you’re running – Chrome, Firefox, Safari, Opera, Edge, Internet Explorer and whatever; all the JavaScript code from all over the web is going to work flawlessly.
- Powerful libraries and frameworks – There are numerous rich and powerful frameworks and libraries of JavaScript that have emerged through the course of time. With such powerful forces at hand, it’s easier to develop web apps. You have obviously heard the name of AngularJS, React, and Ember etc., right?
Using these frameworks, it’s possible to develop highly interactive and professional web applications. - Easy to write – With JavaScript, there’s no necessity for any specialized tool. All you need is just a simple text editor and your knowledge to make magic happen. Well, there are already tons of powerful code editors to help programmers out. Check out the best code editors for web developers.
As we have discussed, there are several reasons why JavaScript has become the most popular programming language in the world among various type of developers including WordPress developers. JavaScript is a robust programming language that helps developers in building large scale web applications easily and quickly.
As we’ve already discussed, there are numerous JavaScript programs going around, for example, WordPress.
The power of JavaScript also goes beyond the web platform. It’s such a robust language that can even be an integral part of other applications!
Desktop Application
The power of JavaScript isn’t limited to the web only. Thanks to the clever works of the developers, you can also use JavaScript for creating desktop applications!
Electron is such a framework that allows developing desktop applications with technologies like HTML, CSS, and JavaScript. That sounds freaking awesome and CRAZY, right? Because it is!
Electron is an open-source framework. It’s being developed and maintained by GitHub and all the contributors from the community. You may be wondering – how the heck does HTML, CSS and JavaScript do all the work? Well, for the back-end part, it depends on the power of Node.js runtime and for the front-end, Electron uses the power of Chromium. You may not know but there are already a number of available renowned software that uses Electron framework, for example, Visual Studio Code from Microsoft and Atom from GitHub.
The founder of the interesting Electron framework was Cheng Zhao. The framework was developed when he was working on the Atom text editor back in July 2013. The framework was made open-source. The project was further developed supported by GitHub with the help of C++, Python, JavaScript, and Objective-C. The primary intention was to make Atom cross-platform with ease.
Yes, Electron is cross-platform. It makes things way easier for devs. As the main program is being developed using HTML, CSS, and JavaScript, there’s no need to change the core of each platform. All that’s necessary is to build the same program for different platforms.
There are a lot more to the success of the Electron framework.
- Security – Worried about security? Not needed anymore! It’s because how Electron works. Whenever you’re developing a program using Electron, all the files exist within the same package and stays locally in the system. Need to interact with the cloud? There are already secure functions available to avoid unwanted surprises.
- Low-level accessibility – Electron offers enough control to even extended, interactive features for your applications. For example, you can easily declare keyboard shortcuts specific to your app. Need low-level access? Electron supports interacting with the low-level and OS components fluently.
- Hardware accessibility – Electron comes up with complete access to all the hardware-level access. The APIs are exposed via the JavaScript part. So, there’s no compromise in terms of performance if you want your current project to migrate to Electron.
- Performance – Well, in terms of performance, there’s no compromise with Electron. You can choose to load only what is necessary. Thus, it can offer dramatically similar performance when compared to native apps.
However, Electron apps tend to be memory hungry and there’s no denying the fact. However, with proper care, it’s possible to keep the memory usage minimal. - Reusability – As there’s only one code base, it’s usable for both the web applications and desktop applications. Electron follows the motto strictly – code once, distribute everywhere.
- UI/UX – With the help of modern technologies, it’s possible to provide a modern, slick UI for better UX (user experience).
Mobile application
JavaScript also offers tremendous advantages for the mobile platform as well. Besides the web, it’s another platform that’s growing at an insane rate!
It’s because of the popularity of smartphones. Smartphones are becoming more and more desktop-like, thanks to the smart OS that runs them and the implementation of powerful hardware.
We’ve just talked about Electron that enabled HTML, CSS and JavaScript to create amazing desktop, apps, right? Just like Electron, there are now several other frameworks that enable similar features for the mobile platform.
- Apache Cordova
Apache is well-known in the community for providing some of the finest apps that suits enterprise and professional needs without any issue. For example, the Apache HTTP Server.
However, Apache also comes up with Cordova – a powerful and open-source framework that also uses the power of technologies like HTML, CSS, and JavaScript with the same motto as Electron – code once, distribute everywhere.
Cordova offers compatibility across all the major platforms – Android, iOS and Windows. Like Electron, the main application remains within while the wrappers interact with each of the platforms. Using standards-compliant API bindings, Cordova allows accessing essential capabilities of the devices, for example, sensors, network status, data, and others.
Web apps aren’t allowed to directly use the native mobile functionalities by default. That’s what Cordova makes happen. Offering a bridge connection between the mobile platform and the web app, it’s possible to make hybrid mobile apps that can use geolocation, camera and other mobile functionalities.
- Flutter
It’s another mobile app SDK that offers building high-performance, high-fidelity apps for both Android and iOS using the same code base. The goal is the same as Cordova – to enable developers to deliver high-performance apps that have the natural feeling on different platforms.
I’ve mentioned the term “high-performance” several times, right? Because that’s what Flutter provides! When developing apps using web technologies, the performance is always a great concern. Web apps have to go through a certain bridge that offers all the functionalities and communication with the device itself. In the case of Flutter, the performance is much improved.
The widgets of Flutter incorporate all the critical differences between platforms – scrolling, icons, navigation and fonts that can provide full native performance on both iOS and Android.
Now, in the case of UI, Flutter offers using the built-in Material Design and Cupertino (iOS-flavor) widgets with rich motion APIs, smooth natural scrolling and platform awareness.
The power of Flutter also powers various giants in the tech world. Alibaba, Tencent and even Google use Flutter as the core of a number of their apps!
Just like Cordova, Flutter is also free and open-source.
- React Native
React is one of the most popular JavaScript frameworks that earned its fame in the community. It offers insanely good performance (thanks to one-way data binding and an application architecture called Flux controls). Now, the framework is also available for developing apps for the mobile platform.
In the case of React Native, it’s a custom renderer for React, just like the React DOM on the web. Interestingly, instead of using web components, React Native uses native components.
In the case of React Native, you only have to build your program using JavaScript! Yes, just one language and voila! Your mobile app is ready to use!
The apps you develop using React Native are essentially not mobile web apps. That’s a major benefit compared to other frameworks. Instead of using Swift, Kotlin or Java, all you’re doing is just putting the building blocks together using JavaScript and React.
- NativeScript
In the case of previously discussed frameworks, all of them offers only a single framework to work with. In cases, they generate web apps that run on mobile platforms using the respective runtimes.
How about a complete framework that offers the flexibility of using anything? That’s what NativeScript is all about. You’re not just limited to JavaScript and a fixed framework. Instead, you can integrate all the popular frameworks, even your own code!
NativeScript, by default, offers support for Angular, Vue.js, TypeScript, JavaScript and others. However, you’re also free to use your own way of coding into creating the finest mobile apps.
The most interesting factor you should consider is the performance. Instead of generating web apps, NativeScript allows native apps for the maximum performance. You develop the functionalities with JavaScript and TypeScript and beautify with CSS.
Progressive Web Apps
In today’s software sector, PWAs (Progressive Web Apps) have gained huge traction. You may already have heard the term, right? Let’s dissect it.
Progressive Web Apps are web applications that load like regular web pages or websites. However, they come up with additional features like working offline, push notifications and other hardware accesses that were traditionally only available to native applications.
In a word, it’s a perfect combination of both native applications with the flexibility of the web. In practice, PWAs aren’t necessarily frameworks or technologies. Instead, it’s a clever combination of making a web application to behave, to act similarly to a native one. The target is to deliver the users so uniform and seamless behavior that it’s almost impossible to identify which one is a web app and which one is a native app.
Now, do we really need PWAs? The answer lies within the following criteria.
- Fast performance – If the website is loading slowly, then it disgusts most of the internet users. With the help of PWAs, it’s possible to provide the consistently fast user experience.
- Integrated user experience – Users don’t have to go to their browsers each time they wish to enjoy the features. The app can sit in a user’s home screen, send notifications and do other things without any issue. The experience feels seamless and integrated.
- Reliable – Even if the network fails, it’s still possible to paint a picture on the user’s screen to keep him engaged.
For learning more on Progressive Web Apps, feel free to consult the article that explains PWAs in-depth.
Virtual/Augmented Reality
Well, we’ve already discussed a ton of places where JavaScript can be used. This is the only section that remained untouched. Why not pollute it with JavaScript?
Turns out, it’s already done! Virtual reality and augmented reality are some of the most interesting and latest technologies in the field. The target is to bring the experience the virtual world just as the real world.
For bringing up the virtual experience on the web, there are already powerful frameworks in the field. The field of virtual reality is still at its early stage, so not much frameworks are at work. However, they offer the real deal!
- WebVR
The web is an ever-growing field that’s accelerating day by day. That’s the target of this project is to bring the everyday web directly into the world of virtual reality.
WebVR is an open specification that enables experiencing VR right into your browser. The ultimate goal is to make VR easier to enjoy, no matter what VR device you got.
WebVR is already available on all the major web browsers – Chrome, Firefox, and others. All you need is a suitable device for the VR and enjoy yourself to the fullest!
- AR.js
Virtual reality is something that requires a lot of technologies to work in sync. Moreover, the current tech required for enabling VR is something not everyone can afford. In that sense, AR makes more sense and it can be really amazing.
Now, what is AR (Augmented Reality)? It differs dramatically from virtual reality. The first and foremost difference is how they work. In the case of VR, you tap into the virtual world. In the case of AR, the digital content is imposed on the real world. Of course, they’re not there but on the screen, they’ll appear as if they were real.
AR isn’t something new. In fact, we’re already using it on a daily basis. Have you ever captured an image with real-life effects on it? That’s AR.
In this Snapchat example, the app is using the power of AR.
There are also frameworks that target the AR platform for making amazing things into reality, for example, AR.js. JavaScript is such a popular and powerful solution that it has crept into the world of AR as well.
In the case of AR.js, the focus of Nicolò Carpignoli (the creator of Ar.js) is to bring AR for the web as a real deal.
AR.js is pretty fast and well-optimized. It was even successful in outputting 60 FPS on a 2-years-old model of Carpignoli! As it’s web-based, there’s no necessity for any additional installation. The entire framework is developed using three.js and jsartoolkit5.
AR.js is an open-source, “free of charge” project that anyone can integrate into their projects. It also doesn’t require much. Any phone with the support for WebGL and WebRTC will be able to take the full advantage of AR.js.
Learning JavaScript
Are you interested in learning JavaScript?
No problem! With the current resources available on the internet, it’s now possible to learn almost any programming language. JavaScript, being a popular programming language, offers way more available resources. All you need is just get started.
Note – I’d like to recommend having a better understanding of HTML and CSS beforehand, as both of them are 2 main components of the entire World Wide Web.
- W3Schools – The golden source for learning programming languages, especially web-related ones. All the languages are split into small and easily understandable lessons. Moreover, you also get to check out a ton of examples on that specific language.
In the case of JavaScript, it’s just as simple as everything else. Get started with W3Schools JavaScript training now!
- Codecademy – One of my favorite places for learning programming. It comes up with one of the finest ways of teaching programming to anyone. It offers free training on a number of popular and well-known programming languages like HTML and CSS, JavaScript, Python, C++, and others.
Start learning JavaScript with Codecademy today!
Wrapping Up
The history of JavaScript has been full of hurdles. Hopefully, this article provided you with some insight into the interesting world of JavaScript.
Cheers!
Wow! Educative post…