You don't need JavaScript

 

Estella González Madison

@chicagoing

You don't need [client-side] JavaScript

 

Estella González Madison

@chicagoing

And you are…?

Engineering Manager & Meetup Organizer

• Software developer for 17 years
• Manager for 1.5 years
• Women Who Code NYC co-founder
• BoulderJS co-organizer

"If it can be done in another language, it should be done in another language."

Chris Coyier on JavaScript

You Know You Should Use JavaScript When… by Chris Coyier, 9/21/09, css-tricks.com

We have a tendency to overuse JavaScript

There are CSS alternatives. And now WebAssembly can carry some of the load.

JS should be treated as progressive enhancement as much as possible.

Making It Better Without Making It Over by Rebecca Murhy, DinosaurJS 2016

The cost of JS

The median webpage today ships ~350 KB of minified and compressed JS . Uncompressed, that's over 1MB of scripts a browser needs to process.

The Cost of JavaScript by Addy Osmani, 8/1/18, medium.com/@addyosmani

We can leverage hardware acceleration with CSS

… especially on mobile

transform: translateZ(0)

Simplify your JS by moving interaction and behavior logic into CSS

Let your JS focus on business logic when possible.

Your sight works for the ~1% of users who might have JS turned off

… just a plus

How many people are missing out on JavaScript enhancement? by Peter Herlihy, 10/21/13, gov.uk

Wired.com

Chrome's NOSCRIPT intervention

Chrome's NOSCRIPT Intervention by Tim Kadlec, 9/6/18, timkadlec.com

Chrome for Android may start disabling JS on 2G connections if it detects a slow network connection

CSS Techniques

Animations

Between all the animation options with CSS and SVG, we have no reason to rely on JS

 

• animation property
• animation-play-state property
• @keyframe at-rule
• transform property
• transition property
• transition-delay property

:target

A CSS pseudo-class that represents a unique element (the target element) with an id matching the URL's fragment.
• modals
• slideshows
• tabs
• carousels

Modal example

Adjacent sibling selector

Matches the second element only if it immediately follows the first element.

 

p + img { … }

iOS 6 switch style checkboxes with pure CSS by Lea Verou, 3/15/13, lea.verou.me

iOS switch style checkboxes
Custom checkboxes

animation-play-state

A CSS property that specifies whether an animation is running or paused. Combined with pseudo selectors like :hover, :focus, :valid, :invalid, etc you can get really creative interactions.

Example

Smooth state animations with animation-play-state by Lea Verou, 1/9/14, lea.verou.me

position: sticky

We used to rely heavily on JS using window.onscroll and determine the position of elements relative to the window.

Example

position: sticky; by Chris Coyier, 11/9/16, css-tricks.com

Scroll Snap

Create smooth scroll experiences by specifying snap positions that tell the browser where to stop after each scrolling operation.

• image carousels
• paginated sections

Carousel from Google

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}
#gallery img {
   scroll-snap-align: center;
}

Web Assembly
(WASM)

WebAssembly was designed for speed

Web Assembly: How and why by Milica Mihajlija 8/14/18, blog.logrocket.com

Lots of opportunities to port over client-side code into WebAssembly

• peer-to-peer applications (video conferencing, collaborative editing, games)
• WYSIWYG editors
• Music and video applications
• And much more!

Other Alternatives

Server Side Rendering

• Better initial page load

• Users with JS disabled can still see your application

HTML

¯\_(ツ)_/¯

That's it!

Questions?