Pick my front-end framework for me
-
I want to
create amake a toy SPA application, on top of ASP.NET Core. I don't like the idea of SPAs, but I figure it's time to actually try playing with one in case my job ends up depending on it.Because I'm lazy, I'm going to limit myself to the frameworks that there's a
dotnet new
template for: Angular, React, and Redux out of the box; or by adding another MS-created package, Aurelia, Knockout, and Vue.Ideally, the winner will update the URL automagically so bookmarks & history work.
Beyond that... any thoughts as to why I should or shouldn't prefer any of the contenders?
-
@unperverted-vixen
From what I've read around here, rolling your own using three different flavors of Markdown is the best option
-
Have you tried the hot new framework called VanillaJS?
-
I picked Aurelia because it sounds more like a Roman Emperor's name than a JS framework.
-
@alexmedia said in Pick my front-end framework for me:
Have you tried the hot new framework called VanillaJS?
This ×42.
-
@AlexMedia, @raceprouk - well, VanillaJS underlies those other frameworks I mentioned. I'd be recreating their work if I did VanillaJS alone. And as I said, I'm lazy.
-
Does .NET have something like Java Server Faces where you can write the GUI on the server, as if it was a desktop program? Thats an easy way to make a single page application.
I see some suggestions that the equivalent isASP.NET MVC
but I am not sure.
-
You know what they say...
"You can pick your friends, you can pick your front-end framework, but you can't pick your friend's front-end framework."
-
@unperverted-vixen VanillaJS
you should totally use VanillaJS
-
@adynathos said in Pick my front-end framework for me:
Does .NET have something like Java Server Faces where you can write the GUI on the server, as if it was a desktop program? Thats an easy way to make a single page application.
Not that I'm aware of.
I see some suggestions that the equivalent is
ASP.NET MVC
but I am not sure.It definitely isn't.
-
@unperverted-vixen said in Pick my front-end framework for me:
@adynathos said in Pick my front-end framework for me:
Does .NET have something like Java Server Faces where you can write the GUI on the server, as if it was a desktop program? Thats an easy way to make a single page application.
Not that I'm aware of.
Partial views in ASP.NET MVC.
-
Now for something unorthodox - a JS GUI library that is like a normal desktop UI library (you create widgets, set values etc, but don't interact with HTML):
-
@raceprouk said in Pick my front-end framework for me:
Partial views in ASP.NET MVC.
Yes, partial views can be used to put together an SPA (if you're returning the partial view as the action result and retrieving it via Ajax;
RenderPartial()
doesn't qualify). But that's hardly "writ[ing] the GUI on the server, as if it was a desktop program".
-
@accalia said in Pick my front-end framework for me:
you should totally use VanillaJS
@raceprouk said in Pick my front-end framework for me:
This ×42.
I see that VanillaJS slogan around, but what does it mean in practice?
If someone is choosing a web UI framework, then the UI is supposedly rather dynamic and complicated.
So a solution to write the HTML on the server and add a minimal amount of JS - while perfect for most sites - will fail here due to the nature of the project.When I first experimented with web applications, I took this approach (it was jQuery then).
I quickly decided that to display info from the server, its best to bind content of some UI elements to updates coming from the server. So I tried to implement that.
As I understand, that data-binding is the core concept of all those JS UI frameworks.
So why not use them?
How does the "vanilla JS" single-page-application look in reality?
-
@adynathos said in Pick my front-end framework for me:
I see that VanillaJS slogan around, but what does it mean in practice?
-
@raceprouk
They compare to jQuery-like libs, whose purpose was to provide basic features before JS managed to implement them.None of these are relevant to single-page applications.
-
@unperverted-vixen In practice, the best tool is generally the most popular one.
Because whatever you want to do will have been figured out a thousand times already and there will be a guide for every little thing. Including workaround for bugs. And thousands of plugins/templates for anything you want. Regardless of how badly designed it is.
So what I'm saying is you should at least know Angular and React.
-
@adynathos said in Pick my front-end framework for me:
@raceprouk
They compare to jQuery-like libs, whose purpose was to provide basic features before JS managed to implement them.None of these are relevant to single-page applications.
possibly or but I'll bite anyway...
the VanillaJS page is a spoof, but its point is fairly sound - that plain JS is not as difficult or scary as library and framework pundits would have you believe. If you have requirements that don't exactly fit the scope of one of the existing toolkits, then you may well be better-off rolling your own code from scratch rather than coping with the framework lasagne that's currently fashionable.
-
@japonicus said in Pick my front-end framework for me:
If you have requirements that don't exactly fit the scope of one of the existing toolkits, then you may well be better-off rolling your own code from scratch rather than coping with the framework lasagne that's currently fashionable.
Yes, I understand that.
However, it was suggested in a context of single-page-applications, which I understood as a complicated dynamic UI.I want to create a make a toy SPA application
I do not say vanilla js (or my favourite,
no-JS-at-all
) is not a valid approach. However, it is most probably not the right tool for the stated use case.
-
@adynathos said in Pick my front-end framework for me:
If someone is choosing a web UI framework, then the UI is supposedly rather dynamic and complicated.
You'd think.....
But in practice I see a lot of "must framework" from relatively simple apps that shouldn't be SPAs anyway.
-
@unperverted-vixen said in Pick my front-end framework for me:
SPA application
As long as you do not exceed the length of a roll, every application is "single page"
-
-
@japonicus Hey, I've been there!
-
Why not Emscripten?
-
/me flrrd from haters
-
@japonicus said in Pick my front-end framework for me:
plain JS is not as difficult or scary as library and framework pundits would have you believe
It was back in 2007, when IE6 was still a thing and you had all sorts of shenanigangs like
addEventListener
andattachEvent
, but in 2017 all of that has been standardised.
-
I used Angular 1.something several years ago, and it wasn't a good experience. There is dark voodoo behind 2 way binding that is terrible to debug, and you will probably be doing a fair bit of it. Although, I joined the project half way through; It'll be better if you start from scratch
I've tried out React for a bit and it seems sane. There's a pretty good browser add-on called "React developer tools" that helps you debug things. If you don't use the JSX syntax, you don't even need an extra build/transpile step (i.e. Babel is optional).
-
@alexmedia said in Pick my front-end framework for me:
@japonicus said in Pick my front-end framework for me:
plain JS is not as difficult or scary as library and framework pundits would have you believe
It was back in 2007, when IE6 was still a thing and you had all sorts of shenanigangs like
addEventListener
andattachEvent
, but in 2017 all of that has been standardised.That's left a tradition that js is unusable without frameworks, so that too many web and mobile app developers don't realise that they're wearing Complicator's gloves.
-
@unperverted-vixen said in Pick my front-end framework for me:
Aurelia
AFI - Aurelia – 03:03
— AFIVEVO
-
-
@dreikin Henry Ford museum. It's a programmable loom they have on display there, unless it's a different one with the same orientation and lighting and roughly similar background.
-
@yamikuronue said in Pick my front-end framework for me:
@dreikin Henry Ford museum. It's a programmable loom they have on display there, unless it's a different one with the same orientation and lighting and roughly similar background.
Neat
-
-
IMO:
-
Angular
If this is 1, then avoid. That's ded.If it's 2/4+, then it's a reasonable choice, especially if you like C# (they almost force you to use typescript). In some early experiments, I found it too bureaucratic. Supposedly, it has improved a lot in 4+, but either way, this is not the smash hit angular 1 was.
-
React
My default choice. If you want to learn something new, pick this. Once you go functional component style in react, it's hard to go back to MVC style from angular 1 / ember days. Really good stuff. -
Aurelia
This is some forked version of angular 2 or something, with extra components. It doesn't have as much support as ang, so I'd avoid it. -
Redux
This one is a bit unclear. Redux is a pattern that is often used to organize React apps, usually shown as "react + redux" (kind of like GNU/Linux of hipster web tech). But it can be used in other contexts as well.Presuming they mean react + redux, then the choice depends on the size of your app. If you want to have a router and multiple screens and the whole shebang, pick this. But note that you'll have a harder time grokking it than just pure react.
-
Vue
This is a new contender. It's kind of like react meets angular 1 (component style but with templates). It is considered much easier to integrate into an existing app than react and angular, which require build systems.I prefer react, but if I couldn't use it, this would be my second choice (over angular 2).
-
Knockout
This is dead. Avoid.
-
-
@cartman82 I have a small project, want to play with the UI.
I consider Polymer or React.
Does anyone know of a reason to choose one over the other?
I tried them once, they seemed very similar, with Polymer having a nicer code structure - separated code an HTML, unlike JSX:<dom-module id="contact-card"> <template> <style>...</style> <slot></slot> <iron-icon icon="star" hidden$="{{!starred}}"></iron-icon> </template> <script> class ContactCard extends Polymer.Element { static get is() { return "contact-card"; } static get properties() { return { starred: { type: Boolean, value: true } } } } customElements.define(ContactCard.is, ContactCard); </script> </dom-module>
Thank you for the advice.
-
@adynathos said in Pick my front-end framework for me:
I consider Polymer or React.
Polymer is ded. No buzz around it, no modules, no libraries, no community to help you. Even its owner, google, is treating it like a second class citizen, with all the dogfooding and resources going to angular.js.
It's kind of like dart in that way. Whatever merits it might have in isolation, however much google might swear they use it internally, it just hasn't caught on. It has no future outside of Google, and probably very dim future inside as well.
Go with react.
-
@cartman82 said in Pick my front-end framework for me:
Polymer is ded. No buzz around it, no modules, no libraries, no community to help you. Even its owner, google, is treating it like a second class citizen, with all the dogfooding and resources going to angular.js.
Why? Did HTML templates and the shadow DOM become too well supported by browsers to be hip?
-
@zecc said in Pick my front-end framework for me:
Polymer is ded. No buzz around it, no modules, no libraries, no community to help you. Even its owner, google, is treating it like a second class citizen, with all the dogfooding and resources going to angular.js.
Why? Did HTML templates and the shadow DOM become too well supported by browsers to be hip?
Why it's dead or why do I think it's dead?
-
@cartman82 said in Pick my front-end framework for me:
@zecc said in Pick my front-end framework for me:
Polymer is ded. No buzz around it, no modules, no libraries, no community to help you. Even its owner, google, is treating it like a second class citizen, with all the dogfooding and resources going to angular.js.
Why? Did HTML templates and the shadow DOM become too well supported by browsers to be hip?
Why it's dead or why do I think it's dead?
Why not both? :)
-
-
@cartman82 Given that China is by far the highest search volume, do you think that means anything?
The polymer values for US and lots of Europe (based on a non-scientific quick mouse hover) are much higher than for react.
OK, granted, when I confine it to US, it looks largely the same, except that the other 3 are much closer. Polymer is still an outlier at the bottom of the graph.
-
@boomzilla said in Pick my front-end framework for me:
@cartman82 Given that China is by far the highest search volume, do you think that means anything?
The polymer values for US and lots of Europe (based on a non-scientific quick mouse hover) are much higher than for react.
OK, granted, when I confine it to US, it looks largely the same, except that the other 3 are much closer. Polymer is still an outlier at the bottom of the graph.Why the hell is that onebox in Arabic?
Anyway, google trends are finicky, but the point is, if you follow frontendy hipstery places (twitter, hacker news, reddit threads), polymer is nowhere to be seen.
If I am wrong and there are niches where polimer thrives, I'd like to see them.
-
@cartman82 Missed your summary from about a week ago. Thanks, that's exactly the kind of info I was looking for. (Yes, React+Redux is what the offered template is.)
-
@cartman82 said in Pick my front-end framework for me:
If I am wrong and there are niches where polimer thrives, I'd like to see them.
Yeah, I didn't see any evidence of that. I just thought the prominence of results from China was suspicious.
-
@cartman82 said in Pick my front-end framework for me:
Polymer is ded.
It has no future outside of Google, and probably very dim future inside as well.Thank you for the advice.
I was under the impression they wanted to add WebComponents (so polymer) to HTML "standard" - in the way that if chrome does something, everyone has to follow.
And that they work on implementing WebComponents natively in chromium (theres even some tutorial). This seems consistent with my experiments, as a polymer application loaded much faster on chromium than on firefox.
This seems to be called Custom Elements 1 on caniuse.com.In that context, I considered it an advantage of polymer - that in the future, it may be a native feature of the browsers.
Do you find it likely they will abandon this idea?(Or maybe my idea that
Polymer == WebComponents
is wrong?)
-
@adynathos said in Pick my front-end framework for me:
In that context, I considered it an advantage of polymer - that in the future, it may be a native feature of the browsers.
Do you find it likely they will abandon this idea?
(Or maybe my idea that Polymer == WebComponents is wrong?)Polymer polyfills web components and adds some missing things on top of it, like a working templating language.
And yes, it doesn't seem like the web components spec has a future. No one besides Google is implementing it. Even if they were, you'd still need a javascript framework to make it actually usable, as polymer demonstrates.
Here's all you need to know about react vs web components: https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/
TLDR: web components are awful, react has won.