Building Single-Page Applications with ASP.NET Core

Sign in to queue

Description

I had the privilege of spending some time with Steve Sanderson while he was on a brief stint on the Redmond Campus. In this video we took a look at the ASP.NET Core templates for Angular, React, and others. Some of the interesting features of the templates include hot module replacement (HMR), server-side pre-rendering, and production builds.

Some useful links:

Enjoy!

Embed

Download

The Discussion

  • User profile image
    malshep

     The second link is returning a yellow screen of death.

  • User profile image
    exim

    So glad that I'm not a web developer nowadays :)

  • User profile image
    spottedmah

    @exim: haha, I feel you!

  • User profile image
    Joe

    why do this. Use angular. MVC is deprecated for SPA or web development. It's great for Web.Api, but angular cli is the way to go nowdays.

  • User profile image
    Fscopel

    @exim @spottedmah what!? are you guys kidding me!? Web development is so exciting!  There are indeed a boat load of options, but pick your poison and build your stuff.  The web is getting better and better. I honestly think it is a great area in CS to be in, both when it comes to the fun of it and as an area of work. :)

  • User profile image
    koo9koo9

    mvc seems unnecessary with Ng or react. with these client side UI frameworks, web api/node.js + UI framework will be way to go.

  • User profile image
    sethjuarez

    @malshep:fixed!

  • User profile image
    idflyfish

    What a great video! Steve is awesome, I always enjoy his stuff. 

    Seth, great questions! It is like you were reading my mind!

     

  • User profile image
    WizarrC

    I was able to use the redux store in Angular 2+ and now get most state restored after an HMR update. Really good stuff there.

    @koo9koo9 & Joe: It depends. node.js is pretty slow for webapi, but it does allow for programming both front and backend in the same language and works nice with the angular cli. Also, the one language to rule them all philosophy is very powerful. If you like or already know C# and asp.net technologies then this is a decent bridge that is better performant for the backend. Unfortunately, types are not universal between the backend (c#) and frontend (Typescript) and often requires copy & paste and then fidgeting the model layer code.

    @sethjuarez Would be nice to have automatic Typescript codegen for simple C# classes to Typescript interfaces. Much needed for webapi calls.

    What I would really be interested in is a new c# like language (c# subset) that compiles down to C# and Typescript instead of just IL/Native. That might be troublesome due to the lack of union types and non-nullability in c# to have a native feel in Typescript. An alternative would be to have Typescript compile down to dotnet IL. A Typescript.NET Language? If that ever happens, I would imagine a Microsoft XAML based SPA would be plausible. Google announced their own language technology for JVM (Java)/JavaScript with Kotlin so I know this stuff is doable.

  • User profile image
    WizarrC

    I would also like to add that for anyone out there using the Node or JavaScript Services packages before, it has gotten a lot better over time. Also want to note that I had an issue during the early stages of the package trying to AOT an angular package and node.js was totally freezing on me. First thing I wanted to do was debug server-side node.js via the JavaScript services package. That seems like quite a niche thing to do and couldn't get it to work. I posted my issue on GitHub and Steve Sanderson was quite responsive and helpful, found the issue I was having and issued a patch the next day with a Nuget package to follow immediately. That man is a rock star in my book.

  • User profile image
    vvilelaj

    Great video... it helps me so much to begin with angular2 in visual studio.

    Thantks from Peru.

  • User profile image
    Emmad

    Hi
    This is a general comment for ALL Channel 9 videos. I always find the videos not steaming well (very very slow). On the same machine I can play all sorts of videos EXCEPT channel 9 - This has been the case with Windows VISTA and Windows 10. Not sure what technology you are using that is unique but it does not work well at all. Again, this is a general comment and I am suffering from this for several years!

  • User profile image
    Trong Phan

    What about dotnotcore 2.0 review 1? Will you upgrade those?

  • User profile image
    Sergey Ivanchenkov

    Nice video, however, there are defects in both Angular and React templates. I am trying to get Microsoft's (or anyone relevant for that matter) attention to get those defects fixed for a while now, leaving similar comments on all videos with these Core 1.x templates used. These templates produce working apps in Edge and Chrome, but IE11 is hopelessly broken. May be this is known defect and that's why not a single video on the internet demoes these templates using IE browser, and rather use either Edge or Chrome? Angular application badly malforms HTML injecting extra html-head-meta-body tags into already existing [body][app] tags, and then throw javascript error in vendor.js file which then prevents any javascript from executing on any of the pages. Increment counter does not respond to clicks on the "Counter" page due to this error.

    React template is even worse in IE browser: "Home" and "Counter" pages work only until you go to "Fetch data" page, after which going to any page no longer works throwing javascript errors like "SCRIPT5007: Unable to get property 'getHostNode' of undefined or null reference" and "Object doesn't support property or method 'from'". Since this is SPA, single javascript error breaks all client-side interaction making this application template entirely useless and therefore unusable.

    When will this be fixed? Does anyone even care or in view of Core 2.0 work these templates are being already abandoned? I haven't had any single response to any of this cries for fix in this non-working nice videos. Where is QA prior to posting the videos? Is IE browser no longer considered an option?

  • User profile image
    John

    I agree with Sergey Ivanchenkov. I've attempted to use the angular template. I thought I was doing something wrong. As Sergey points out there are extra HTML, HEAD, BODY tags. Vendor.js is throwing exceptions. The Counter page does not function. All of this seems to only be an issue in IE11. Unfortunately, in our business environment we are stuck with IE10 AND 11. I hope this gets fixed.

  • User profile image
    george

    what i don't like in microsoft develpers is that they don't care is it simple to understand or not, they just code and look it works. that's not good.

  • User profile image
    Michael

    My heart sinks whenever I see an interesting topic being discussed, only to find out it`s being discussed by using... Angular.
    over
    Microsoft truly seems to have an obsession with Angular; the overwhelming percentage of samples using it does not reflect its real-world usage stats alongside React for example.



  • User profile image
    BrettOJ

    Does anyone know the commend  dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

    Does NOT install the Angular template :(

Add Your 2 Cents