These slides will be available shortly after this talk ES6.ioReactForBeginners.comLearnNode.comCSSGrid.ioSyntax.fm
I'll tweet the link out.
New DOM Apis
Not brand new, but let's do a quick review
Promises are an IOU for something that will happen in the future
- AJAX call returning data
- Access to a User's webcam
- Resizing an image
All of these things take time, we simply kick off the process and move along with our lives.
But why do we do it this way?
Almost Everything Is Asynchronous
Let's say we wanted to do a few things:
- Make Coffee
- Drink Coffee
- Cook Breakfast
- Eat Breakfast
Do you need to finish making coffee before you can Start Breakfast?
Would it make sense to wait until coffee is made and consumed before we even start cooking breakfast?
No - we want to start one thing, come back to it once it's finished, and deal with the result accordingly!
Most new browser APIs are built on Promises, or Observables
More on Observables in a bit
Many, many more
PaymentRequest, getUserMedia(), Web Animation API
It's easy to make your own too!
Christmas Tree Callback Hell
we get it
Promises are great.
What's the deal with .then()?
It's still kinda callback-y
Any code that needs to come after the promise still needs to be in the final .then() callback :\
Async + Await
Async + Await still is promises, but with a really nice syntax
Let's break it down
great! - But it's hard to read/write
The PHP is easier to read
The JS is more performant
I'm not really happy
Synchronous looking code, without the wait.
How does it work?
1. Mark it as Async
2. await inside your async fn
Best of Both Worlds!
Why wait for Wes?
Remember, async+await is just promises
A few options (which we don't have time for)...
Done with Async+ Await!
Let's see more new stuff!
How do you know when an element is on screen?
With Intersection Observer, you can be alerted when an element is fully or partially scrolled into or out of view.
- Animate elements in on scroll
- Play video on scroll in
- Lazy Load images
- Record views for ads beyond fold
- Use with sticky headers
Ready for Meta?
How does it work?!
1. Setup some Options
2. Create an empty Observer
3. Give it a callback
4. Observe Away!
Payment Request API
Every single online store needs to reinvent the checkout form.
We're all just trying to do the same thing - collect payment info from the user.
The Payment Request is a standardized browser API to collect billing and shipping information from your users.[Google Developers]
So, Does the Browser Charge Your Card?
Is it secure?
The same, or more!
Not new at all
Safari Doesn't give a shit
September 2017 / iOS11
playsinline and getUserMedia()
per-element resize events!
Gateway Drug to Element Queries!
Some cool stuff!
What About Support?
Async + Await via Babel
Resize Observer Polyfillable, but expensive.
Intersection Observer has an official W3 polyfill
Web Payment is easily polyfillable
or Fallback to checkout form
getUserMedia is everywhere