DEV Community: Chidinma Nwosu

Javascript vs Typescript: The Battle of Frontend Technologies.

Chidinma Nwosu — Sat, 29 Jun 2024 11:06:32 +0000

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

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.
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.
JavaScript: A programming language that is used to add interactivity to a web application or website.
TypeScript: A superset of JavaScript that adds static typing to the language, improving code quality and maintainability.

Frameworks and Libraries

React : A JavaScript library for building user interfaces, maintained by Facebook.
Angular: A platform and framework for building single-page client applications using HTML and TypeScript, maintained by Google.
Vue.js: A progressive JavaScript framework used to build user interfaces and single-page applications.
Svelte: A modern JavaScript framework that compiles components into highly efficient imperative code that directly manipulates the DOM.
Ember.js: A framework for creating ambitious web applications by providing a comprehensive solution that includes everything from routing to state management.
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

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.
Less: Another CSS preprocessor that extends CSS with dynamic behavior such as variables, mixins, and functions.
Bootstrap: A popular CSS framework that provides a collection of CSS and JavaScript tools for creating responsive and mobile-first web projects.
Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
Bulma: A modern CSS framework based on Flexbox.

Build Tools and Module Bundlers

Webpack: A module bundler that takes modules with dependencies and generates static assets representing those modules.
Gulp: A task runner that uses Node.js streams to automate tasks such as minification, compilation, and testing.
Grunt: A JavaScript task runner that automates repetitive tasks like minification, compilation, and linting.
Parcel: A fast, zero-configuration web application bundler.

Package Managers

npm (Node Package Manager):The default package manager for Node.js, used to install and manage JavaScript packages.
Yarn: A package manager that doubles down as project manager, used for managing project dependencies.

Version Control

Git: A distributed version control system for tracking changes in source code during software development.
GitHub: A web-based platform that uses Git for version control and provides a collaborative environment for developers.

Testing Tools

Jest: A delightful JavaScript testing framework with a focus on simplicity.
Mocha: A JavaScript test framework running on Node.js, featuring browser support, asynchronous testing, and more.
Chai: A BDD/TDD assertion library for Node.js and the browser.
Cypress: A next-generation front end testing tool built for the modern web.
Selenium: A portable framework for testing web applications.

Code Editors and IDEs

Visual Studio Code: A free, open-source code editor developed by Microsoft.
Sublime Text: A sophisticated text editor for code, markup, and prose.
Atom: A hackable text editor for the 21st century, developed by GitHub.
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?

Navigating Success: Setting up Vue Router in your Project.

Chidinma Nwosu — Fri, 14 Jun 2024 14:42:05 +0000

Introduction
In the ever-growing tech space of today, a seamless navigation experience can either make or break your web application. That is why our journey begins with understanding Vue and the Vue router.

What is Vue ?
Vue also pronounced as 'view', was created by Evan You. Vue is an open-source, Front-end, Javascript framework for building user interfaces and Single Page Applications(SPA). It builds an application on top of HTML, CSS and Javascript.

What is a Vue Router ?
A vue router is the official router for vue.js. It is a guide that transforms a Single Page Application(SPA) into a dynamic multi-page application. It integrates with vue to make building a Single Page Applications(SPA) and navigating through it a walk in the park.

This story follows Chidinma, a passionate front-end developer, as she embarks on a mission to set up a vue router in her latest project.

The Challenge
Staring at the project requirements on my screen; a modern day application with multiple pages and dynamic navigation. The challenge was clear: to set up a single page application with a robust routing system to multiple pages. Without it, users would be lost , unable to explore the different sections of my application seamlessly.

Discovering the solution
In my quest for a solution, I came across the vue router, an official library for vue.js, designed to handle seamless navigation, as explained under the definition of a vue router. The promise of a clean, declarative routing, and the ability to handle nested routes was intriguing! I just knew that this was the key to unlocking the multi-page potential of my project. Now, let us delve into the key features of vue-router i discovered along the way.

What are the key features of the vue router?

There are some key features that vue-router has that makes it unique. These features are:

Nested route mapping : vue-router allows for nested routes, which means you can have routes within routes.
Dynamic routing: it allows you change your applications route on the fly.
Component-based router configuration : it allows you structure your routes in a component-based manner. This makes routing configuration easier to manage as the application grows.
Customizable scroll behavior : it lets you customize the scroll behavior of your application when navigating between routes.
Navigation control :it gives you control over navigation, allowing you to programmatically navigate to different routes in response to user actions.
Route params, Query and Wildcards : it supports route parameters, query parameters, and wildcards, giving you control over how your application responds to different URLs.

Now that we have an idea of what vue is, who founded it, what the vue-router is and some key features of the vue-router, we can now delve into setting up a vue-router in our project.

Step by step implementation

The steps involved in setting up a vue-router in a project is:

Folder/file structure: properly understanding the folder and file structure of our project is important . First, we have a diagrammatic representation of our file structure and secondly, we have an explanation of the structure.

my-vue-project/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── router/
│   │   └── index.js
│   ├── views/
│   │   ├── HomeView.vue
│   │   ├── AboutView.vue
│   │   └── NotFoundView.vue
│   ├── App.vue
│   ├── main.js
│   └── router
│       └── index.js
├── .gitignore
├── babel.config.js
├── jsconfig.json
├── package.json
├── README.md
└── vue.config.js

Explanation of the folder/file structure
A. Root Directory (my-vue-project/): it contain several folders(the forward-slash(/) indicates that it is a folder) and files, as explained below.

node_modules/: Contains all the npm packages installed for the project.
public/: Contains static assets and the main HTML file (index.html).
src/: The source directory where all the Vue components, assets, and configuration files reside.
assets/: For static assets such as images, fonts, etc.
components/: Contains reusable Vue components.
router/: Contains the router configuration file (index.js).
views/: Contains Vue components that are used as views/pages in the application.
App.vue: The root Vue component.
main.js: The entry point of the application where Vue instance is created and mounted.
store/: (If using Vuex) Contains the Vuex store configuration for state management.
.gitignore: Specifies which files and directories should be ignored by Git.
babel.config.js: Babel configuration file.
jsconfig.json: JavaScript configuration file for the project.
package.json: Lists the project's dependencies and scripts.
README.md: A markdown file providing information about the project.
vue.config.js: Optional configuration file for Vue CLI.

2.After creating a vue project(my-vue-project),understanding its folder and file structure. We then install the vue-router using npm, and set up the vue-router in our existing project:

npm install vue-router@latest

3.In our project, we will have a folder called View, it may contain some files(HomeView.vue and AboutView.vue). Additional view files are welcome, as seen in the code below:

<script setup>
// In your folder called View, setup vue components that will be used as view, three files in it(HomeView.vue, AboutView.vue, and NotFoundView.vue)
</script>

<!--HomeView.vue-->
<template>
    <div>
        <h1>Home</h1>
        <p>This is the home page</p>
    </div>
</template>
<!--AboutView.vue-->
<template>
    <div>
        <h1>About</h1>
        <p>This is the about page</p>
    </div>
</template>
<!--NotFoundView.vue-->
<template>
    <div>
        <h1>Not found</h1>
        <p>This is the 404 page</p>
    </div>
</template>

4.In our App.vue, under your src folder, import Router Link and Router View, use them to define your navigation routes.

<script setup>
import {routerLink,routerView} from 'vue-router'
</script>

<!--create a navigation bar with links to the home, about, and not found pages-->
<template>
   <nav>
        <RouterLink to="/">Home</routerLink>
        <RouterLink to="/about">About</routerLink>
        <RouterLink to="/not-found">Not found</routerLink>
    </nav>
    <!-- this is the view where each components will be rendered -->
    <RouterView/>
</template>

5.In our routes folder, under our index.js file, create your router instance by importing createWebHistory and createRouter, putting your routes in an array, making sure each route is an object that contains a path, name, component, and maybe some meta details.

import {createRouter, createWebHistory } from 'vue-router'
import HomeView from './HomeView.vue'

//create a route instance using VueRouter
const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
    {
        path: '/',
        name: 'Home',
        component: HomeView,
        meta: {
            title: 'Home',
            description: 'This is the home page'
        }
    },
      {
        path: '/about',
        name: 'About',
        component:()=>import('./AboutView.vue'),//allows for lazy loading
        meta: { //meta is used for search engine optimization
             title: 'About',
             description: 'This is the about page'
         }
    },
    {
        path: '/:catchAll(.*)',
        name: 'not-found',
        component:()=>import('./NotFoundView.vue'),
        meta: {
            title: 'Not found',
            description: 'This is the 404 page'
        }
    }
]
})

export default router;

You will notice that the AboutView and NotFoundView sections of the route file use a different value for the component option, which differs from the HomeView. Why is that the case?

This is because we are lazy loading these pages. Lazy loading of routes in Vue Router is a technique used to increase the performance of a Vue.js application by splitting the application into smaller chunks that are loaded on demand. Instead of loading all routes upfront, lazy loading loads the JavaScript for a route only when that route is visited. This can significantly reduce the initial load time of the application and improve the user experience, especially for large applications with many routes.

How does lazy loading works?
Lazy loading in Vue Router uses dynamic import statements to load route components asynchronously, as seen in the code example. When a user navigates to a route, the corresponding component is fetched from the server and then rendered.

What is meta, why is it used in routes?
If you look closely at our code example above, you will notice that all our routes have a meta property, Why?

In vue router, the meta property is used to attach metadata to routes, this metadata can be used for various purposes: search engine optimization, authentication, authorization, page titles etc. It simply aids and eases navigation.

6.Finally, in the src folder, under the main.js file, you need to inject your router into your vue instance for it to work.

const app = createApp(App)
app.use(router)
app.mount('#app')

Now the magic of the vue router comes to life, after refreshing the application, with a click we can seamlessly navigate through the HomeView, AboutView and NotFoundView pages of our application, by simply clicking on links or entering URLs such as /, /about, and /not-found(*) in your browser, you can access the respective pages without needing to refresh the application. Thereby enhancing user experience.

Conclusion
In conclusion, keep in mind that this is just a basic setup, it will vary from project to project. Also, vue-router has many other features like nested routes, named routes, and programmatic navigation that is not shown here but you can try on your own, just for fun. For more information, read up on the vue router. You need to realize that the journey of setting up a vue-router involves creating a seamless user experience that guides users through your application effortlessly, always bear this in mind.

Using the vue router, I was able to transform a static project into a dynamic, multi-page application. This story shows that with the right tool, proper understanding of vue, vue router, its key features, folder and file structure of your project, among other things, we can create a seamless navigation experience for a user, through our application. Isn't that wonderful? Would you like to try it out?