JavaScript will turn 25 in May 2020 and is one of the most popular and enduring languages today. It was written in just 10 days in 1995 by Brendan Eich of Netscape Communications. Used as a ‘glue language’ JavaScript was developed for web designers to build web content and make web pages more interactive rather than the static pages built solely on HTML.
Initially, JavaScript was used for such things as menu animation, but it’s become the web’s most powerful programming language, with developers producing sites like The Boat
In fact, JavaScript was rated the most popular language among professional developers in Stack Overflow’s 2018 survey.
But how did it get there?
Built for Netscape’s Navigator browser, JavaScript’s potential was quickly realised and Microsoft reverse-engineered it for Internet Explorer and called it JScript. The browser wars between Netscape and Microsoft followed soon after, with Microsoft’s eventual win. Microsoft may have won the browser war, but the language battle belonged to Netscape with JavaScript eventually being used in all modern browsers.
Initially regarded as a language built for amateurs, asynchronous JavaScript and XML (Ajax) showed JavaScript’s power. Using a combination of technologies, Ajax can exchange data with a web server and update parts of a web page without having to reload the page. And it all happens behind the scenes. Previously, pages had to reload in their entirety and given the dial-up speeds of the day, the web was a slow place to dwell.
But, while it looked as if JavaScript had found its feet, browsers were built differently, with tweaking and testing required to ensure pages responded correctly across browsers.
How did the web community work around this?
The community responded by developing frameworks. A framework comprises libraries of pre-written code so that developers need not start each project from scratch. Just insert blocks of code to give a basis for what you want to build. The frameworks also added structure and speed to JavaScript development.
What does a framework do?
A framework reduces the lines of code compared to vanilla JavaScript.
Using an example borrowed from One Month, to change text colour using JavaScript you could write:
var d = document.getElementsByClassName(“goodbye”);
var i;
for (i = 0; i < d.length; i++) {
d[i].className = d[i].className + “ selected”;
}
Or, the same result in a framework called jQuery is:
$(“.goodbye”).addClass(“selected”);
That’s five lines of code reduced to one.
Scripts load faster with less lines, and they are easier to debug and troubleshoot.
Are there many frameworks to choose from?
There sure are. Some popular frameworks are:
jQuery
jQuery was released in 2006, 11 years after the appearance of JavaScript. Its purpose was to change the way JavaScript was written by “taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.”
For for more info, code snippet demos and to download jQuery, visit the jQuery api documentation page.
Node.js
Node.js is a JavaScript runtime written in C by Ryan Dahl in 2009. It was created because Ryan thought “… I/O has to be done differently. We’re doing it wrong.” Watch Ryan's Original Node.js presentation for a deeper understanding.
Ryan noticed that it can take some time when a line of code queries a database. And what’s happening while waiting for the data? Nothing. Ryan decided that software can do better, with Node.js being the result.
Node.js uses a single thread to support thousands of connections in an event loop. This is in contrast to OS threads that can be inefficient and impact CPU and RAM.
The event loop processes code that is ready to run. For example, add a request for information from a database with a callback, and go onto something else while the request is being processed. Further function calls can be added to the event loop with little impact to server CPU and memory.
Node.js was designed to help with backend tasks rather than frontend, but is used in conjunction with client-side JavaScript frameworks, like Angular for example.
AngularJS
AngularJS is a JavaScript-based product that was released by Google in 2010. Developed as a side project of a Google employee, it was embraced by the JavaScript community and large companies added it to their toolkits.
Here are some examples of sites made with AngularJS.
Angular
In 2016, Google released a new version of Angular that was rewritten in TypeScript. It became known as Angular and the previous version renamed to AngularJS. The new version enabled developers to build large cross-platform applications, but it caused an uproar among developers because it lacked backward compatibility.
One even went as far as writing a break-up letter to Angular.
Have a look at these sites made with Angular.
React
React describes itself as a JavaScript library and is used extensively at Digital Bridge. It’s open source and developed by Facebook. Designed more for building interfaces than applications, in their own words, “It lets you compose complex UIs from small and isolated pieces of code called ‘components’”.
According to Libscore, some top online companies, such as NetFlix, PayPal, Imgur, Feedly, Airbnb, and more, use React on their websites.
Some reasons to use React are:
• Speed - React has implemented a virtual document object model (DOM) where it performs page updates in virtual memory before rendering the page in your browser.
• Saves time - React allows the reuse of components. Instead of building code from scratch each time, components can be reused across pages and websites with ease. This not only saves time but ensures consistency. See how Alex Grigoryan achieves this with Walmart.
• Downward data flow - Child structures don’t affect their parent structures with a downward data flow, which ensures stable code.
• Open source community - React’s library is constantly growing with over 1300 contributors on Github
• Developer tools - Available as extensions for Chrome and Firefox, they allow you to inspect and edit the properties of individual components of the virtual DOM, and more.
Have a look at React’s site for more information and to play with some code. They even have a tutorial where you can build a game.
Sites made with React include Facebook and DropBox
Vue
We also use Vue because it’s highly integrated with our Laravel PHP server-side framework. In fact, it’s so tightly integrated that Vue comes built into Laravel PHP.
Vue was created by Evan You in 2014 and combines the best features of Angular and React. Rapidly gaining favour because of its simple syntax, its components described as a combination of both HTML and JavaScript, making it easy for developers to learn.
Some reasons to use Vue are:
• Flexibility - Vue’s flexibility is one reason it’s gaining in popularity. You can write and run from your browser. It also allows you to build an application in HTML, JavaScript, ES6, or JSX.
• Native support for TypeScript - TypeScript is growing in popularity among developers for its ability to create large-scale applications. It’s also more readable and less prone to errors. See its introduction video
• Documentation - Vue has solid documentation making it easy to learn. And an extensive forum of over 33,000 users helps too. Join the vue forum to take part in the discussion.
Here are some sites made with Vue.
Some of our projects using Javascript
While we’re proud of all the work we do, here are a few examples where it made sense to use a JavaScript framework for the User Interface.
http://oscebank.com.au/
A platform for medical students to practice for their OSCEs written with Vue.js
https://www.risingsoftware.com/cloud
A browser based client also written in Vue.js for Rising Software's Music Education software packages: Musition and Auralia.
https://www.gracepapers.com.au/
An online course providing career advice through pregnancy, written with React.
JavaScript has a following like no other language and that following has turned JavaScript into something Brendan Eich may never have thought possible in 1995. And it just goes to show that great things are achievable by one person, in only 10 days.
With JavaScript, browser, and network improvements, the internet is going to be a different place for the next generation.
Digital Bridge is a website design and development company based in Fitzroy, Melbourne. We create highly functional custom websites designed to manage and grow your business. If you have a web project you’d like to discuss, you can contact us at hello@digitalbridge.com.au or give us a ring at +613 8658 2434.