Javascript Integration with Docker

⚙️ Task -39

📌 In this task, you have to create a Web Application for Docker (one of the great Containerization Tool which provides the user Platform as a Service (PaaS)) by showing your own creativity and UI/UX designing skills to make the web portal user friendly.

📌 This app will help the user to run all the docker commands like:

👉docker images

👉docker ps

👉docker run

👉docker rm -f

👉docker exec

👉 add more if you want. (Optional)

👉 Make a blog/article/video explaining this task step by step.

📌 Write a blog explaining the use-case of javascript in any of your favorite industries.

In this part of the task, I have integrated Javascript with docker so that users can use docker and use its commands more easily and effectively.

To start this task we have to first start our VM and OS(RHEL8) and install ‘httpd’ service in our OS.

‘httpd’ is the Apache HyperText Transfer Protocol (HTTP) server program. It is designed to be run as a standalone daemon process. When used like this it will create a pool of child processes or threads to handle requests.

yum install httpd

Then we have to disable our firewall and start the httpd service.

systemctl disable firewalld
setenforce 0
systemctl start httpd

Now we have to go in the directory “/var/www/html” and create a file using ‘gedit’ command.

cd /var/www/html
gedit <file_Name>.html

This file contains all the front-end of our website and should also include the script to connect our server to OS.

The script part given below is from the code that I have shared in my GitHub repository below.

<script>
         function lw()
        {
        
        var xhr=new XMLHttpRequest();
        i=document.getElementById("in1").value;
        
        xhr.open("GET","http://192.168.43.104/cgi-bin/lw.py?x="+i,true);
        xhr.send();
        
        xhr.onload=function (){
        var output=xhr.responseText;
        document.getElementById("d1").innerHTML=output;
                    }
        }
        
</script>

Now change the directory to “var/www/cgi-bin” and make a Python file using ‘gedit’ command with “.py” extension to write our backend code.

cd /var/www/cgi-bin
gedit <file_Name.py>

This file contains the backend code(in Python).

#!/usr/bin/python3
import cgi
import subprocess
import time
print("content-type: text/html")
print()
print("Hello from backend")
print()
f=cgi.FieldStorage()
cmd=f.getvalue("x")
o=subprocess.getoutput("sudo "+ cmd)
print(o)

After this so that any non-root user can access from my server, I made changes as follows so that using the “sudo” command the non-root user can access the docker services.

In the terminal, we have to go to file-path ‘/etc/group’.

vim /etc/group

Now we have to make the following change to allow our non-root users to access docker.

Now we have to again change the directory from terminal to “/etc/sudoers” and make the following changes over there.

vim /etc/sudoers

We have to give access to our python file to be executable from the guest user. So for this, we have to give access to it by going into the directory where it was stored and then using the command given below.

chmod +x <file_name>.py

Now we are all set and can use our application in Windows web browser (Chrome or Edge) with the help of URL.

http://<IP Address>/<file_Name>.html

Here are some examples of my docker commands.

👉docker images :

👉docker ps :

👉docker run :

👉docker pull:

Task 7.2 :

Here in this part of the task I will tell you what is actually javaScript and some of its applications and use a case in a big Tech industry Netflix. How javaScript improves the performance of Netflix and more.

Need Of JavaScript?

• Autocomplete: The search box gives suggestions, based on what the user has already typed.
• Form validation: If the users make a mistake while filling a form, JavaScript immediately informs them of the error, avoiding filling it all in again.
• Fixes layout issues to avoid the overlapping of elements on the page.
• Adds animation to the page to make it more attractive.

Applications of JavaScript?

Every type of software uses JavaScript, including the server code (Node.js), productivity apps, 3D games, robots, IoT devices.

And almost all the Top companies are using JS like Netflix, Uber, Walmart, Paypal, Linked In & more.

CASE STUDY ON NETFLIX

Netflix is one of the most popular video streaming services. Since launching globally in 2016. the JavaScript used for Netflix sign-up process and using prefetching techniques, the developer team was able to provide a better user experience for both mobile and desktop users and offer several improvements.

• Loading and Time-to-Interactive decreased by 50% (for the logged-out desktop homepage at Netflix.com).
• JavaScript bundle size reduced by 200kB by switching from React and other client-side libraries to vanilla JavaScript. React was still used server-side.
• Prefetching HTML, CSS and JavaScript (React) reduced Time-to-Interactive by 30% for future navigations.

Reducing Time-to-Interactive by shipping less JavaScript

The area optimized for performance by the Netflix developers was the logged-out homepage, where users come to sign-up or sign in to the site.

This page initially contained 300kB of JavaScript, some of which were React and other client-side code (such as utility libraries like Lodash), and some of which were context data required to hydrate React’s state.

All of Netflix’s webpages are served by server-side rendered React, serving the generated HTML and then serving the client-side application, so it was important to keep the structure of the newly-optimized homepage similar to maintain a consistent developer experience.

Even though React’s initial footprint was just 45kB, removing React, several libraries and the corresponding app code from the client-side reduced the total amount of JavaScript by over 200kB, causing an over-50% reduction in Netflix’s Time-to-Interactivity for the logged-out homepage.

since most of the elements on the page were basic HTML, remaining elements such as JavaScript click handling and class adding could be replaced with plain JavaScript, and the page’s language switcher, originally built using React, was rebuilt in vanilla JavaScript using less than 300 lines of code.

Prefetching React for subsequent pages

To further improve performance when navigating their logged-out homepage, Netflix utilized the time spent by users on the landing page to prefetch resources for the next page users were likely to land on.

The built-in browser API consists of a simple link tag within the head tag of the page. It suggests to the browser that the resource (e.g. HTML, JS, CSS, images) can be prefetched, though it doesn’t guarantee that the browser actually will prefetch the resource, and it lacks full support from another browser.

XHR prefetching, on the other hand, has been a browser standard for many years and produced a 95% success rate when the Netflix team prompted the browser to cache a resource.

By using both the built-in browser API and XHR to prefetch HTML, CSS, and JS, the Time-to-Interactive was reduced by 30%.

Netflix logged-out homepage — optimization summary

By prefetching resources and optimizing the client-side code on Netflix’s logged-out homepage, Netflix was able to greatly improve their Time-to-Interactive metrics during the sign-up process. By prefetching future pages using the built-in browser API and XHR prefetching, Netflix was able to reduce Time-to-Interactive by 30%.

The code optimizations carried out by the Netflix team showed that while React is a useful library, it may not provide an adequate solution to every problem. Consider if leveraging vanilla JavaScript is an option for flows in your site.

Conclusion

So here is a little brief of JavaScript and a case study on Netflix. Netflix discovered opportunities to improve their Time-to-Interactive by keeping a close eye on the cost of JavaScript. The Netflix landing page is quite dynamic. The Netflix sign-up flow needs more legacy browser support than the member experience.