Web Frameworks: Soundness

For a web framework to be effective, it should offer you more than just functionality. It doesn’t matter how much hard work you put into your application if it breaks when people use it. Beyond testing, let’s explore how frameworks can help us build better code before we test it.

While we have been comparing web frameworks to music, soundness in this context isn’t how good the framework sounds on a turntable. It is the concept of our code being in a good condition and robust. While we should and can test for this, helping us in other ways should be one of the main benefits of using a framework.

This is part of a series on web frameworks. If you’ve missed our previous posts, you may want to start with If we chose our JavaScript framework like we choose our music…

Overview

Also, unlike many other application development solutions, it isn’t just one language we have to use. Outside of JavaScript, most applications have to deal with some level of HTML and CSS. Also, most applications have to deal with external resources as well, from images, to serialized metadata, to fonts.

To get our application to perform properly, the server environment that it runs in can have a dramatic impact on our application. Furthermore, we still must contend with running our application in different contexts, from older browsers to low powered mobile devices.

We will look at how each framework approaches these challenge of helping an end developer better know that the code they author will operate as they intend.

There are generally three areas where a framework can help us, and we will look at each framework from those stages. First, we have development time. What sort of information can we get during development time that helps us know if we are authoring our code properly? Second, when we go to build our applications, before we deploy them, is there any secret sauce that helps ensure that our application will work? Third, once we have our application loaded on the server, is there anything that helps us ensure that the application runs properly?

Angular 2+

Overall approach

Development time

For Visual Studio Code, there is an Angular template language service available, which provides IntelliSense for Angular 2+ templates, which helps improve the support for detecting template syntactic errors at design time.

Build time

Both testing and linting are not part of the out of the box Angular build process. They are standalone commands when using the CLI build command, which the developer would need to be aware of to ensure they have a robust build process. Of course these can easily be integrated into a CI process.

Run time

React + Redux

Overall approach

One of the more challenging aspects of sound development with React + Redux is that Redux action types are strings. As a result, it can be quite easy at design time to utilize actions improperly, making it impossible to statically identify incorrect actions at design time.

React and Redux both promote writing code that is separable and fully testable. In particular, Redux promotes the use of pure functions for reducers, which, when followed, ensures that a reducer is fully testable without a need for injecting state into the reducer. The belief of this architecture is that it promotes patterns that reduce cross dependencies between units of code, which could make an entire system fragile.

Development time

Also, it has become somewhat common to develop React + Redux applications in TypeScript. Since both packages provide their TypeScript typings integrated with the package, it is possible to author downstream applications that are sound based on the provided typings. This includes that ability to author JSX in a sound fashion using the built in JSX support of TypeScript, also known as TSX.

Build time

Run time

React provides a React Developer Tools extension for Chrome. There is also a special debug mode for React which provides additional run-time meta data which can be used to help debug an application.

Vue.js

Overall approach

The Vue documentation encourages unit testing of Vue components, although the Vue project does not recommend any particular unit testing framework.

Development time

Build time

Run time

An application can register a global error handler through Vue.config.errorHandler. All render errors will be passed to this handler.

Dojo 2

Overall approach

The Dojo 2 CLI is designed to make it easier for developers to ensure that their applications are structured appropriately, testable, and built in an efficient way.

Development time

Build time

Run time

Ember

Overall approach

Development time

There are third-party plugins for WebStorm (IntelliJ), Visual Studio Code, and Atom which can help provide IntelliSense when developing an Ember.js based application.

Build time

Run time

Aurelia

Overall approach

Development time

Aurelia, like other frameworks, does rely on templates for creating components. There is a Visual Studio Code extension which gives some code completion and IntelliSense for the template language. The last commit to this project was over 4 months ago, so it is difficult to determine if this extension is actively developed and maintained.

Build time

Run time

Summary

Angular 2+

There is a decent amount of tooling to make an entire Angular application hang together and good tooling to provide run-time insight and debugging to an application.

React + Redux

Vue.js

Dojo 2

Ember.js

Aurelia

Up next

Originally published at www.sitepen.com on October 3, 2017.

Modernizing Apps, Tools & Teams | sitepen.com | Twitter: @sitepen