8 ms·

ASP.NET Core with Angular2 – Tutorial

56 points by dymel 10y ago

frogfuzion 10y ago
Is it just me or are hello worlds getting much longer - especially on web platforms?
- dymel 10y ago
  Hehe true! But... it has always been like that with bigger frameworks (NancyFx excluded :)).
- mattmanser 10y ago
  Programming goes through phases. We are in a phase of ridiculously over-complicated tooling. In a decade or so someone will come up with the radical idea of some sort of rad tool which hides all the silly complications. Like we had in the 00s. I especially love the not one, but two, completely inexplicable: await next();
  - orf 10y ago
    > I especially love the not one, but two, completely inexplicable What's inexplicable about await or next()? I've literally never done ASP.NET before but it's clearly used in some form of middleware. So it's just passing control to the next middleware in the chain, then handling the response afterwards.
    - mattmanser 10y ago
      You know, the word "inexplicable" roughly means "some form of thing that I can't explain". Just like your "some form of middleware" without an explanation. It's inexplicably giving up control of the context in the middle of a simple if statement, not once, but TWICE, with no discernible reason for doing so. That part of the program's not making any sort of IO calls or database calls or anything. What the hell is it awaiting? What does the function next() even do, that is's so poorly named?
      - orf 10y ago
        It exactly means 'unable to be explained or accounted for'. If you have no domain knowledge then yeah, it's going to be confusing. Not inexplicable. Confusing. If you've never heard of middleware then yeah, it's going to be a bit confusing. If you genuinely don't know then middleware is pretty simple. Imagine a stack of functions, each one taking a HTTP request and returning a HTTP response. Each middleware can meddle with the request and/or the response and pass control up the chain. Imagine a middleware that detects if the request is authenticated, and if not returns a 403 status code. If they are authenticated it passes control to the next middleware up the chain. next() is how you call the next middleware in the chain. It's awaited because future middleware can be asynchronous. Irrespective of if you know what next() does it's pretty easy to infer. At least I think. Your millage clearly varies, but it's not because of "these damn over complicated tools that the damn kids on my lawn are using". Harking back to the shitty, insecure, monolithic messes that the 00's produced and saying how simple they all where is... wrong, at best.
  - vbezhenar 10y ago
    I'm waiting for some opinionated build tool for web, which I can use without reading tons of tutorials and copypasting chunks of configurations from everywhere just to make it work. I can use maven, write very simple pom.xml and write my huge enterprise project and it'll work, integrate with IDE, I can build it as a web application, etc. But when I want to use something "standard" like TypeScript + React + Redux + hot reload, I'm ending with infinite headache, so huge, that last time I decided to use good old server-side JSP instead of this fancy shiny tech. What I want is to write package.json, put my code where I'm told to (let it be src/ts, src/css, or w/e) and be done. May be turn on plugins (turn on, not setup every plugin with custom configuration and glue them with JS).
    - esistgut 10y ago
      > What I want is to write package.json, put my code where I'm told to (let it be src/ts, src/css, or w/e) and be done. May be turn on plugins (turn on, not setup every plugin with custom configuration and glue them with JS). You should take a look on Ember or Angular 2 (with angular-cli).
- 35bge57dtjku 10y ago
  The original asp.net was pretty shit, too.
  - minork 10y ago
    I think most of the "shit" in this article comes from Angular. The asp.net part is pretty lean.
    - Yuioup 10y ago
      I think the commenter meant ASP.NET WebForms, which is pretty awful.
      - aikah 10y ago
        It tried to make web dev look like Winform devs, which Winform devs liked. It's no different from JSF and all that stuff and make sense in the enterprise context. If you are writing APIs, then no it doesn't. Ironically ASP.NET MVC is kind a going back to XML like declarative syntax, because it's actually useful. And Angular 2 is close to JSF/Webforms in spirit... the irony, things that looked obnoxious to JS hipsters and now hip again ...
        Yuioup 10y ago
        Yeah for sure. Angular2 is like RAD development in Delphi all over again. Controls connected to DataSources connected to ClientDataSets ...
  - mattmanser 10y ago
    I hate asp.net webforms as much as the next guy, but this is the same program in webforms: <html> <head> <title>Hello world</title> </head> <body> <p>Hello <%= Request["name"] %></p> </body> <html> How many lines of code and config files are in that blog? 100? Compared to the 1 line of actual code in this...
    - 10y ago
- JustSomeNobody 10y ago
  We're talking ASP.NET and Angular, so of course it's going to have some Big Enterprise (tm) stank on it.
  - iheartmemcache 10y ago
    To be fair, approximately half of that stank is JavaScript hipster junk not just enterprise FactoryFactorySingleton(); ASP.NET MVC 4 apps out of the box are 'click next, get checks' for new projects (and/or solutions) in Visual Studio. We're talking like Rails 2 easy to get up and running. This is a prime example of stupid hipster stank and enterprise amalgamated into a nightmare. The problem is multi-fold in that (i): MS just did that whole DotCore DotFX run-anywhere move with first-party POSIX support and that's not too streamlined yet, you're getting the huge modular bloat of NPM just to get Angular 2 on there[1], which is (ii): some weird set of like nine different package managers, rather than using NuGet (which is basically apt-get level of easy - i.e., pulling all the dependencies, configuring your solution to work with it, etc), (iii): you're also configuring the httpd in the process (see: the 404 added bulk in [d]) so the tutorial looks artificially larger (imagine if every tutorial had 'how to configure nginx' attached to it...). So you get: a) additional dependencies on npm in order to install Angular2 which b) requires SystemJS which does..something necessary but I'm not sure what...looks like ExpressJS but I claim ignorance (see [1]), then c) the fun task of setting up the AppModule file, the routes file, a base component file, and a service file, d) then there's something about configuring handling custom 404's Like I said, pretty much the definition of the worst of both worlds. That being said, I have a few client ASP.NET MVC projects in production which were easy to setup on within an AWS instance using Ubuntu Server LTS [4,5]. ----- [1] I strategically avoided JS when I saw all the crazy shit in that ecosystem take place. First it was MEAN[2], during the NoSQL era. Now, no one talks about Mongo and 'containers' are what's vogue, except apparently for your critical data. Docker was really cool for a while except now people don't like Docker because they think Swarm is over-extending systemd style? (Not sure about that claim entirely, I just skim those articles so I have a vague idea of 'what my industry is doing') So now I have a choice between Gulp or Grunt? Just like during the Rails days I had to choose between HAML or Sass or apparently both? I have no idea where Express falls into that. Then there's something-something Microservers too, which was the same thing as the J2EE[3] SOA stuff I used 15 years ago but apparently it's different? [2] http://meanjs.org/docs.html http://meanjs.org/docs.html If I want to set up MEAN, apparently now I have to read literally 4 manuals, along with read a SO post and perhaps watch some auxiliary Egghead videos hmmm. [3] The most ironic thing is with Gradle and Spring, I get my '15 minute setup' (my threshold for putzing around with new technologies) which is the complete 180 of J2EE hell 15 years ago when everyone was fighting WebSphere and JBoss and bitching about .xml hell. Also, for completeness sake, I'm aware that it's colloquially JEE(tm) now, but I elected for the naître form to be era-accurate. http://spring.io/guides/gs/gradle/ http://spring.io/guides/gs/gradle/ [4] With just my basic POSIX knowledge I've accrued putzing around with obscure *nix's over the last 15ish years... (probably not so easy for an average Win only guy who limited himself to the MSVS box though). [5] Might as take the opportunity to self-plug, available for odd-job (literally, you'll see what I mean when you click my link's 'rate' section) collaboration work. https://news.ycombinator.com/item?id=11816020 https://news.ycombinator.com/item?id=11816020 -- Edit: Consistency within note naming schema. Sorry, it's (partially) inverted from conventional Chicago style. That's the first time I've had ever had to invoke 3 different heading styles in an internet comment. If anything, just +1 me for my attempt at rigor ahaha
- AndrewDucker 10y ago
  If you _just_ want a Hello World then using a system designed for extensibility, etc. is probably not a good idea. But Angular 2 is not designed to be scaled down that far, and making it friendly for that use would probably mean that other things became more complex.
  - piaste 10y ago
    A pretty straightforward solution is to have all your extensible options, etc., but also provide a few static objects with all options set to a working default. Use those objects for the hello world, or change the options you need to change and ONLY those options - no boilerplate. Suave.io [0] does this very well I think. The hello world is: open Suave startWebServer defaultConfig (Successful.OK "Hello World!") and as you write your application you can edit the configuration and routes as you go: open Suave let myConfig = { defaultConfig with logger = myCustomLogger homeFolder = HOME_PATH } let myRoutes = choose [ path "/helloWorld" (Successful.OK "Hello World!") pathScan "/hello/%s" (Successful.OK << CreateCustomGreeting) ] startWebServer myConfig myRoutes [0] http://www.suave.io http://www.suave.io
Pigo 10y ago
I'm curious how much faster a Core solution runs compared to it's predecessors, and how many libraries you can really shed.
- matthewking 10y ago
  Some benchmarks can be found here: https://github.com/aspnet/benchmarks https://github.com/aspnet/benchmarks
snippet22 10y ago
To be honest you should look into Python. It's really short code and getting very popular. It uses decorators and those template garbage %> that no one uses anymore (extra). It also is by default the cleanest code and in my opinion the shortest code. It also has a library for everything. It also is the fastest for big data crunching.
- mipmap04 10y ago
  I don't think comparing a language to two backend and frontend frameworks makes much sense. Especially in the context of a tutorial about the frameworks (not an article evangelizing this particular stack). I mean, if someone posted a Django / react tutorial and I said "You should really look into Rust. There are benchmarks where it's faster than Python. It is also by default the cleanest code and in my opinion the best structured code.", it wouldn't be adding much to the discussion surrounding a tutorial. Is Python a better language than C#? Maybe, but that's not really something the tutorial is trying to argue against and is an entirely different discussion. To me, this is an apple and oranges comparison.
- sdegutis 10y ago
  You know, yesterday by happenstance I read a blog post[1] comparing Python (favorably) to Java. It makes the same general arguments as you. As for "really short code", yeah technically you write `[]` for a list instead of `new ArrayList()`. Unless of course you want different performance characteristics, then you have to write `from collections import deque` and `deque()` which isn't really more convenient or shorter than `new Deque()`. And yeah you can use the global function `open` and the method `read` to quickly get file contents. But you can write wrapper functions around the Java or C# equivalents if needed. It's just that usually you need more fine-grained control over what's happening than that in real-world code. And while I'm not really a fan of the `new` keyword or the fact that everything has to be within a class definition, a good IDE makes that stuff painless. And it's true that you don't have to declare types in Python. But then you lose the ability to control-click a type name of a variable to go to its definition, to know what you can do with it or how it works. As for "cleanest" code, that's definitely not a matter of syntax or even what the standard library looks like. Clean code can be written in any language. I've seen clean code in Ruby, Python, Haskell, Clojure, Java, C#, Swift, Objective-C, heck even C. (Never C++ though, but I don't doubt it probably exists somewhere.) As for having libraries for everything, so does every major language, including the ones I just mentioned. And I sincerely doubt that Python is the fastest for big data crunching. From what I've read, the situation is more like, Python is very popular among data scientists, but they got fed up with how slow it is in general, especially at numbers, so they wrote a Python library for number crunching implemented in C to make it really fast, and now it's like as fast as Java finally. [1]: http://www.programcreek.com/2012/04/java-vs-python-why-python-can-be-more-productive/ http://www.programcreek.com/2012/04/java-vs-python-why-pytho...
guiomie 10y ago
Interesting tutorial. I just wished the author used open source tools or more precisely visual studio code. I recently installed .net core on my chromebook (crouton with ubuntu 14), and used visual studio code to develop a basic web api + angular2 app. Lot's of tutorial take for assumption you use visual studio, and this makes it harder for those who don't. I always had issues finding the right package, right version and right package namespace. I really miss the VS functionality that finds includes missing libraries for you.

56 points by dymel 10y ago

frogfuzion 10y ago

Is it just me or are hello worlds getting much longer - especially on web platforms?

dymel 10y ago
Hehe true! But... it has always been like that with bigger frameworks (NancyFx excluded :)).
mattmanser 10y ago
Programming goes through phases. We are in a phase of ridiculously over-complicated tooling. In a decade or so someone will come up with the radical idea of some sort of rad tool which hides all the silly complications. Like we had in the 00s. I especially love the not one, but two, completely inexplicable: await next();
- orf 10y ago
  > I especially love the not one, but two, completely inexplicable What's inexplicable about await or next()? I've literally never done ASP.NET before but it's clearly used in some form of middleware. So it's just passing control to the next middleware in the chain, then handling the response afterwards.
  - mattmanser 10y ago
    You know, the word "inexplicable" roughly means "some form of thing that I can't explain". Just like your "some form of middleware" without an explanation. It's inexplicably giving up control of the context in the middle of a simple if statement, not once, but TWICE, with no discernible reason for doing so. That part of the program's not making any sort of IO calls or database calls or anything. What the hell is it awaiting? What does the function next() even do, that is's so poorly named?
    - orf 10y ago
      It exactly means 'unable to be explained or accounted for'. If you have no domain knowledge then yeah, it's going to be confusing. Not inexplicable. Confusing. If you've never heard of middleware then yeah, it's going to be a bit confusing. If you genuinely don't know then middleware is pretty simple. Imagine a stack of functions, each one taking a HTTP request and returning a HTTP response. Each middleware can meddle with the request and/or the response and pass control up the chain. Imagine a middleware that detects if the request is authenticated, and if not returns a 403 status code. If they are authenticated it passes control to the next middleware up the chain. next() is how you call the next middleware in the chain. It's awaited because future middleware can be asynchronous. Irrespective of if you know what next() does it's pretty easy to infer. At least I think. Your millage clearly varies, but it's not because of "these damn over complicated tools that the damn kids on my lawn are using". Harking back to the shitty, insecure, monolithic messes that the 00's produced and saying how simple they all where is... wrong, at best.
- vbezhenar 10y ago
  I'm waiting for some opinionated build tool for web, which I can use without reading tons of tutorials and copypasting chunks of configurations from everywhere just to make it work. I can use maven, write very simple pom.xml and write my huge enterprise project and it'll work, integrate with IDE, I can build it as a web application, etc. But when I want to use something "standard" like TypeScript + React + Redux + hot reload, I'm ending with infinite headache, so huge, that last time I decided to use good old server-side JSP instead of this fancy shiny tech. What I want is to write package.json, put my code where I'm told to (let it be src/ts, src/css, or w/e) and be done. May be turn on plugins (turn on, not setup every plugin with custom configuration and glue them with JS).
  - esistgut 10y ago
    > What I want is to write package.json, put my code where I'm told to (let it be src/ts, src/css, or w/e) and be done. May be turn on plugins (turn on, not setup every plugin with custom configuration and glue them with JS). You should take a look on Ember or Angular 2 (with angular-cli).
35bge57dtjku 10y ago
The original asp.net was pretty shit, too.
- minork 10y ago
  I think most of the "shit" in this article comes from Angular. The asp.net part is pretty lean.
  - Yuioup 10y ago
    I think the commenter meant ASP.NET WebForms, which is pretty awful.
    - aikah 10y ago
      It tried to make web dev look like Winform devs, which Winform devs liked. It's no different from JSF and all that stuff and make sense in the enterprise context. If you are writing APIs, then no it doesn't. Ironically ASP.NET MVC is kind a going back to XML like declarative syntax, because it's actually useful. And Angular 2 is close to JSF/Webforms in spirit... the irony, things that looked obnoxious to JS hipsters and now hip again ...
      - Yuioup 10y ago
        Yeah for sure. Angular2 is like RAD development in Delphi all over again. Controls connected to DataSources connected to ClientDataSets ...
- mattmanser 10y ago
  I hate asp.net webforms as much as the next guy, but this is the same program in webforms: <html> <head> <title>Hello world</title> </head> <body> <p>Hello <%= Request["name"] %></p> </body> <html> How many lines of code and config files are in that blog? 100? Compared to the 1 line of actual code in this...
  - 10y ago
JustSomeNobody 10y ago
We're talking ASP.NET and Angular, so of course it's going to have some Big Enterprise (tm) stank on it.
- iheartmemcache 10y ago
  To be fair, approximately half of that stank is JavaScript hipster junk not just enterprise FactoryFactorySingleton(); ASP.NET MVC 4 apps out of the box are 'click next, get checks' for new projects (and/or solutions) in Visual Studio. We're talking like Rails 2 easy to get up and running. This is a prime example of stupid hipster stank and enterprise amalgamated into a nightmare. The problem is multi-fold in that (i): MS just did that whole DotCore DotFX run-anywhere move with first-party POSIX support and that's not too streamlined yet, you're getting the huge modular bloat of NPM just to get Angular 2 on there[1], which is (ii): some weird set of like nine different package managers, rather than using NuGet (which is basically apt-get level of easy - i.e., pulling all the dependencies, configuring your solution to work with it, etc), (iii): you're also configuring the httpd in the process (see: the 404 added bulk in [d]) so the tutorial looks artificially larger (imagine if every tutorial had 'how to configure nginx' attached to it...). So you get: a) additional dependencies on npm in order to install Angular2 which b) requires SystemJS which does..something necessary but I'm not sure what...looks like ExpressJS but I claim ignorance (see [1]), then c) the fun task of setting up the AppModule file, the routes file, a base component file, and a service file, d) then there's something about configuring handling custom 404's Like I said, pretty much the definition of the worst of both worlds. That being said, I have a few client ASP.NET MVC projects in production which were easy to setup on within an AWS instance using Ubuntu Server LTS [4,5]. ----- [1] I strategically avoided JS when I saw all the crazy shit in that ecosystem take place. First it was MEAN[2], during the NoSQL era. Now, no one talks about Mongo and 'containers' are what's vogue, except apparently for your critical data. Docker was really cool for a while except now people don't like Docker because they think Swarm is over-extending systemd style? (Not sure about that claim entirely, I just skim those articles so I have a vague idea of 'what my industry is doing') So now I have a choice between Gulp or Grunt? Just like during the Rails days I had to choose between HAML or Sass or apparently both? I have no idea where Express falls into that. Then there's something-something Microservers too, which was the same thing as the J2EE[3] SOA stuff I used 15 years ago but apparently it's different? [2] http://meanjs.org/docs.html http://meanjs.org/docs.html If I want to set up MEAN, apparently now I have to read literally 4 manuals, along with read a SO post and perhaps watch some auxiliary Egghead videos hmmm. [3] The most ironic thing is with Gradle and Spring, I get my '15 minute setup' (my threshold for putzing around with new technologies) which is the complete 180 of J2EE hell 15 years ago when everyone was fighting WebSphere and JBoss and bitching about .xml hell. Also, for completeness sake, I'm aware that it's colloquially JEE(tm) now, but I elected for the naître form to be era-accurate. http://spring.io/guides/gs/gradle/ http://spring.io/guides/gs/gradle/ [4] With just my basic POSIX knowledge I've accrued putzing around with obscure *nix's over the last 15ish years... (probably not so easy for an average Win only guy who limited himself to the MSVS box though). [5] Might as take the opportunity to self-plug, available for odd-job (literally, you'll see what I mean when you click my link's 'rate' section) collaboration work. https://news.ycombinator.com/item?id=11816020 https://news.ycombinator.com/item?id=11816020 -- Edit: Consistency within note naming schema. Sorry, it's (partially) inverted from conventional Chicago style. That's the first time I've had ever had to invoke 3 different heading styles in an internet comment. If anything, just +1 me for my attempt at rigor ahaha
AndrewDucker 10y ago
If you _just_ want a Hello World then using a system designed for extensibility, etc. is probably not a good idea. But Angular 2 is not designed to be scaled down that far, and making it friendly for that use would probably mean that other things became more complex.
- piaste 10y ago
  A pretty straightforward solution is to have all your extensible options, etc., but also provide a few static objects with all options set to a working default. Use those objects for the hello world, or change the options you need to change and ONLY those options - no boilerplate. Suave.io [0] does this very well I think. The hello world is: open Suave startWebServer defaultConfig (Successful.OK "Hello World!") and as you write your application you can edit the configuration and routes as you go: open Suave let myConfig = { defaultConfig with logger = myCustomLogger homeFolder = HOME_PATH } let myRoutes = choose [ path "/helloWorld" (Successful.OK "Hello World!") pathScan "/hello/%s" (Successful.OK << CreateCustomGreeting) ] startWebServer myConfig myRoutes [0] http://www.suave.io http://www.suave.io

Pigo 10y ago

I'm curious how much faster a Core solution runs compared to it's predecessors, and how many libraries you can really shed.

matthewking 10y ago
Some benchmarks can be found here: https://github.com/aspnet/benchmarks https://github.com/aspnet/benchmarks

snippet22 10y ago

To be honest you should look into Python. It's really short code and getting very popular. It uses decorators and those template garbage %> that no one uses anymore (extra). It also is by default the cleanest code and in my opinion the shortest code. It also has a library for everything. It also is the fastest for big data crunching.

mipmap04 10y ago
I don't think comparing a language to two backend and frontend frameworks makes much sense. Especially in the context of a tutorial about the frameworks (not an article evangelizing this particular stack). I mean, if someone posted a Django / react tutorial and I said "You should really look into Rust. There are benchmarks where it's faster than Python. It is also by default the cleanest code and in my opinion the best structured code.", it wouldn't be adding much to the discussion surrounding a tutorial. Is Python a better language than C#? Maybe, but that's not really something the tutorial is trying to argue against and is an entirely different discussion. To me, this is an apple and oranges comparison.
sdegutis 10y ago
You know, yesterday by happenstance I read a blog post[1] comparing Python (favorably) to Java. It makes the same general arguments as you. As for "really short code", yeah technically you write `[]` for a list instead of `new ArrayList()`. Unless of course you want different performance characteristics, then you have to write `from collections import deque` and `deque()` which isn't really more convenient or shorter than `new Deque()`. And yeah you can use the global function `open` and the method `read` to quickly get file contents. But you can write wrapper functions around the Java or C# equivalents if needed. It's just that usually you need more fine-grained control over what's happening than that in real-world code. And while I'm not really a fan of the `new` keyword or the fact that everything has to be within a class definition, a good IDE makes that stuff painless. And it's true that you don't have to declare types in Python. But then you lose the ability to control-click a type name of a variable to go to its definition, to know what you can do with it or how it works. As for "cleanest" code, that's definitely not a matter of syntax or even what the standard library looks like. Clean code can be written in any language. I've seen clean code in Ruby, Python, Haskell, Clojure, Java, C#, Swift, Objective-C, heck even C. (Never C++ though, but I don't doubt it probably exists somewhere.) As for having libraries for everything, so does every major language, including the ones I just mentioned. And I sincerely doubt that Python is the fastest for big data crunching. From what I've read, the situation is more like, Python is very popular among data scientists, but they got fed up with how slow it is in general, especially at numbers, so they wrote a Python library for number crunching implemented in C to make it really fast, and now it's like as fast as Java finally. [1]: http://www.programcreek.com/2012/04/java-vs-python-why-python-can-be-more-productive/ http://www.programcreek.com/2012/04/java-vs-python-why-pytho...

guiomie 10y ago

Interesting tutorial. I just wished the author used open source tools or more precisely visual studio code. I recently installed .net core on my chromebook (crouton with ubuntu 14), and used visual studio code to develop a basic web api + angular2 app. Lot's of tutorial take for assumption you use visual studio, and this makes it harder for those who don't. I always had issues finding the right package, right version and right package namespace. I really miss the VS functionality that finds includes missing libraries for you.