November 15, 2016

TL;DL – .NET Rocks! 1374 (JavaScriptServices with Steve Sanderson)

Show link: .NET Rocks! 1374 (JavaScriptServices with Steve Sanderson)

Guests: Steve Sanderson

Show Notes

  • JavaScriptServices is a set of NuGet/NPM packages and project templates. The goal is to help make ASP.NET a really good platform for building single-page applications (SPAs). If starting from scratch, the set of choices is extensive — e.g., about 5-10 libraries, many architectural decisions, file structure decisions, mixture of client/server.
  • JavaScriptServices doesn’t replace the frameworks themselves, does it?
    • No; it’s a way of using them.
    • Suppose you want to build an Angular 2 app (client) on ASP.NET Core (server). Do these go in separate projects? Do they know about each other’s routing systems? How does the build system work?
  • Is this JavaScript middleware?
  • Do you use Yeoman, or can we use Visual Studio templates?
    • There are templates in a Yeoman generator. Angular 2 — the most popular — is available as a Visual Studio template.
  • This is similar to Angular CLI.
    • In a way; they’re both tackling the “getting started” problem.
    • The main difference is that Angular CLI is focused solely on Angular. It also doesn’t address how to host the application.
  • Is JavaScriptServices specific to a deployment target (e.g., Azure or IIS)?
    • No; it’s opinionated about the build system.
    • WebPack is used (it’s dominant in the front-end web dev world) to understand the dependencies in the codebase. For example, your TypeScript file may reference HTML as a view, and that HTML file may reference the CSS file, and the CSS file references a font file. You configure how your files get bundled — e.g., single file, inline into the HTML.
  • The environment where you develop is very different from the one you ship to. Does JavaScriptServices help with that (e.g., minification)?
    • Yes. Also, you can mark parts of your app to get lazy-loaded vs. pre-loaded. That’s a WebPack configuration setting instead of being in the code.
    • Features that would typically be too difficult to implement are now commonplace. An example is hot module replacement. When files on disk change, those changes are injected into your browser, which is useful for debugging because you don’t have to go re-setup state.
  • This is very much the .NET/Microsoft way of taking care of as much plumbing as possible.
  • What are some of the routing problems that people run into?
    • Server side vs. client side. A common gotcha is when the client says it will do the routing (e.g., /users/567 doesn’t actually exist on the server, but the client knows how to interpret that URL), but if given something that should be on the server (e.g., favicon image), the request gets sent to the client instead.
    • JavaScriptServices has helpers in the project templates to make a more intelligent decision about whether to route a request to the client or not.
  • The focus seems to be on the developer. Does JavaScriptServices impact the deployment?
    • There’s not much run-time tooling; if so, it’s primarily developer-focused.
    • One exception is the server-side rendering feature. Rendering on the server addresses perceived performance, it makes the page crawlable because there’s no JavaScript that must be executed first, and it handles the NoScript extension. The page may not work properly, but it’s visible.
  • Server-side rendering was what made WebForms not perform/scale well. Now we’re seeing a return of that concept.
    • You can get perceived or actual performance improvement from the user’s perspective.
    • Redux has a good way of interacting with server-side rendering. The client doesn’t have to rerun any code the server already ran. There’s an object called the “store” that describes all of the state of your app. Redux responds to those changes and tells React to update the UI. That way you don’t need two trips: one for snappy rendering and another for a working page.
  • What impact has React had on web development philosophy?
    • React took a different approach than Knockout and Angular 1. It dispensed with the idea of having a declarative view; it’s purely procedural.
    • React created JSX syntax, which is HTML directly inline with JavaScript — think “var dropdown = <Dropdown>…”.
    • There’s abstraction about how data is passed around and how components get properties from their parents, which makes it more efficient. There’s a first-class understanding of data in your app. (Angular and Knockout don’t know about the state of your app in the server.)
    • React is more functional than object-oriented.
    • There’s a very different approach of mixing markup, styles, and JavaScript. The idea of manipulating CSS in JavaScript was to keep React components isolated and clean.
  • Web development is not about brochureware to reach the masses. We build productivity apps.
    • Many features that have gone into the specs recently deal with applications, not just content presentation.
  • Is JavaScriptServices only available for .NET Core?
    • Yes, for the moment. Inside JavaScriptServices there is NodeServices — a run-time communication between a .NET process and Node process (this is how server-side rendering works). That component does not depend on .NET Core (runs on .NET 4.6).
    • NodeServices currently in beta (as of November 2016), but is pretty well battle-tested.
  • NodeServices seems like how you run Node on ASP.NET Core. Could you also use this for things other than JavaScriptServices?
    • Case: .NET Core is limited on media processing (e.g., image manipulation, audio processing), but Node has many packages to accomplish such tasks.
    • Case: You’re using a third-party service with only a Node API.
  • Are you still working on Knockout?
    • Yes, but not as much. The core team is taking the work. Steven is more involved in opinions on project direction.
  • Binding is the magic strength.
    • Redux is more than an abstract source of data; your app must have a pattern/lifecycle about how it updates.
    • If you want to get started with Redux, be willing to spend time reading about it; it’s very different (i.e., not like MVC). It has very strict functional patterns.
    • An example of when the learning curve pays off is “time-travel debugging” where you can rewind and fast-forward your state.
  • For JavaScriptServices, is there a reference architecture, sample application, or walkthrough to get started?
    • The simplest case is when you create a new project; there are samples for doing basic things.
    • For a more detailed example, there are samples on GitHub. There’s a music store example with Angular 2 and JavaScriptServices, and also another version with React.

Better Know a Framework

CircleCI is a web-focused, containerized continuous integration and delivery platform. One container and one build is free.

Listener E-mail

From show #1075 (SPA using Knockout with Steve Sanderson); Sanderson recommended not using a SPA unless there’s a login screen. The listener was also pleased to hear Sanderson affirm that SPA frameworks have a steep learning curve.

Technology Giveaway Ideas

Refit your home with new lighting (e.g., LED strips).

2 Comments

Comments are closed.