Forem: Matheus Palma

I know why you don't use Typescript

Matheus Palma — Tue, 10 May 2022 22:00:18 +0000

Since always software developers face problems of compatibility and performance of their software, the challenge is immense. Because, in addition to the concern with the hardware of the device that the software will run, there are still problems with the OS (Operating System) of the device.

In the development of cross-platform applications, concerns are even greater, as it is necessary to create specific solutions for each OS and hardware. In web development, we find the problems of cross-platform development, devices, operating systems and browsers extremely different.

In current times, when we talk about browsers, these problems are increasingly simple to solve, because the trend is for them to have a gradually more reusable base, an example of this is Chromium-based browsers and software, which share the same code base.

Over the years, technological evolution has become evident, bringing devices with increasingly smaller or giant screens with internet access, that is, that interact with web technologies. We have extremes where it is possible to have access to the same Site from a smart watch with a 1.3-inch display or an 85-inch smart television, notice that we are not only talking about extremely different sizes, but also about accessibility, compatibility, UX and UI.

20 years ago these problems were unimaginable, and there is no doubt about it, as there was no need or possibility to access a Site via watch or television. At that time many people were only concerned about accessing ICQ via Dial-up Internet on a Tube Monitor.

“In my day we programmed in ActionScript inside Netscape“ — some old developer.

And why do we talk so much about compatibility and reuse if we haven't even started talking about TypeScript yet? With the evolution of technology, we have greater complexity within software, the code base of a software is increasingly complex and difficult to maintain, and without a doubt, we need compatibility, standardization, reuse and the organization working together. And this is where TypeScript comes in.

What is TypeScript?

TypeScript is a programming language maintained by Microsoft. It is made up of a superset of JavaScript and adds optional static “typing” to the language.

TypeScript was designed for the development of large applications and “transforms” it all to JavaScript, so that very little performance is lost in exchange for a lot of productivity and organization, in addition to having all JavaScript compatibility, since everything that is “transformed” is nothing but JavaScript.

“What is a JavaScript superset? What is “Typing”?“ — Me, 2015

What is a JavaScript superset?

A JavaScript superset refers to having an incremented or rather tuned JavaScript. You always have the latest version of ECMAScript available, that is, by installing the latest version of TypeScript you will have access to the latest features available in JavaScript, and not least we have a language 100% compatible with JavaScript, regardless of version.

What is “Type” in TypeScript?

“Typing” in programming languages it has the role of identifying “things” in order to facilitate the documentation, organization and identification of data models. And TypeScript is no different, we have the interface implementation, type, decorator and enum, in addition to the class inherited from JavaScript, which has improvements such as extends and implements.

In the example below using interface, we have a function that takes only one parameter of a certain type.

First, let’s define what the “person” object should contain:

Then we create a function that receives the person object, and writes it to the console:

If I try to pass an incompatible parameter, Transpiler/Linter will return a message saying that the parameter is incorrect:

Therefore, we have the possibility to document your code, and when the application is large, this makes all the difference.

TypeScript Resistance

The non-implementation of TypeScript is not only associated with the learning curve, but also because of the fear of breaking something that already works. This was one of the main reasons I didn't start using TypeScript earlier.

When I started to study the topic, more deeply in 2016, specifically when Angular 2 started to adopt it, I found 3 main points not to use TypeScript, and they were:

1. There are alternatives

Flow.js

Flow.js gives you the possibility to check the quality of your code at development time through “typing”.

ReasonML/ReScript (formerly BuckleScript)

ReScript is a language heavily inspired by JavaScript, has many similarities with JavaScript and runs on top of ReasonML, and promises to deliver a high level code. However, it requires knowledge in functional paradigm.

And indeed they are good alternatives, but in my opinion one is too basic and the other too complex, in a way, of course, it varies according to the complexity of the project. Nowadays, there is no doubt that TypeScript is indeed one of the best options for large applications, if not the one with the best cost-benefit ratio.

2. Not compatible with Babel

In fact, in 2016 it was not possible to use TypeScript and Babel together, which made it a risky choice, since thousands of plug-ins existed within Babel, however, this is no longer a problem. Since, we can easily include both tools and this is very good for those who have a JavaScript project and want to gradually migrate to TypeScript.

3. Large existing project

This is a concern for many, but we already know that babel and TypeScript can work together. Furthermore, we know that TypeScript is nothing more than “tuned” JavaScript that “transforms” all code into regular JavaScript.

It means that we can use JavaScript and TypeScript together without any problem. The only thing we need to do is tell the TypeScript/Linter settings that we want them not to apply Type checks inside JavaScript files, so we can migrate all code to TypeScript little by little, right?

Final considerations

The reasons for not using TypeScript scared me in 2016, but I saw many benefits ahead of it, but most of these reasons are no longer valid these days, and maybe some of the reasons I mentioned may have taken you away from TypeScript.

TypeScript can even be considered an optional tool, however it has been considered a necessity, specifically because it brings numerous benefits and few or almost no negative points.

It is important to point out that the organization, standardization and compatibility of all software depends exclusively on the development team, and TypeScript is one of the best options to facilitate all this organization and standardization while maintaining all JavaScript software compatibility.

References

Follow Storyblok and stay updated ;)

Capybara pure CSS ( SCSS )

Matheus Palma — Fri, 27 Sep 2019 11:20:35 +0000

Capybara with pure CSS

Matheus Palma — Mon, 08 Jul 2019 13:11:23 +0000

2 years ago on a frontend meetup, i'm back to home decided to create an capybara with pure CSS

https://codepen.io/mmatheuspalma/pen/ooOQvZ

Async & Await, finally we have the multi-thread in javascript?

Matheus Palma — Tue, 25 Jun 2019 16:36:26 +0000

With the new features of ES5 we can build async functions quickly.

Spoiler: Unfortunately, by the language design, the async and await keywords on JS functions actually don't allow us to do tasks at the same time with multi-threads like the name sound's, actually is the opposite, so we are able to resolve a task and then go to another task. Is more to a Synchronous way.

Let's code!!

First we need to create the function that we need to wait for, this function will check if the number is odd or even, here we can have many possibilities, the point here is to have a Promise function, like we have in the http requests, that wait's for a response from the API.

const isOdd = (value) => {
  return new Promise((resolve, reject) => {
    const isOdd = value % 2 !== 0;

    (isOdd)
      ? resolve(`the number ${value} is odd`)
      : reject(`the number ${value} is even`);
  });
}

At the traditional way, the 'Promise' will be executed, and we get the 'response' value from the Promise by using the 'then' method, imagine that can turn in a infinite cascade if we have a Promise that return's a new Promise.

const allNumbersAreOdd = (number1, number2) => {
  isOdd(number1).then(response => {
    isOdd(number2).then(response => {
      console.log('all numbers are odd');
    }).catch(error => {
      console.log(error);
    });
  }).catch(error => {
    console.log(error);
  });
}

So doing maintenance can be hard, depending on the size of the code.

allNumbersAreOdd(1, 2); // "the number 2 is even"
allNumbersAreOdd(1, 1); // "all numbers are odd"

Using the async feature, we are able to add the keyword await in front of the async functions ( a http request for example or the promise that we create above which is async ), and that allow us to wait for the response of the function before proceed, and using that along with the try & catch we can do the error treatment easily.

async const numberIsOdd = (number) => {
  try {
    const numberIsOdd = await isOdd(number);

    console.log(numberIsOdd);
  } catch (error) {
    console.log(error);
  }  
}

numberIsOdd(5) // "the number 5 is odd"

If we need call more than one promises, is easy
do maintenance compared to the traditional way, because we can treat the errors in the same function

async const allNumbersAreOdd = (number1, number2) => {
  try {
    await isOdd(number1);
    await isOdd(number2);

    console.log('all numbers are odd');
  } catch (error) {
    console.log(error);
  }  
}

allNumbersAreOdd(1, 2); // "the number 2 is even"
allNumbersAreOdd(1, 1); // "all numbers are odd"

Go learn together, (code) => return english;

Matheus Palma — Mon, 24 Jun 2019 01:51:48 +0000

Hi, greetings

I am a senior frontend engineer, and I want to improve my english skills this year, also teach about using javascript and php tools like react, vue, angular, lumen and typescript.

if you can, just help me learn more about English (conversation, verbs and pronunciation).

My native language is portuguese, my english level is A2 accordig to OOPT ( Oxford Online Placement Test )

Graciously,