Stas Gavrylov

@stasgavrylov

Frontend Engineer @ Rails Reactor

Browser APIs
you should not
live without

Slides: https://slides.com/stasgavrylov/apis/live

DOM

4

(Document Object Model Level 4)

  • new methods for  
    ParentNode
    and  
    ChildNode
    interfaces
  • Element#matches, Element#closest
  • Node#contains
  • new  
    EventListenerOptions
  • new  
    CustomEvent interface and stuff...

 

ParentNode

 

appendChild(node) => append(...nodes)

 

ParentNode

 

prepend(...nodes)

 

ChildNode

 

insertBefore(newNode, referenceNode) => before(...nodes)

 

ChildNode

 

after(...nodes)

 

ChildNode

 

replaceNode(newNode, oldNode) -> replaceWith(newNode)

 

ChildNode

 

removeChild(node) => remove()

 

Element

 

matches(selectors: string)

 

Element

 

closest(selectors: string)

 

Node

 

contains(node: Node)

 

EventListenerOptions

target.addEventListener(type, listener)
target.addEventListener(type, listener, useCapture)
target.addEventListener(type, listener, options)
{



}
capture: boolean (false)
passive: boolean (false)
once: boolean (false)

Browser support:

varies

Polyfill

Web Animations API

Brief History

  • December 2005 – Synchronized Multimedia Integration Language (SMIL 2.0) - Animation Module WD
  • March 2009 – CSS Animations Module Level 3 WD, CSS Transitions Module Level 3 WD
  • June 2014 - Web Animations 1.0 WD

Demo

Webpack logo

Pros

  • better control over animations
  • simplified creation of dynamic animations
  • declarative
  • performance optimisation
  • debugging and more...

Cons

  • low browser adoption (but there's a polyfill!)

Declaration

CSS 

@keyframes slowspin {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg)
  }
  90%,to {
    transform: rotateX(-33.5deg) rotateY(225deg)
  }
}

Web Animations

const slowSpin = [
  {transform: 'rotateX(-33.5deg) rotateY(45deg)'},
  {transform: 'rotateX(-33.5deg) rotateY(225deg)', offset: 0.9},
  {transform: 'rotateX(-33.5deg) rotateY(225deg)'}
]
 
 

Declaration

CSS 

animation: slowspin 5s ease-in-out infinite;
 
const options = {
  duration: 5000,
  easing: 'ease-in-out',
  iterations: Infinity,
}

cube.animate(slowSpin, options)

 

Web Animations

Most popular use cases (IMO)

 

element.getAnimations()
document.timeline.getAnimations()
#Animation props:
currentTime, playbackRate, playState, finished

 

#Animation methods:
play(), pause(), reverse(), cancel(), finish()
#Animation event handlers:
onfinish, oncancel

Most popular use cases (IMO)

 

Browser support :(

Polyfill

Mutation Observer API

Brief History

2000 – Introduction of Mutation Events (DOM Level 2)

2011 – Start of discussion to deprecate Mutation Events

2014 – Introduction of Mutation Observer API

Demo

Annoying Popup

Usage example

const observer = new MutationObserver(callback)
observer.observe(node, options)

 

Available options:

boolean childList = false
boolean attributes
boolean characterData
boolean subtree = false
boolean attributeOldValue
boolean characterDataOldValue
string attributeFilter
observer.disconnect()
observer.takeRecords()

 

childList

 

(boolean)

 

subtree

 

(boolean)

 

attributes

 

(boolean)

Browser support :)

Polyfill

Intersection Observer API

W3C First Public Working Draft, 14 September 2017

Demo

Lazy Images

Usage example

const observer = new IntersectionObserver(callback, options)
observer.observe(target)

 

Available options:

DOMString rootMargin = '0px'
(double or sequence<double>) threshold = 0
observer.unobserve(target)
observer.disconnect()
Element? root = null

Demo

Virtualized List

Browser support

 

Polyfill...

Performance API

PerformanceTiming ->
window.performance.timing

PerformanceNavigation ->
window.performance.navigation

Main Interfaces

performance.navigation.type
  • TYPE_NAVIGATE = 0
  • ​TYPE_RELOAD = 1
  • TYPE_BACK_FORWARD = 2
  • TYPE_RESERVED = 255
performance.getEntries()
performance.getEntriesByType()
perfomance.mark() +
performance.getEntriesByName()

Demo

Performance Decorator

Links

Made with Slides.com