What is the difference between a SPAs and a MPAs?

Tech-letter #7 | January 22,2023

1. How to write clean code using JavaScript?

   • Use variables name properly
   • Use const whenever the value of the variable doesn’t change throughout your code.
   • As we read more code than we write, make sure to use searchable variable names as well as readable through explanatory variables.
   • Writing shortcodes is better than conditionals. Making use of ternary is also a great way to reduce the number of lines of code and improve readability.

   clean code for functions

   • The function arguments should be 2 or less, if you need to pass in more number of arguments pass it as an object.
   • A function should do only one thing perfectly. Do not try to implement multiple operations(things) within the same function, try to split them.
   • The name of the function should say what the function does.
   • Make sure to include only one layer of abstraction.
   • Remove the duplicate code as much as possible.

   Make use of the SOLID principles

   • Single Responsibility Principle
   • Open Closed Principle
   • Liskov Substitution Principle
   • Interface Segregation Principle
   • Dependency Inversion Principle

2. What is the difference between single-page applications(SPAs) and Multi-page applications(MPAs)?

   Single Page Applications are the ones that brought a major change in the world of web apps. These are the ones where different operations can be performed without refreshing the page or sending multiple requests to the server. With React JS you can build wonderful SPAs(Single Page Applications). One of the main advantages of SPAs is that they only update the part that is required & they are highly scalable.

   Multi-Page Applications send requests every time when you go do a different URL of the same web app. Blogs are examples of multipage applications, as the information loaded on the pages can be different and totally irrelevant to the previous page.

   SPAs are best suited for projects that require a fast and seamless user experience, such as e-commerce websites and social media platforms. On the other hand, MPAs are best suited for projects that require better SEO, accessibility, and easy development, such as corporate websites and blogs.

   HOCs are a powerful pattern in React that allows for code reuse and separation of concerns, making code more maintainable and easier to understand. They can also be used to add additional functionality, such as authentication, data loading, and more, to a component without modifying its implementation.

3. What is the Higher Order Component?

   According to the react docs, a higher-order component is an advanced technique in react to reuse the component logic. They are the pattern that emerges due to the react compositional nature.

   Basically, you wrap a component inside another component. The outer component, or HOC, is responsible for providing the shared logic, such as state and behavior, to the wrapped component. This allows the wrapped component to focus on its specific UI and rendering logic, while the HOC takes care of the shared logic.

   An example of HOC is:

   const withAuth = (WrappedComponent) => {
     return (props) => {
       if (props.isAuthenticated) {
         return <WrappedComponent {...props} />;
       } else {
         return <div>Please login to view this content</div>;
       }
     }
   }
   

   TypeScript Core Types

   • number (all numbers are considered into this type, and no int or float type)
   • string ( all the text values are treated as string)
   • boolean (true or false)
   • object
   • array
   • tuple (array with fixed length)
   • enum
   • any (not recommended for usage).

   The main difference between JavaScript & TypeScript is that JavaScript uses dynamic types resolved at runtime whereas TypeScript uses static types set during development.

   Articles that I read this week

   1. Handling Audio files with JavaScript
   2. Chrome tracing
   3. Error handling in TS