Javascript vs Typescript: The Battle of Frontend Technologies.

Introduction
I have always been fascinated about how things work, imagine my surprise when i started learning about frontend technologies and development. I got to see how websites and applications were built from start to near finish. These websites and applications looked so intricate, interactive and virtually stunning, knowing that they were just 'bare bones' before they got to that point still amazes me. We will be looking at frontend technologies and we will be juxtaposing two of those technologies for better understanding. Before that:

Prerequisites
You will need knowledge of the following concepts:

• how the web works.

• HTML

• CSS

• Basic Javascript

What is a Frontend Technology?
Frontend technology are those tools, frameworks, libraries, and languages used to create the user interface (UI) and user experience (UX) of a web application or website. This covers everything that users interact with directly in their web browsers, including layouts, designs, graphics, text, and interactive elements.
Here are a list of those various frontend technologies and a brief description about them:

Languages

1. HTML (Hyper Text Markup Language): is the most basic building block of the Web. It is a markup language used to define the meaning and structure of web content.  

2. CSS (Cascading Style Sheets): Used to describe the presentation and layout of web pages. It describes how elements or content should be rendered on screen, on paper, in speech, or on other media.

3. JavaScript: A programming language that is used to add interactivity to a web application or website.

4. TypeScript: A superset of JavaScript that adds static typing to the language, improving code quality and maintainability.

Frameworks and Libraries

1. React : A JavaScript library for building user interfaces, maintained by Facebook.

2. Angular: A platform and framework for building single-page client applications using HTML and TypeScript, maintained by Google.

3. Vue.js: A progressive JavaScript framework used to build user interfaces and single-page applications.

4. Svelte: A modern JavaScript framework that compiles components into highly efficient imperative code that directly manipulates the DOM.

5. Ember.js: A framework for creating ambitious web applications by providing a comprehensive solution that includes everything from routing to state management.

6. Backbone.js: A lightweight JavaScript library that provides the minimal structure needed for web applications by including models, views, collections, and routers.

CSS Preprocessors and Frameworks

1. Sass (Syntactically Awesome Stylesheets): A CSS preprocessor that allows you to use variables, nested rules, mixins, and more, to keep your stylesheets well-organized and easy to maintain.

2. Less: Another CSS preprocessor that extends CSS with dynamic behavior such as variables, mixins, and functions.

3. Bootstrap: A popular CSS framework that provides a collection of CSS and JavaScript tools for creating responsive and mobile-first web projects.

4. Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.

5. Bulma: A modern CSS framework based on Flexbox.

Build Tools and Module Bundlers

1. Webpack: A module bundler that takes modules with dependencies and generates static assets representing those modules.

2. Gulp: A task runner that uses Node.js streams to automate tasks such as minification, compilation, and testing.

3. Grunt: A JavaScript task runner that automates repetitive tasks like minification, compilation, and linting.

4. Parcel: A fast, zero-configuration web application bundler.

Package Managers

1. npm (Node Package Manager):The default package manager for Node.js, used to install and manage JavaScript packages.

2. Yarn: A package manager that doubles down as project manager, used for managing project dependencies.

Version Control

1. Git: A distributed version control system for tracking changes in source code during software development.

2. GitHub: A web-based platform that uses Git for version control and provides a collaborative environment for developers.

Testing Tools

1. Jest: A delightful JavaScript testing framework with a focus on simplicity.

2. Mocha: A JavaScript test framework running on Node.js, featuring browser support, asynchronous testing, and more.

3. Chai: A BDD/TDD assertion library for Node.js and the browser.

4. Cypress: A next-generation front end testing tool built for the modern web.

5. Selenium: A portable framework for testing web applications.

Code Editors and IDEs

1. Visual Studio Code: A free, open-source code editor developed by Microsoft.

2. Sublime Text: A sophisticated text editor for code, markup, and prose.

3. Atom: A hackable text editor for the 21st century, developed by GitHub.

4. WebStorm: A powerful IDE for modern JavaScript development by JetBrains.

Understanding and mastering these frontend technologies can significantly enhance your ability to build robust, interactive, and visually appealing web applications. As a beginner, always start with the basics - HTML, CSS, and JavaScript before moving on to more advanced frameworks and tools. Going further, we will be looking at the differences between Javascript and Typescript.

Javascript vs Typescript: A beginner's guide

JavaScript (JS) and TypeScript (TS) are both essential technologies for frontend development. Understanding their similarities and differences is crucial for building robust, interactive, and visually appealing web applications and sites.

What is Javascript?

JavaScript is a programming language that is widely used for web development to create interactive elements within web browsers. It is used to manipulate the DOM, handle events, create animations, and make asynchronous requests (AJAX) to servers. JavaScript is dynamically typed; meaning variable types are determined at runtime, which offers great flexibility but can lead to errors that are hard to debug. For example:

let message = "Hello, world!";
console.log(message);

Advantages:

• Pervasive/Ubiquity: Javascript is supported by all modern web browsers. It can be used on all modern web browsers.

• Community: Javascript has a large community with plenty of libraries and frameworks (like React, Angular, Vue).

• Versatile: Javascript can be used for both client-side and server-side (Node.js) programming.

Disadvantages:

• Error-Prone: Javascript is dynamically typed. Dynamic typing can lead to runtime errors.

• Complexity: As projects grow, maintaining JavaScript code can become complex without proper structure and discipline.

What is Typescript?

TypeScript is a superset of JavaScript that adds static typing and other features to the language. It is designed to develop large applications and transcompiles to JavaScript. TypeScript introduces static types, which allows developers to catch errors at compile-time rather than runtime. For example:

let message: string = "Hello, world!";
console.log(message);

Advantages:

• Type Safety: Catches type-related errors during development, reducing runtime errors.

• Readability: Improves code readability and maintainability with type annotations.

• Tooling: Better support for modern IDEs with autocompletion, refactoring, and navigation.

Disadvantages:

• Learning Curve: Requires learning new concepts if you're coming from JavaScript.

• Compilation: Needs to be compiled to JavaScript, adding an extra build step.

What are the differences between Javascript and Typescript

Typing

JavaScript is dynamically typed which means that the data type of a variable is determined during runtime. This flexibility can sometimes lead to unexpected errors. Conversely, TypeScript is statically typed which ensures that the data type of a variable is determined at compile time, making TypeScript codes safer and less prone to errors. TypeScript sometimes requires explicit type definitions or uses type inference.

let count = "5"; // Javascript-this code is expects a number as a value, but a string is passed, but Javascript has no issues with it because it is a valid code.

let count: number = "5"; // TypeScript-will throw an error because the type is number.

Error checking and handling

JavaScript, as a dynamically typed language, only detects errors at runtime, which can lead to runtime failures that are harder to debug. TypeScript, being a statically typed language, catches errors during the compile time, making it easier to identify and fix issues early in the development cycle.

Compilation

JavaScript code is executed directly by web browsers or Node.js without the need for prior compilation. In contrast, TypeScript code must be compiled into JavaScript before it can be executed, which adds an extra step in the development process while enhancing code reliability and error checking.

Tooling

JavaScript, while powerful, does not inherently provide all the necessary tooling for modern development, as it has evolved developers have created list of tools to improve the development process. TypeScript offers enhanced tooling capabilities such as autocompletion, better tooling, type checking and safety, improved code and more.

Development Experience

JavaScript is faster to write due to less strict rules, and is suitable for quick prototyping. TypeScript on the other hand, may take more time upfront but it results in more robust and maintainable code, especially for large-scale applications.

Use cases

JavaScript is good for quick Prototyping, like when you need to quickly test ideas and build small applications. It is well-suited for small to medium-sized projects due to its simplicity and flexibility. Typescript on the other hand is used for large projects. It is used when working on large codebases where maintainability and readability are key. It is also also used for team projects or in teams, to ensure consistent code quality and prevent type-related bugs. Many modern frameworks like Angular use TypeScript, and using it can enhance the development experience.

My Journey with HNG…

At HNG, React is the Framework(frontend technology)used extensively, React is a Javascript framework that is used to build fast and interactive user interfaces, it is also efficient and flexible. The ability to integrate React with other technologies and frameworks means that it can adapt to a wide range of things, from simple web applications to complex applications. It was first developed by Facebook in 2011.

What is HNG?
HNG is a global internship program that focuses on training young individuals in software development. Participants are given real-world projects to work on and are mentored by industry professionals.

How does the HNG Internship program works?

It is my first experience with HNG and i am exhilarated because i will be challenging myself , so it is both exhilarating and daunting opportunity at the same time. I am also a bit new to React but i have built a couple of things with it. I am looking forward to contributing in no little way to the growth of HNG using the little knowledge i have of React, while also improving on my React skills. I expect to become a part of a team, contribute actively on that team, collaborate with others, build upon my existing knowledge and skills, among other things. Back to how the HNG internship works, To relive your curiosity visit HNG Internship and HNG Hire for more information.

Conclusion

In conclusion, most times we are plagued with making a choice, picking between one thing or the other. For instance, picking between Angular or Vue, Visual Studio code or Sublime text, Javascript or Typescript. I hope what i am about to say next answers one of your questions, both JavaScript and TypeScript have their place in web development. JavaScript is great for its simplicity and flexible nature, making it ideal for small projects and quick prototyping.- While TypeScript with its static typing and enhanced tooling, is better suited for larger, complex projects and team environments. As a beginner, starting with JavaScript provides a solid foundation, and learning TypeScript can be a natural progression to writing more reliable and maintainable code. Does this answer your question? Will you play around with both Javascript and Typescript?