Stories
Tagged with JavaScript
A Month with Vue 3
In my spare time, I've been working on a micro-services example to try and make a minimum viable micro-service using ASP.NET Core. To make things that much harder, I've also decided to use Vue 3 for the front end. In for a penny, in for a pound.
After spending the last month with Vue 3 (or so), I've come away with some opinions that I thought I'd share. Some of these are because of the lack of support for Vue 3 for some of the common libraries I used, but in many ways it's a love letter to some of the features I really love. Her we go...
Developing on a Beta can be difficult. Lots of time there are inconsistencies between different versions of packages that are in different states. I haven't found this to be a particular problem with the Vue ecosystem.
Vue Down Under
Yet another of my talks that resulted from being bored at home and on Twitter. I had a great time talking to this great group.
Even though it was a .NET group, they were open to me digging into why I think Vue is a great choice for the right project. They had great questions too!
As promised here are links from the talk:
Vue 3's Global Mounting
As Vue 3 continues it's relentless Beta drive (with almost daily Beta builds), all of us Vue developers have to get ready for changes. The one I want to mention today is the changes in mounting a new Vue object.
In prior versions, Vue used the global Vue object to specify things like plugins. In Vue 3, this changes to allow you to mount separate Vue instances with different plugins. Let me show you how.
The idea of starting up a Vue project takes a couple of forms. For example, in Vue 2 you could either just use the JavaScript file or use a transpiler. The startup for both of these cases were similar (but not the same). For example:
Where Did Filters Go in Vue 3?
With Vue 3 now in beta, some people are starting to look into it deeper (including me). While a lot of the features are meant to improve the performance and speed, the Vue team did decided to take out a feature lots of people use: filters.
Let's talk about why filters are gone. Then I'll show you a pattern I'm using to replicate the functionality.
As a review, in Vue 2 (and 1 actually), Filters were a way to format data in markup. For example:
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:
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.
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:
Should I Be Using the ASP.NET Core SPA Templates?
I've been writing demos for Vue, Angular, and React for my SignalR micro-courses over on my Wilder Minds site. For Angular and React, I started out with the the SPA templates, but I found them confusing and hard to do a minimal example.
I tend to suffer from "You Moved My Cheese" and wondered if I was throwing the baby out with the bathwater. Let me talk about my experiences creating projects with and without the templates.
My initial problem with the templates is that they are using node under the covers to handle the build of the project. I hate that these details are hidden from me, but I'm confortable with having a console window to keep a watch on my webpack-based projects (the Vue CLI, Angular CLI and React CLI all wrap webpack).
Vuex and Asynchronicity
If you're using Vuex for state management in your Vue.js applications, there is a good chance that you need to use async operations (e.g. API calls). I have been doing this a while, but falling back to using Promises in most cases.
As I've been using async/await in C# for a while and wanted to try out async and await in JavaScript. In implementing the change, I thought I'd share how I did this in a simple Vue app.
To start out, I have a little demo project where I'm making some API calls directly in Vuex via actions:
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:
A Vue to a Skill - New Article in Code Magazine
I'm back writing again. I've missed it. You'll see more and more articles in different publications from me in the near future.
The first of these articles is for Code Magazine. It's a quick overview of how Vue works and how you can use it for more than just SPAs. Check it out here:
Let me know what you think!
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:
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:
Kansas City Developers Conference
So KCDC is over for another year. This was my first year at the event and the organizers made me so welcome. Highly recommended!
I had the opportunity to teach both VueJS and Visual Studio Code for the attendees. As promised, here is the code and the slides from the event!
Introduction to VueJS
Why I Moved to Vue.js from Angular 2
I know I’m going to upset some people, but hang in and read the whole article…really. In updating my blog recently, one of the changes I wanted to make was to update my use of the JavaScript framework I used for the contact page.
When I built this blog, I wanted to get comfortable with Angular 2. I shoehorned Angular 2 into the contact page as an excuse to use it. Never a good decision.
My goal with replacing Angular 2 was to remove a lot of the complexity. Getting Angular 2 up and running requires a lot of moving parts. By removing Angular 2 I was able to eliminate a lot of pieces of the build. These pieces were making my builds on Azure App Services brittle so it had to go.
How'd You Build That Map?
When I started the Wilder World Tour, I built a simple map so my Mom could know where I was during the trip. I thought others might be interested too.
I’d been meaning to find an extra day or two to wrap this all in a little wrapper and share it. I finally found time the last couple of days. The result is travelMap, a library that allows you to build your own travel maps including showing current location, lines between locations, and popup information about each stop.
Find the project on GitHub and use it, share it, fork it:
AngularJS and VS Code in Singapore
I’m currently in southeast Asia for my world tour. While in Singapore, I had the pleasure to chat with a great group of developers about AngularJS.
I love when I get great questions and the developers at this event were really keyed into the web stack and asked the hard questions about AngularJS (and of course AngularJS 2.0).
As promised, here is the slides and example code:
Visual Studio and WebStorm: Am I Mad?
I might be. In many of the projects I help with we have to handle back-end and front-end coding for web projects. This means I need the best in breed in tools no matter where I’m writing code.
In many cases this is Visual Studio. I love this tool and have for years. While it’s not without it’s own foibles, it does most things really well. But not everything.
Web development in Visual Studio used to be pretty painful. The JavaScript, CSS and HTML support was substandard. Since the introduction of Visual Studio 2012 as well as Web Essentials things have gotten really good. If you’re not using Web Essentials yet, go get it now! It includes great support for a variety of things that help with your day to day development including:
My New Course: WebStorm Fundamentals
Last week my seventeenth course for Pluralsight! I love building content for Pluralsight and it allows me to teach technologies that I am utilizing in my own life. This new course is no different.
The new course is all about using WebStorm 9 to build web applications. The course was built using the WebStorm 9 EAP so I was able to cover new features as well as the basics.
The course is taught over six modules covering everything from basic HTML, CSS, and JavaScript but also delving into more advanced features of the IDE. The topics covered include:
It Is Too Soon to Panic on AngularJS 2.0
So AngularJS team finally is talking more publically about what they’re trying to do. At the ngEurope conference last week, they talked very opening about their new strategy for AngularJS 2.0 and it has a lot of people freaked out. Sounds a lot like some reaction to Silverlight in fact.
I’m seeing a flood of hate on the AngularJS team at the moment. I am not sure it is justified. Here’s why:
While there are a lot of details about what they’re thinking being shown and shared, the reality is that AngularJS 2.0 comes out in 13 months. A huge amount of time in web development. I am sure they are hearing all the concern and fear and are taking it into account. I suspect it will be fine.