web inspector and modern javascript€¦ · 6 ecmascript. 6 ecmascript. 6 javascript. 6. 6. 6 maps...

#WWDC14

Web Inspector and Modern JavaScript

Session 512 Timothy Hatcher WebKit Developer Experience Manager

Web Inspector and Modern JavaScript

Modern JavaScript and Web Inspector

Modern JavaScript

JavaScript

ECMAScript

1.0—June 1997

2.0—June 1998

3.0—December 1999

4.0—Abandoned

5.0 (3.1)—December 2009

ECMAScript 5.1—June 2011

ECMAScript

6ECMAScript

6JavaScript

Weak Maps

Destructuring

For-of Loops

Spread Operator

Promises

Computed PropertiesMath Additions

String Additions

Iterators

Modern JavaScriptLanguage highlights

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptMath Additions

sinhtanh

coshlog1p

hypottrunc

froundcbrt

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptMap Object

var simpleMap = {};

var simpleMap = {};simpleMap["foo"] = 42;

var simpleMap = {};simpleMap["foo"] = 42;delete simpleMap["foo"];

var simpleMap = new Map; simpleMap.set("foo", 42); simpleMap.delete("foo");

Modern JavaScriptMap with Object Keys

var nodeMap = new Map; nodeMap.set(node, data); nodeMap.get(node).foo;

Modern JavaScriptMap with Weak References

var nodeMap = new WeakMap; nodeMap.set(node, data); node.remove();

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptDestructuring Arrays

foo() { return [1, 2] }

var result = foo();

foo() { return [1, 2] }

var result = foo();var alpha = result[0];

foo() { return [1, 2] }

var result = foo();var alpha = result[0];var beta = results[1];

foo() { return [1, 2] } !

var [alpha, beta] = foo(); !

Modern JavaScriptDestructuring Objects

foo() { return {x: 4, y: 9} }

var result = foo();

foo() { return {x: 4, y: 9} }

var result = foo();var myX = result.x;

foo() { return {x: 4, y: 9} }

var result = foo();var myX = result.x;var y = result.y;

foo() { return {x: 4, y: 9} } !

var {x: myX, y} = foo(); !

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptSpread Operator for calls

function foo(a, b, c) {} var args = [1, 2, 3]; foo.apply(null, args);

Modern JavaScriptSpread Operator for calls

function foo(a, b, c) {} var args = [1, 2, 3]; foo(...args);

Modern JavaScriptSpread Operator with constructors

var parts = fetchParts(); var d = new Date(...parts);

Modern JavaScriptSpread Operator in array literals

var a = [1, 2, 3]; var z = [5, 6, 7]; var all = [1, 2, 3, 4, 5, 6, 7];

Modern JavaScriptSpread Operator in array literals

var a = [1, 2, 3]; var z = [5, 6, 7]; var all = [...a, 4, ...z];

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptTraditional loops

var len = items.length; for (var i = 0; i < len; ++i) total += items[i];

Modern JavaScriptTraditional loops

items.forEach(function(item) { total += item; });

Modern JavaScriptFor-of Loop

for (var item of items) total += item;

for (var value of someSet) process(value);

Modern JavaScriptFor-of Loop and Sets

for (var [k, v] of someMap) process(k, v);

Modern JavaScriptFor-of Loop and Maps

for (var [node] of nodeMap) node.remove();

Modern JavaScriptFor-of Loop and WeakMaps

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScriptPromises

load(url);

var data = load(url);

load(url, function(a) { load(a.url, process); });

load(url, function(a) { load(a.url, function(b) { load(b.url, process); }); });

load(url).then(function(a) { return load(a.url); }).then(function(b) { return load(b.url); }).then(process);

Modern JavaScriptWaiting for all Promises

var imgs = [load(a), load(b)]; Promise.all(imgs).then(done);

Modern JavaScriptRacing your Promises

var imgs = [load(a), load(b)]; Promise.race(imgs).then(done);

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Math Additions

Maps and Sets

Destructuring

Spread Operator

For-of Loops

Promises

Modern JavaScript

Modern JavaScript and Web Inspector

Web Inspector

WebKit

JavaScriptCoreWebKit

Web InspectorNew features

Mac App inspection

JavaScriptCore support

Source Code Timelines

Breakpoint Probes

Accessibility details

Color and Gradient editing

Mac App inspection

Breakpoint Probes

"com.apple.security.get-task-allow"

Mac App inspection

Breakpoint Probes

Mac App inspection

Breakpoint Probes

Web InspectorJavaScript Source URLs

-[JSContext evaluateScript:withSourceURL:] !

JSEvaluateScript(…, sourceURL, …)

Web InspectorJavaScript Source URLs

-[JSContext evaluateScript:withSourceURL:] !

JSEvaluateScript(…, sourceURL, …)

Web InspectorJavaScript Context Name

@interface JSContext @property NSString *name; @end !

JSGlobalContextSetName(…)

Web InspectorJavaScript Context Name

@interface JSContext @property NSString *name; @end !

JSGlobalContextSetName(…)

DemoMac App and JavaScriptCore inspection

Web InspectorMac App and JavaScriptCore inspection

Any web view or JavaScript context

Only apps with “get task allow” entitlement

Name your contexts, pages, and scripts

Mac App inspection

Breakpoint Probes

Mac App inspection

Breakpoint Probes

◉◉

◉◉<>{?

◉◉<>{

<>{ Move Event

Click Event

Timer Added

Timer Fired

Forced Layout

<>{ Move Event

Click Event

Timer Added

Timer Fired

Forced Layout

Mac App inspection

Breakpoint Probes

Mac App inspection

Breakpoint Probes

◉ { event.pageXevent.pageYevent.buttonevent.altKey …

DemoSource Code Timelines and Breakpoint Probes

Mac App inspection

Breakpoint Probes

Mac App inspection

Breakpoint Probes

Mac App inspection

Breakpoint Probes

Mac App inspection

Breakpoint Probes

DemoColor and Gradient editing

Mac App inspection

Breakpoint Probes

Mac App inspection

Breakpoint Probes

Summary

Take advantage of new JavaScript language features

Summary

Web Inspector is now available for Mac apps

Summary

Enjoy debugging your JavaScriptCore contexts

Summary

Make your web apps accessible

Summary

Make your web apps accessible

Be a colorful person

More Information

Evangelism evangelism@apple.com

Developer Technical support http://developer.apple.com/contact

Apple Developer Forums http://devforums.apple.com

Related Sessions

• Improving the Accessibility and Usability of Complex Web Applications

Marina Friday 9:00AM

• Designing Responsive Web Experiences Marina Friday 10:15AM

• Safari and WebKit Lab Media Lab B Thursday 2:00PM

web inspector and modern javascript€¦ · 6 ecmascript. 6 ecmascript. 6 javascript. 6. 6. 6 maps...

Documents

ecmascript (es) 6java.ociweb.com/mark/stljs/es6.pdf ·...

javascript c est quoi - ex-machina€¦ · ecmascript 5 =...

ecmascript 6 (javascript v.next) · ecmascript versio ins,...

javascript: the basics - github pages...•an implementation...

javascript innovaties: ecmascript 6 & 7

javascript reference...

brand new javascript - ecmascript 2015

ecmascript 6 review

chapter 4 client-side programming: the javascript...

javascript (ecmascript) 2013

notes on javascript (aka ecmascript) and the...

js300: mastering javascript with ecmascript 6 (es6) and...

ecmascript 6 (javascript v.next) - sdd...

es6 javascript, metaprogramming, & object proxies ›...

ecmascript 6

javascript friend or foe?. history of java and javascript...

ecmascript (es)...

gdg varna - ecmascript 6

node.js and react.js object-oriented javascript...

wa2488 javascript changes with ecmascript 2015 · wa2488...