Using MVVM on the Web with KnockoutJS
As most of you know, I have been in the Silverlight space for quite a while. (And to be clear to the chicken-little amongst you, no I am not leaving the Silverlight community.) I’ve been building a web application for consumers so that HTML + JavaScript represents the right solution to building a project like we’re building (more on what I am building in the near future).
One of the things I wanted to be able to do is to build longer-lived pages where it made sense without having to resort to post-backs or hacked together JavaScript. In fact, what I really wanted was a client-side ViewModel (e.g. MVVM) for my web page. After looking at several of the existing frameworks for the job, I settled on KnockoutJS as a great solution. The currently released version (1.21) is a good solution, but the developers of the framework have released a Beta (1.3Beta) version that greatly simplifies what I needed. If you want to follow along, make sure you download that version here.
The Case of the ModelBinding Failure
I wasted an evening last night on a simple bug of mine. I was writing a simple HTML data entry page. I was using JSON + $.ajax to POST data to a ASP.NET MVC controller and it used to work. But for the life of me I couldn’t figure out what was wrong. Let’s start with some background.
Modern Web Development - Part 1
This is the first of ten parts of this blog post. The topics will be:
In the past year I’ve had a side project. FirstInked’s Beta recently shipped and I wanted to share with you what I’ve learned. To start out, I want to specifically thank two people who were really great in helping me formulate the strategies I’ll talk about. They are:
Modern Web Development - Part 2
This is the second of ten parts. The topics will be:
Working with JavaScript can be daunting. In the past, I’ve seen some projects with just a handful of huge files that become difficult to manage. So in architecting what I needed to build, I wanted to adhere to the idea that there was common code and there was view-specific code. There are two different classes of JavaScript that I care about: libraries (i.e. not my code) and site code (i.e. my code).
The Web Workshop: Client-Side Dev Training
I am excited to announce that I’ve refactored (and renamed) my web-centric training course. The old “ASP.NET MVC/HTML/CSS Workshop” was just too long. It’s now called “The Web Workshop”.
It Is Time to Learn JavaScript
JavaScript is having a great year. With the continuation of web development, Node.js, and even Apple adding JavaScript as a replacement for their AppleScript.
You may be waiting until you have to learn JavaScript, but maybe you should learn JavaScript to make you a better developer. Let me pitch it to you:
Why Should You Care About NodeJS?
I know that many of my readers are .NET guys and a core constituency actively hate JavaScript so bear with me and let’s talk about NodeJS for a minute.
Just to be clear, I am not advocating anything by this post. What I think is important is that as you mature as a developer that you look at whatever is happening in the community and be open to why something is new and what new ideas are being proffered by the new technology. My hope is that this post will show some of that.
Why is DOM-Centric JavaScript Hard to Test?
While producing my recent course on Large Scale JavaScript, I was digging into the testability of JavaScript. So much of the JavaScript I see out there continues to be jQuery driven, DOM-centric JavaScript.
Sure, many of my readers are moving towards AngularJS, Ember and other client-side libraries that encourage modularization, testability, and separation of concerns, but not all web developers are. Ultimately we need to test our JavaScript no matter what the nature of it is.
New Course: Front-end Web Dev Quick Start
It’s that time again. I’ve recently released a new course on Pluralsight. This time I tackle Web Development for complete beginners.
If you are a developer who wants to move from either back-end development or from desktop development to client-side web development, this course may be for you. The concept around the course is to get you up to speed with the very basics of web development in a short amount of time. In fact, in just over three hours, you should be able to get a basic understanding of web development.
Node.js and Visual Studio? Sure!
I’ve been working on a new course for Pluralsight on “Node.js for .NET Developers”. It’s been a fun course to write and one of the aspects of the course that I find interesting is that the open source Node.js Tools for Visual Studio plugin actually works really well.
What I particular like is that it doesn’t change the way you use Node.js – it can live side-by-side with command-line tooling like NPM, Bower, or even node.exe. It doesn’t try to do more than it should.
Choose Your Own Adventure with Node.js View Engines
As some of you know, I’ve been delving into Node.js for a new Pluralsight course that is coming out soon. One of the interesting aspects to me is the idea of server-side view engines. As an ASP.NET (and ASP before that) guy, I’ve been using server-side view engines for a long time…not that we always called them that.
Most Node.js templates out there (including the Express.js application template that ships with the Node.js Tools for Visual Studio) includes the Jade View Engine.
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:
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.
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).
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.
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.
Bootstrap 3 Grid System Explained
Are you starting to work with Bootstrap 3? If so, maybe I can help. I’ve recently released a Bootstrap 3 course on Pluralsight that covers many of the new features including how to migrate from Bootstrap 2 to 3.
Here is an excerpt from the course where I explain how the new grid system works in Bootstrap 3:
JavaScript for the C# Guy: The confusion about 'this'
As a C# guy I am comfortable with the idea of 'this' in the scope of a class (or 'Me' for your VB'ers). It's a relatively simple idea that allows you to access the instance of the class that you're a part of to call members.
In JavaScript that have a similar idea but because of the nature of JavaScript it can cause some odd behavior. Let's look at the standard behavior first.
New Pluralsight Course on Debugging Web Sites
After a long gestation, I finally completed my Web Debugging course for Pluralsight. This new course covers the details of using the tools in the browsers to debug layout, JavaScript, CSS and networking. While the course shows you how to find the tools in all the major browsers, the focus is using Firefox and Firebug. Though the techniques shown in Firebug apply pretty seamlessly to all the browser tools. This course is not .NET specific, but should be useful to any web developers.
The course is broken up into four sections:
aspConf was fun!
I had a good time doing a couple of talks today. If you joined me online, thanks for coming. For those who missed my talks, they will be posting the videos on Channel 9. As promised you can get the slides and examples here for my talks:
I hope you enjoyed the talks!
My New Course: JavaScript for C# Devs
If you are a C# developer who is ready to take on JavaScript, I have the course for you. The goal of the new course is to help C# developers understand the nature of JavaScript so you can write JavaScript like a native speaker. This is for developers who need JavaScript for any of the popular places to use JavaScript including:
The course aims to map C# features directly to JavaScript features so you can understand many key topics including:
When to Not Use Observable in KnockoutJS
I've been really busy lately and my list of things to blog on has been getting backed up. One thing that occurred to me while building my new JavaScript course was about how KnockoutJS and Observables actually work. Here's the deal.
KnockoutJS supports the idea of an observable object. This is similar to WPF/XAML concept of INotifyPropertyChanged interface. Most KnockoutJS dev's I've talked with use KnockoutJS's observable everywhere. But there are cases when you don't need it.
TypeScript (or the obligatory post about it)
Like many of you, I've been itching to see what Anders had up his sleeve and I wasn't disappointed yesterday when they announced TypeScript. After teaching all day, I took a quick look at TypeScript (and I do mean quick).
There was a lot of buzz yesterday and the response seemed to be in one of two camps (for the most part):
JavaScript for C# Developers Live!
If you're in the Atlanta, I am holding a one-day JavaScript for the C# Developer course. The course will cover:
This is the perfect course for existing .NET developers who are trying to get up to speed with JavaScript for web development or Windows 8 App development. The course will take place on November 14th and costs $299.99. You can register for the event here:
ReMIX South 2012
I had a great time at ReMIX South this year! It's been great to meet developers and designers and learn how they are using design tools of all sorts.
If you attended my "Modern Web Development" workshop, here is where you can get the slides and code. If you have questions about the workshop, please just add a comment and i'll respond as soon as I can:
My Courses
| Vue.js by Example (Early Access Now Available) |
| Bootstrap 4 by Example (Just Released) |
| Intro to Font Awesome 5 (Free Course) |
