Dart vs Javascript: A Cross-Platform Comparison

In this two part series, on cross-platform mobile app development, we explore Dart and JavaScript, the fundamental languages of Flutter and React Native. As the digital world shifts towards cross-platform apps, Flutter and React Native have emerged as key players. To differentiate these giants, let's delve into Dart and JavaScript. In this blog we will be covering:

• Overview of Dart and JavaScript
• Key features of Dart and JavaScript
• Pros and cons of Dart and JavaScript
• The importance of the main function in Dart and JavaScript execution

Overview of JS and Dart

Dart overview

Dart is a client-optimized language for developing fast apps on any platform. Its goal is to offer the most productive programming language for multi-platform development.
Dart also forms the foundation of Flutter. Dart provides the language and runtimes that power Flutter apps, but Dart also supports many core developer tasks like formatting, analyzing, and testing code.
Dart targets two runtime platforms:

• Native platform: For apps targeting mobile and desktop devices, Dart includes both a Dart VM with just-in-time (JIT) compilation and an ahead-of-time (AOT) compiler for producing machine code.
• Web platform: For apps targeting the web, Dart can compile for development or production purposes. Its web compiler translates Dart into JavaScript.

‍

JS Overview

JavaScript is a lightweight programming language that web developers commonly use to create more dynamic interactions when developing web pages, applications, servers, and or even games.
Developers generally use JavaScript alongside HTML and CSS. The scripting language works well with CSS in formatting HTML elements. However, JavaScript still maintains user interaction, something that CSS cannot do by itself.
JavaScript has continued to grow alongside new browsers like Mozilla Firefox and Google Chrome since then. The latter even started developing the first modern JavaScript engine, called V8, which compiles bytecode into native machine code.
Today, JavaScript has plenty of frameworks and libraries to simplify complex projects, such as Angular, jQuery, ReactJS and many more. Coming to server side programming, javascript runtime is also available through NodeJS built on Chrome's V8 JavaScript engine.
Javascript has options for other platforms as well:

• For desktop, we have ElectronJS, 
• For mobile, we have React Native, Ionic, Cordova
  

Features

Pros & Cons

Pros of Dart:

1. Easy to Learn: Dart's syntax is similar to languages like Java and JavaScript, making it easier to learn for those with a background in these languages. It also has strong support for object-oriented programming, which is familiar to many developers.
2. Strong Documentation: Google has put a lot of effort into Dart's documentation, making it easy for developers to find the information they need to get started and solve problems. The language's introduction and documentation are both thorough and clear.
3. High Performance: Dart applications tend to perform well, thanks to features like Just-In-Time (JIT) and Ahead-Of-Time (AOT) compilation. JIT compilation enables hot reloading, which speeds up development, while AOT compilation leads to faster startup times and more efficient execution.
4. Robust Core Libraries: Dart comes with a set of comprehensive core libraries, providing many common functionalities out of the box.
5. Optional Type Annotations: Dart supports optional type annotations, which can help catch errors at compile time rather than runtime.
6. JavaScript Compatibility: Dart can be compiled to JavaScript, which makes it viable for web development.

Cons of Dart:

1. Limited Third-Party Packages: Dart has fewer third-party libraries and packages compared to older, more established languages. This can limit the tools available to developers and increase the time needed to build certain features from scratch.
2. Smaller Community: Dart's community is smaller than those of languages like JavaScript or Python. This can result in less community support and fewer opportunities for learning from others' experiences. It also means that fewer third-party tools and libraries are being developed for the language.

JS Pros:

• Fast - for the end user: Javascript runs on client-side, it does not need the server's support for execution, which speeds up application. As the script is executed on the user’s computer, depending on the task, the results are completed almost instantly. For example, you can validate any user input before sending a request to the server. This reduces load on the server.‍
• Simplicity: JavaScript is relatively simple to learn and implement. It uses the DOM model that provides plenty of pre-written functionality to the various objects on pages making it a breeze to develop a script to solve a custom purpose.‍
• Popularity: This is one of the most commonly used languages for web development. It is a major part of every functioning website. JavaScript is seen as a very powerful tool that even the biggest websites in the world utilize; for example, Amazon and Google. Due to its ever-rising popularity, it is easier than ever to learn this language online through various courses.‍
• Speed: Another major factor for any web development language is how fast it can run on any supporting browser. Luckily, JavaScript is a client-side language which means that for the page to load and run, the system does not have to ping the server. Instead, the client already has access to all the scripting that is required to run the webpage.‍
• Updates: Since the advent of ECMAScript 5 (the scripting specification that JavaScript relies on), ECMA International has been dedicated to updating JavaScript annually. So far, we have received browser support for ES6 in 2017. ECMAScript 2022 (ES13) is a new JavaScript standard released in June 2022‍
• Cross-platform development: Cross-platform frameworks have a significant advantage over native development - they allow you to build apps for different platforms using the same technology - mostly one of the popular JavaScript frameworks/libraries (Ionic, React Native).

JS Cons:

• Client Side Security: JavaScript is explicitly added to web pages and client browsers, it can exploit the user's system, so malicious code can be executed on the client machine. Because of this, some people choose to disable JavaScript entirely
• Browser Support: JavaScript is sometimes interpreted differently by different browsers. Different layout engines may render Javascript differently resulting in inconsistency in terms of functionality and interface. Most of the JavaScript depends on the manipulation of Browsers DOM elements. And, different browsers give different types of access to objects, specifically Internet Explorer.
• More and better Competitor: JavaScript is a very old scripting language running on the machines and there are other frameworks/libraries which are doing the same thing in place of it (ex. Angular, ReactJS, JQuery) in a better and easy way.
• Cross-browser support: Even though JS is used worldwide, every browser runs it differently. This means that whenever the script runs, it will be interpreted differently depending on which browser is in use. JavaScript is usually interpreted differently by different browsers. This makes it somewhat complex to read and write cross-browser code. If the error occurs in the JavaScript, it can stop rendering the whole website. Browsers are extremely tolerant of JavaScript errors.
• Anyone can view JavaScript code: One of the problems or disadvantages in JavaScript is that the code is always visible to everyone.
  

How execution starts in Dart Vs JS

main() in Dart

The main() function is a top-level function in Dart that initiates the execution of the program. It is the Dart’s most important and crucial feature. In a program, the main() function can only be used once.
The main() function is responsible for all kinds of execution, including user-defined statements, functions, and libraries.
You must have exactly one main() function in your program.
Return type of main() is mostly void and it accepts optional List<String> parameters for command line arguments. Return of main() function can also be Future<void> when we want to perform some asynchronous operation from inside of main(). 
In the following example, we write a Dart application, main.dart, with main() the function

void main() {
	print('Hello Dart');
}

Output: 
Hello Dart

JavaScript execution:

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in.

// trying to access before declaration
console.log("Hello ", language) 

const language = "Javascript"

// accessing after declaration
console.log("Hello ", language)

Output: 
Hello null
Hello Javascript

Everything in JavaScript happens inside an "Execution Context”. There are two phases of JavaScript execution context:

1. Creation phase: In this phase, the JavaScript engine creates the execution context and sets up the script's environment. It determines the values of variables and functions and sets up the scope chain for the execution context.‍
2. Execution phase: In this phase, the JavaScript engine executes the code in the execution context. It processes any statements or expressions in the script and evaluates any function calls.

In the next blog, we will be covering:

• Importance of OOPs in both languages 
• Async programming

Stay tuned!