2

I have a pretty general question about the design of Angular web applications. I'm a big fan of writing services. Sometimes I write services that have only utility methods that don't require state at all (think mathematical functions and the like). I feel that even in that case writing injectable services for the utility functions makes sense, since in that case you could swap different varieties of the service easily if you want to change the behavior of your application without having to delete old code inside of your static class.

To give an example: let's say we have a service that computes distances between points. You could just create that service as a plain old class with static methods to do it. But there are numerous ways to compute the distances between points. One might use the simple Euclidean formula, the somewhat more complex Haversine formula etc.

Suppose you'd want to pick the way to do it dynamically so users can choose the desired accuracy/complexity tradeoff. That's going to be a lot of spaghetti if you use a simple static class. On the other hand, it becomes rather simple if you have injectable distance services with a common base class/interface. This is a huge advantage and having state or not is irrelevant.

But still, in the context of web development with Angular this advantage might be tiny for some scenarios, even though it is good design. I was wondering if there is a certain point at which stateless services become so simple that the increase in bundle size or the decrease in (client-side) performance really begins to warrant just turning the service into a simple static class.

Robert Harvey
  • 198,589
  • 55
  • 464
  • 673
Joshua Schroijen
  • 141
  • 2
  • surely with all the code bundled and minimised there is no downside? – Ewan May 15 '19 at 14:26
  • I only have super-basic knowledge of the bundling and minification process. I don't really know how to test this quickly. – Joshua Schroijen May 15 '19 at 14:34
  • 2
    The "certain point" you refer to is based entirely on your own assessment of the pros and cons of each approach, *within the context of your specific project.* You appear to be knowledgeable enough to make this assessment yourself. – Robert Harvey May 15 '19 at 14:39
  • And if this is a *performance* discussion, the only way to know for sure is to *measure.* – Robert Harvey May 15 '19 at 14:40
  • I'm on the fence about answering this. I don't have much to say about bundling and minification but I can tell you of patterns and principles I use to keep making everything injectable from driving you crazy. All without forcing you to couple. – candied_orange May 15 '19 at 14:43
  • Looks like you don't need us to tell which is "preferable", you only need to decide which of the *use cases* you have mentioned affects you most and then implement the solution. If you need both, then implement both. They are not mutually exclusive, It's a matter of adequacy. – Laiv May 16 '19 at 07:08
  • @candied_orange Please do share with us your insights. I would love to hear them! – Joshua Schroijen May 16 '19 at 08:08

1 Answers1

2

Performance is not the issue here. The real issue comes in when resolving the dependencies for the code using the "static" class (btw, a class is a Function object in JavaScript or just an object literal that can still be passed around like any other value).

If the "static" class is being pulled in to the page asynchronously using something like require.js then you have a race condition between the browser downloading the source code for the static class, and the code using the static class. Depending on who wins, you might get a JavaScript error.

For instance if you attempt to call a method on the static class while that JavaScript file is still being downloaded then you will get an error, because that object/class has not been defined yet in the lifecycle of the web page and web application.

Sticking with services in Angular allows the framework to load dependencies however it sees fit to ensure your code executes only when all of its dependencies have been downloaded, initialized and resolved.

I'm sure you don't need to do this. You can simply import the static class as a JavaScript file as a regular <script> tag, so that symbol is defined before Angular even comes into the picture, but that will increase the initial payload the browser must download before the page becomes something a user can interact with — and with enough of these kinds of files performance could start becoming an issue.

Greg Burghardt
  • 34,276
  • 8
  • 63
  • 114