I have always held a passion for web development, it’s where my career started. The whole web platform has exploded and I really believe that the gap between desktop and web applications is really narrow or nearly non-existent now. This is a quick look at a few of the technologies I keep hearing lots about and have used to varying degrees.
Where do I start?
If you haven’t kept an eye on web technologies, looking now will likely blow your mind. There are so many frameworks and picking the right one is a huge challenge in itself, and that’s before you’ve even opened an angle bracket.
In the Windows world, the defacto standard for desktop application development is Windows Presentation Foundation (WPF for short). There were many reasons why the web just couldn’t deliver. It runs in a sandbox, so no (well limited) access to the machine. The performance was pretty poor for fast streaming data or huge grids, as popular when building financial applications. These limitations have now gone and I think reasoning for picking WPF over a Web framework is dwindling.
There are hundreds of application frameworks, KnockoutJs, BackboneJs and HandleBarsJs to name a few. The two biggest single page application players (in my opinion) are ReactJs (written by Facebook) and Angular (written by Google).
Both React and Angular are fast. React had the edge over AngularJS, although Angular have come back with Angular 2 & 4 and have made significant improvements. One of their demos actually shows Angular 2 beating React, although I suspect in real terms the performance is negligible.
React achieves it’s blistering speeds by allowing us to manipulate a virtual DOM, which it then diffs against the real DOM and applies the difference. DOM manipulations are well known to be expensive (performance wise). I believe React also collects several changes and applies them once, so not every change will cause a re-render. Changes are applied to the portions of the view affected and not the entire view. Angular 2 & 4 has change detection which only updates the parts of the DOM that need it.
Both Angular and React have a routing module, that allows you to control navigation within your application. Navigation is seamless since the application is running in the browser, it doesn’t need to perform a new get request for each new view. Getting data is included in both frameworks through their HTTP clients to make requests to web services in a trivial manor.
Both frameworks also support bindings from components to the view and back again (although with React you’ll likely be binding to JSX, an extension to JS which looks like HTML, which React then generates real elements for). In React you can pass data to components via props or through context if all components require it (Redux for example). Angular has a similar concept called @input and supports dependency injection. Both frameworks have the concept on uni-directional data/event binding.
React is a light weight framework, that is quick and easy to get up and running. The learning curve is fairly shallow and it’s really lightweight. If you need anything else, you’ll have to reach for another framework or roll your own.
Angular in comparison comes with much more, such as dependency injection and Type Script out of the box. There is the concept of Angular modules, which bunch together related components, these can then be loaded up-front or on-demand. There are directives, which are similar to behaviours in WPF, although in some ways better. You can use pipes, which are similar to converters in WPF to change the shape of your bound data. For enterprise applications, I would be more inclined to first reach for Angular as the tool of choice. There are significant similarities to WPF, so the transition is not overly difficult for a competent developer to pickup.
Command Line Interfaces (CLI)
I have used both these frameworks in the early days and setting them up to build correctly can be time consuming (and sometimes painful) task. Luckily both providers have introduced command line interfaces to quickly get up and running. Package management for web is done exclusively through Node Package Manager (NPM) so you will need this. Joining now is great, since we have moved away from multiple package managers, such as Bower. I strongly recommend you try one of these frameworks out, to appreciate how quickly you can get started.
To get up and running:
npm install -g create-react-app
You now have a fully building and working project. To run it, type:
Read more on the react git hub blog.
npm install -g @angular/cli
ng new hello-world
You now have a fully building and working project. To run it, type:
Read more at the Angular CLI Git Hub page.
There is a huge choice of editors out there, the popular ones are Atom (from Git Hub) and Microsoft Visual Studio Code for web development. I use Visual Studio Code, although use the insiders version, to get the latest features as soon as they become available. Both editors have a large contribution user base through extensions, so there are many additional options which can be bolted on. There are extensions for everything, from helping to close angle brackets to colour pickers.
If you would like to write a service, using a technology such as Web API Core, then Microsoft Visual Studio has everything, although it’s heavy weight and only runs on Windows. If you’re like me and have a Mac for development at home, then I love the JetBrains Rider (especially great if you’re a ReSharper fan). It feels refreshingly lightweight and runs everywhere and have ReSharper shortcuts built in. Microsoft offers “Visual Studio for Mac“, which feels pretty bloated, although looks good for Xamarin development.
Write once, deploy everywhere (almost)
If you’re building a single page application that can run in a sandbox, then it can quite easily run every where, in a browser, on a mobile device or on the desktop.
If you need access to the machine or to run outside of a sandbox for some reason, then you’ll need to build a desktop application, which can easily run on Mac, Windows or Linux, although not in the browser or mobile device.
If you’re building a significant application, you’ll likely require some data from a service.
Again, there are hundreds of frameworks. Some popular choices include NodeJs+Express, Web API Core, Socket.IO, GraphQL and Signal R. Services such as WCF appear to be dwindling, possibly because it’s an overly complex and bloated framework.
Micrsoft’s Web API is a huge, cumbersome framework with well known dependencies on bloated assemblies such as System.Web. Luckily Microsoft have pretty much re-developed Web API to Web API Core and it follows a similar approach to NodeJs. Everything is optional, down to supporting default file types or serving static files. Because of this, it can run really fast (faster than NodeJs, if you believe Microsoft) and run on Mac, Linux and Windows. No more huge Microsoft License fees for server operating systems, if you choose. The framework is really easy to get started with and an attractive option for .NET developers. If you have used ASP.NET MVC Framework, Web API Core is pretty much the same thing, returning data rather than HTML.
Both NodeJs (with Express) and Web API Core allow you to build ReSTful request-response services, although as mentioned in my RX – Everything is a stream! post, a lot of data is constantly changing and the request-response paradigm perhaps is not the best choice. To accommodate streaming and bi-directional communication, there are a couple of choices that stand out, Socket.IO or Signal R.
There is a lot to take in, although the community is making it very easy to get the basics up and running really quickly. The introduction of a CLI for the front end, means all the boiler plate code is created for you. The choice of back end technology is open, you don’t have to restrict your self to a particular technology stack all the way through and can pick what is best for your project. The ability to run every where is appealing and the fact that updates can be seen immediately, reducing the need for old school installers. I think the gap between traditional WPF desktop applications has closed significantly now and I think we have another exciting toolset at our disposal.