JS with NETFLIX

What is JavaScript?

JavaScript is a lightweight scripting programming language which is used to make web pages interactive. JavaScript is a scripting or programming language that allows you to implement complex features on web pages.

It enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. Programs written in this are known as scripts. and these are exceuted by the browser. The file extension of a JavaScript file is .js.

Browser acts as an interpreter to the scripts we provide It reads line by line and compile and execute it as a web page over browser.

It is the third layer of the layer cake of standard web technologies, two of which are HTML, CSS these three together helps to make a good web applications. It has Object-Oriented properties too.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java.

JavaScript Framework is consist of a huge collection of various JavaScript libraries that supplies the programmers with pre-written code and thus allows even those who don’t have a lot of programming knowledge. Some of Framework are AngularJS, NodeJS, EmberJS, etc.

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 to fill it all again.
• Fixes layout issues to avoid the overlapping of elements on the page.
• Adds animation to the page to make it more attractive.

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 was React and other client-side code (such as utility libraries like Lodash), and some of which was 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 other 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.