is actually a superset of ECMAScript. Browsers and Node.js add more functionality through additional objects and methods, but the core of the language remains as defined in ECMAScript. “
the name of the standard • ES2015 / ES6 – Newest version of the ECMAScript standard • Transpiler - Transforms ES2015 code to the JavaScript that currently supported in our browsers.
custom grid }); Why Ext JS? • Cross platform apps. - Support for legacy and modern browsers. - All types of devices • One framework, to develop complex applications fast. • Components, components, components…
from '@extjs/modern'; class MyApp.view.MyGrid extends grid { //configs for a custom grid } export default MyApp.view.MyGrid; ES2015 style of code The Benefits: • ES2015, helps you with developer productivity. • Can make use of new tools. • As a JS developer you can make use of the latest standards. • Reduces the Ext JS learning curve.
organization is supported Ext.require works as before callParent must be available Ext namespace is globally available New class syntax can derive from any class Module-based structure import and export syntax is supported super calls must work (strict mode) Ext is scoped to its module
go beyond “polyfills” by providing missing language syntax! • Transpilers are currently the only platforms that accept imports, exports and decorators • Transpilers allow us to future-proof our code (unblocking the language adoption curve) - No more “I have to develop code for the worst supported browsers” • (though, not everything can be fixed by tools)
the original source code… - …not the ugly transpiler output! • Source Maps have been around since 2012 - This is great because they are widely supported • Source Maps are supported by: - Chrome, Firefox, Edge, Safari - IE11 (with Windows 8.1 Update) See: https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
some scary code - Only transpile away what your target browser(s) do not support - Check what is produced if performance or code size is a concern - Especially if you need to support browsers like IE 11… or Safari 9 (or older) • Even natively supported idioms can have surprising performance - The “for…of” loop construct – awesome syntax! Not-so-great performance https://kpdecker.github.io/six-speed/
var data = [1, 2, 3]; var ret = ''; for (var value of data) { ret += value; } var data = [1, 2, 3]; var ret = ''; for (var i = 0; i < data.length; ++i) { ret += data[i]; }
abc = 'abc'; export default class Bar { // ... } New: ES2015 Modules • Modules are files • Modules execute in a private scope (not global) • Modules publish values using export • Modules can have one, unnamed “default” export value • Modules use import to acquire values exported by other modules • Modules are imported by path or name ./path/file.js import { abc } from '../path/file'; import Bar from '../path/file.js'; import Ext from '@extjs/kernel'; import { define } from '@extjs/kernel'; ./other/thing.js
from '@extjs/modern/layout'; import { Ext_Button } from '@extjs/modern'; New: Importing Components • Classes are exported in several ways: - By xtype - By alias family - By class name • These would be used where strings might be used today • These exports can be generated by the new build tool
body); }; } @define('ShootAble', { alias: 'gun', shoot: function(){ return 'Pow!' } }) class HanSolo extends Human { } New: Decorators • Decorators are functions that manipulate classes (or methods) • Decorators can accept arguments… - But must return a function to call as if no arguments were provided • The @decorator syntax is just a different way to call these functions • Decorators are currently a Stage 2 proposal (not yet standardized) https://github.com/tc39/proposals //another way of achieving the same without a decorator: define('ShootAble', { alias: 'gun', shoot: function(){ return 'Pow!' } })(HanSolo);
} new Foo(42); let obj = {}; Foo.call(obj, 42); ES2015: Restrictions on constructor • A constructor can only be called with the new operator. • Calling a constructor with call() or apply() throws a TypeError.
{ extend: 'Ext.Component', mixins: [ 'Clickable' ], }); Ext.define('MyApp.view.OtherComponent', { extend: 'Ext.Component', mixins: [ 'Clickable' ], click: function (e) { this.mixins.clickable.click.call(this); } }); ExtJS: Mixins • Mixins is multiple inheritance • Mixins are classes • Methods from the mixin prototype are copied to the target class prototype • Unless there is already a method present component.click();
'app/view'; class Clickable extends Ext.Base { click (e) { //click } } @define({ mixins: [ Clickable ] }) class OtherComponent extends MyComponent { click (e) { this.mixins.clickable.click.call(this); } } @define({ extend: [ Clickable ] }) class OtherComponent extends MyComponent { click (e) { super.click(e); } } ES2015: Mixins • Mixins are classes (extend Ext.Base) • Use @define to mix in the mixin(s) • Mixins will be able to act more like a true base - The extend directive accepts mixins - Calls to overlapping methods are handled in the super call
operator new - or Ext.create() or other factory • The native constructor is available to ES2015 classes - Not recommended in most cases • The construct method is available to all classes - The new name for the old constructor
Access)! • Uses Google Closure Compiler • Supports much of the ES2015 syntax (http://kangax.github.io/compat-table/es6/) • Provides polyfills as well • Transpiling is optional • New compressor (replaces YUI) can process native ES2015 code
savelee
bicstone
polidog
aeonpeople
toshi_atsumi
biwashi
toru_kubota
aiqlab
fujiwara3
ynunokawa
furu8
ch1aki
linyixian
erikaheidi
bluesmoon
lynnandtonic
gr2m
jponch
aleyda
thoeni
bkeepers
zakiyama
edds
maltzj
shlominoach
![Ext.define('App.some.Thing', { extend: 'App.foo.Bar', requires: [ 'Ext.grid.Panel' ], alias: 'thing',](https://files.speakerdeck.com/presentations/e8b9df6eccd549c48693d064bd2f2fde/slide_30.jpg){kind=link}
