In one of my previous blogs, I mentioned that every time I start a new project I try to learn new technologies. The first two technologies I’ve started learning that I’ll be using for the Whinst frontend are TypeScript and Next.js. In this article, I’ll tell you what I’ve learned about these technologies. Let’s dive in🏊🏾♂️
Learning TypeScript👨💻
From what I’ve learned in my own words I’d define TypeScript as a language built on top of JavaScript used to extend and enhance its capabilities through static typing which allows developers to add types to data used. By this, I mean when a variable is created its data type is also defined. The code below shows the difference in defining a variable in Typescript and JavaScript.
//JavaScript
let myName = 'Jeff';
//TypeScript
let myName: string;
myName = 'Jeff'
Similarly, functions in TypeScript are also slightly different as compared to JavaScript as the type of parameters and return values have to be defined beforehand. The example below shows two functions in TypeScript and JavaScript.
//JavaScript
function getName(){
let myName = 'Jeff'
return myName
}
//TypeScript
function getName(): string{
let myName: string;
myName = 'Jeff'
return myName;
}
This is just a small sample of what TypeScript is about and how it differs from JavaScript, there is still a whole lot more not covered here.
Learning Next.js🧑💻
In my understanding, I’d define Next.js as a React framework that enhances React thus improving the developer’s experience. It does so by using its many features such as a built-in page routing system, pre-rendering and automatic code splitting.
One feature I found particularly interesting is the pre-rendering. There are two types of pre-rendering, static generation and server-side rendering. static generation generates the HTML at build time and server-side rendering generates HTML on each request. Without going into too much detail these pre-rendering types enable Next.js to generate HTML for each page beforehand instead of it being done completely by the client-side JavaScript thus improving performance. Again this is just simply what Next.js is about, there is a lot more to be covered.
Now that I’ve learned a good amount of the front-end technologies, I can move ahead with starting to build the Whinst front-end. It’s also worth noting that I’m by no means already a pro in these two technologies😅, I’ve simply gotten a pretty decent understanding of what they do which is enough to get started building as a lot more will be learned during the actual building process. Thanks for reading and see you in the next one🙏.