The Evolution of JavaScript and Its Role in Modern Web Development

In today's episode of "Surge Off The Record," we dive into the world of JavaScript and its evolution to becoming the backbone of modern web development. With the rise of web applications and visual editors, JavaScript has become an indispensable tool for developers.

Our special guests, Ito Pereira and Pascal, have extensive experience in developing applications and tools using JavaScript. Pereira has worked with Gary for over a decade, and recently, he has been working on search open sourcing, while Pascal has been working on modern content formats such as web stories.

Why the Love-Hate Relationship with JavaScript?

As JavaScript has become more ubiquitous in web development, it has garnered both appreciation and criticism from developers and users. Its many advantages, such as dynamic and interactive functionalities, have made it the go-to tool for creating web applications. However, its heavy usage has also resulted in longer loading times and larger web page sizes, which can be frustrating for users.

Furthermore, the need to reinvent existing browser functionalities like the document object model (DOM) can cause accessibility concerns and negatively impact keyboard input and screen readers, creating further challenges for developers.

Despite these challenges, JavaScript has become an integral part of modern web development, and it continuously evolves with new language features and better tooling. Early JavaScript was clunky and difficult to manage, but the adoption of TypeScript and the development of ECMAScript standards have made the language more readable and easier to maintain. Today, developers can create powerful and dynamic web applications with minimal effort if they adopt these new tools.

The Role of JavaScript in Search Engine Optimization

Another topic of debate surrounding JavaScript is its impact on search engine optimization (SEO). As search engines struggle to keep up with the ever-increasing usage of JavaScript, developers have to balance the need for dynamic and interactive functions with the desire to improve a website's SEO. However, with modern chromium rendering technology, search engines are adapting to this changing landscape and supporting JavaScript-enabled websites.

Despite its challenges, developers love JavaScript for its flexibility and the many possibilities it opens up in programming. It has even shifted the tools and tooling used in web development towards JavaScript during the modern era. Everyone seems to have a love-hate relationship with it, but one thing is certain: it has become indispensable in modern web development.

Exploring the Challenges of JavaScript: Internal vs External Applications

JavaScript has come a long way from being a simple scripting language to becoming a powerful tool for developing web applications. With the evolution of the language in the past few years, it has become a lot more mature, capable, and powerful. However, with great power comes great responsibility, and JavaScript developers face challenges while working on both internal and external applications.

In a recent podcast episode, Edu and Pascal shared their experiences of working on different kinds of JavaScript applications. While Edu worked on internal facing applications, Pascal built an open-source interactive web tool that may be deployed to millions or billions of users at some point. In this article, we will dive deeper into the challenges faced by JavaScript developers while working on internal and external applications, along with some strategies to address them.

Internal Applications

When we talk about internal applications, we are referring to web applications developed for usage within an organization. Internal applications have different requirements and development priorities than external-facing applications. Here are some characteristics of internal applications:

• Fewer Users: Internal applications have fewer users as compared to external applications, and they are typically used by employees of an organization.

• Language Constraints: With internal applications, developers don't have to worry about internationalization as the users typically speak the same language.

• Desktop/Laptop-based: Internal applications are primarily used on desktops or laptops, and developers don't have to worry about mobile compatibility.

• Security Constraints: For security reasons, some internal applications cannot be accessed from mobile devices, and require fully corporate phones with strict policies and constraints.

• Fast Development Cycle: The focus of internal applications is on fast development cycles that allow developers to write and test code quickly in a development environment.

External Applications

External applications, on the other hand, are web applications that are available to the public or specific user groups outside of an organization. With external applications, developers have to consider a broader range of factors such as scalability, performance, and compatibility across different browsers and devices. Here are some characteristics of external applications:

• Large User Base: External applications have a large user base, and developers have to ensure that the application is scalable, secure, and can handle a large volume of traffic.

• Internationalization: With external applications, developers have to consider internationalization, as users may speak different languages and have different cultural expectations.

• Device Compatibility: External applications need to be compatible with various devices and browsers, including desktop, mobile, and other internet-enabled devices.

• Defensive Development: Developers have to consider all kinds of edge cases and users with slower network connections and ensure that the application works seamlessly under different scenarios.

JavaScript Applications: The Importance of Typescript

JavaScript has come a long way since its inception and has become an integral part of building web applications. With advancements in tooling, Frameworks, and libraries like ES2015, React, and bundlers, creating performant applications has become relatively easy. The improvements in browser APIs and faster JavaScript engines have also contributed to the performance of JavaScript applications.

However, it is essential to ensure that all the different components of an application work together seamlessly and accurately. This can be challenging, especially when dealing with browser APIs, where there is no guarantee of consistent outputs. Unfortunately, not knowing the type of data an application is receiving can sometimes lead to bugs that can affect its functionality.

One solution to this problem is to use Typescript, which brings the added benefit of type safety to JavaScript. Whether building a large-scale application or a smaller project, using Typescript provides code editors with better static analysis capabilities, making for more manageable and predictable coding environments.

The Journey to Typescript

For developers who have already started writing in JavaScript, but have yet to explore Typescript, we highly recommend doing so. In the past, TypeScript lacked many of the features it possesses today, leading to frustrations and discouragement. However, with the latest updates and feature enhancements, it has become easier to get started with Typescript, thanks to its comprehensive documentation and getting started guides.

At first, the adoption of this new language might seem daunting, especially for people who are not familiar with type systems. However, Typescript is relatively easy to learn since it is structurally similar to JavaScript, and its documentation is well-written and updated frequently.

Moreover, introducing Typescript into an existing project can be done gradually, which means developers can use it creatively for specific cases or file-by-file as they learn to use it correctly. Using "any" for migration is also possible, but only with caution. Its primary usage is for migrations, and developers must avoid using it except when they know what they are doing.

Exploring the Potential of WebAssembly in Web Development

WebAssembly is a low-level assembly language that allows developers to compile binary programs from languages like C++ and Rust into code that can run in the browser. By doing so, it enables web developers to enhance browser APIs and use them from JavaScript. In this article, we will explore the potential of WebAssembly in web development and how it is currently being used.

Benefits of Using WebAssembly

• Compatibility: WebAssembly is supported by major browsers which make it a very accessible technology.
• Performance: WebAssembly lets developers write code in low-level languages resulting in faster code execution, mainly due to its optimized binary format which reduces load times and makes it more efficient than JavaScript.
• Portability: As WebAssembly is a portable code that can execute in any runtime, it provides the ability to write once and run anywhere.
• Security: WebAssembly provides predictable resource consumption, prevents buffer overflows, and protects against vulnerabilities present in higher-level languages.

Use Cases of WebAssembly

• Video and audio transcoding: With the help of WebAssembly, developers can transcode and compress videos in the browser instead of servers, which are also capable of doing it. This can save server resources and can be done on the client-side in real-time.
• Gaming: WebAssembly can be used by game developers to increase the performance of web-based games. With support from popular engines like Unity and Unreal, WebAssembly provides an alternative to native desktop and mobile game development.
• Simulation: WebAssembly enables developers to run high-performance simulations in the browser, despite being resource-intensive.
• Cryptography: WebAssembly can be used for secure and efficient encryption and decryption in the browser, enabling progressive cryptographic operations in a more secure and efficient manner than JavaScript.
• Porting existing codebases: Developers can port existing codebases using C++ into WebAssembly to reuse and enhance existing libraries or functionality for use in browsers.

The Future of WebAssembly

WebAssembly has been receiving a lot of attention and momentum lately and has been seen as a promising technology. While it is unlikely that WebAssembly will replace TypeScript or JavaScript in the near future, its growing user base shows that it is an essential addition to any developer’s arsenal. With its potential to support multiple languages and provide outstanding performance on the web, it has a wide range of exciting possibilities for future web development.

As with any new technology, it is essential to stay up to date with the latest developments in WebAssembly to leverage its full potential. In this article, we have explored some of the opportunities that WebAssembly provides. In subsequent articles, we shall look at various examples of how WebAssembly is being used while providing insights into its benefits and limitations.