SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

SenchaCon 2016
CEO, Art Landro

Is Web App Dev
Winning
in the Enterprise?
“State of the Modern Web”
Research Report

Why is web technology an important part of
your desktop or mobile application
strategy?

Reports of my death have
been greatly exaggerated
- Mark Twain

been
greatly exaggerated

been greatly exaggerated
- The Desktop

Importance of desktop as an application
platform in the next 12 months

More Data Created In Last Two Years
Than All Human History COMBINED
Beginning of recorded History –
2014
2014 – Present

How is the need to visualize and analyze
complex datasets within your web
applications changing?

Data Visualization and Analytics

Winning With the Modern Web
What are we working on?

Joint Partner Solutions
IBMi Applications Ext Speeder Oracle Forms

Modern JavaScript
Open Tooling

Heterogeneous
Building Bridges

To provide YOU with everything
you need to build data intensive
cross-platform web applications
Our Mission

Keynote Demo
Gautam Agrawal & Mark Brocato

Pivot Grid
Data Exporter
New Components for
Analytics & Visualization
D3 Adapter

Material Theme &
Visual Theming

WebDriver Integration + Multi-Page Apps
Sencha Test 2.0

Best of Web + Best of Apps
Progressive Web Apps

Embracing Modern
JavaScript
Wait… there is more coming in 2017

ES6 Features
• Classes
• Imports
• Statics
• Block Scoping
• Arrow Functions
• Native Promises
• Enhanced Object Properties
• Destructuring
• Default Arguments
• Block Scoping
• Decorators
• Proxies
• Generators
• Iterators
• For…of
• Date/Time formatting
• Number formatting
• Map
• Set
• Weak-link Data Structures
• super
• Getter/Setter
• Template Strings
• Rest Parameter
• Spread Operator
• Typed Arrays

ES6 Goodies!
Ext.define('HelloWorld', {
extend: 'Ext.Component',
config: {
names: []
},
say(message='Hello') {
const { names } = this;
this.setHtml(
names.map(name => `${this.message} ${name}!`)
);
}
});

class HelloWorld {
say(message='Hello', names=['World']) {
Ext.Msg.alert(
names.map(name => `Hello ${name}!`)
);
}
}
ES6 in Cmd 6.5

class HelloWorld extends Ext.Component {
say(message='Hello', names=['World']) {
Ext.Msg.alert(
names.map(name => `Hello ${name}!`)
);
}
}
ES6 in Cmd 6.5

Hello World MVC
Ext.define('App.view.main.Main', {
extend: 'Ext.Container',
requires: [
'App.view.main.MainController',
'Ext.Button'
],
controller: 'main',
items: [{
xtype: 'button',
handler: 'onButtonClick'
}]
});
Main.js
Ext.define('App.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
'Ext.Msg'
],
alias: 'controller.main',
onButtonClick: function() {
Ext.Msg.alert('Alert', 'Hello World!');
}
});
MainController.js

The Main View with ES6
export default class Main {
}

import { container } from '@extjs/modern';
export default class Main {
}

import { container } from '@extjs/modern';
export default class Main extends container {
}

import { container, button } from '@extjs/modern';
}

items: [{
xtype: button,
text: 'Click Me',
}]
}

import { define } from '@extjs/kernel';
@define({
items: [{
xtype: button,
text: 'Click Me',
}]
})
}

import MainController from './MainController';
@define({
controller: MainController,
items: [{
xtype: button,
text: 'Click Me',
}]
})
}

@define({
viewModel: { ... },
items: [{
xtype: button,
text: 'Click Me',
}]
})
}

@define({
viewModel: { ... },
mixins: [ ... ],
items: [{
xtype: button,
text: 'Click Me',
}]
})
}

@define({
viewModel: { ... },
mixins: [ ... ],
items: [{
xtype: button,
text: 'Click Me',
}]
})
doStuff() {
// amazing code here
}
}

@define({
viewModel: { ... },
mixins: [ ... ],
items: [{
xtype: button,
text: 'Click Me',
}]
})
// intentionally left blank
}

The MainController
export default class MainController {
}

The MainController
import { controller } from '@extjs/core/controller';
export default class MainController {
}

The MainController
export default class MainController extends controller {
}

The MainController
}
import { container, button }
from '@extjs/modern';
import MainController
from './MainController';
@define({
items: [{
xtype: button,
text: 'Click Me',
}]
})
export default class Main
extends container {
}
Main.js

The MainController
onButtonClick() {
}
}
@define({
items: [{
xtype: button,
text: 'Click Me',
}]
})
extends container {
}
Main.js

The MainController
import { Msg } from '@extjs/modern';
onButtonClick() {
}
}
@define({
items: [{
xtype: button,
text: 'Click Me',
}]
})
extends container {
}
Main.js

The MainController
import { Msg } from '@extjs/modern';
onButtonClick() {
Msg.alert('Alert', 'Hello World!');
}
}
@define({
items: [{
xtype: button,
text: 'Click Me',
}]
})
extends container {
}
Main.js

Nuclear Pizza Machine
360,000+ packages

Nuclear Pizza Machine
360,000+ packages
import { stuff } from 'package';

New Open Tool Chain
???
Scanner
Parser
Indexer
Optimizer

More on This…
The Modern Toolchain
Ross Gerbasi

Later on Today…
The Modern Toolchain
Ross Gerbasi
Modernizing the Ext JS Class System
Don Griffin

SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (16)

Ähnlich wie SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

Ähnlich wie SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato (20)

Mehr von Sencha

Mehr von Sencha (10)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

Hinweis der Redaktion