We’re off…

Standard

This blog has now moved (not far) here

Advertisements

The state of Angular 2 Tooling

Standard

The Angular 2 framework has now been released so it’s a great time to jump in and learn the ropes. However, whilst we can relax our attention on the changing API’s in the framework for a short time, we’re still faced with the endlessly changing world of front end tooling.

Webpack is currently top of the pile for all of our developer workflow needs. But what else is there and where do we start?

Angular cli

A fork of the ember cli that’s recently been updated to support webpack replacing systemjs. This is almost certainly going to be the dominant player going forward as it has some prominent angular community contributors. Remember that much of the featureset comes from webpack rather than the cli itself.

For:
  1. Your lowest friction option for getting a project up an running.
  2. The generators are really useful for creating the often repeated boilerplate in an Angular app.
  3. The generators help maintain consistency across an application in the absence of existing coding standards.
  4. Built on test first principles. Unit and e2e tests are baked into the generators.
Against:
  1. Performance overall is mediocre. Initialising a new project or running tests for the first time can be very slow.
  2. Still in beta and past changes show they’re not afraid to move the goal posts by quite some margin.
  3. Currently no OOB support for cache busting in the webpack build.
  4. The inline help system isn’t good.
  5. Due to the development cadence it’s difficult to get answers to problems. Most answered questions on stackoverflow are long out of date.

ASP.NET Core Yeoman generators

If you’re looking at developing an Angular application using ASP.NET Core for the backend these generators are worth a look.

This is a great video by Steve Sanderson at NDC Sydney 2016 discussing their capability in some detail.

Community Starter Templates

These are a couple of github projects that provide a basic application along with some preconfigured tooling. Generally they’re going to provide the same bootstrapped project experience as you’ll get from the angular cli but in a slightly lighter touch template.

preboot/angular2-webpack

Low touch template with testing baked in and a solid README to get you going. As of this writing still being updated regularly.

mgechev/angular-seed

Gulp based build – not a bad thing! It’s an older project but it’s still being updated. Again the README is solid and there are a number of forked reference sites linked that may prove handy.

Azure Code Samples

Standard

We’re certainly not short of demo solutions and todo apps but I was pleased to receive an email today with details on the now comprehensive list of Azure code samples available for download here.

Of particular interest to me are the identity management and authentication samples I’ll be hooking into Dynamics CRM 2016 and of course anything node related will always get my attention.

Solving a failed npm install on the Raspberry Pi

Standard

TL;DR If you are struggling with npm install failing on a package you are convinced is no longer a dependency of your current package.json structure. Try clearing out your node_modules folder or take a look at the npm prune command.

I know this post is quite a long one but most of the content was created in realtime as I was working the problem. I’m a voracious note taker so figured I’d just write up my notes as a blog post as I went along.

I have a little express website running on my raspberry pi B+ from home. I deploy to this site using a post-receive git hook that deploys the master branch and runs npm install --production to ensure the latest dependencies are installed. Notice that I use the –production switch to ensure devDependencies are not installed.

After trying to access this site following a push I found the site to be unavailable. I use forever to maintain the node process so I checked the logs and noticed a number of errors indicating new dependencies had not been installed.

I ssh’d into the server and run npm install --production manually and saw that it was taking an unusually long time to complete eventually failing due to native module compilation failure.

Here are the new packages my latest commit has introduced:

  • dependencies
  • passport
  • passport-local
  • devDependencies
  • browser-sync
  • gulp
  • gulp-nodemon

As you can see, passport and passport-local are the only packages that should be installed. However, after I traced the failed module up the dependency tree shown below you can see that npm was trying to install browser-sync whose dependency graph relies on native modules.

bufferutil -> ws -> engine.io -> socket.io -> http-proxy -> foxy -> browser-sync

At this point I checked online to see if there were any known issues but only came up with this github issue which is old and closed.

Let’s see what the status of the --production switch is in the current npm docs

With the –production flag (or when the NODE_ENV environment variable is set to production), npm will not install modules listed in devDependencies.

That seems consistent with my understanding. So let’s make sure we’re on the latest version of npm and see if that fixes it.

My npm version (at the the time of posting) is 3.3.12, let’s update with the utter brain f*ck that is self updating software.

sudo npm install npm -g

The update has taken us to 3.6.0 but having tried to run npm install --production again I’m getting the same result with a failed compile.

So I know that the dependency causing the problem is browser-sync. Let’s confirm this by removing it from package.json. When I now run npm install it shouldn’t matter whether it does or doesn’t install devDependencies as the package causing the problem isn’t in either section.

To my surprise this still fails! OK npm install is clearly not just running through the package.json and installing the specified packages and their dependencies as I expected.

The next logical step (yes I know, many of you may have arrived at this point long ago) is to delete my node_modules folder and rerun npm install.

Success! Everything installs as required.

What’s going on? Well, it would seem that npm install doesn’t just install packages and dependencies defined in your package.json. Instead it sees your package.json as simply the top level in the dependency graph. Once it’s completed the install for all the packages in your package.json, it must then start enumerating all of the packages under node_modules and repeat the process for their package.json files.

This behaviour makes sense and more importantly for me would explain how I ended up with this problem. My git hook script does an npm install without the –production switch. After I’d fixed this up as part of my analysis of this issue I’d fixed the problem for future deployments but I’d left my node_modules folder in an invalid state because the failing module (browser-sync) was still in there.

Further reading on this problem shows there is an npm command called prune that will clear all dangling dependencies from your node_modules folder based on your current package.json. In fact we can do the following to clear out just our devDependencies, a common requirement if we’ve inadvertently installed them on the production box…as if!

npm prune --production

So, problem solved.  I hope this post has been useful or at least mildly entertaining for the more initiated out there.

Cannot access LocalDb from Visual Studio 2015 Community Edition

Standard

Today I was trying to spin up a quick Web API for an angular project I’m working on in a fresh install of Visual Studio 2015 using Entity Framework Code First.  Unfortunately after creating a simple model, when I tried to update-database to make sure all the moving parts were in a good state I was seeing the following error:

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 50 – Local Database Runtime error occurred. The specified LocalDB instance does not exist.)

After some investigation and questioning of whether LocalDB was installed (it was).  I discovered this error is caused by the connection string created by Entity Framework targeting an instance called MSSQLLocalDB which won’t exist.  I believe the error occurs because VS 2015 sees that LocalDB is already installed during installation and therefore doesn’t create this new instance on install.  The fix is to simply replace the instance name of MSSQLLocalDB with v11.0 in DefaultConnection in web.config.

.NET Web Development – Now and Next

Standard

I recently received an email from a friend and ex-colleague asking about the state of play with respect to web development. Like many of us he’s seen how you can quickly get lost down the rabbit hole with technologies such as JavaScript and all the OS frameworks, CSS, Mobile, HTML5 and ASP.NET MVC. Where are they all going and what’s important right now and in the future. It’s a difficult one and I can only really provide opinion.

Below is my reply which is essentially a cut and paste so it may lose context in some places, but hopefully others will get some use from it.

JavaScript

I believe JavaScript is going to gain hugely in popularity over the next 2 years to be a language way beyond just DOM manipulation.  At the moment the majority of developers, especially us .NET developers tend to use it as if it’s the same as C#.  The only similarity though is the C like syntax.  JavaScript is prototypal, dynamic, functional and object oriented (what a mouthful!).  Essentially what that means is if you’re writing JavaScript in the same way as you write C#, you’re doing it wrong.  There are lots of good resources out there but I’d highly recommend reading anything by Elijah Manor especially this http://enterprisejquery.com/2010/10/how-good-c-habits-can-encourage-bad-javascript-habits-part-1/.  Also take a look at his presentations from MIX 2010 and 2011 on JQuery.  He’s on the JQuery team and knows his onions but explains stuff in a way us mortals can understand.  I tweeted (see side bar) a link to a JavaScript patterns guidance repository on GitHub. Go look that up, it’s good stuff.

Do we care about any of the above for DOM manipulation; probably not.  But when you get into using frameworks such as knockout.js for writing web based data-bound MVVM applications you soon realise there’s a bit more to JavaScript than document.getElementById.  Single Page Applications (http://en.wikipedia.org/wiki/Single-page_application) ranging from Gmail through to what will eventually be JavaScript and possibly HTML5 Windows 8 solutions will require a reasonable knowledge of this stuff.

HTML5

You need to get past all the noise around things like geolocation and the audio and video tags.  HTML5 is about a rethink of what HTML should be.  No more daft doc types etc.  As an example, take a look at the data-* attribute feature as this is heavily used in things like unobtrusive validation in MVC.  If you’re developing a site today how does HTML5 fit into that picture, what’s the browser support?  Most people think we’re not ready for it yet but in actual fact the spec is smart in terms of backward compatibility.  For example, the data-* attribute will simply be ignored by older browsers.  The JavaScript framework Modernizer will allow you to style new HTML 5 tags in older browsers simply by injecting these elements into the DOM during document load.  Cracking read on HTML5 here http://diveintohtml5.info/index.html

AJAX

Get an understanding of how to use it from JQuery ( $.ajax, $.getJSON etc. )  The Microsoft Ajax libraries are dead and no longer supported.  This will be more useful going forward as people start writing web applications with frameworks like knockout.  You’ll be presenting an entire API to the client browser predominantly accessed via ajax with JSON being the data format of choice.  Taking it to the furthest level your API will be RESTful, embracing HTTP rather than abstracting it as WebForms has for the past 10 years.  Microsoft is pushing several stacks for this in terms of OData and the WCF Web API.  A lot of people however are dismissing these in favour of using straight ASP.NET MVC and presenting the API through Controllers that only ever return JsonResult.  It’s like MVC without the V!  No idea where we’ll end up eventually with this one.

JSON

See above but essentially it’s nothing more than a data format that’s nice and lightweight over the wire in comparison to SOAP and also plays nicely in terms of being de-serialised into JavaScript objects on the client.

CSS

You may have already noticed but as soon as you get into using JQuery you realise you need a good handle on CSS selectors so let’s do that one first.  You’ll have no doubt in the past been down the road of just randomly editing the CSS, refreshing the browser and hoping the CSS gods are looking down upon you and everything now looks as expected.  Unfortunately not a fat lot’s changed in this area but we’re not alone in this camp so there are two OS frameworks called SASS and LESS (http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/) which aim to alleviate some of the pain experienced with CSS.  Do you need to know these; probably not but again it doesn’t do any harm to know they’re there to help.

CSS3

Apart from the ubiquitous border-radius!  Media Queries are the big one here which you’ll hear all about in the same sentence as “Responsive Web Design”.  It’s all about adapting the styles used on a web page based on the viewport (device-width) amongst other attributes.  The most common usage scenarios are therefore styling for desktop or mobile.  MVC 4 is rolling some of this stuff in but also allowing you to easily create media query based or device specific views.  Phil Haack did a decent talk on this at Build.  Search http://channel9.msdn.com .

JQuery

Know it, learn it, and love it.  You’ll be doing nothing without it.  As mentioned up there get your head around the $.ajax API and understand CSS selectors.  The best thing I’ve found about JQuery is it’s so ubiquitous now that all you have to do is think about what you want to achieve, type it into Google and append jQuery to the end.  Cut, paste and job done.  Next level on from that is writing a plugin and then if you’re so inclined JQueryUI which is all about widgets and presentation and finally JQueryMobile which is a mixture of JQueryUI and HTML5 for the mobile devices.  I knocked up a half decent iPad version of my LearnAndGame site (see below) literally in about 10 minutes. I’m over simplifying JQuery here as it’s so much more but that’ll do for now.

ASP.NET MVC

Get the HTML5 Boilerplate template off the extensions gallery within VS.  This shows you some great guidance on website best practice.  It’s a bit over the top as a starting point for a site in my opinion but a good reference for learning.  Moving on nicely from that also go get the NuGet gallery source from GitHub as this is also a great reference site for MVC development.

WHAT NEXT

Take a deep breath and go grab a scotch! After that I’d recommend taking a look at knockout.js http://knockoutjs.com as mentioned above.  It’s a fantastic framework and will really help you get to grips with writing JavaScript using best practice.  If you’re anything like me you’ll get terribly distracted when reading samples of code and not understanding what the JavaScript is doing.  You’ll head off to find out more, spend a few hours in http://jsfiddle.net getting hopelessly lost and eventually find your way back to where you started.  This can be insanely frustrating but at the same time immense fun.  Personally, it’s why I love being a developer.

If you’re so inclined feel free to get your Git** and GitHub mojo on and fork my LearnAndGame repository here https://github.com/Daxaar .  At the moment it’s nothing more than a playground for my learning JavaScript but I’ve got some high aspirations for that as a learning platform for kids.  At the moment it’s taking a serious dip in priorities.

** Quite simply the most bonkers and yet wonderful Distributed Version Control System (DVCS) known to man.  It makes working in TFS version control feel like seriously hard work.

Have fun
Daz

NuGet Version Control Workflow

Standard

With the release of NuGet 1.6 we now get the ability to control the importing of dependent packages at build time through the injection of a custom .target file into each project within the Visual Studio solution. This may seem unusual for teams that use Team Foundation Server for version control as we typically like to see those binaries included as part of the check-in process into the usual lib/dependencies/third-party (delete as appropriate) folder.

So why have the NuGet team done this? Well mainly for the DVCS teams as their repositories can grow quite large with all these binary check-ins causing merges to take significant amounts of time. But even if you don’t use a DVCS such as Git or Mercurial simply having this option available to us for any version control workflow is simply awesome in my opinion. I think I’ll be checking out how it works for comparison on an upcoming small project.

For now if you want to use the “source control free” workflow you can enable it at the solution level.

 

NuGet just continues to get better and better and with one of the Project Leads Phil Haack now working at GitHub I’m even more excited to see where the product goes. Further information on this new feature is available on the NuGet docs site here.