The rewrite of Notific8 was a great experience. The world of web development moves quickly and a lot has changed in the world of front-end development since the time the library was originally created. This rewrite gave me the opportunity to apply a lot of that while improving the library.

For this wrap up post, I wanted to highlight a few of the big changes and thoughts behind them.

Typescript

Choosing Typescript was a pretty easy decision for me. ES2015+ added a lot of new features and syntax enhancements that improve the development experience. Adding in typings and experimental features, Typescript takes that a step further.

There a few big reasons I like using typescript:

Having typings saves me from making dumb mistakes in the code that introduce bugs While not used in this project, it often introduces experimental features and proposals for new versions of ES like decorators A lot of IDEs like Visual Studio Code (the tool that was used during development of the rewrite) can pick up the typings to use for autocomplete and suggestions to help speed up development

Promises

The move to making use of Promises was another pretty easy decision to make. While it may have been a challenge here and there to figure out exactly where they belonged, I knew from the start that they would enable easier management of working with notifications.

CSS Custom Properties (CSS Variables)

The library has used Sass from a pretty early point in its development. One of the reasons is to allow the use of variables to make development easier.

However, CSS custom properties were introduced to the CSS spec a few years ago and have since gotten pretty broad browser support. Making use of custom properties enabled far more native use of browser functionality and a reduction of the amount of code needed. It also means that a consuming developer can tweak color values in the browser using the developer tools and not have to recompile the CSS while testing out combinations before making the final change.

A future version of Notific8 will build on this functionality more to make it even easier for developers to pull in an already compiled versions of themes and then more easily define custom colors from within their own stylesheets.

Reusable Notifications

A long time ago I had realized that there is a need to show the same notification multiple times. In the past, a developer had to create a new instance of it every time and that was a pain. It was difficult in the old code to determine how to do this properly but the rewrite gave me the opportunity to do it from the start.

Making use of ES2015+ classes made that a lot easier. Now a notification can be reused multiple times. This means that when the same notification needs to be shown multiple times, it only creates one instance in memory and the event handlers within the notification only get attached once. That same instance can be kept track of in the developer’s code base and then call the open function again later to reopen the notification.

Build toolchain

The project has seen several changes in what tools are used for building. Up until the rewrite, the tool was using Grunt. However, Grunt appears to see very little active development these days with tools like Webpack having taken over its duties and then some.

This project is relatively small and simple. The only two things that need any kind of building are the source Sass files and the source Typescript files. It was easy enough to just use basic tools and create simple commands to run in the package.json file which made it possible to completely remove the need for a build setup. There is also a change in that the output JavaScript is an ES2015+ module that is intended to be imported into a modern project or transpiled using a build tool by the end developer so no minification or obfuscation is done by the library’s build system anymore.

Demo Page

The old demo page was just that: old. It used pug and meant yet another thing that needed to be transpiled. It also pulled in a CSS library that looks great but regularly clashed with Notific8 styles. Deciding to change it up meant that another set of build steps was removed making the old toolchain less useful.

The new demo makes use of Vue. It’s a very lightweight library that is easy to work with. Vue also made it easy to provide an example of implementing Notific8 into a project using a modern library or framework. It also meant being able to dump the need for jQuery for the demo.

Dropping IE Support

For some reason, there are still some people that choose to use Internet Explorer (or as I like to call it, Internet Exploder). It’s been out of date for years and only receives security fixes at the moment but that is creeping up on an end date as well.

My colleagues and I run into problems on a daily basis trying to support it. Just recently I had to write some code at work specifically for IE that made me cringe but it was the only thing that would work and made the bundle bigger.

At this point, it’s 2019. Microsoft has been telling people for years to stop using it and as of this writing, they’re in the process of swapping over Edge to use Chromium for its core. Chrome (and other Chromium derivatives) and Firefox especially add a great web browsing environment and are regularly updated on a rapid cadence. Given all of the new features that regularly hit other browsers, it doesn’t make sense to support a dwindling one with a very, very limited feature set.

Final Thoughts

Ultimately, it may have taken over a year for the rewrite of the library but it was well worth it in the long run. I’m really happy with the end result and think that it’s in a much better place to continue its usefulness. There are some plans and experiments I have for the future but those will come in due time.

Thank you for following along with this series. It may have taken a long time to get here but I hope it was worthwhile and I appreciate you taking the time to read through all of the posts.

The Final Code

The final code is hosted on GitHub at https://github.com/willsteinmetz/notific8. The full code was released in version 5.0.0 and is the version to view for examples of the code that was worked on throughout the series.