Good front-end frameworks?

Spacerat said:
Cool tx but dont think a db admin is the right person for domain and api. Agreed that architecture and backend matters most. I am a huge proponent of establishing patterns, so lots of effort wil go into that
Click to expand...

It’s the only way to go.
This is the only way that one can then build scalable solutions that are architectural simple, but can solve complex problems. The alternative is that every project team makes up stuff on the fly, spends loads of time on boilerplate/glue, and it’s difficult to cross pollinate teams.

Come up with standards/patterns, and then provide boilerplates which let teams start solving business problems today

Spacerat said:
I don’t really (yet) understand where all these frameworks fit in. I have previously done a MVC/razor/jquery/bootstap site. But will have to investigate vue/angular/react/fluttter etc. To be honest, i am not a huge fan of javascript. Prob because it seems verbose and i am used to the terseness of c#. The app i need to build has lots of graphs, grids and crud type forms with text entry, popup selection / search grids. D3 likely good for the graphong.
Click to expand...
Code: 
export const Page = () => <div>Hello World</div>

That’s basically the smallest level of react component.
I would say that Javascript/Typescript is not at all verbose. Not any more than C# is (C# 9 and 10 have improved this with inferred “new”, top level statements and namespaces)


If you are in windows and on VS2022, then I would say definitely take a look at Blazor (Server or WASM - definitely easier to get started with Server). If however, you are on Linux/Mac and use Rider, then Blazor is not yet excellent.
 
_kabal_ said:
It’s the only way to go.
This is the only way that one can then build scalable solutions that are architectural simple, but can solve complex problems. The alternative is that every project team makes up stuff on the fly, spends loads of time on boilerplate/glue, and it’s difficult to cross pollinate teams.

Come up with standards/patterns, and then provide boilerplates which let teams start solving business problems today


Code: 
export const Page = () => <div>Hello World</div>

That’s basically the smallest level of react component.
I would say that Javascript/Typescript is not at all verbose. Not any more than C# is (C# 9 and 10 have improved this with inferred “new”, top level statements and namespaces)


If you are in windows and on VS2022, then I would say definitely take a look at Blazor (Server or WASM - definitely easier to get started with Server). If however, you are on Linux/Mac and use Rider, then Blazor is not yet excellent.
Click to expand...
Cool thanks. Will check out react. Im on VS2022 and Win...
 
_kabal_ said:
If you are in windows and on VS2022, then I would say definitely take a look at Blazor (Server or WASM - definitely easier to get started with Server). If however, you are on Linux/Mac and use Rider, then Blazor is not yet excellent.
Click to expand...

Took a break from dotnet for a while and jumped into some React/Node projects, but currently exploring Blazor and can honestly say I missed C#. The dotnet ecosystem has come a long way the last few years. Really hope Blazor gains some traction.
 
Spacerat said:
I don’t really (yet) understand where all these frameworks fit in. I have previously done a MVC/razor/jquery/bootstap site. But will have to investigate vue/angular/react/fluttter etc. To be honest, i am not a huge fan of javascript. Prob because it seems verbose and i am used to the terseness of c#. The app i need to build has lots of graphs, grids and crud type forms with text entry, popup selection / search grids. D3 likely good for the graphing.
Click to expand...
D3 if you're doing custom, nivo or a pre-built solution if you just need the usual suspects :)

You absolutely could scaffold this out using jquery / bootstrap or literally any stack. At the end of the day, it just a matter of how fast, reliably and cheaply the data gets rendered on the frontend, and sent back to your db.

The frontend needn't be a mess if planned and maintained / scaffolded correctly.

Rules, Docs and a touch of foresight all come into play.

kabal has a great example of how terse react can be. But you need to be strict and everyone needs to keep to an enforced style standard, from the start.

I have found a good linter and prettier configuration to be invaluable.

Husky for pre commit checks, and the rest happens in github actions...
 
MagNorthDigital said:
You absolutely could scaffold this out using jquery
Click to expand...
:sick:

Personally I prefer Vue 3 + TS front-end, no JQuery, use ES. You can spin up a project pretty quick, Vite has a lot of sane defaults and I find is easier than messing around with webpack, but if you've got a working webpack CI pipeline, doesn't really matter as you'd just keep re-using.
And as a dev, Vue projects usually mean the project is slightly more modern, often React/Angular apps in companies are from whenever the buzzword started getting popular, those are not nice to work on. That doesn't mean there aren't modern React/Angular apps, and React ~16+ started getting good imho, but haven't worked much with it since around 17, still not a fan of Angular.
 
Spacerat said:
I see that Angular is still very popular but React also making strides. What are the opinions out there? I want to build a line-of-business site using ASP.NET Core and WebAPI as a back-end.
Click to expand...

Spacerat said:
I don’t really (yet) understand where all these frameworks fit in. I have previously done a MVC/razor/jquery/bootstap site. But will have to investigate vue/angular/react/fluttter etc. To be honest, i am not a huge fan of javascript. Prob because it seems verbose and i am used to the terseness of c#. The app i need to build has lots of graphs, grids and crud type forms with text entry, popup selection / search grids. D3 likely good for the graphing.
Click to expand...

I have quite a bit of exp with Angular, and did a tiny hobbyist project with React, so take my opinions on React with a significant helping of salt.

Angular is template focussed, meaning the HTML. You will write some of the logic in the HTML. You will use (angular specific) HTML attributes to create repeating structures, if statements to hide or show elements etc. I find it better to work with than ASPX templating.
It is structured, and wants you to follow its practices with components, routers, services, forms, validation etc. All of those have a standard way of doing things. Google also makes Material available which offers you to easily add drag and drop etc.
You have to use TypeScript with Angular, and it's a good thing. Typescript pretty much makes JS strongly typed (with the ability to override).
The negatives is that you have to look for logic in two places, in the template or in the JS.

React is much more JavaScript focussed. You will write your pieces of HTML in the JS file. If you want something to repeat, you will write a JS for loop and put your piece of html in that loop. The same with if statements etc. They do have some specific "attributes" for the HTML side, for example to handle clicks or adding classes, but for the most part it's JS first.
Modern JS has options to be even more terse than C#, but it can take a while getting used to all the shorthand syntactical stuff. When you do it's great.
React is also much less opinionated. While you can add Redux or other state management, at it's core React is just components and you can structure the rest of your app as you see fit. Therefore it can be more difficult create a decent architecture if you are less experienced. Redux does add some structure, but I find it more complex than what Angular enforces.
You can use React with TypeScript, but it's optional.

I like TS, so if I were to a tech stack for a project, I would use React with TypeScript.

Edit: As for charts, I used HighCharts back in the day, and we now use Echarts. I would suggest you choose something similar if you want to use relatively standard looking charts.
Don't add jQuery. Standard Javascript can do everything you need, and for the little bit you might want to do extra, I think Angular includes some jQuery lite type stuff? Anyway, just don't.
 
Barbarian Conan said:
Edit: As for charts, I used HighCharts back in the day, and we now use Echarts. I would suggest you choose something similar if you want to use relatively standard looking charts.
Don't add jQuery. Standard Javascript can do everything you need, and for the little bit you might want to do extra, I think Angular includes some jQuery lite type stuff? Anyway, just don't.
Click to expand...

OT, but I absolutely love ECharts.
 
I've used Highcharts and ChartJs extensively, never heard of ECharts - thanks taking a look :thumbsup:
 
Barbarian Conan said:
I have quite a bit of exp with Angular, and did a tiny hobbyist project with React, so take my opinions on React with a significant helping of salt.

Angular is template focussed, meaning the HTML. You will write some of the logic in the HTML. You will use (angular specific) HTML attributes to create repeating structures, if statements to hide or show elements etc. I find it better to work with than ASPX templating.
It is structured, and wants you to follow its practices with components, routers, services, forms, validation etc. All of those have a standard way of doing things. Google also makes Material available which offers you to easily add drag and drop etc.
You have to use TypeScript with Angular, and it's a good thing. Typescript pretty much makes JS strongly typed (with the ability to override).
The negatives is that you have to look for logic in two places, in the template or in the JS.

React is much more JavaScript focussed. You will write your pieces of HTML in the JS file. If you want something to repeat, you will write a JS for loop and put your piece of html in that loop. The same with if statements etc. They do have some specific "attributes" for the HTML side, for example to handle clicks or adding classes, but for the most part it's JS first.
Modern JS has options to be even more terse than C#, but it can take a while getting used to all the shorthand syntactical stuff. When you do it's great.
React is also much less opinionated. While you can add Redux or other state management, at it's core React is just components and you can structure the rest of your app as you see fit. Therefore it can be more difficult create a decent architecture if you are less experienced. Redux does add some structure, but I find it more complex than what Angular enforces.
You can use React with TypeScript, but it's optional.

I like TS, so if I were to a tech stack for a project, I would use React with TypeScript.

Edit: As for charts, I used HighCharts back in the day, and we now use Echarts. I would suggest you choose something similar if you want to use relatively standard looking charts.
Don't add jQuery. Standard Javascript can do everything you need, and for the little bit you might want to do extra, I think Angular includes some jQuery lite type stuff? Anyway, just don't.
Click to expand...

Good post.

The opinionated part is really spot on.
And opinionated frameworks are great, it makes it easy to onboard. That i why I say use React, but use NextJs.

Do not bother with redux, it is not need in 95% of cases, even the redux site tells you this :)
You likely actually need/want react-query (getting data from the server, showing a list, updating data to the server, updating the list, etc), and for the other 5%, zustand is just so much simpler to use/understand. I say this as person who has never and will never use redux, so take that however you would like :X3:
 
Don't listen to all the blazor hate, If you know C#, go for it.
 
Spacerat said:
What does 'if you want material' mean? Sorry for the dumb question
Click to expand...
I meant "if you want to implement/use Material Design".
MUI.com is a React library that implements Google's Material (Vuetify is Vue library that implements Material)

There are also "native" libraries available for all the major CSS frameworks (Bulma, Bootstrap, etc)
That way you can then use `<Button variant="primary">` instead of `<button class="btn btn-primary">` - obviously a button is very simplistic example
 
If you like a well structured opinionated framework, go with VueJS.
If you don't like structured go with React.

React is closer to pure javascript + helpers, which also means its really easy to screw things up since there's no set defined way of doing certain things.
 
charlieharper said:
If you like a well structured opinionated framework, go with VueJS.
If you don't like structured go with React.

React is closer to pure javascript + helpers, which also means its really easy to screw things up since there's no set defined way of doing certain things.
Click to expand...
I prefer structure and patterns ..
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X