DEV Community: Ambush3

Things That Make TypeScript Great

Ambush3 — Thu, 27 Apr 2023 12:28:46 +0000

TypeScript is a popular programming language developed by Microsoft that adds optional static typing and other features to JavaScript. It's becoming increasingly popular for its ability to catch common errors and improve code readability and maintainability. Here are some of the things I learned about TypeScript, and some things that make it a great tool to use:

TypeScript is a superset of JavaScript.

One of the main benefits of TypeScript is that it's a superset of JavaScript, meaning that any valid JavaScript code is also valid TypeScript code. This makes it easy to get started with TypeScript if you already have experience with JavaScript.

TypeScript adds static typing.

One of the key features of TypeScript is its support for static typing. By adding type annotations to your code, you can catch errors at compile time instead of at runtime. This can help you write more robust and maintainable code.

TypeScript has a powerful type system.

TypeScript's type system is much more powerful than JavaScript's. It includes support for union types, intersection types, generics, and more. This can make it easier to write code that is both flexible and type-safe.

TypeScript can help you catch errors earlier.

Because TypeScript is a statically typed language, it can catch errors earlier in the development process. This can save you time and effort by preventing errors from propagating throughout your codebase.

TypeScript can improve code readability and maintainability.

By adding type annotations to your code, you can make it more clear and understandable. This can make it easier for other developers to work with your code and can improve its maintainability over time.

TypeScript integrates well with popular frameworks.

TypeScript has good integration with popular frameworks like React, Angular, and Vue. This can make it easier to write type-safe code in these frameworks and take advantage of TypeScript's powerful features.

Overall, TypeScript is a powerful programming language that can help you write more robust and maintainable code. By adding static typing and other features to JavaScript, it can catch errors earlier in the development process and improve code readability and maintainability. If you haven't already, it's definitely worth checking out TypeScript and seeing how it can help you improve your code.

Converting our Backbone.js Admin Dashboard to Vue, and how great it was.

Ambush3 — Mon, 20 Mar 2023 16:13:09 +0000

As our web application grew in complexity, we recognized the importance of using modern and efficient frameworks to improve the user experience and overall performance. Vue.js, a progressive JavaScript framework that allows developers to build scalable and maintainable applications with ease, was gaining popularity at the time. In this blog post, we discussed the process of converting our Admin Dashboard Page from Backbone.js/JavaScript to Vue.js/Vuetify and the benefits that came with it.

Backbone.js had been a popular framework for building single-page applications, but it had some limitations, especially when it came to scaling and performance. Vue.js provided a more flexible and modular approach to building web applications. By using Vue.js, I was able to easily break down our application into smaller components, making it easier to maintain and scale.

The first step in converting the Admin Dashboard Page from Backbone.js to Vue.js was to understand the structure of our current application. I needed to identify the different components and functionalities of the page and create a plan for how we would migrate them to Vue.js. I made sure to have a solid understanding of Vue.js and its various components, such as templates, components, and directives.

Once we had a plan in place, I started migrating our code. I began by adding Vue.js templates, which involved gradually replacing the Backbone.js views with Vue.js components. I also replaced the existing Backbone.js models and collections with Vue.js data objects, which I was able to do easily using Vue.js data properties.

One of the biggest benefits I experienced from using Vue.js was its ability to create reusable components, which saved time and effort in the long run. With Vue.js, I was able to easily create custom components and reuse them throughout our application, significantly reducing our development time.

Another benefit of Vue.js was its integration with Vuetify, a popular UI component library that provided us with a wide range of ready-to-use components. By using Vuetify, I was able to easily create a consistent and visually appealing interface for our Admin Dashboard Page, without the need for custom CSS.

In conclusion, the conversion from Backbone.js to Vue.js/Vuetify brought significant benefits, such as improved scalability, maintainability, and performance. Though it took some effort and planning to make the switch, the long-term benefits made it well worth it. With Vue.js and Vuetify, I was able to create a more efficient and user-friendly application that benefited both our users and our development team.

MVC Architecture Explained

Ambush3 — Fri, 19 Aug 2022 01:13:00 +0000

What is MVC? What is its purpose?

Created in 1979, applications started to become more complex and people wanted to find new ways of creating applications fast, organized, and easier. Through MVC, such things are possible.

MVC is an architectural design pattern.
Through separation of concerns, we can improve application organization by using MVC. MVC breaks down to three components: Model, View, and Controller.
It doesn't belong to a specific programming language or framework.
Instead, it's just an architecture that can be used to create any kind of application in all sorts of languages and frameworks. Such as Rails, Django, Laravel, AngularJS, and CakePHP, are just some of frameworks that use the MVC architecture.

It's purpose is to separate the different aspects of the application. Input logic, business logic, and the GUI.
The logic belongs in the model, the GUI belongs in the view, and input logic belongs in the controller. This separation helps with the comlexity when you build an application by enabling you to focus on just on aspect at a time.

Some of the benefits of MVC include:

Fast
Multiple developers can collaborate and work together
Search Engine Optimization (SEO) friendly
Reusability - The same or similar view in your application maybe refactored for another application but with different data because the view is only handling how the data is being displayed.
Scalability - You can actually upgrade the hardware running the DB without other components being affected.
Extendibility - You can make changes to one, or fix bugs on one component, without messing up the other.
Simultaneous Development - Working parallel on different components without blocking or affecting one another.

Some of the disadvantages of MVC include:

Complexity - The framework navigation can be complex because it introduces new layers of abstraction.
Multiple technologies - Through MVC a lot of frameworks and languages can be introduced, which can be a bit of a burden to some developers.
Lots of code to maintain inside of the controller
Strict rules on the methods

The Design of MVC

Like I stated before, MVC has three components called Model, View, and Controller.
Each component plays an important role in the application development.

Model is responsible for managing the data of the application. It receives user input from the controller.
It adds and and retrieves items from the DB, processing data from or to the DB.

View means the presentation of the model in a certain format.
It is the only thing the user ever sees. Most of the time it only speaks with the controller. There is no logic or database that you can see in the view. The view is solely for user interaction and everything behind the scenes is done in the Controller and the Model.

Controller responds to the users input and performs interactions on the data model objects.

It processes the GET/POST/PUT/DELETE requests. It acts as a middle man to take information from the user, process the information, and talks to the DB if it needs to. The controller speaks to the view, and explains the presentation to the user(view).

New Features Introduced from ES2022

Ambush3 — Fri, 08 Jul 2022 13:29:35 +0000

As JavaScript keeps involving every year with ECMAScript specifications being released every year since 2015.
Here are a 4 new features coming from ES2022 that you may find useful.

1. Top Level Await

The await keyword previously couldn’t be used outside the async box. Now we can use await without async.

Top-level await enables modules to act as big async functions: With top-level await, ECMAScript Modules (ESM) can await resources, causing other modules who import them to wait before they start evaluating their body.

An example of this:

2. Error Cause

Errors help us identify the unexpected behavior our applications may produce when things don't go the way they are planned, and help us react accordingly.
Sometimes however, it is hard to determine the root cause of the nested errors, and how to handle them properly.

But now, we can pass the object {cause: err} to the Error constructor to
to show us what caused the error to happen:

3. RegExp match indices with the d flag

Regular expression matches are patterns that are used to find certain character combinations in strings.
Using String.matchAll and RegExp.exec, we can return a list of matches:

RegExp.exec will deliver individual results. String.matchAll will return an iterator that can be used to iterate over all the matches.

Thanks to ES2022, we can now use the d flag to specify starting and ending indices of the matches in the RegExp result:

4. .at() method for arrays.

Instead of slicing the array and getting its length until we get what we want. This feature will help you get what you want in a line of code. Perfect for readability and less code.

It provides an easy access to any index of an array or string, either positive or negative:

Working with JavaScript Arrays Pt. 3

Ambush3 — Sun, 05 Jun 2022 14:28:47 +0000

Often in JavaScript you'll come across big long strings, that you'll more than likely want to separate certain items out into a more useful form, so then you can display them differently. Like a table for instance.

To do such an action, we can use the method, split().
Split takes a single parameter, which is the character you want to separate the string at, puts these substrings into an array, then returns the array.
Let's play around with it.

1. First we create a string.

2. Next, we'll split it at every comma.

3. Lastly, we can find the length of the new array, and receive some items from it.

4. You can do the opposite of .split(), by using the .join() method.

5. One of the other ways of converting an array to a string, is using the *.toString()*** method.

The .toString() method is more simple than the .join() method. It doesn't take a parameter. But, it is more limiting to use.
With the .join() method, you can specify different separators, whereas with .toString() method, it always uses a comma.

Working with JavaScript Arrays Pt. 2

Ambush3 — Sun, 05 Jun 2022 14:26:06 +0000

In part 1 of JavaScript Arrays, we learned how to create arrays, finding the arrays length, and then accessing array items.

In part 2, we'll look at finding items in the array, adding items, removing items, and accessing every item.

Finding Items in An Array

With arrays you can find the index of a particular item, using the*** indexOf() ***method. This takes an item as an argument and returns the index location, or, if the item doesn't exist. It returns a -1.

For instance:

but if we search for an item that does not exist, we would get something like this instead:

With the index.Of() method, it excepts a value as its parameter. This is perfect for finding the index in arrays of primitive types (strings, numbers, or boolean).

Whereas with the findIndex() method, it expects a callback as first parameter. So we should use that if we need the index in arrays with non-primitive types (e.g. objects).

Example of the findIndex() method:

Adding Items to The Array

To add one or more items to an array, we use the push() method:

Say if we wanted to get the length of the new array, which means you're checking for the amount of items in the array. We would do something like this:

What if you wanted to add an item at the start of array, then we use the unshift() method:

Removing Items in an Array

The pop() method removes the last element from an array, and returns that element. This method actually changes the length of the array:

The **shift() **method takes an item from the end of the array and removes it:

Say if you know the index of an item, and you want to remove said item, you can use the splice() method:

Accessing Every Array Item

There will be many times you'll want to access every item in the array. To do this, you can use the for...of statement:

Sometimes you'll want to make a new array with it containing the new changed items.
You can do this using the map() method.
Below, our function will take each element and multiply it by 3, and create a new array.

We created a function to the map(). Map will call the function once for each item in the array, passing in it, the item. It then will add the return value from each function call to a new array, and then returns the new array at the end.

Sometimes we'll want to create a new array containing items only from the original array that fall under a given criteria.
Below we will be using filter() on fruit. Filtering through the array to find the items that consist of 6 characters or more.

Just like map(), filter() method is given a function, and filter() calls the function for every item in the array, passing in the item. If the function returns *** true***, then the item is added to the new array.

In the next blog post (pt 3), we'll end with looking at converting strings and arrays.

Working with JavaScript Arrays Pt.1

Ambush3 — Sun, 05 Jun 2022 14:21:04 +0000

Knowing about Arrays are one of the most important skills you can have in a programming language, especially for one learning JavaScript.

We'll look at how with arrays, we can retrieve, add, and remove items stored in an array.

Arrays are used to store a list of data items under a single variable name.
Usually described as list-like objects, they are objects that contain multiple values stored in a list.
Array objects are stored in variables and then be used in the same way as any other type of value. However, we can access each value inside the list individually.

Arrays can be useful in such examples as if you had a dresser, and each drawer had different clothing items, and you wanted to access which drawer had what certain items.
Another example would be if you wanted to find the many different prices of items, and wanted to send an invoice while adding up the prices together and print out the total together.

Creating Arrays

Suppose we wanted to store an array that had items that made up a skateboard:

Which would show you each of the items inside of the variable of skateboard.

Not only can we store strings, such as what we did above, but we can also store other data types such as numbers, objects, and even other arrays.
We can even mix other data types in a single array.
Such an example:

Finding the Arrays Length

By using the length property, we can find the length of the array.
If wanted to find the length of the array called food, it would look something like this:

As you see, there are 5 items inside the array of food, so 5 would be logged to the console.

Accessing Array Items

You would think by looking at an array, that the items index would start with 1, but in fact, all arrays start with the item index of 0, with the second item being 1, and so on.
Using bracket notation we can access the item index of a particular item in the array.

Say if we wanted to change the item inside of the array pop, we can do something like this.

Here we change the first item, which is at the index of 0, to rock n rye.

In the next post, I'll talk about how to find items in an array, adding items, removing items, and accessing every item.