7 Cool Things To Do With JavaScript

intro.

First released as ‘LiveScript’ in September 1995, and renamed to ‘JavaScript’ in December 1995, the programming language JavaScript has evolved drastically over the years.

Netscape and Sun Microsystems originally built JavaScript to allow web designers to go beyond static HTML/CSS pages and add simple animations, user interactions and expand the abilities of forms. Whilst Netscape/Sun Microsystems’ dream was to progress the web through JavaScript, they also wanted to make sure that the code was easy to use so that designers and developers could make use of Javascript’s advantages without any steep learning curves.

Due to the popularity of Netscape/Sun Microsystems’ Javascript, other browsers began to develop their own JavaScript engines with their own standards, making it harder for developers of the time to make websites behave consistently. In 1997, Sun Microsystems launched a board to help bring the browsers together and make the engines run consistently to help make websites more consistent across browsers and improve user experience. This board is still running today and is constantly helping to progress the web.

In 2019, the capabilities of JavaScript are incredible. You can create a VR/AR experience, produce games, run JavaScript as server-side code, make apps and of course create awesome websites in Vanilla JavaScript; the internet really is your oyster.

Let’s have a look at all of the cool things that YOU can do with JavaScript:

1. Animate Websites

Have you ever loaded up a website and been amazed by all of the interactive elements that are whizzing around the page and reacting to your interactions? Or is that just me being geeky?

Here are some examples for those of you that have no idea what I mean:

Even simple animations can add a lot to a website; they keep you engaged and make you want to just keep on going to see what more it has to give. Making websites look cool and engaging is a great way to make use of animations, but they can have other more practical benefits as well, such as:

Making a website feel like it is loading faster
When a web page has a lot of content to load it will naturally increase the page load time, frustrating a user to the extent of potentially losing a sale. Therefore, many high-volume content sites implement loading animations for the users, such as spinners. Spinners are often pretty basic, but will provide a distraction for the user from the normal white screen whilst the website Ajaxes content into place and makes the website feel faster.
Making navigation in an app more fluid and easier to understand
When using a web application with lots of links it can be hard to understand how you navigated to the webpage that you are on. Adding simple animations such as page swipes and elements that highlight the transition from one page to another can be enough to help improve the user journey.
Driving attention
Static content can be boring to look at and makes it easy for something in the background to draw a user’s attention away from the important content. Just having some simple animations on your page will drive attention to small bite size information such as a call to action, helping to drive the user through your business funnel.

2. Phone Apps

Thanks to companies like Apple and Google, apps have become a household name. Whatever you are doing I am sure someone could walk past and say “There is an app for that”. With the rise of smartphones, developers and businesses have quickly been able to capitalise on the success of the app marketplace. Just look at Facebook, Twitter, Tinder, Angry Birds and many other apps that have made millions in this industry.

But developing two apps for each platform takes experience and requires a team with multiple skill sets, plus a project manager to make sure that both apps behave consistently. Some companies even have more than one team to deal with this job. This is where good old JavaScript has found it’s calling in the app industry.

Using JavaScript frameworks such as React Native, a company can develop apps to a high-quality standard for a range of app operating systems (including Android, iOS, Apple TV, Chromecast and even Windows Phone). Not only does the company save on time and money, but they also get a high-quality app that works the same across both platforms, and works well at that. Just look at the Facebook app, arguably the most-used app which is built from React Native.

This is a big deal. Now even small businesses can develop apps and compete in the same space as the big dogs. New features can also be developed into apps as companies are not having to split resources across two different operating systems.

Open-Source Community

As the JavaScript app scene has grown and proven that it is viable, there has been a great effort from the JavaScript community to share code to accomplish some awesome things and speed up development time.

Such examples of community efforts:

Expo App/Build tools
Expo allows you to run your code in real time as you are coding, streaming your code to a device over a wireless network and therefore reducing the headache of compiling and adding the ability to test in a native environment over a virtual emulator.
npm
npm is a package manager built for JavaScript to help developers install and manage open-source packages into their project. With thousands of developers that add and maintain these packages across the world, there is near enough always a package that you can use to add a feature to your app/website; therefore, there is no need to reinvent the wheel.

3. Serverless Websites

Whilst still a relatively new concept, Serverless Websites could be a new direction for website hosting. Making use of services like AWS Lambda, Serverless Websites can be a relatively efficient way to host a website.

The Concept

The concept of a Serverless Website is to serve users a static pre-compiled .html file. By serving a single .html file we reduce the time to first byte (i.e. the time it takes for the server to start sending data), and reduce the time it takes for the user to access the data.

After the browser has rendered the page to the user, JavaScript then steps in to render all of the dynamic content and media through APIs (Application Programming Interface) and CDNs (Content Delivery Network). The dynamic data can be animated into the page as soon as it’s loaded, offering a smooth experience and allowing users to have access to data whilst they are waiting on other data.

A good use case for this concept is that a website can be coded to load data based on where it will appear on the page, meaning that data will be ready for the user as they scroll.

Serverless website are still relatively new and I’m sure we will hear a lot more about them over the coming years.

4. Progressive Web Apps

Thanks to companies like Google and Mozilla, Progressive Web Apps (PWAs) are an amazing new technology. For those of you that have not heard of PWAs, they’re a technology that allow users to install a website to their phone or laptop, in a similar way to apps, to provide a range of benefits such as:

Quick access from app tray/homescreen
Users that install PWAs to their device will get an icon added to their app tray and/or homescreen, allowing users to load the PWA without having to navigate through a web browser.
Faster load times compared to websites
Due to a user installing the website locally, a developer can store static content on a device and make use of JavaScript Service Workers to fetch new data. This means that your device only has to load data when new data is available, and also means that the website can therefore potentially work offline without an internet connection (depending on your use case).

From a company’s point of view, PWAs are great as they too can take advantage of a range of different benefits, such as:

Cheaper to build
Due to the PWA being based on the company website, developers can reuse most of the code from the website and only add new features as needed, compared to an app where developers often have to start from scratch. As you can imagine, this can save companies lots of time and money.
Less server traffic
Due to the caching of PWAs, users have to pull less data from the company’s servers. This means that companies can have smaller servers which leads to lower costs.
More user engagement
Due to the app being readily available on the user’s homescreen, the app is always in view and requires less marketing for users to load up the app.

5. Games

Games have played a huge role in the progression of web browsers since the 1990s. Originally created with web browser plugins such as Adobe Flash or Shockwaves, the original in-browser games were great time wasters like some app-games are today. Websites such as Miniclip and 1001 Web Games would be dedicated to hosting games, with a rich library of games available. If you were wondering, my personal favourite browser game was “Line Rider”, which I spent hours playing during school (although don’t tell any of my old teachers!).

As the web evolved, the use of web plugins become more frowned upon due to security concerns, performance and many other reasons. In steps JavaScript!

Due to browser plugins being deprecated over the years, many developers have turned to JavaScript to fill the gap. Frameworks, custom game IDE (Integrated Development Environment) and other new technologies have now been developed which allow us to take full advantage of what the browser can do and means that developers can make some pretty advanced games.

Some great examples of JavaScript games are:

Web Assembly

Recently, a new technology has been born called Web Assembly, allowing browsers to make use of traditional programming languages such as C++ through a browser API. Web Assembly and JavaScript together now offer the best of native development and website development, allowing companies to build applications and games that make use of your computer’s native hardware whilst running through a web browser.

With companies like Google creating browser-based gaming facilities such as Stadia, the future of web gaming looks very promising.

6. Flying Drones

Lately there has been a big craze about drones. Hobbyists love flying drones, film crews can get unique, cinematic shots and developers can go to town with loads of custom “hacks”; the open source community is ever expanding with new cool stuff that can be coded.

Most developers favour languages such as C or Python when coding drones, although one YouTuber decided to use JavaScript. See this video for proof if you do not believe me.

Personally, I wouldn’t recommend using JavaScript compared to other languages to program your drones though, as there is not as much documentation and other languages are often faster at runtime. Saying that, this shows just how versatile JavaScript can be.

N.B. We don’t advocate using your JavaScript skills to fly drones near Heathrow Airport.

7. Attend A JavaScript Event

With many developers and designers in love with the JavaScript language, it is only natural that they would want to learn more, whilst also passing on their knowledge to other developers. Us programmers are into our community work.

Many JavaScript events have popped up around the world, which draw together developers from all different backgrounds to learn about upcoming trends in the language. These groups are very important to the community as they help to progress new technologies and give the developers a voice for the future of the language.

Thanks to sites like Meetup and Eventbrite, smaller JavaScript events are also becoming more popular, constantly popping up in all cities. These can really help new developers get a footing in the programming language and senior developers master the language.

If you have any interest in JavaScript, I’d recommend trying to get down to a JavaScript event in your local area.

Since the birth of JavaScript, the language has come a long way and I am sure this trend is going to continue for many years to come.

At the moment, we are seeing browsers allow web pages to use more and more of a computer’s power (especially with the new Web Assembly API), which could lead to browsers and native apps becoming one of the same. With this in mind, JavaScript will need to continue evolving in order to keep up, undoubtedly leading to more cool things to do with JavaScript in the future.

Want to discover more digital marketing tips and tricks? Why not sign up to our mailing list for all the latest insights from Flaunt Digital?

7 Cool Things To Do With JavaScript

7 Cool Things To Do With JavaScript

1. Animate Websites