JavaScript

 What is JavaScript?

What Can you do with it?

Where does JavaScript code run?

Difference between JavaScript and ECMA Script ?

 What is JavaScript?

One of the most popular scripting languages used by most popular companies

What Can you do with it?

In past JavaScript used in browsers to build interactive web pages as toy language .

Today we have huge community support and Industry contributions (FB,Google..)

Used to create full blown Webs, Mobile apps, real time networking apps, command line tools , games.

Where does JavaScript code run?

Originally designed to run in Browsers. So all browsers has JavaScript Engine - execute JavaScript code.

JavaScript engines in FireFox -> SpiderMonkey , Chrome -> V8

 In 2009 --> Brian Doll

Took the open source JavaScript engine from Chrome and embedded inside C++ program. --> Node

With this we can run JavaScript outside Browser

Summary 

JavaScript can be run inside Browser or Node.

Difference between JavaScript and ECMA Script ?

ECMA - Specification - define standard ( European Computer Manufacturers Association )

JavaScript is the language - which confirms this ECMA specification.

First Spec released on 1997 then after 2015,2016.... 

1997 - v1

2015 - ES2015/ES6

Let's try JavaScript in Browser 

Open browser , click anywhere and go to Inspect --> dev tools

write

> console.log('Hello World');

Press Enter

Hello World

> 2+2

< 4

Flutter

 

What is Flutter

 

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

https://flutter.dev/

 

Original author(s)	Google
Developer(s)	Google and community
Initial release	Alpha (v0.0.6) / May 12, 2017; 7 years ago[1]
Stable release	3.22.0[2]  / 14 May 2024; 2 months ago
Repository	github.com/flutter/flutter
Written in	C, C++, Dart[3]
Platform	Android, iOS, Google Fuchsia, Web platform, Linux, macOS and Windows
Type	Application framework
License	New BSD License
Website	flutter.dev

 

https://en.wikipedia.org/wiki/Flutter_(software)

 

 

Install Flutter

https://docs.flutter.dev/get-started/install

Follow the link and get the installation kit which is suitable for your developemnt with respect to OS.

 Widows

https://docs.flutter.dev/get-started/install/windows

 

Use recommended Android

https://docs.flutter.dev/get-started/install/windows/mobile

Follow the instructions in the given page

system requirements

 

Hardware requirements

 

Requirement	Minimum	Recommended
x86_64 CPU Cores	4	8
Memory in GB	8	16
Display resolution in pixels	WXGA (1366 x 768)	FHD (1920 x 1080)
Free disk space in GB	11.0	60.0

 

Software requirements

Note: you do not need to install DART separately as Flutter sdk include full DART sdk.

Operating system

1.       64-bit version of Microsoft Windows 10 or later.

2.       Windows should include the required Windows PowerShell 5 or later

Development tools

·       Git for Windows 2.27 or later to manage source code.

·       Android Studio 2023.2.1 (Iguana) or later to debug and compile Java or Kotlin code for Android. Flutter requires the full version of Android Studio.

Configure a text editor or IDE

• Visual Studio Code 1.77 or later with the Flutter extension for VS Code.
• Android Studio 2023.2.1 (Iguana) or later with the Flutter plugin for IntelliJ.
• IntelliJ IDEA 2023.2 or later with the Flutter plugin for IntelliJ.

 

Recommended

The Flutter team recommends installing Visual Studio Code 1.77 or later and the Flutter extension for VS Code. This combination simplifies installing the Flutter SDK.

 

Install the Flutter SDK

Follow the guide on website.

https://docs.flutter.dev/get-started/install/windows/mobile#development-tools

You have two options

1. Use VS Code to install
2. Down Flutter and install manually

Important points

1.       Install VS code with Flutter extension for VS Code.

2.       Configure the Android toolchain in Android Studio

3.       Configure your target Android device

a.       Virtual Device

b.       Physical Device

4.       Agree to Android Licenses

5.       Check your flutter development set up

a.       Run Fluter doctor with below command

b.       PS C:> flutter doctor

6.       Troubleshoot Flutter doctor issues

a.       Run Flutter doctor with verbose with below command

b.       PS C:> flutter doctor -v

 

Start developing Android on Windows apps with Flutter

Follow the below links in Flutter documentation

• Learn how to write your first Flutter app  ( https://docs.flutter.dev/get-started/codelab)
• First week experience of Flutter ( https://docs.flutter.dev/get-started/fwe)

 

Manage your Flutter SDK

To learn more about managing your Flutter SDK install, consult the following resources.

• Upgrade Flutter (https://docs.flutter.dev/release/upgrade)
• Add Web debugging tools (https://docs.flutter.dev/platform-integration/web/install-web/install-web-from-android-on-windows)
• Add Windows desktop compilation tools (https://docs.flutter.dev/get-started/install/windows/mobile#development-tools)
• Uninstall Flutter ( https://docs.flutter.dev/get-started/uninstall?tab=Windows)

Flutter Doctor Issues And Solutions

Error in Running Flutter Project

 

C:\Project\MyProject\Waste\1>flutter create app_1

Creating project app_1...

Resolving dependencies in `app_1`... (1.4s)

Downloading packages...

Got dependencies in `app_1`.

Wrote 129 files.

 

All done!

You can find general documentation for Flutter at: https://docs.flutter.dev/

Detailed API documentation is available at: https://api.flutter.dev/

If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

 

In order to run your application, type:

 

  $ cd app_1

  $ flutter run

 

Your application code is in app_1\lib\main.dart.

 

 

C:\Project\MyProject\Waste\1>flutter run

Error: No pubspec.yaml file found.

This command should be run from the root of your Flutter project.

 

C:\Project\MyProject\Waste\1>cd  app_1

 

C:\Project\MyProject\Waste\1\app_1>flutter run

Connected devices:

Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3880]

Chrome (web)      • chrome  • web-javascript • Google Chrome 127.0.6533.73

Edge (web)        • edge    • web-javascript • Microsoft Edge 127.0.2651.74

[1]: Windows (windows)

[2]: Chrome (chrome)

[3]: Edge (edge)

Please choose one (or "q" to quit): 1

Launching lib\main.dart on Windows in debug mode...

Error: Unable to find suitable Visual Studio toolchain. Please run `flutter doctor` for

more details.

 

C:\Project\MyProject\Waste\1\app_1>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3880],

    locale en-US)

[√] Windows Version (Installed version of Windows is version 10 or higher)

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)

    X cmdline-tools component is missing

      Run `path/to/sdkmanager --install "cmdline-tools;latest"`

      See https://developer.android.com/studio/command-line for more details.

    X Android license status unknown.

      Run `flutter doctor --android-licenses` to accept the SDK licenses.

      See https://flutter.dev/docs/get-started/install/windows#android-setup for more

      details.

[√] Chrome - develop for the web

[X] Visual Studio - develop Windows apps

    X Visual Studio not installed; this is necessary to develop Windows apps.

      Download at https://visualstudio.microsoft.com/downloads/.

      Please install the "Desktop development with C++" workload, including all of its

      default components

[√] Android Studio (version 2023.2)

[√] VS Code, 64-bit edition (version 1.88.1)

[√] Connected device (3 available)

[√] Network resources

 

! Doctor found issues in 2 categories.

 

 

1.      cmdline-tools component is missing

 

When you run Flutter doctor

Below is the Output

C:\Project\MyProject\Waste\1\app_1>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3880],

    locale en-US)

[√] Windows Version (Installed version of Windows is version 10 or higher)

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)

    X cmdline-tools component is missing

      Run `path/to/sdkmanager --install "cmdline-tools;latest"`

      See https://developer.android.com/studio/command-line for more details.

    X Android license status unknown.

      Run `flutter doctor --android-licenses` to accept the SDK licenses.

      See https://flutter.dev/docs/get-started/install/windows#android-setup for more

      details.

[√] Chrome - develop for the web

[X] Visual Studio - develop Windows apps

    X Visual Studio not installed; this is necessary to develop Windows apps.

      Download at https://visualstudio.microsoft.com/downloads/.

      Please install the "Desktop development with C++" workload, including all of its

      default components

[√] Android Studio (version 2023.2)

[√] VS Code, 64-bit edition (version 1.88.1)

[√] Connected device (3 available)

[√] Network resources

 

! Doctor found issues in 2 categories.

 

 

 

Resolve First Problem: Android Command Line tool

Android toolchain - develop for Android devices (Android SDK version 35.0.0)

    X cmdline-tools component is missing

      Run `path/to/sdkmanager --install "cmdline-tools;latest"`

      See https://developer.android.com/studio/command-line for more details.

 

Solution

https://stackoverflow.com/questions/68236007/i-am-getting-error-cmdline-tools-component-is-missing-after-installing-flutter

The solution for me was opening Android Studio and going to SDK Manager, switch to the SDK Tools tab and check Android SDK Command-line Tools (latest).

 

Don't forget to add to your PATH the tools and platform-tools folder that are inside your SDK.

Eg: Open Edit Environment PATH variables and add

1.     First Path is path for Flutter SDK

2.     Other two are for the platform

C:\Users\Gest\dev\flutter\flutter\bin

C:\Android\Sdk\platform-tools

C:\Android\Sdk\platforms

 

2.      Accept Licenses

After resolving above issue, Now let’s run Flutter doctor again

You will see Next issue

Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

 

C:\Project\MyProject\Waste\1\app_1>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[√] Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.22631.3880], locale en-US)

[√] Windows Version (Installed version of Windows is version 10 or higher)

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)

    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[√] Chrome - develop for the web

[X] Visual Studio - develop Windows apps

    X Visual Studio not installed; this is necessary to develop Windows apps.

      Download at https://visualstudio.microsoft.com/downloads/.

      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 2023.2)

[√] VS Code, 64-bit edition (version 1.88.1)

[√] Connected device (3 available)

[√] Network resources

 

! Doctor found issues in 2 categories.

 

Solution

Run Accept license command

flutter doctor --android-licenses  and Type “y” for all.

You will finally see

Accept? (y/N): y

All SDK package licenses accepted

 

Flutter , Angular and React

 

Flutter

1.       Google created.

2.       Open source Flutter software development framework

3.       create mobile applications for iOS and Android from a single Dart codebase.

4.       Flutter utilizes Dart, object-oriented programming language optimized specifically for developing mobile apps and web apps

a.       Dart code is compiled ahead of time into native machine code using the Flutter compiler, enabling apps to achieve exceptionally high performance.

5.       A standout feature of Flutter is its incredibly fast hot reload functionality, which allows developers to experiment rapidly and visualize changes in UI almost instantly without losing the application state.

6.       create mobile app interfaces reflecting Google's modern design principles using Material Design and Cupertino widgets.

7.       Flutter has a widget binding, namely InheritedWidget. It binds two or more widgets together (one provider and some consumers) so that whenever one updates, all of its dependencies are forced to update too.

8.       Popular apps built using Flutter include Hamilton Broadway Musical, Google Ads, eBay Motors, Groupon, Reflectly meditation app, etc.

 

Pros

 

• ·       Single Dart codebase to build iOS and Android apps
• ·       Stateful hot reload enables instant visual updates without recompilation
• ·       Excellent performance powered by Dart's compiled machine code
• ·       Extensive catalog of customizable Material and Cupertino widgets
• ·       Increased software development speed and iteration facilitated by features such as hot reloading
• ·       Expressive and easy-to-learn Dart programming language

Cons

• ·       As a relatively new SDK, it has a smaller ecosystem of libraries and tools than older alternatives.
• ·       Restricted access to some exclusive platform-specific APIs and features
• ·       Primarily focused only on mobile app development, it is less suitable for web
• ·       Very few developers know the Dart programming language, leading to a talent shortage
• ·       Architectural changes and breaking updates are likely as the framework matures 

Angular

1.       by Google

2.       web application development framework

3.       Angular apps are written in TypeScript, an enhanced version of JavaScript that brings optional typing and other improvements aimed at large-scale apps. 

4.       The framework uses an MVC architecture style to separate an app's concerns into distinct Models, Views, and Controller components.

5.       two-way data binding, which automatically syncs data between model and view

6.       dependency injection to manage relationships between various app modules.

7.       Popular Angular sites include PayPal, NBC, UPS, Lego, and Forbes.

 

Pros

• ·       The full-featured framework integrates a wide range of web functions
• ·       MVC architecture enables the separation of concerns
• ·       Powerful data binding(two-way) synchronizes model and view components
• ·       Extensive toolbox including testing suites, lint test
• ·       High focus on reusability and maintainability
• ·       Simplifies form building and form validation
• ·       The large community provides many reusable libraries
• Cons
• ·       Steep learning curve due to the vast API surface area
• ·       More complex compared to lighter-weight libraries like React
• ·       Bulkier apps due to a large framework codebase
• ·       Longer bootstrap and rendering times result from complexity
• ·       Demands strong TypeScript knowledge
• ·       Upgrades between versions may require significant rework

React

1.       by Facebook 

2.       open-source JavaScript front-end library 

3.       use to build interactive user interfaces and web application front-ends

4.       React aims to simplify the development of complex, changing data flows in web UIs

5.       React builds on basic HTML/CSS/JS to provide a declarative component model. 

a.       UIs are broken into encapsulated, reusable pieces called components. 

6.       Components use a templating language called JSX that resembles HTML to render content, can have a local state, and update dynamically in response to data changes.

7.       Events triggered from one component bubble up to notify parent components automatically through a unidirectional data flow paradigm. ( first the model state is updated, and then it renders the change in the UI element. )

8.       Virtual DOM tracking of changes combined with selectively re-rendering only components that change enables very high performance compared to raw JavaScript ops.

a.       This helps power data-intensive apps like Facebook and Instagram that show constantly updating content flows.

9.       Popular Apps

Facebook, Airbnb, Uber, Netflix, Instagram, WhatsApp, Dropbox etc.

 

 

Pros

• ·       Promotes reusability via encapsulated components
• ·       Components offer separation of concerns
• ·       Virtual DOM provides excellent performance gains
• ·       Unidirectional data flow simplifies data handling logic
• ·       The large open-source ecosystem of reusable React component libraries
• ·       Easy integration into existing codebases
• ·       The growing developer community provides abundant support resources

Cons

• ·       Only handles the view layer, not a complete framework
• ·       Many auxiliary libraries are needed for complex apps (routing, state management)
• ·       Code complexity from JSX and nested component trees
• ·       Steep learning curve mastering inner workings like state and lifecycle
• ·       Rapid evolution means breaking API changes, which is not uncommon
• ·       Less out-of-box project scaffolding sets up

Tech Stack

Flutter uses the Dart programming language and provides its robust widget set for building mobile interfaces. This allows it to compile code into native machine code for excellent performance.

Angular utilizes TypeScript, a typed superset of JavaScript and HTML and CSS, for building responsive web applications. It compiles down to plain JavaScript code to run in browsers.

React Native is based on the React JavaScript library and uses the same paradigm of components. It compiles code to native UI components while communicating with native code through a JavaScript bridge.

 

Learning Curve

Flutter offers a moderately easy learning curve for developers with prior experience in object-oriented code and mobile development. Its declarative widget-based approach is intuitive.

Given the complexity of its technology stack, Angular has a rather steep learning curve, including TypeScript, components, directives, services, dependency injection, and hierarchical injectors.

React Native is moderately easy to get started with for JavaScript developers who understand React concepts like components, states, and props. However, bridging to native code can have a learning curve

 

Flutter vs Angular vs React: The Ultimate Showdown [2024] (simplilearn.com)

https://www.javatpoint.com/angular-vs-react

https://stackoverflow.com/questions/52590759/does-flutter-have-data-binding