DEV Community: Raj Sekhar

Insights On Web Frameworks From 3Y Stack overflow Surveys

Raj Sekhar — Tue, 10 Aug 2021 10:41:59 +0000

Stackoverflow surveys play a big role to understand trends and also impact the decision making for new projects. So I though of analyzing and finding small insights, specifically on frontend and backend web frameworks from the survey results since 2019 to 2021. I kept developers and freshers in mind and have added few points that could help in understanding the trends and opportunities.

All the figures displayed below are in %.

Frontend

Popularity

Popularity tells us the number of available projects and developers. Hence, the higher %, the easy it is to find a job/developer.

Framework	2019	2020	2021
React	32.3	36.8	41.4
Angular	32.4	26.5	26.2
Vue	15.5	17.8	20.1
Svelte			02.6

Loved

This tells us the satisfaction level of developers, and if they would like to continue using it. Hence, the higher %, the happy the developers are.

Framework	2019	2020	2021
React	74.5	68.9	69.3
Angular	57.6	54.0	55.8
Vue	73.6	66.0	64.4
Svelte			71.4

Conclusion

If you are fresher, consider starting with React as it has lot of opportunities and also you will be enjoying working with it. There are few caveats though:
- Few project have implemented typescript, while others are in vanilla JavaScript
- Few projects might use React, while others Preact while some others use Next.js
- Components could be created using class approach, or functional approach, and for state management one could use context, or mobX or just the cool new hooks.
- Your project might be using className while others might use styled components
- So there is new learning curve aligned with each new project you would be working with. With experience you will get better hang of it.
If you are already working in React, that's awesome, keep exploring and mentoring others. Get hands on experience on some backend framework. Nearly 70% devs enjoy working with it.
If you are already working with Angular, the satisfaction %, although lower than most, is still consistent since 3years, around 55-ish.
- There is still a lot of projects on Angular, and it is recommended framework for many enterprises, because it follows the standard OOPS approach.
- Being a framework, you will find almost every package in Angular itself with enterprise grade security, to handle the core functionality of your app. So whatever you learn once, most of it will carry forward to all other projects. Onboarding new developers might be comparatively easy because the implementation is pretty consistent.
- There is one big caveat in angular as well, that is Angular apps are comparatively slower, due to heavy build size. However this can be easily improved by 3X using lazy loading, appShell, service worker and SSR. (will cover this in detail in upcoming articles)
- Consider Nestjs for backend with fastify adapter, which is very fast, easily scalable, gaining huge popularity and easy to learn for Angular devs. Also consider exploring React if interested.
If you are already working in Vue, it has less job opportunities comparatively but experiencing a rapid growth of 2% each year. So you might consider polishing your skills or exploring React parallelly.
- However, the % of developers loving this is also on a constant decline, which is pretty weird, because I heard it is one of the most simple yet effective framework to challenge React.

Backend

Popularity

Popularity tells us the number of available projects and developers. Hence, the higher %, the easy it is to find a job/developer.

Framework	2019	2020	2021
Express	19.5	20.9	23.6
.Net Core		20.3	20.3
Spring	17.2	17.4	16.5
Django	12.3	13.2	13.0
RubyOnRails	08.4	07.2	07.9
Laravel	10.4	11.1	10.9
Flask	11.7	13.6	13.8

Loved

This tells us the satisfaction level of developers, and if they would like to continue using it. Hence, the higher %, the happy your developers are.

Framework	2019	2020	2021
Express	68.3	61.9	62.0
.Net Core		70.7	71.5
Spring	65.6	57.7	59.8
Django	62.1	55.3	55.3
RubyOnRails	57.1	49.3	57.5
Laravel	60.1	51.4	53.8
Flask	61.1	54.4	51.0

Conclusion

Express, .Net Core, Spring and Django backend frameworks have lot of bright opportunities.
If you are fresher, consider express as your starting point for getting into full stack role as there are lot of new opportunities and tutorials available to get started. It enjoy nearly 60% satisfaction level like java framework spring.
.Net core is undergoing massive transformation and it is now also cross platform and maximum developers are happy working with it.

Hope it helps to analyze the trend and available opportunities in Web Development. Share any feedback or other insights you have got. Adios.

The points expressed are purely based on data points from survey results and my personal understanding and in no-way a negative criticism to any technology or developer community.
Resources: stackoverflow

PS: I am looking for new opportunities in Angular. If you have any openings, I am just a message away. (krj2033@gmail.com) (linkedin)

Typescript Interface vs Class With Practical Examples

Raj Sekhar — Thu, 05 Aug 2021 20:25:10 +0000

Typescript, oh I love it. Take stackoverflow survey, or ask any developer, most of them do. All major UI libraries/frameworks are (following Angular way) adding Typescript support now. Need to write a little extra boilerplate (use json to ts extension), but the benefits of type checking, intellisense and instant visual feedback outweigh the extra work.

I had this confusion where both interface and class gets the work done, but which one to use and when?

TLDR

Use interface, avoid class unless there is any special requirement that cannot be done with interface.

Classes add to js file size, after compiling .ts to .js, while interfaces do not

Classes take extra lines

Lets take scenario, where we want to give structure to a pizza object. I can use interface or an object.

Pizza Interface

pizza-interface.ts

interface Pizza {
    variant: string;
    size: string,
    price: number;
    extraCheese: boolean;
    takeAway: boolean;
}

const myPizza: Pizza = {
    variant: 'Maxican green wave', size: 'medium', price: 550, extraCheese: true, takeAway: false,
}
console.log(myPizza);

pizza-interface.js

var myPizza = {
    variant: 'Maxican green wave', size: 'medium', price: 550, extraCheese: true, takeAway: false
};
console.log(myPizza);

Pizza Class

pizza-class.ts

class Pizza {
    variant: string;
    size: string;
    price: number;
    extraCheese: boolean;
    takeAway: boolean;

    constructor(variant: string, size: string, price: number, extraCheese: boolean, takeAway: boolean) {
        this.variant = variant;
        this.size = size;
        this.price = price;
        this.extraCheese = extraCheese;
        this.takeAway = takeAway;
    }
}

const myPizza = new Pizza('Maxican green wave', 'medium', 550, true, false);
console.log(myPizza);

pizza-class.js

var Pizza = /** @class */ (function () {
    function Pizza(variant, size, price, extraCheese, takeAway) {
        this.variant = variant;
        this.size = size;
        this.price = price;
        this.extraCheese = extraCheese;
        this.takeAway = takeAway;
    }
    return Pizza;
}());
var myPizza = new Pizza('Maxican green wave', 'medium', 550, true, false);
console.log(myPizza);

More the lines in your .js, more is its size

Usecase for class

Lets take a scenario of employee salary, where HRA, PF contribution is dependent on the basic amount. So if I want to provide structure for salary object with least effort, I might go with class instead of interface here.

salary.ts

class SalaryComponents {
    basic: number;
    pf: number;
    hra: number;
    professionalTax: number;

    constructor(basic: number, state: string) {
        this.basic = basic;
        this.hra = basic * 0.5;
        this.pf = basic * 0.12;
        this.professionalTax = this.getProfessionalTax(state);
    }

    getProfessionalTax(stateName: string): number {
        return 2000; // dummy value
    }
}

const emp1 = new SalaryComponents(1000, 'Tamil Nadu');
console.log(emp1); 
/** Output
    {
        basic: 1000,
        hra: 500,
        pf: 120,
        professionalTax: 2000
    }
 */

With just 2 inputs, i could create an object. Pretty neat huh!!

This is the only scenario is could think of, where class is more effective. Hope it was helpful. I am open for any constructive criticism/feedback.

PS: I am looking for new opportunities in Angular. If you have any openings, I am just a message away. (krj2033@gmail.com) (linkedin)

Angular route: pathMatch='full', when to NOT use?

Raj Sekhar — Sat, 27 Feb 2021 13:29:17 +0000

Past experience

While implementing default route (path: ''), most of of the articles and blogs use 'pathMatch' with value 'full'. When I was implementing the same in my previous project, I simply copied it due to time constraint and it worked. With basic research, I understood, '' will match with other routes "always" and so that might create cyclic redirection if pathMatch: 'full' is not defined.

Then I concluded, for empty paths, I just need to put pathMatch: 'full' to make it work.



{ path: '', component: HomeComponent, pathMatch: 'full' }

New Day, new project

Now I was starting a new project where I had multiple <router-outlets> in nested form. And I wanted to make this app load faster by splitting codebase on route level. That is each route will have separate JavaScript chunks to keep main.js as small as possible and the initial load time will be faster.



// app-routing.module
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/home/home.module').then(x => x.HomeModule),
    pathMatch: 'full'
  },
  { path: 'login', loadChildren: () => import('./modules/login/login.module').then(x => x.LoginModule) },
  { path: '404', loadChildren: () => import('./modules/errors/page-not-found/page-not-found.module').then(x => x.PageNotFoundModule) },
  { path: 'unauthorized', loadChildren: () => import('./modules/errors/unauthorised/unauthorised.module').then(x => x.UnauthorisedModule) },
  {
    path: 'network-error',
    loadChildren: () => import('./modules/errors/network-error/network-error.module').then(x => x.NetworkErrorModule)
  },
  { path: '**', redirectTo: '404' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

And inside HomeModule I wanted to keep other routes that user can enter after the login process.



// home-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: 'dashboard', loadChildren: () => import('../dashboard/dashboard.module').then(x => x.DashboardModule) },
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'simcards', loadChildren: () => import('../simcards/simcards.module').then(x => x.SimcardsModule) },
      { path: 'requests', loadChildren: () => import('../requests/requests.module').then(x => x.RequestsModule) }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule {}

I expected it to work just like before, as nothing much is changed. I only replaced component, with loadChildren, but it gave this error



ERROR Error: Uncaught (in promise): NoMatch$1: {}
    at resolvePromise (zone-evergreen.js:1213)
    at resolvePromise (zone-evergreen.js:1167)
    at zone-evergreen.js:1279
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28522)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)
    at drainMicroTaskQueue (zone-evergreen.js:582)

I was trying to understand what went wrong. Completely frustrated and clueless, because I was supposed to build the pages and work on new feature, but here I am, stuck at this stupid route configuration.

After lot (a lot) of dubugging, i figured out the routes defined inside HomeModule is not recognised. (yeah, the error was not very friendly and intuitive, neither was it pointing to any specific file like Angular usually does). And this error was new for me.

I know how nested routes work and how lazy loading works. But this is the first time, I am mixing both of of them, using lazy loaded modules inside nested routes. Googling made me realize, there is not many articles where people use both. :'-( But luckily I found one or two that was pointing me to the pathMatch keyword in the route configuration. I wanted to learn it properly this time, and this video helped me understand, as to why is pathMatch used in the first place.

So eventually I updated app-routing with this:



//app-routing.module.ts
const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./modules/home/home.module').then(x => x.HomeModule),
    pathMatch: 'prefix' // 'full' will not trigger child routes
  }, // more on pathMatch: https://www.youtube.com/watch?v=h33FECmtLAM
  { path: 'login', loadChildren: () => import('./modules/login/login.module').then(x => x.LoginModule) },
  { path: '404', loadChildren: () => import('./modules/errors/page-not-found/page-not-found.module').then(x => x.PageNotFoundModule) },
  { path: 'unauthorized', loadChildren: () => import('./modules/errors/unauthorised/unauthorised.module').then(x => x.UnauthorisedModule) },
  {
    path: 'network-error',
    loadChildren: () => import('./modules/errors/network-error/network-error.module').then(x => x.NetworkErrorModule)
  },
  { path: '**', redirectTo: '404' }
];

Conclusion



{ path: 'home', component: HomeComponent, pathMatch: 'full' }

If you have configured a route like above, Angular will check, only if full path in browser URL is exactly equal to 'home' (example.com/home), then that component/module will be triggered. When you try navigating to 'home/child-route', the full path is now not matching with 'home', and this gives error.

use pathMatch: 'prefix', especially if that route path is supposed to load a module dynamically, which will have other routes

If you were wondering about this solution:



{ path: 'home', component: HomeComponent, pathMatch: 'full' }
{ path: 'home/child-route', component: HomeChildComponent, }

it does not work in the nested-route. The HomeChildComponent will be rendered in parent (the one present in app.component.html), but I want the HomeChildComponent to be rendered in <router-outlet> defined in home.component.html

Hope this article save someone's time.

You got a better solution? I am listening. :-)

Web Developer Resources At One Place

Raj Sekhar — Wed, 03 Jun 2020 07:26:27 +0000

Hi there.

I just discovered a blog/github-page that is compiling other resources that are frequently needed by web-developers.
You can find, tutorials, public APIs, suggested podcasts and YouTube channels and more.

Check this site here:
https://webdevscom.github.io/