performance on the web 2. ParallelJS: parallelized JavaScript code 3. ECMAScript 6: evolving the language, uniting the community 4. CSS Grid Layout: native-like GUI layout 5. Installable web apps: install web apps natively 6. Web Components: a standard infrastructure for widgets 2
Boxing: type-tagged values must be extracted • Enables primitives and objects to coexist • JIT compilation (slow version first, fast version later) • Runtime type checks • Garbage collection • Flexible data structures 6
and limited subset of JavaScript. • Explicit marker • Can be compiled ahead of time, to fast code. • Foundation: JS semantics and compiler. • Easier to standardize • Easier to implement 7
heap) { // normal function "use asm"; // mark as asm.js module function func1(...) { ... } function func2(...) { ... } ... return { exportedFunc: func1, ... }; } • stdlib: access to standard library (esp. Math) • foreign: foreign function interface, access to normal JS code. • heap: instance of ArrayBuffer 8
to fast code: function DiagModule(stdlib) { "use asm"; var sqrt = stdlib.Math.sqrt; function square(x) { x = +x; return +(x*x); } function diag(x, y) { x = +x; y = +y; return +sqrt(square(x) + square(y)); } return { diag: diag }; } // Link and use: var fast = DiagModule(window); // link module console.log(fast.diag(3, 4)); // 5 9
0; // int var b = 0.0; // double Parameters and return values: function func(x, y) { x = x|0; // int y = +y; // double return +(x * y); // returns double } 10
for delivering code on the web • Abstracts over • JS compilation strategies of various engines • High level vs. low level (JS plus “portable binaries”) 15
• mapPar() • filterPar() • reducePar() • Almost like existing methods map(), filter(), reduce() • But: Order in which elements are processed is undefined. 㱺 can be parallelized 19
parallelism for JavaScript • Limited, but safe (no locks, no concurrent write access to data) • Tentatively scheduled for ECMAScript 8 (end of 2018?) • Probably in engines long before 23
of JavaScript (current: ECMAScript 5.1) • Cleans up and evolves the language • Standardized by June 2015 • Can already be used today, via cross-compilation: • TypeScript • Next versions of: Ember.js, AngularJS (AtScript) • etc. 25
Microsoft for Windows 8 • Catches up with native GUI layout (Android, iOS, Java SWT, …) • Better than: • Flexbox (only one dimension) • Tables (not enough control over sizing of columns and rows) • Specification edited by Google, Microsoft, Mozilla 29
in Trident (IE) • Blink (Chrome): work in progress (Google and Igalia) • WebKit (Safari): work in progress (Igalia) • Gecko (Firefox): work in progress (started early this year) 35
web app installation supported by OS: • Android, iOS, Windows Phone • Generate native apps via Firefox and Chrome (if in Chrome Web Store): • Windows, OS X, Linux • Web apps are native apps: • Chrome OS, Firefox OS • Platforms supported by Cordova: • Amazon Fire OS, Android, Firefox OS, iOS, Ubuntu, Windows Phone, Windows, and others. 40
reusable widgets for HTML is hard • Example: social buttons • Thus: Frameworks • Many incompatible frameworks! Solution: Web Components • Suite of APIs, provides infrastructure for widgets 43
Shadow DOM: encapsulate the DOM of widgets (=nest documents) • Custom Elements: define both appearance and behavior • HTML Imports: package HTML (HTML, CSS, templates, scripts) 㱺 useful for packaging custom elements Polyfills for current browsers: • Google Polymer • Mozilla X-Tag 44
id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> • Templates can be placed almost anywhere. • Content is inactive: • Not considered part of the document 㱺 no actions are triggered (by images, CSS, scripts) • Invisible 45
image"> <div class="comment"></div> </template> var t = document.querySelector('#mytemplate'); // Fill in data t.content.querySelector('img').src = 'logo.png'; // Add to document var clone = document.importNode(t.content, true); document.body.appendChild(clone); 46
CSS of widget leaks into surrounding document (and vice versa). • IDs and classes • Style rules • Shadow DOM encapsulates HTML and CSS via nested documents. 47
{ // Template var t = document.querySelector('#foo-template'); var clone = document.importNode(t.content, true); // Shadow DOM this.createShadowRoot().appendChild(clone); }, 52
HTML: <x-foo></x-foo> Via document.createElement(): var xFoo = document.createElement('x-foo'); xFoo.addEventListener('click', function (e) { alert('Thanks!'); }); Via the constructor: var xFoo = new XFoo(); document.body.appendChild(xFoo); 53
• The next versions of Ember.js and AngularJS will be based on Web Components. • Blink is considering supporting the legacy <marquee> tag via a web component. • Timestamps on GitHub: via a Custom Element and Polymer polyfill. 58
for a common ecosystem for widgets. • Considerable momentum: • Certain at Mozilla and Google, under consideration at Microsoft • Next versions of AngularJS, Ember.js are based on Web Components 60
Availability asm.js Speed, porting native code Now ParallelJS Speed Work in progress ECMAScript 6 (classes, modules) Code portable between frameworks Now (compile to ES5) Web Components GUIs, common ecosystem for widgets Now (polyfill, Chrome) CSS Grid Layout Web app GUIs Soon Installable web apps Web apps become more versatile Now
between JavaScript and native” by A.R. • “ParallelJS: data parallelism for JavaScript” by A.R. • “Using ECMAScript 6 today” by A.R. • “CSS Grid Layout Module Level 1” by Tab Atkins Jr., fantasai, Rossen Atanassov (W3C Editor’s Draft) • “CSS Grid Layout. Specification overview. Implementation status and roadmap” by Manuel Rego (slides) • “Installing web apps natively” by A.R. • WebComponents.org: site with resources Bonus: “Speaking JavaScript” by A.R. (free online book) 64
rauschma
martin_lover
_kensh
manfredsteyer
usamik26
antonarhipov
yag_ays
77web
ufoo68
makicamel
sunyryr
bells17
jogannaoki
bkeepers
dougneiner
wjessup
danielanewman
zenorocha
hatefulcrawdad
jlugia
maltzj
smashingmag
lemiorhan
garrettdimon
jcasabona
