Big success: I created a (mostly empty) angular2/asp.net core project. But victory did not come easy…
On my mac I updated VS Code to the current version, then installed asp.net core following the instructions. Installed typescript. Installed yeoman. Installed the asp.net core generator. Created an empty project and it run. Just like that. Even debugging worked. VS Code had to install few extensions but it knew what it needed. Pretty cool.
Looked at the project structure… it’s all different… but manageable.
Next step – angular2. Looked at the quick start guide, looked at couple of blog posts. Everybody suggests something different. Then I found a yeoman generator for asp.core and angular2 RC4 (current is RC5) and decided to give it a try. Worked fine.
Then decided to make some changes. Added a Speaker model, Speakers controller and a GetSpeakers api call. Then on the client side added a component, a controller, a service, a route, an entry in the navigation, maybe a hundred other small things… it took a while but it all worked at the end.
Biggest issue for me was that nothing is where you expect it to be on the mac. At the end I ended up downloading a norton commander style file manager from the app store just to be able to view/compare two folders.
Finally – create a repo and push it to GitHub. This always gets me. They could have done a bit better job in VS Code/GitHub integration. There should be a button Create a repo and push it to GitHub. Something that should be a minute took me half an hour googling error messages and typing scary things in the command prompt.
Web development changes faster than ever so in order to stay current I’m starting a new learning projects. I’ll create an app using Angular 2 and ASP.NET Core. Angular 2 is now in RC5 which should be pretty close to final, ASP.NET Core was just released. I’m planning to do the whole thing on a Mac using Visual Studio Code.
For the project itself, unless I come up with a better idea really soon, I’ll do the old conference/codecamp app that I’ve done at least 3 times already (Silverlight, ASP.NET MVC 3(?) and Windows Phone).
Wish me luck…
In Xamarin studio I’ll create a new solution called Jokes with a class library (PCL) called Jokes.Core. The “Core” is the convention that MvvmCross uses for the project containing your business logic, can be changed to something else. After the project is created I’ll add the MvvmCross nuget package. That added references to the MvvmCross HotTuna libraries but also created an App.cs file and a ViewModels/FirstViewModel.cs file. App.cs is the entry point of our application, all it does is to initialize the IoC container that comes with MvvmCross and set the start page for the application, in this case FirstViewModel, which I’ll rename to MainPageViewModel.
Next thing I’ll do is to add Models folder with a Person class. The person class is very simple, first and last name properties and a full name that is the first and the last name concatenated.
Then I’ll go to the MainPageViewModel and I’ll add properties for FirstName, LastName and Greeting. The greeting will be composed from the text “Hello” and the full name of the person. The important thing about the ViewModels is that they need to implement the interface INotifyPropertyChanged which is the interface responsible for making the databinding work. MvvmCross gives us a basic implementation of INotifyPropertyChanged with the base class MvxViewModel.
Now I’ll go ahead and a unit test project called Jokes.Core.Tests and I’ll write a test for the MainPageViewModel that when the FirstName is “John” and the LastName is “Smith” the greeting will be “Hello John Smith”. Test passes.
Next step – I’ll add a new Android project called Jokes.Droid and I’ll add MvvmCross nuget to it. I have to add a reference to the the Core project and rename FirstView to MainPage (by convention that needs to match the MainPageViewModel from the Core project so the view model locator can find it)
I’ve been playing with Xamarin.Forms for the last few days. While it is pretty impressive that you can build an iPhone, Android and WinPhone app from the same codebase, I get a feeling that WinPhone is a second class citizen. One of the first things that bugged me is that you do not get the standard WinPhone page titles “for free”. Here is some XAML to fix that:
<!-- WinPhone page title -->
<Label Text="APPLICATION TITLE" TranslationX="4" TranslationY="4" />
<Label Text="page title" Font="64" TranslationY="-12"/>
Hopscotch is a little phone game that I started about two years ago and never got to finish. This week I started from scratch and published it in one day. The design of the game as well as the icon which I created from a screenshot turned out pretty great. And my six year old daughter absolutely loves the game, makes me feel so proud…
In the seventies, just before I was born, Xerox (where I spent half of my career) invented MVC (model-view-controller). There are many variations of the pattern one of which is MVVM (model-view-viewmodel). While the differences between the various flavors of MVC, MVP, MVVM, etc. are in my opinion purely academic, there is absolutely no doubt in my mind that following a pattern like that can make the dev’s life a lot easier. There is somewhat of a high price for entry and a bit of a learning curve, but once you commit to it, there is no going back.
The essence of MVVM is that you separate your data (the model) from you presentation (the view) and you put all your UI logic in the view-model, where it can be developed and tested separately from the view itself. When targeting multiple platforms, in the ideal case you can reuse your models and view models across the different platforms and only code separate views.
There are several different MVVM libraries (MVVM Light, Caliburn, etc.) but it is important to understand that you do not need to bring a library in order to do MVVM, it just makes things easier. I’ve never used mvvmcross before but it promises to deliver databinding on windows, android and ios with reusable view models. It also contains a simple IoC container as well as few other tools and plugins.
mvvmcross is available as a nuget package. you add it to your projects, follow the provided (short) to-do list and you are in business. I was able to wire up a win store app with two views, view models, a service, etc. in maybe 15 or 20 minutes. Tomorrow – droids for breakfast 🙂 …