Mutation, it is the key to our evolution. It has enabled us to evolve into the dominant species on the planet. This process normally takes thousands and thousands of years. But every few hundred millenia, evolution leaps forward. - Professor X (Marvel's X-Men Comic Book Series)
If you believe the Marvel comic books' records, over 5000 years ago the first mutants appeared on this earth. Apocalypse arose in Egypt, with great power but the unfortunate tendency to wreak havoc on his surroundings. This was strikingly similar to the rise of the original Mutation Events for the browser. Added to the DOM Events Level 2 spec back in the year 2000, they were the first to give true JavaScript access to DOM changes as they happened: wielding unprecedented power, but a little slow, and with the unfortunate tendency to wreak havoc on your web application due to a multitude of browser bugs.
Oscar Isaac as "Apocalypse" in 'X-Men: Apocalypse.' 20th Century Fox Film
Following along the history of the Marvel Universe, there was a long period of time with no change in the world of Mutation... the DOM Events Level 3 spec deprecated Mutation Events but there were no major changes from 2000 until the arrival of the DOM Events Level 4 spec in 2013, where Mutation Observers were introduced.
As with the proliferation of observed Mutants in Marvel's universe during WW2, the re-instigation of the Browser Wars in the early 2010s resulted in the rapid spread of Mutation Observers throughout the web ecosystem. First showing up in Safari, Chrome and Firefox in early 2012 (before the public spec was drafted!), they rapidly arrived in iOS Safari (January 2013), Opera (July 2013), Internet Explorer (October 2013), and Android Browser (December 2013). They are now widely enough spread that we are able to more or less count on their presence throughout the web, and they have been added to Foundation in the 6.3.0 release.
Foundation's First Mutants
The first steps towards the true integration of Mutation Observers were submitted as a pull request by Corey Snyder on August 18, 2016. This pull request started out simply by creating the infrastructure we need to take advantage of this new capability throughout the framework. By adding a data-mutate attribute and some automatic listeners and triggers, we began to lay the groundwork for our Mutant future. Like Professor X setting up Xavier's School for Gifted Youngsters, this utility gives us the ability to begin teaching ALL of our Foundation components how to work with and understand Mutations.
The key to understanding this is to understand what a Mutation Observer is, and how it works. Mutation Observers allow JavaScript to "subscribe" to changes in particular elements of the DOM, having the browser update them whenever those areas change. There are many different ways this can be useful, so let's start outlining what those are.
Building and Distributing Cerebro
Patrick Stewart as "Professor X" in 'X-Men.' 20th Century Fox Film
The primary use case for Mutation Observers is for elements that need to understand something about their children (the elements they contain) in order to properly render or behave. For example, the Equalizer component depends on understanding the sizes of all of the different sub-elements that it is equalizing. Prior to utilizing Mutation Observers, if those sub elements changed, the Equalizer component would break, unless you as a user manually told it to reinitialize. What the [data-mutate] attribute allows for is to have the Equalizer component AUTOMATICALLY notice when those subcomponents change and reinitialize itself to adjust. This is kind of like the Cerebro machine used by Professor X - adding a [data-mutate] attribute amplifies the abilities the Equalizer component already has and gives it the ability to be instantly in touch with changes happening in its children.
Many components such as Equalizer, Tabs, Interchange, Toggler, and Responsive Navigation have already benefited from the Mutation Observer infrastructure and in doing so have cleaned up and resolved many long-standing bugs. As we get deeper into this shift, one can imagine new possibilities of automatic adjustments and interacting components.
However, with great power there is great responsibility - it takes time, energy, and care to teach someone to use Cerebro - and simply slapping a 'data-mutate' attribute onto a component may cause more problems than it solves. Many of the components that will eventually benefit from understanding Mutation Observers still need work to make it happen. There's a catalog of ongoing efforts underway here, you can watch the progress or even jump in and help make it happen.
You Too Can Take Advantage of Mutation Observers
Cast of 'X-Men: Apocalypse.' 20th Century Fox Film
One of the awesome things about integrating Mutation Observers into the Foundation Triggers utility is that it makes it much easier for YOU to take advantage of Mutation Observers. Simply add a [data-mutate] data attribute to any element in your page, and the Foundation Utilities will set up observers on the children of that element, triggering a 'mutateme.zf.trigger' event on any structural or stylistic change. With this infrastructure in place, Mutation Observers can finally follow Mutants out of the shadows, and into the key roles of society (aka application) where they can do the most good.
Check out the new Foundation 6.3 update to learn more about Mutation Observers and all of the other cool new features!
