Guests: Steve Sanderson
- 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?
- 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.
- 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.
- 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.
- There’s not much run-time tooling; if so, it’s primarily developer-focused.
- 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.
- 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.
- 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.
- NodeServices currently in beta (as of November 2016), but is pretty well battle-tested.
- 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.
- The simplest case is when you create a new project; there are samples for doing basic things.
Better Know a Framework
CircleCI is a web-focused, containerized continuous integration and delivery platform. One container and one build is free.
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).