Stories
Tagged with Web Development
Year in Review - 2019
The new year is coming soon and that means it's time for my yearly look back at my life and industry. This was an odd year for me since I didn't do many conferences and stayed home to solve some issues and work on the film.
The year home did me a lot of good. My health is even better and first year without major kidney stone issues. If you've read my blog for a while, you might remember that I did this last year.
After being curmudgeonly about turning 50, I feel a lot better about it now that it's behind me. I still don't feel like retirement is coming soon. Luckily since I'm mostly teaching, most days I have time to code on my own, continue to make films, and be available to my family. I'm a very lucky person. I Here are some categories of my life.
Using FluentValidation in ASP.NET Core
I'm working on an example to explore some more complex modeling in EF (for SQL and NoSQL) but that's not ready so I thought I'd use it as a bed for some Validation testing I'm doing. The result is some exploration of the FluentValidation project that I haven't had time to dig into until now.
Validation is an interesting exercise in ASP.NET (Core) and trying to get it correct is quite difficult. Ultimately in this day of SPAs and mobile apps, we need a solution that handles the client and the server. If you don't validate on the server it just doesn't matter.
FluentValidation is a replacment for the existing validation attributes (DataAnnotations) that you might already be using. The idea is to separate the validation from the classes. To be clear, this doesn't replace setting up your Entity Framework types with Fluent API this is about server-side validation only. Think of it as a clearer way to define rules for validation of your models or DTOs.
Upgrading from Gulp 3 to 4
I may be very late to the party, but once Gulp 3.x stopped working with recent versions of Node, I've been forced to update my projects to the newest version of Gulp.
I was hesitant to learn it as I often think of Gulp as just a side-line tool that I use for production. Luckily for me, the new Gulp is actually simpler and more intuitive. I wanted to write a quick blog post explaining how I converted them.
Let's start with my Gulp 3 version:
My Vuex Talk from Connect.Tech
I was delighted to spend some time today at Connect.Tech conference. Great web conference and it was packed. So many excited people who wanted to talk about web technologies!
I saw some great talks before mine. I tried to convince the audience that Vuex would simplify not complicate their Vue projects. Hopefully I succeeded.
As promised, I wanted to share my slide and code.
Endpoint Routing in ASP.NET Core 3.0
Endpoint Routing was introduced in ASP.NET Core 2.2 but has been made a first class citizen of ASP.NET Core in 3.0. While you're old projects will continue to work without it, upgrading to Endpoint Routing will improve your applications.
Endpoint Routing is a system to handle routing across different middleware systems (e.g. MVC, Razor Pages, Blazor, SignalR and gRPC). By having endpoints that work with each other, you can think of a system more holistically then having terminal middleware that don't talk to each other. Let's see what that actually means in practice.
If you've seen the new project template, you've probably already noticed that setting up RazorPages and MVC look a bit different. First in the ConfigureServices:
My First Look at ASP.NET Core 3.0
I'm finally getting around to looking at updating my examples and courses to 3.0. This post is based on .NET Core Preview 8 so this might change in the future.
There are a number of great walkthroughs for moving your ASP.NET Core 2.x projects to 3.0. So I don't want to repeat that. Instead, I want to talk about what's happening, not just a list of things to do.
To discuss these changes, i'll talk about a project I'm current converting (CoreCodeCamp which is the basis for the Atlanta Code Camp), though it's a branch that likely won't be deployed until after the event.
The State of Writing Services for the Web
I started writing services in websites back in the .NET 1.0 days. Originally I was doing just POX (Plain Old XML) services in a very crude way so we could get the job done for our internal systems back in the early 2000's.
This means I've been through the "new tech" crazy with services for a long time. I've spent much of the last year digging into different tech for services to interact with websites (though many of the same issues are for rich clients and IoT). I'm not done and don't know how right my assumptions are yet, but I thought I'd try to start a conversation.
While I've lived through POX, SOAP, and REST...I don't think this is another wave. I think this is a widening of options for services. But what does the service ecosystem look like right now? (Caveat: I'm going to miss your favorite idea, so feel free to add to the discussion below.)
Changing Nested State in Vuex
I've been updating the Atlanta Code Camp website to improve our administration workflow. With the Call for Speakers coming up soon, I wanted to make sure we had a good way of picking only the best talks.
One of the things I've done is move it to a Single App with Vuex at the center of it. But I ran into an oddity with Vuex that I thought I'd share.
Much of the work I do in Vuex has to do with adding, updating and removing objects from the state. That works exactly the way I would expect. For example, I have a lot of mutations that looks like this:
Did Vue.js Just Blink?
There is a lot of buzz around the internet about Vue.js 3.0's announcement about a new composition model. There are a lot of questions about it and I think much of it is 'they moved my cheese' more than 'they're breaking everything'.
So let's talk about it...
Evan You's announcement in London last week scared a bunch of people, including me.
What's New in ASP.NET Core 3 Preview 6
ASP.NET Core 3 seems to be taking a similar tact to version 1 as it is adding a lot of functionality and phasing it in with different previews. While a lot of the articles seem to be focusing on the non-ASP.NET features (e.g. WPF, WinForms, etc.), I thought it would be nice to let those of you who are ASP.NET devs know what is in Preview 6 just for you.
It feels a lot like the ASP.NET MVC/API side is being treated as mature and stable as there is are not a lot of surface changes. Microsoft does seem to be doubling down on Razor Pages and Blazor. It feels like they want .NET Core to be a good fit for different styles and backgrounds of developer. This release is no different.
Let's take a look at the details:
What Does the GitHub Registry Mean to Developers?
As you might have heard, GitHub has created it's own package registry. On the face of it, it might just feel like an opportunity to get more 'buy-in' into using GitHub, but I think something else is going on.
While most people are focusing on the support in NPM for the GitHub registry, they're actually supporting a package repository for a handful of package services. These include Nuget, Ruby Gems, Maven, and Docker. Why are they doing this?
The biggest benefit for people already using GitHub is to be able to expose their code as packages directly in the same environment. This limits the number of steps involved.
Using an InputMask with Vue (e.g. The Vue Ecosystem)
One of the first times I started working with Vue, I was concerned about it's long-term success. I was coming from Angular and their ecosystem is huge.
I was delighted to find that the ecosystem is pretty varied. The Vue website tries to make it easier to find the kinds of libraries and components that you might need. It comes from two places on the website.
On the Vue website, you can look in the Ecosystem menu:
Vue's Single File Components vs. React's JSX
I have to admit, my first experiences with React several years ago were meet with a lot of cynicism. The idea of mixing JavaScript and Markup made me clutch my pearls to the core.
Now I know that you can use React without using JSX, but I think that is missing the point in a lot of ways. Of course, I'm not a React expert so I am sure you'll let me know how wrong I am ; )
In case you haven't used React yet, let me just talk about how JSX works. In React, when you build a component, you're mixing JavaScript with markup. The idea is that during compilation, the markup is replaced with DOM code to build up the markup you're specifying. For example:
Creating a Vuex Plugin
If you're building larger scale Vue objects and you're not using Vuex to centralize your state, please stop and go learn Vuex. Really.
For those of you still here, sometimes it's helpful to be able to monitor state changes to perform other tasks. For example, to send messages or communicate with servers that aren't about state (e.g. SignalR is a good example). That's where Vuex plugins come in.
A Vuex plugin is a simple function that is called once during the setup of a Vuex store. Typically you'd just create the function/arrow function taking an instance of the store:
export default store => {
};
Inside the function, you just want to subscribe to changes to the store as you need. An easy way to think about this is to use subscribe to a mutation:
export default store => {
store.subscribe((mutation, state) => {
if (mutation.type === "setError") {
// Alert someone
alert("Error occurred!");
}
});
};
The mutation that is passed in has a "type" and a "payload". With these properties of the mutation you can determine what to do. For example, the above example just pops up an alert (a really bad thing to do btw) when setError mutation is called. setError is a mutation in a store:
Vue.js Talk at Atlanta Vue Meetup
I had the opportunity to speak at the Atlanta Vue Meetup recently. This was a great group of people who had mostly had experience with Vue.js.
I'm so used to having to try and convince people to use Vue, that this was a fun talk to get people interested in using it in different ways than they are used to.
As promised, here are the slides and code:
Vue.js Presentation at the Atlanta .NET Users Group
I had a great time presenting to the Atlanta .NET Users' Group last night. I talked about where I think Vue.js.
I got to espouse my opinion (again) about SPA being large monoliths instead of building 'islands of functionality'. I learned a new achronym too, "Multiple Page Apps" or MPAs for this type of client-side dev.
As promised, I wanted to share the code and the slides:
Should You Be Using the Vue CLI?
The Vue team has been working hard. Much like Angular, the Vue team has a command-line interface (CLI) to help develop projects with Vue.
If all you're doing is building a SPA, the CLI can really help simplify setting up a project. But is that all you should be doing with Vue?
In my Vue course and talks, I've been advocating that Vue is a good middleground between the philosophies of Angular and vanilla JavaScript. Not every project is a Single Page Application (or multi-page application if you prefer). In this way, I really like how Vue can be scaled up as necessary. In my mind this means that there is a use-case for using Vue without the complexities of a JavaScript build step.
Talking Vue with .NET Zuid
If you're not in the south part of the Netherlands, you might have missed my most recent appearance last night. Great hosts, guests and sponsors make the night and easy and fun talk.
After a long day at Techorama NL, I was whisked away to Eindhoven for a talk at the .NET Zuid group (e.g. Southern .NET Group). I was able to show them the basics of Vue.js and pontificate about my continued hatred of the phrase "Single Page Applications".
As promised, I wanted to make the slides and code available to the attendees. You can get them here:
.NET Developer Days Poland Wrap-up
Had a great week here in Warsaw! Got to see some great sights and great developers!
Thanks to the great team behind .NET Developer Days! Great group of attendees that asked some great questions.
Here is are the slides and code links I promised:
Intellisense in ASP.NET Core Projects That Use NPM?
I've been advocating using NPM for a client-side package manager in the last few months since Bower support has been depreciated. And while this works pretty well (using Scott Allen's UseNodeModules middlware) to allow you to just point at the NPM folder.
Of course, for production, this isn't a great solution. I've been showing people to use Gulp or WebPack to copy only the files you need in production. But for development, there is a problem: Intellisense.
I've noticed that Visual Studio 2017 only seems to notice files in the wwwroot folder. After trying a bunch of things, I think I found a solution. If you open the CSPROJ file and add this section to point at the node_modules directory:
Avoid Lazy Loading in ASP.NET
I know I am not going to make everyone happy with this post. I've been hoping to not have to make this post, but Entity Framework Core has finally added support for Lazy Loading, so it's time.
This problem is not new. Entity Framework (not Core) also has this problem. But it's far easier to accidentally do this in that version. Luckily, Entity Framework Core has made it harder to inadvertently turn it on. Let's see what's wrong with Lazy Loading in Web Apps.
Just to make sure were talking about the same things, I'll explain how Lazy Loading works.
The Reports of the Death of JavaScript are Greatly Exaggerated
Not John BoltonThe notorious quip by Mark Twain came to mind today as I was reviewing comments to my recent blog post about Blazor, a lot of the comments talked about WebAssembly being the death of JavaScript.
The fact is that we've all been here before. In fact, we've been here many times. And I, for one, don't want to simply see WebAssembly as something to replace JavaScript. Here are my thoughts.
So I've been in software development for over thirty years (I know, i'm old). And my experience with web development started about twenty years ago. So I've seen a lot of solutions to avoiding client-side development with Scripting Languages come and go. Here's a short list:
Who is Blazor for Exactly?
In case you haven't been following the news about WebAssembly (e.g. WASM), it's a new way to build something akin to bytecode for the browser. The latest versions of most browsers now support it including Chrome, Firefox and Edge.
Microsoft has built an experimental release of something called Blazor that builds web projects in WebAssembly so you can write all your code in C#. But after playing with one of the builds, I'm starting to think about who this really is for. Let's delve into what WebAssembly is and then how Blazor works to explain what I think.
There are a plethora of good descriptions of WebAssembly on the web, but I'll try and summarize it in practical terms. Essentially, it's a binary format for code in the browser. The expectation is that this code should run much faster than traditional JavaScript. This gives the browser several key benefits:
Are your Node-Based Tools Failing in Visual Studio?
Since I do a lot of web development and teach web dev on the Microsoft platform, I spend a lot of time in tools that are node-based. If you don't know already, gulp, grunt, webpack, etc. all use node to run themselves.
Because of this, Visual Studio tries to be a good guy and pre-installs Node with Visual Studio. When you use some of these tools in Visual Studio, they just work. No more having to tell dev's to go install something to get them to work.
Of course, keeping that version up to date is a bit of a nightmare. I ran into yesterday and wasted several hours of my life. Let me tell you the story:
Learning Web Development with Pluralsight
As many of you know, I'm a Pluralsight author and I've been writing courses for the site for a long time now. I have over twenty courses to my name. While my ASP.NET Core courses get a lot of attention, I've been trying to help people get started in general web development through my courses.
To this end, I wanted to answer the question I get a lot of times about how someone would transition into web development from desktop or other programming (or even completely new to the field). This post's purpose is to help people see what Pluralsight courses (mine and others) would be a good primer into web development.
While this isn't a Pluralsight learning path, it's what I suggest to get started with web development on the Microsoft stack (using open source tools and technologies).