SlideShare a Scribd company logo
Building Powerful 
Enterprise Applications 
Copyright Sencha Inc. 2014 
Using Sencha’s Technology Stack
Copyright Sencha Inc. 2014 
Hi, I’m Art! 
• Developer Relations Manager 
Sencha, Inc. 
• Antioch, IL USA 
• www.akaWebDesign.com
Copyright Sencha Inc. 2014 
Hi, I’m Jack! 
• Solutions Architect 
Sencha, Inc. 
• Foristell, MO USA 
• @jackratcliff
Copyright Sencha Inc. 2014
Copyright Sencha Inc. 2014
Copyright Sencha Inc. 2014 
The Challenges of 
Enterprise Software 
Development
ENTERPRISE | CHALLENGES 
Copyright Sencha Inc. 2014
Copyright Sencha Inc. 2014 
TEAM CODE DEPLOYMENT 
Architecture 
Spaghetti Code 
Legacy Code 
Big Data 
Many 
Developers 
Training 
Tools 
Testing 
Multi-Device 
Multi-Platform 
Browsers 
Automation 
ENTERPRISE | CHALLENGES
ENTERPRISE | FEATURE MATRIX 
Copyright Sencha Inc. 2014 
Basic 
Widgets 
(bu[ons, 
bars, 
fields...) 
Support 
Key 
Interface 
Elements 
View 
System 
Containers 
& 
Windows 
(panels, 
cards, 
modals...) 
Compound 
Widgets 
(trees, 
grids, 
gauges...) 
Themes 
Visualiza@ons 
(charts,infographics) 
Styles 
Templa@ng 
(itera@ons, 
condi@onals.) 
Visual 
Effects 
(anima@ons, 
filters...) 
Accessibility 
(focus 
manager, 
ARIA...) 
Drawing 
(vector, 
bitmap...) 
Localiza@on 
(RTL, 
locale 
libraries) 
Interac@ons 
(gestures, 
drag 
& 
drop) 
Theming 
(computed 
styles) 
State 
Manager 
(history, 
undo, 
routes...) 
Modularity 
(components, 
modules 
) 
Data 
Binding 
(1-­‐way, 
2-­‐way) 
Tes@ng 
(IOC, 
test 
hooks) 
Data 
Objects 
(queues, 
hashtables...) 
Persistent 
Data 
(cache 
& 
sync) 
Data 
Models 
& 
Stores 
(group, 
sort, 
validate) 
Mul@-­‐Media 
(3D, 
Audio, 
Video) 
Logic 
& 
Data 
Server 
Calls 
(asynch, 
conversion) 
Server 
Method 
Sockets 
Invoca@on 
Server 
No@fica@ons 
Server 
i/o 
None/HTML5 
Par@al 
Complete 
Layout 
Manager 
(absolute, 
flex...)
Copyright Sencha Inc. 2014 
1.2M 
JavaScript 
Repos 
200k 
CSS 
Repos 
98% 
Abandoned 
~ 
1 
year 
MANY LIBRARIES & FRAMEWORKS
The problem with Micro-frameworks 
No Common Architecture 
Duplication of Functionality 
Subtly Different Functionality 
Copyright Sencha Inc. 2014 
Uncoordinated Release 
Cycles 
Varying Source Code Styles 
Assemble as you Go 
MICRO-FRAMEWORKS
Copyright Sencha Inc. 2014 
Interface 
Elements 
View 
System 
Containers 
& 
Windows 
(panels, 
cards, 
modals...) 
Compound 
Widgets 
(trees, 
grids, 
gauges...) 
Themes 
Visualiza@ons 
(charts,infographics) 
Styles 
Layout 
Manager 
(absolute, 
flex...) 
Templa@ng 
(itera@ons, 
condi@onals.) 
Visual 
Effects 
(anima@ons, 
filters...) 
Accessibility 
(focus 
manager, 
ARIA...) 
Drawing 
(vector, 
bitmap...) 
Localiza@on 
(RTL, 
locale 
libraries) 
Interac@ons 
(gestures, 
drag 
& 
drop) 
Theming 
(computed 
styles) 
State 
Manager 
(history, 
undo, 
routes...) 
Modularity 
(components, 
modules 
) 
Data 
Binding 
(1-­‐way, 
2-­‐way) 
Tes@ng 
(IOC, 
test 
hooks) 
Data 
Objects 
(queues, 
hashtables...) 
Persistent 
Data 
(cache 
& 
sync) 
Data 
Models 
& 
Stores 
(group, 
sort, 
validate) 
Mul@-­‐Media 
(3D, 
Audio, 
Video) 
Logic 
& 
Data 
Server 
Calls 
(asynch, 
conversion) 
Server 
Method 
Sockets 
Invoca@on 
Server 
No@fica@ons 
Server 
i/o 
Basic 
Widgets 
(bu[ons, 
bars, 
text 
fields...) 
Layout 
Manager 
responsive 
grid) 
(locale 
support) 
BOOTSTRAP + PLUGINS
Copyright Sencha Inc. 2014 
Interface 
Elements 
View 
System 
Basic 
Widgets 
(bu[ons, 
bars, 
text 
fields...) 
(bu[ons, 
bars, 
fields...) 
Containers 
& 
Windows 
(panels, 
cards, 
modals...) 
Compound 
Widgets 
(trees, 
grids, 
gauges...) 
Themes 
Visualiza@ons 
(charts,infographics) 
Styles 
Layout 
Manager 
(absolute, 
flex...) 
Templa@ng 
(itera@ons, 
condi@onals.) 
(drag 
& 
drop) 
Visual 
Effects 
(anima@ons, 
filters...) 
Accessibility 
(focus 
manager, 
ARIA...) 
Drawing 
(vector, 
bitmap...) 
Localiza@on 
(RTL, 
locale 
libraries) 
Interac@ons 
(gestures, 
drag 
& 
drop) 
Theming 
(computed 
styles) 
State 
Manager 
(history, 
undo, 
routes...) 
Modularity 
(components, 
modules 
) 
Data 
Binding 
(1-­‐way, 
2-­‐way) 
Tes@ng 
(IOC, 
test 
hooks) 
Data 
Objects 
(queues, 
hashtables...) 
Persistent 
Data 
(cache 
& 
sync) 
Data 
Models 
& 
Stores 
(group, 
sort, 
validate) 
Mul@-­‐Media 
(3D, 
Audio, 
Video) 
Logic 
& 
Data 
Server 
Calls 
(asynch, 
conversion) 
Server 
Method 
Sockets 
Invoca@on 
Server 
No@fica@ons 
Server 
i/o 
(anima@ons) 
(history, 
routes...) 
(direc@ves, 
modules) 
ANGULARJS
EMBER + HANDLEBARS 
Copyright Sencha Inc. 2014 
Interface 
Elements 
View 
System 
Basic 
Widgets 
(bu[ons, 
bars, 
text 
fields...) 
Containers 
& 
Windows 
(panels, 
cards, 
modals...) 
Compound 
Widgets 
(trees, 
grids, 
gauges...) 
Themes 
Visualiza@ons 
(charts,infographics) 
Styles 
Layout 
Manager 
(absolute, 
flex...) 
Templa@ng 
(itera@ons, 
condi@onals.) 
Visual 
Effects 
(anima@ons, 
filters...) 
Accessibility 
(focus 
manager, 
ARIA...) 
Drawing 
(vector, 
bitmap...) 
Localiza@on 
(RTL, 
locale 
libraries) 
Interac@ons 
(gestures, 
drag 
& 
drop) 
Theming 
(computed 
styles) 
Modularity 
(components, 
modules 
) 
Data 
Binding 
(1-­‐way, 
2-­‐way) 
Tes@ng 
(IOC, 
test 
hooks) 
Data 
Objects 
(queues, 
hashtables...) 
Persistent 
Data 
(cache 
& 
sync) 
Data 
Models 
& 
Stores 
(group, 
sort, 
validate) 
Mul@-­‐Media 
(3D, 
Audio, 
Video) 
Logic 
& 
Data 
Server 
Calls 
(asynch, 
conversion) 
Server 
Method 
Sockets 
Invoca@on 
Server 
No@fica@ons 
Server 
i/o 
(bu[ons, 
bars, 
fields...) 
State 
Manager 
(history, 
routes...)
Copyright Sencha Inc. 2014 
Interface 
Elements 
View 
System 
Basic 
Widgets 
(bu[ons, 
bars, 
text 
fields...) 
Containers 
& 
Windows 
(panels, 
cards, 
modals...) 
Compound 
Widgets 
(trees, 
grids, 
gauges...) 
Themes 
Visualiza@ons 
(charts,infographics) 
Styles 
Layout 
Manager 
(absolute, 
flex...) 
Templa@ng 
(itera@ons, 
condi@onals.) 
Visual 
Effects 
(anima@ons, 
filters...) 
Accessibility 
(focus 
manager, 
ARIA...) 
Drawing 
(vector, 
bitmap...) 
Localiza@on 
(RTL, 
locale 
libraries) 
Interac@ons 
(gestures, 
drag 
& 
drop) 
Theming 
(computed 
styles) 
State 
Manager 
(history, 
undo, 
routes...) 
Modularity 
(components, 
modules 
) 
Data 
Binding 
(1-­‐way, 
2-­‐way) 
Tes@ng 
(IOC, 
test 
hooks) 
Data 
Objects 
(queues, 
hashtables...) 
Persistent 
Data 
(cache 
& 
sync) 
Data 
Models 
& 
Stores 
(group, 
sort, 
validate) 
Mul@-­‐Media 
(3D, 
Audio, 
Video) 
Logic 
& 
Data 
Server 
Calls 
(asynch, 
conversion) 
Server 
Method 
Sockets 
Invoca@on 
Server 
No@fica@ons 
Server 
i/o 
XHR 
JQUERY + JQUERY UI
Copyright Sencha Inc. 2014
Copyright Sencha Inc. 2014
Leader in Commercial Grade 
Copyright Sencha Inc. 2014 
JavaScript and HTML5 
Development 
More than 60% of the Fortune 100 as clients
SENCHA AT A GLANCE | SENCHA PRODUCTS 
Copyright Sencha Inc. 2014 
DESIGN DEVELOP DEPLOY 
Ext JS 5.0 
Sencha Touch 
2.4 
GXT 3.1 
Architect 3.1 
Space 1.0 
Cmd 5.0
SENCHA AT A GLANCE | SENCHA SERVICES 
SUPPORT TRAINING PRO SERVICES 
Copyright Sencha Inc. 2014 
Private On-Site 
Open Enrollment 
Live Online 
Nightly Builds 
Premium 
Forums 
Custom Bug 
Fixes 
Troubleshooting 
Enterprise 
Mentoring 
Architectural Plans 
Embedded Devs 
Code Reviews 
Custom Design
Copyright Sencha Inc. 2014 
What’s new in 5.0.x?
Copyright Sencha Inc. 2014 
Interface 
Elements 
View 
System 
Basic 
Widgets 
(bu[ons, 
bars, 
text 
fields...) 
Containers 
& 
Windows 
(panels, 
cards, 
modals...) 
Compound 
Widgets 
(trees, 
grids, 
gauges...) 
Themes 
Visualiza@ons 
(charts,infographics) 
Styles 
Layout 
Manager 
(absolute, 
flex...) 
Templa@ng 
(itera@ons, 
condi@onals.) 
Visual 
Effects 
(anima@ons, 
filters...) 
Accessibility 
(focus 
manager, 
ARIA...) 
Drawing 
(vector, 
bitmap...) 
Localiza@on 
(RTL, 
locale 
libraries) 
Interac@ons 
(gestures, 
drag 
& 
drop) 
Theming 
(computed 
styles) 
State 
Manager 
(history, 
undo, 
routes...) 
Modularity 
(components, 
packages 
) 
Data 
Binding 
(1-­‐way, 
2-­‐way) 
Tes@ng 
(IOC, 
test 
hooks) 
Data 
Objects 
(queues, 
hashtables...) 
Persistent 
Data 
(cache 
& 
sync) 
Data 
Models 
& 
Stores 
(group, 
sort, 
validate) 
Mul@-­‐Media 
(3D, 
Audio, 
Video) 
Logic 
& 
Data 
Server 
Calls 
(asynch, 
conversion) 
Server 
Method 
Sockets 
Invoca@on 
Server 
No@fica@ons 
Server 
i/o 
(anima@ons...) 
(history, 
routes...) 
(extension) 
Sockets 
(extension) 
EXT JS 5
Scalable 
Maintainable 
Data Packaging 
State Management 
Copyright Sencha Inc. 2014 
Widgets 
Layouts 
Animation 
Visualization & Charting 
EXT JS 5 | WHY EXT JS 5
Copyright Sencha Inc. 2014 
Tablet Support 
New Themes 
Upgraded Charts 
MVVM Architecture 
Routing 
Session Management 
EXT JS 5 | EXT JS 5 NEW FEATURES
Mobile First Framework (Smartphones & Tablets) 
Copyright Sencha Inc. 2014 
Sencha Touch
SENCHA TOUCH 
50+ Built-in Components 
Built-in MVC System 
Themes for Every Platform 
Native Packaging / Cordova 
Copyright Sencha Inc. 2014
Copyright Sencha Inc. 2014 
Sencha Cmd 
Productivity Tool for 
Sencha App Development
SENCHA TOUCH 
Copyright Sencha Inc. 2014 
JS Compiler 
Build Scripts 
Application Tuning 
Native Packaging 
And MORE…
SENCHA TOUCH 
Copyright Sencha Inc. 2014 
JS Compiler 
Build Scripts 
Application Tuning 
Native Packaging 
And MORE…
Copyright Sencha Inc. 2014 
Sencha Space 
Secure HTML5 Application Deployment
SENCHA WORKSPACE SOLVES BYOD 
Copyright Sencha Inc. 2014 
VS 
VS 
Consumer 
Browsers 
Packaged 
Apps 
Sencha 
Workspace 
Insecure 
Data 
Unmanaged 
Individual 
App 
Lifecycles 
Costly 
deployment 
options 
Secure 
Data 
and 
Authentication 
Cross 
App 
Messaging 
Optimized 
Data 
Caching 
Managed 
Runtime
SENCHA SPACE | APP FEATURES 
Copyright Sencha Inc. 2014 
Sencha 
Workspace 
Developer 
Features 
Secure 
File 
API 
Secure 
Data 
API 
Offline 
Authentication 
API 
Device 
API 
End 
User 
Features 
Productivity 
Tools 
Deep 
App 
Linking 
In 
App 
Collaboration 
Work 
vs 
Personal 
Isolation 
Admin 
Features 
Manage 
HTML5 
Application 
Deployment 
Manage 
HTML5 
App 
Usage 
Revoke 
HTML5 
Apps 
Central 
App 
Console
Copyright Sencha Inc. 2014 
Optimized 
for 
Business 
• Complete 
IT 
control 
& 
configuration 
• Secure 
business 
identity 
• Conscientious 
compatibility 
• Consistent 
web 
experiences 
Best 
of 
HTML5 
... 
• Standards 
based 
app 
environment 
• Inter 
app 
navigation 
• Inter 
app 
data 
transfer 
• Content 
mashups 
• Broad 
adoption 
and 
large 
talent 
pool 
+ 
OUR VISION FOR APP DEPLOYMENT
Sencha + Microsoft:! 
Powerful Enterprise Apps! 
Copyright Sencha Inc. 2014
Copyright Sencha Inc. 2014
SENCHA | MICROSOFT AZURE 
sencha-azure 
Azure Mobile Services 
• Data 
• Authentication 
• Push Notifications 
Azure Storage Services 
• Table 
• Blob 
Copyright Sencha Inc. 2014
SENCHA | WINDOWS 8 
Copyright Sencha Inc. 2014 
ext-win8 
Build native Windows 8 apps 
with HTML5 
Contains overrides for the 
Security Policy
ExtJS 5 + Azure Demo 
Copyright Sencha Inc. 2014
The Steps 
• Create Azure Mobile Service 
• Create a table named Sessions in the new Azure mobile service 
• Download ExtJS 5 framework and Sencha Cmd 
• Create workspace using Sencha Cmd 
• Create app using Sencha Cmd 
• Add Sencha Azure package references to app 
• Create a grid to display the sessions data 
• Create the model and store for the sessions data 
• Bind the new sessions store to the grid 
• Create a chart for the sessions data 
• Create Azure website for the app 
• Upload the app to the new website 
Source Code: 
• https://github.com/jratcliff/DogFoodCon2014 
Copyright Sencha Inc. 2014
Azure - Create Azure Mobile Service 
• Sign into your Azure account at http:// 
azure.microsoft.com 
• At the bottom of the page, click the "+ 
New" button 
Copyright Sencha Inc. 2014
Azure - Create Azure Mobile Service 
Chose COMPUTE > MOBILE SERVICE > CREATE 
Copyright Sencha Inc. 2014
Azure - Create Azure Mobile Service 
• Enter a URL 
• Either create a new database or 
use an existing one 
• Pick your backend (optional and in 
this demo we do not write any 
backend code) 
Copyright Sencha Inc. 2014
Azure - Create a table named Sessions 
After your mobile service has been created, select it from the mobile services list 
Copyright Sencha Inc. 2014
Azure - Create a table named Sessions 
From the welcome page of the mobile service, click on the DATA tab 
Copyright Sencha Inc. 2014
Azure - Create a table named Sessions 
• At the bottom of the DATA tab, click 
on the CREATE link and fill out the 
form to create a new table. 
• Name your table 'Sessions' 
• Leave all of the defaults for now 
Copyright Sencha Inc. 2014
Sencha – Download ExtJS 5 framework and Sencha Cmd 
Now that you have an Azure Mobile Service with a Sessions table, it's time to 
download the ExtJS 5 framework and Sencha CMD 
• http://www.sencha.com/products/extjs/ 
• http://www.sencha.com/products/sencha-cmd/ 
For ExtJS, just unzip the download to a folder on your computer. 
For Sencha Cmd, run the included installer 
Copyright Sencha Inc. 2014
Sencha – Create workspace 
Before we can create an application, we will need a 'workspace' to work from. 
In a Terminal window or a Command Prompt, navigate to the directory where you unzipped the 
ExtJS files and run the following command that will create a Sencha workspace in a folder 
named 'dogfoodcon'. (change ~/Sites/ to a path that works for you on your system) 
> sencha generate workspace ~/Sites/dogfoodcon 
Resources: 
• http://docs.sencha.com/cmd/5.x/intro_to_cmd.html 
• http://docs.sencha.com/cmd/5.x/workspaces.html 
Copyright Sencha Inc. 2014
Sencha – Create workspace 
After you have created the workspace you should have a folder that looks like the 
following. The '.sencha' folder has the Sencha specific files such as configuration 
options, the 'ext' folder is a copy of the ExtJS framework and the 'packages' folder 
is where common JavaScript and 'theme' packages will reside. Later in this demo 
we will be adding the 'sencha-azure' package. 
Copyright Sencha Inc. 2014
Sencha – Create app 
From the newly created workspace directory run the following command 
that will generate a 'starter' application. Notice that we define the top 
level namespace of the app to be 'DogFood' and we create the app in the 
'sessions' folder 
> sencha -sdk ext generate app DogFood ./sessions 
Resources: 
• http://docs.sencha.com/cmd/5.x/extjs/cmd_app.html 
Copyright Sencha Inc. 2014
Sencha – Create app 
After running the command to generate the starter app, you should see two 
new folders, 'build' and 'sessions' in your dogfoodcon workspace folder. 
Copyright Sencha Inc. 2014
Sencha – Open newly created starter app in browser 
Check to make sure that the starter 
app that was created with Sencha 
Cmd will open by loading the app in 
your browser. 
Since I have my system configured 
so that my ~/Sites folder is the 
document root of my web server, I 
can view the site at http://localhost/ 
dogfoodcon/sessions/ 
The app should look like the 
following > 
Copyright Sencha Inc. 2014
Sencha – Add Sencha Azure references to app 
Once we have confirmed that the starter app loads, we can start making changes to it 
so that the app will pull down data from our Sessions table in our Azure mobile 
service. 
In order to do this we must install the sencha-azure package that will include all of the 
source code for connecting to Azure services and then we have to make changes to 
our application so that it will use this package. 
Resources: 
• http://docs.sencha.com/cmd/5.x/cmd_packages/cmd_packages.html 
Copyright Sencha Inc. 2014
Sencha – Add Sencha Azure references to app.json 
The first thing we do is edit the application's dogfoodcon/sessions/app.json file an 
d add 'sencha-azure' to the requires config. 
By doing this we are telling the application to include the 'sencha-azure' package. 
When a 'sencha app build' or 'sencha app refresh' is done on the application, the 
package will be downloaded and installed into the dogfoodcon/packages folder. 
Copyright Sencha Inc. 2014 
"requires: [ 
"sencha-azure" 
] 
Resources: 
• http://docs.sencha.com/cmd/5.x/cmd_packages/cmd_packages.html
Sencha – Add Sencha Azure references to app 
Now that we have informed our app that we need to include the 'sencha-azure' 
package we now need to run either 'sencha app refresh' or ' sencha app build' to have 
the sencha-azure package downloaded and extracted into our workspace's package 
folder. 
So run the following command from the app folder (dogfoodcon/sessions) 
> sencha app refresh 
Copyright Sencha Inc. 2014
Sencha – Add Sencha Azure references to app 
Verify that the sencha-azure package is 
downloaded into the dogfoodcon/packages 
folder 
Copyright Sencha Inc. 2014
Azure – get "application key" and "mobile service url" 
Now that we have the sencha-azure package installed, we need the 'application key' and 'mobile service url' from 
the Azure mobile service 
• Start by going to the DASHBOARD page of your mobile service. 
• Make a note of the MOBILE SERVICE URL that can be found under the 'quick glance' section 
• Click on the MANAGE KEYS link at the bottom of the page and copy the APPLICATION KEY 
Copyright Sencha Inc. 2014
Sencha – Add Sencha Azure references to Application.js 
Copyright Sencha Inc. 2014 
Ext.define('DogFood.Application', {! 
extend: 'Ext.app.Application',! 
name: 'DogFood',! 
! 
requires: [! 
'Ext.azure.Azure'! 
],! 
! 
config: {! 
azure: {! 
appKey: 'myazureservice-access-key',! 
appUrl: 'myazure-service.azure-mobile.net'! 
}! 
},! 
! 
launch: function() {! 
! 
// Call Azure initialization! 
Ext.Azure.init(this.config.azure);! 
! 
}! 
});! 
Edit the dogfoodcon/sessions/app/Application.js 
file and add 'Ext.azure.Azure' to the requires 
config and then add a call to 'Ext.Azure.init()' in 
the launch method of the application and pass 
to this init call an object with the appKey and 
appUrl properties using the values we got from 
our Azure mobile service. 
Resources: 
• http://docs.sencha.com/touch-azure/2.0.0/#!/guide/configuration
Sencha – Add a Grid to the app 
Now that the sencha-azure package has 
been installed in our workspace and our 
app has been configured to use it we will 
now add a grid to our starter app to show 
the data from the Sessions table in our 
Azure mobile service. 
For the grid, we will have columns for the 
track, level, title, speaker, and session 
description. 
Copyright Sencha Inc. 2014
Sencha – Create grid 
To create the grid and its corresponding ViewModel and ViewController class files, we 
can either create the class files manually or we can let Sencha Cmd do this for us. 
Since using Cmd will save us some time we will do that. 
From the dogfoodcon/sessions folder, execute this command: 
> sencha generate view -b Ext.grid.Panel -n sessions.Grid 
Resources: 
• http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html#sencha_generate_view 
Copyright Sencha Inc. 2014
Sencha – Create grid 
You should now see a 
'sessions' folder in your app with 
three new js files: 
Copyright Sencha Inc. 2014
Sencha – Create grid 
Next, we will need to define our own custom xtype for this grid so it can be 
used in config objects. 
To do this, add an xtype config and set it to 'sessions-grid' 
Copyright Sencha Inc. 2014
Sencha – Create grid 
Next, we have to define the columns for 
the grid. So edit the Grid.js file and add 
the following: 
Copyright Sencha Inc. 2014 
columns: [! 
{! 
header : 'Track',! 
dataIndex : 'track',! 
flex : 1! 
},! 
{! 
header : 'Level',! 
dataIndex : 'level',! 
width : 100! 
},! 
{! 
header : 'Title',! 
dataIndex : 'title',! 
flex : 1! 
},! 
{! 
header : 'Speaker',! 
dataIndex : 'speaker',! 
flex : 1! 
},! 
{! 
header : 'Description',! 
dataIndex : 'description',! 
flex : 2! 
}! 
]! 
Resources: 
• http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel
Sencha – Add grid to main tab panel 
• Find the tabpanel in the Main view class (dogfoodcon/sessions/app/view/main/Main.js) an 
d replace the 'Tab 1' item with the following config 
• note the binding to the store, {sessions}, that we'll define later on in our ViewModel class f 
or this grid. 
! ! ! !{! 
Copyright Sencha Inc. 2014 
title !: 'Sessions',! 
xtype !: 'sessions-grid',! 
layout !: 'fit',! 
bind: {! 
store: '{sessions}'! 
}! 
}!
Sencha – Add grid to main tab panel 
Copyright Sencha Inc. 2014 
Before 
After
Sencha – Create model 
Next, we'll create a Model which represents an entity in an application. For our DogFood 
app, we will call this model 'Dogfood.model.Session' since it will represent a single 'sessio 
n' entity that we will be storing in our Sessions table in our Azure mobile service. 
To create the model we can either create the js file manually or we can use Sencha Cmd 
to generate the file for us. 
http://docs.sencha.com/extjs/5.0/core_concepts/data_package.html 
Copyright Sencha Inc. 2014
Sencha – Create model 
Option 1 – manually create the dogfoodcon/sessions/app/model/Session.js file for the model 
with the following contents 
Ext.define('DogFood.model.Session', {! 
extend: 'Ext.data.Model',! 
! 
fields: [! 
Copyright Sencha Inc. 2014 
{ name: 'track', ! ! !type: 'string' },! 
{ name: 'level', ! ! !type: 'number' },! 
{ name: 'title', ! ! !type: 'string' },! 
{ name: 'speaker', ! !type: 'string' },! 
{ name: 'description', !type: 'string' }! 
! 
]! 
});! 
Option 2 – use Sencha Cmd to generate the model 
> sencha generate model --name=Session --fields=track:string,level:number,title:string,speaker:string,description:string
Sencha – Create store 
Now that we have the model defined, we will now create a store and reference this model in th 
e stores config. 
To do this, open the DogFood.view.sessions.GridModel class add a store named 'sessions' an 
d configure it's 'model' property to use the 'DogFood.model.Session' model we just defined. 
stores: {! 
sessions: {! 
Copyright Sencha Inc. 2014 
model : 'DogFood.model.Session',! 
autoLoad : true! 
}! 
}!
Sencha – Define the proxy 
For the 'sessions' store, define a proxy which will tell the store how to fetch its data from a remote ser 
ver. Typically, you would also need a url defined. However, since we are using an 'azure' proxy, the 
url is built by this proxy for us. So all we have to define is the 'tableName' and since we want ALL of t 
he data returned, we will also set the enablePagingParams property to false. 
stores: {! 
sessions: {! 
model : 'DogFood.model.Session',! 
autoLoad : true,! 
proxy: {! 
Copyright Sencha Inc. 2014 
type : 'azure',! 
tableName : 'Sessions',! 
enablePagingParams : false! 
}! 
}! 
}! 
! 
Resources: 
• http://docs.sencha.com/touch-azure/1.0.0/#!/api/Ext.azure.Proxy 
• http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.data.proxy.Proxy
Sencha – Preview App 
When you reload your app 
you should now see a table 
and if you have data already 
in your Sessions table in your 
Azure mobile service, that 
data should now load and be 
visible as well. 
Copyright Sencha Inc. 2014
Sencha – Extras 
The following are extras that are included in the 
final app which can be downloaded here: 
https://github.com/jratcliff/DogFoodCon2014 
• custom column renderers 
• editable rows in grid 
• chart for track counts 
• responsive UI 
Copyright Sencha Inc. 2014
Sencha – Tips on Publishing app to Azure WebSite 
Currently, we have been running the code locally but in the real world you would probably want to 
install the app on a web server that others can access. Below are some tips on what you need to do if 
you choose to create and use an Azure WebSite for this: 
• Add a web.config file that defines the .json file extension as an application/json mime-type 
In the dogfoodcon/sessions folder add a file named web.config with the following: 
<?xml version="1.0"?>! 
<configuration>! 
<system.webServer>! 
Copyright Sencha Inc. 2014 
<staticContent>! 
<mimeMap fileExtension=".json" mimeType="application/json" />! 
</staticContent>! 
</system.webServer>! 
</configuration> ! 
! 
Modify the dogfoodcon/sessions/build.xml and add the following target definition 
<target name="-after-build">! 
<copy file="web.config" tofile="${app.output}/web.config" overwrite="true"/>! 
</target>!
Sencha – Tips on Publishing app to Azure WebSite 
• Only publish the 'built' version of the app 
from the app folder run the following command to build your app 
> sencha app build production! 
! 
This command builds your markup page, JavaScript code, Sass and themes into the build folder. 
Resources: 
• http://docs.sencha.com/cmd/5.x/extjs/cmd_app.html#Building_Your_Application 
Copyright Sencha Inc. 2014
Sencha – Tips on Publishing app to Azure WebSite 
Copyright Sencha Inc. 2014 
• Copy the contents of the build/ 
production/DogFood folder to the site/ 
wwwroot folder of the Azure WebSite
Sencha – Tips on Publishing app to Azure WebSite 
• Add your Azure WebSite URL to the list of allowed hosts names in the CORS section of your 
Azure Mobile Service 
• To do this, make a note of your Azure WebSite url and then click on the 'CONFIGURE' tab of 
your Azure Mobile Service and scroll down to the 'cross-origin resource sharing (cors)' section 
and enter your Azure Website url into the 'HOST NAME' field. 
Copyright Sencha Inc. 2014
Sencha – Tips on Publishing app to Azure WebSite 
Your ExtJS app should 
now open with the Azure 
WebSite url you defined 
and will now pull in the data 
from your Azure Mobile 
Service's Session table 
Copyright Sencha Inc. 2014
Sencha – Sencha + Azure Resources 
Online Docs 
http://docs.sencha.com/touch-azure/2.0.0/ 
Blog posts 
http://www.sencha.com/blog/connecting-your-sencha-touch-apps-with-windows-azure 
http://www.sencha.com/blog/using-the-new-sencha-extensions-for-microsoft-azure-2.0/ 
Sencha/Azure tutorial 
http://azure.microsoft.com/en-us/documentation/articles/partner-sencha-mobile-services-get-started/ 
Channel 9 videos 
http://channel9.msdn.com/Shows/Cloud+Cover/Episode-126-Using-Sencha-With-Windows-Azure-Mobile-Services 
http://channel9.msdn.com/Series/Windows-Azure-Mobile-Services/Getting-Started-with-Windows-Azure-for-Sencha-Touch 
YouTube 
https://www.youtube.com/watch?v=ypqICB8dcH4 
https://www.youtube.com/watch?v=2HCxQtDx94M 
Copyright Sencha Inc. 2014
SENCHA | Resources 
WHITE PAPERS WEBINARS SENCHACON 
Copyright Sencha Inc. 2014
Jack Ratcliff 
Solutions Architect 
Sencha, Inc 
jratcliff@sencha.com 
@jackratcliff 
Copyright Sencha Inc. 2014
Arthur Kay 
Developer Relations Manager 
Sencha, Inc 
arthur.kay@sencha.com 
www.akawebdesign.com 
@arthurakay 
Copyright Sencha Inc. 2014

More Related Content

Similar to DogFoodCon 2014: Building Powerful Enterprise Applications Using Sencha's Technology Stack

Designing Optimized Symbols for InduSoft Web Studio Projects
Designing Optimized Symbols for InduSoft Web Studio ProjectsDesigning Optimized Symbols for InduSoft Web Studio Projects
Designing Optimized Symbols for InduSoft Web Studio Projects
AVEVA
 
Softwares on Large Scale Internet Services
Softwares on Large Scale Internet ServicesSoftwares on Large Scale Internet Services
Softwares on Large Scale Internet Services
SATOSHI TAGOMORI
 
Rajiv_Ranjan
Rajiv_RanjanRajiv_Ranjan
Rajiv_Ranjan
Rajiv Ranjan
 
Richard_Safford_III_Resume_V1012_3_24_2015_Java_Developer
Richard_Safford_III_Resume_V1012_3_24_2015_Java_DeveloperRichard_Safford_III_Resume_V1012_3_24_2015_Java_Developer
Richard_Safford_III_Resume_V1012_3_24_2015_Java_Developer
richard safford
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha Touch
James Pearce
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
James Pearce
 
Steve Shepherd Resume
Steve Shepherd ResumeSteve Shepherd Resume
Steve Shepherd Resume
Clerin Consulting Group, Inc.
 
20080117 Iasa Software + Services
20080117   Iasa   Software + Services20080117   Iasa   Software + Services
20080117 Iasa Software + Services
David Chou
 
User Experience Roles Competencies
User Experience  Roles  CompetenciesUser Experience  Roles  Competencies
User Experience Roles Competencies
Sameer Chavan
 
Splitting monolithsdeck slideshare_pdf
Splitting monolithsdeck slideshare_pdfSplitting monolithsdeck slideshare_pdf
Splitting monolithsdeck slideshare_pdf
Daniel Khan
 
Modern ux-workflow-presentation
Modern ux-workflow-presentationModern ux-workflow-presentation
Modern ux-workflow-presentation
Brian Akpa
 
JF_Resume16d
JF_Resume16dJF_Resume16d
JF_Resume16d
John Faucon
 
RUG-Asia - ALM
RUG-Asia - ALMRUG-Asia - ALM
Leonard CV 2016 june
Leonard CV  2016 juneLeonard CV  2016 june
Leonard CV 2016 june
middleware technologies
 
What's New in InTouch Machine Edition (ITME)
What's New in InTouch Machine Edition (ITME)What's New in InTouch Machine Edition (ITME)
What's New in InTouch Machine Edition (ITME)
Wonderware InTouch Machine Edition
 
Beyond PowerPlay: Choose the Right OLAP Tool for Your BI Environment (Cognos...
 Beyond PowerPlay: Choose the Right OLAP Tool for Your BI Environment (Cognos... Beyond PowerPlay: Choose the Right OLAP Tool for Your BI Environment (Cognos...
Beyond PowerPlay: Choose the Right OLAP Tool for Your BI Environment (Cognos...
Senturus
 
The state of front end architecture_in_2015
The state of front end architecture_in_2015The state of front end architecture_in_2015
The state of front end architecture_in_2015
Aidan Foster
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
Chris Love
 
Revanth - Enterprise Engineer
Revanth - Enterprise EngineerRevanth - Enterprise Engineer
Revanth - Enterprise Engineer
revanth29115
 
Oracle demantra online training
Oracle demantra online trainingOracle demantra online training
Oracle demantra online training
Glory IT Technologies Pvt. Ltd.
 

Similar to DogFoodCon 2014: Building Powerful Enterprise Applications Using Sencha's Technology Stack (20)

Designing Optimized Symbols for InduSoft Web Studio Projects
Designing Optimized Symbols for InduSoft Web Studio ProjectsDesigning Optimized Symbols for InduSoft Web Studio Projects
Designing Optimized Symbols for InduSoft Web Studio Projects
 
Softwares on Large Scale Internet Services
Softwares on Large Scale Internet ServicesSoftwares on Large Scale Internet Services
Softwares on Large Scale Internet Services
 
Rajiv_Ranjan
Rajiv_RanjanRajiv_Ranjan
Rajiv_Ranjan
 
Richard_Safford_III_Resume_V1012_3_24_2015_Java_Developer
Richard_Safford_III_Resume_V1012_3_24_2015_Java_DeveloperRichard_Safford_III_Resume_V1012_3_24_2015_Java_Developer
Richard_Safford_III_Resume_V1012_3_24_2015_Java_Developer
 
An Introduction to Sencha Touch
An Introduction to Sencha TouchAn Introduction to Sencha Touch
An Introduction to Sencha Touch
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
 
Steve Shepherd Resume
Steve Shepherd ResumeSteve Shepherd Resume
Steve Shepherd Resume
 
20080117 Iasa Software + Services
20080117   Iasa   Software + Services20080117   Iasa   Software + Services
20080117 Iasa Software + Services
 
User Experience Roles Competencies
User Experience  Roles  CompetenciesUser Experience  Roles  Competencies
User Experience Roles Competencies
 
Splitting monolithsdeck slideshare_pdf
Splitting monolithsdeck slideshare_pdfSplitting monolithsdeck slideshare_pdf
Splitting monolithsdeck slideshare_pdf
 
Modern ux-workflow-presentation
Modern ux-workflow-presentationModern ux-workflow-presentation
Modern ux-workflow-presentation
 
JF_Resume16d
JF_Resume16dJF_Resume16d
JF_Resume16d
 
RUG-Asia - ALM
RUG-Asia - ALMRUG-Asia - ALM
RUG-Asia - ALM
 
Leonard CV 2016 june
Leonard CV  2016 juneLeonard CV  2016 june
Leonard CV 2016 june
 
What's New in InTouch Machine Edition (ITME)
What's New in InTouch Machine Edition (ITME)What's New in InTouch Machine Edition (ITME)
What's New in InTouch Machine Edition (ITME)
 
Beyond PowerPlay: Choose the Right OLAP Tool for Your BI Environment (Cognos...
 Beyond PowerPlay: Choose the Right OLAP Tool for Your BI Environment (Cognos... Beyond PowerPlay: Choose the Right OLAP Tool for Your BI Environment (Cognos...
Beyond PowerPlay: Choose the Right OLAP Tool for Your BI Environment (Cognos...
 
The state of front end architecture_in_2015
The state of front end architecture_in_2015The state of front end architecture_in_2015
The state of front end architecture_in_2015
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
 
Revanth - Enterprise Engineer
Revanth - Enterprise EngineerRevanth - Enterprise Engineer
Revanth - Enterprise Engineer
 
Oracle demantra online training
Oracle demantra online trainingOracle demantra online training
Oracle demantra online training
 

Recently uploaded

Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)
Julian Hyde
 
SMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API ServiceSMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API Service
Yara Milbes
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
TheSMSPoint
 
SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024
Hironori Washizaki
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
Ayan Halder
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
Remote DBA Services
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
Peter Muessig
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
Green Software Development
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
SOCRadar
 
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI AppAI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
Google
 
Artificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension FunctionsArtificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension Functions
Octavian Nadolu
 
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdfVitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke
 
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeA Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
Aftab Hussain
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
lorraineandreiamcidl
 
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise EditionWhy Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Envertis Software Solutions
 
DDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systemsDDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systems
Gerardo Pardo-Castellote
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
mz5nrf0n
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
Łukasz Chruściel
 
Empowering Growth with Best Software Development Company in Noida - Deuglo
Empowering Growth with Best Software  Development Company in Noida - DeugloEmpowering Growth with Best Software  Development Company in Noida - Deuglo
Empowering Growth with Best Software Development Company in Noida - Deuglo
Deuglo Infosystem Pvt Ltd
 
OpenMetadata Community Meeting - 5th June 2024
OpenMetadata Community Meeting - 5th June 2024OpenMetadata Community Meeting - 5th June 2024
OpenMetadata Community Meeting - 5th June 2024
OpenMetadata
 

Recently uploaded (20)

Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)Measures in SQL (SIGMOD 2024, Santiago, Chile)
Measures in SQL (SIGMOD 2024, Santiago, Chile)
 
SMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API ServiceSMS API Integration in Saudi Arabia| Best SMS API Service
SMS API Integration in Saudi Arabia| Best SMS API Service
 
Transform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR SolutionsTransform Your Communication with Cloud-Based IVR Solutions
Transform Your Communication with Cloud-Based IVR Solutions
 
SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024
 
Using Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional SafetyUsing Xen Hypervisor for Functional Safety
Using Xen Hypervisor for Functional Safety
 
Oracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptxOracle Database 19c New Features for DBAs and Developers.pptx
Oracle Database 19c New Features for DBAs and Developers.pptx
 
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling ExtensionsUI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
UI5con 2024 - Boost Your Development Experience with UI5 Tooling Extensions
 
Energy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina JonuziEnergy consumption of Database Management - Florina Jonuzi
Energy consumption of Database Management - Florina Jonuzi
 
socradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdfsocradar-q1-2024-aviation-industry-report.pdf
socradar-q1-2024-aviation-industry-report.pdf
 
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI AppAI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
AI Fusion Buddy Review: Brand New, Groundbreaking Gemini-Powered AI App
 
Artificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension FunctionsArtificia Intellicence and XPath Extension Functions
Artificia Intellicence and XPath Extension Functions
 
Vitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdfVitthal Shirke Java Microservices Resume.pdf
Vitthal Shirke Java Microservices Resume.pdf
 
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of CodeA Study of Variable-Role-based Feature Enrichment in Neural Models of Code
A Study of Variable-Role-based Feature Enrichment in Neural Models of Code
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
 
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise EditionWhy Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
 
DDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systemsDDS-Security 1.2 - What's New? Stronger security for long-running systems
DDS-Security 1.2 - What's New? Stronger security for long-running systems
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
 
Empowering Growth with Best Software Development Company in Noida - Deuglo
Empowering Growth with Best Software  Development Company in Noida - DeugloEmpowering Growth with Best Software  Development Company in Noida - Deuglo
Empowering Growth with Best Software Development Company in Noida - Deuglo
 
OpenMetadata Community Meeting - 5th June 2024
OpenMetadata Community Meeting - 5th June 2024OpenMetadata Community Meeting - 5th June 2024
OpenMetadata Community Meeting - 5th June 2024
 

DogFoodCon 2014: Building Powerful Enterprise Applications Using Sencha's Technology Stack

  • 1. Building Powerful Enterprise Applications Copyright Sencha Inc. 2014 Using Sencha’s Technology Stack
  • 2. Copyright Sencha Inc. 2014 Hi, I’m Art! • Developer Relations Manager Sencha, Inc. • Antioch, IL USA • www.akaWebDesign.com
  • 3. Copyright Sencha Inc. 2014 Hi, I’m Jack! • Solutions Architect Sencha, Inc. • Foristell, MO USA • @jackratcliff
  • 6. Copyright Sencha Inc. 2014 The Challenges of Enterprise Software Development
  • 7. ENTERPRISE | CHALLENGES Copyright Sencha Inc. 2014
  • 8. Copyright Sencha Inc. 2014 TEAM CODE DEPLOYMENT Architecture Spaghetti Code Legacy Code Big Data Many Developers Training Tools Testing Multi-Device Multi-Platform Browsers Automation ENTERPRISE | CHALLENGES
  • 9. ENTERPRISE | FEATURE MATRIX Copyright Sencha Inc. 2014 Basic Widgets (bu[ons, bars, fields...) Support Key Interface Elements View System Containers & Windows (panels, cards, modals...) Compound Widgets (trees, grids, gauges...) Themes Visualiza@ons (charts,infographics) Styles Templa@ng (itera@ons, condi@onals.) Visual Effects (anima@ons, filters...) Accessibility (focus manager, ARIA...) Drawing (vector, bitmap...) Localiza@on (RTL, locale libraries) Interac@ons (gestures, drag & drop) Theming (computed styles) State Manager (history, undo, routes...) Modularity (components, modules ) Data Binding (1-­‐way, 2-­‐way) Tes@ng (IOC, test hooks) Data Objects (queues, hashtables...) Persistent Data (cache & sync) Data Models & Stores (group, sort, validate) Mul@-­‐Media (3D, Audio, Video) Logic & Data Server Calls (asynch, conversion) Server Method Sockets Invoca@on Server No@fica@ons Server i/o None/HTML5 Par@al Complete Layout Manager (absolute, flex...)
  • 10. Copyright Sencha Inc. 2014 1.2M JavaScript Repos 200k CSS Repos 98% Abandoned ~ 1 year MANY LIBRARIES & FRAMEWORKS
  • 11. The problem with Micro-frameworks No Common Architecture Duplication of Functionality Subtly Different Functionality Copyright Sencha Inc. 2014 Uncoordinated Release Cycles Varying Source Code Styles Assemble as you Go MICRO-FRAMEWORKS
  • 12. Copyright Sencha Inc. 2014 Interface Elements View System Containers & Windows (panels, cards, modals...) Compound Widgets (trees, grids, gauges...) Themes Visualiza@ons (charts,infographics) Styles Layout Manager (absolute, flex...) Templa@ng (itera@ons, condi@onals.) Visual Effects (anima@ons, filters...) Accessibility (focus manager, ARIA...) Drawing (vector, bitmap...) Localiza@on (RTL, locale libraries) Interac@ons (gestures, drag & drop) Theming (computed styles) State Manager (history, undo, routes...) Modularity (components, modules ) Data Binding (1-­‐way, 2-­‐way) Tes@ng (IOC, test hooks) Data Objects (queues, hashtables...) Persistent Data (cache & sync) Data Models & Stores (group, sort, validate) Mul@-­‐Media (3D, Audio, Video) Logic & Data Server Calls (asynch, conversion) Server Method Sockets Invoca@on Server No@fica@ons Server i/o Basic Widgets (bu[ons, bars, text fields...) Layout Manager responsive grid) (locale support) BOOTSTRAP + PLUGINS
  • 13. Copyright Sencha Inc. 2014 Interface Elements View System Basic Widgets (bu[ons, bars, text fields...) (bu[ons, bars, fields...) Containers & Windows (panels, cards, modals...) Compound Widgets (trees, grids, gauges...) Themes Visualiza@ons (charts,infographics) Styles Layout Manager (absolute, flex...) Templa@ng (itera@ons, condi@onals.) (drag & drop) Visual Effects (anima@ons, filters...) Accessibility (focus manager, ARIA...) Drawing (vector, bitmap...) Localiza@on (RTL, locale libraries) Interac@ons (gestures, drag & drop) Theming (computed styles) State Manager (history, undo, routes...) Modularity (components, modules ) Data Binding (1-­‐way, 2-­‐way) Tes@ng (IOC, test hooks) Data Objects (queues, hashtables...) Persistent Data (cache & sync) Data Models & Stores (group, sort, validate) Mul@-­‐Media (3D, Audio, Video) Logic & Data Server Calls (asynch, conversion) Server Method Sockets Invoca@on Server No@fica@ons Server i/o (anima@ons) (history, routes...) (direc@ves, modules) ANGULARJS
  • 14. EMBER + HANDLEBARS Copyright Sencha Inc. 2014 Interface Elements View System Basic Widgets (bu[ons, bars, text fields...) Containers & Windows (panels, cards, modals...) Compound Widgets (trees, grids, gauges...) Themes Visualiza@ons (charts,infographics) Styles Layout Manager (absolute, flex...) Templa@ng (itera@ons, condi@onals.) Visual Effects (anima@ons, filters...) Accessibility (focus manager, ARIA...) Drawing (vector, bitmap...) Localiza@on (RTL, locale libraries) Interac@ons (gestures, drag & drop) Theming (computed styles) Modularity (components, modules ) Data Binding (1-­‐way, 2-­‐way) Tes@ng (IOC, test hooks) Data Objects (queues, hashtables...) Persistent Data (cache & sync) Data Models & Stores (group, sort, validate) Mul@-­‐Media (3D, Audio, Video) Logic & Data Server Calls (asynch, conversion) Server Method Sockets Invoca@on Server No@fica@ons Server i/o (bu[ons, bars, fields...) State Manager (history, routes...)
  • 15. Copyright Sencha Inc. 2014 Interface Elements View System Basic Widgets (bu[ons, bars, text fields...) Containers & Windows (panels, cards, modals...) Compound Widgets (trees, grids, gauges...) Themes Visualiza@ons (charts,infographics) Styles Layout Manager (absolute, flex...) Templa@ng (itera@ons, condi@onals.) Visual Effects (anima@ons, filters...) Accessibility (focus manager, ARIA...) Drawing (vector, bitmap...) Localiza@on (RTL, locale libraries) Interac@ons (gestures, drag & drop) Theming (computed styles) State Manager (history, undo, routes...) Modularity (components, modules ) Data Binding (1-­‐way, 2-­‐way) Tes@ng (IOC, test hooks) Data Objects (queues, hashtables...) Persistent Data (cache & sync) Data Models & Stores (group, sort, validate) Mul@-­‐Media (3D, Audio, Video) Logic & Data Server Calls (asynch, conversion) Server Method Sockets Invoca@on Server No@fica@ons Server i/o XHR JQUERY + JQUERY UI
  • 18. Leader in Commercial Grade Copyright Sencha Inc. 2014 JavaScript and HTML5 Development More than 60% of the Fortune 100 as clients
  • 19. SENCHA AT A GLANCE | SENCHA PRODUCTS Copyright Sencha Inc. 2014 DESIGN DEVELOP DEPLOY Ext JS 5.0 Sencha Touch 2.4 GXT 3.1 Architect 3.1 Space 1.0 Cmd 5.0
  • 20. SENCHA AT A GLANCE | SENCHA SERVICES SUPPORT TRAINING PRO SERVICES Copyright Sencha Inc. 2014 Private On-Site Open Enrollment Live Online Nightly Builds Premium Forums Custom Bug Fixes Troubleshooting Enterprise Mentoring Architectural Plans Embedded Devs Code Reviews Custom Design
  • 21. Copyright Sencha Inc. 2014 What’s new in 5.0.x?
  • 22. Copyright Sencha Inc. 2014 Interface Elements View System Basic Widgets (bu[ons, bars, text fields...) Containers & Windows (panels, cards, modals...) Compound Widgets (trees, grids, gauges...) Themes Visualiza@ons (charts,infographics) Styles Layout Manager (absolute, flex...) Templa@ng (itera@ons, condi@onals.) Visual Effects (anima@ons, filters...) Accessibility (focus manager, ARIA...) Drawing (vector, bitmap...) Localiza@on (RTL, locale libraries) Interac@ons (gestures, drag & drop) Theming (computed styles) State Manager (history, undo, routes...) Modularity (components, packages ) Data Binding (1-­‐way, 2-­‐way) Tes@ng (IOC, test hooks) Data Objects (queues, hashtables...) Persistent Data (cache & sync) Data Models & Stores (group, sort, validate) Mul@-­‐Media (3D, Audio, Video) Logic & Data Server Calls (asynch, conversion) Server Method Sockets Invoca@on Server No@fica@ons Server i/o (anima@ons...) (history, routes...) (extension) Sockets (extension) EXT JS 5
  • 23. Scalable Maintainable Data Packaging State Management Copyright Sencha Inc. 2014 Widgets Layouts Animation Visualization & Charting EXT JS 5 | WHY EXT JS 5
  • 24. Copyright Sencha Inc. 2014 Tablet Support New Themes Upgraded Charts MVVM Architecture Routing Session Management EXT JS 5 | EXT JS 5 NEW FEATURES
  • 25. Mobile First Framework (Smartphones & Tablets) Copyright Sencha Inc. 2014 Sencha Touch
  • 26. SENCHA TOUCH 50+ Built-in Components Built-in MVC System Themes for Every Platform Native Packaging / Cordova Copyright Sencha Inc. 2014
  • 27. Copyright Sencha Inc. 2014 Sencha Cmd Productivity Tool for Sencha App Development
  • 28. SENCHA TOUCH Copyright Sencha Inc. 2014 JS Compiler Build Scripts Application Tuning Native Packaging And MORE…
  • 29. SENCHA TOUCH Copyright Sencha Inc. 2014 JS Compiler Build Scripts Application Tuning Native Packaging And MORE…
  • 30. Copyright Sencha Inc. 2014 Sencha Space Secure HTML5 Application Deployment
  • 31. SENCHA WORKSPACE SOLVES BYOD Copyright Sencha Inc. 2014 VS VS Consumer Browsers Packaged Apps Sencha Workspace Insecure Data Unmanaged Individual App Lifecycles Costly deployment options Secure Data and Authentication Cross App Messaging Optimized Data Caching Managed Runtime
  • 32. SENCHA SPACE | APP FEATURES Copyright Sencha Inc. 2014 Sencha Workspace Developer Features Secure File API Secure Data API Offline Authentication API Device API End User Features Productivity Tools Deep App Linking In App Collaboration Work vs Personal Isolation Admin Features Manage HTML5 Application Deployment Manage HTML5 App Usage Revoke HTML5 Apps Central App Console
  • 33. Copyright Sencha Inc. 2014 Optimized for Business • Complete IT control & configuration • Secure business identity • Conscientious compatibility • Consistent web experiences Best of HTML5 ... • Standards based app environment • Inter app navigation • Inter app data transfer • Content mashups • Broad adoption and large talent pool + OUR VISION FOR APP DEPLOYMENT
  • 34. Sencha + Microsoft:! Powerful Enterprise Apps! Copyright Sencha Inc. 2014
  • 36. SENCHA | MICROSOFT AZURE sencha-azure Azure Mobile Services • Data • Authentication • Push Notifications Azure Storage Services • Table • Blob Copyright Sencha Inc. 2014
  • 37. SENCHA | WINDOWS 8 Copyright Sencha Inc. 2014 ext-win8 Build native Windows 8 apps with HTML5 Contains overrides for the Security Policy
  • 38. ExtJS 5 + Azure Demo Copyright Sencha Inc. 2014
  • 39. The Steps • Create Azure Mobile Service • Create a table named Sessions in the new Azure mobile service • Download ExtJS 5 framework and Sencha Cmd • Create workspace using Sencha Cmd • Create app using Sencha Cmd • Add Sencha Azure package references to app • Create a grid to display the sessions data • Create the model and store for the sessions data • Bind the new sessions store to the grid • Create a chart for the sessions data • Create Azure website for the app • Upload the app to the new website Source Code: • https://github.com/jratcliff/DogFoodCon2014 Copyright Sencha Inc. 2014
  • 40. Azure - Create Azure Mobile Service • Sign into your Azure account at http:// azure.microsoft.com • At the bottom of the page, click the "+ New" button Copyright Sencha Inc. 2014
  • 41. Azure - Create Azure Mobile Service Chose COMPUTE > MOBILE SERVICE > CREATE Copyright Sencha Inc. 2014
  • 42. Azure - Create Azure Mobile Service • Enter a URL • Either create a new database or use an existing one • Pick your backend (optional and in this demo we do not write any backend code) Copyright Sencha Inc. 2014
  • 43. Azure - Create a table named Sessions After your mobile service has been created, select it from the mobile services list Copyright Sencha Inc. 2014
  • 44. Azure - Create a table named Sessions From the welcome page of the mobile service, click on the DATA tab Copyright Sencha Inc. 2014
  • 45. Azure - Create a table named Sessions • At the bottom of the DATA tab, click on the CREATE link and fill out the form to create a new table. • Name your table 'Sessions' • Leave all of the defaults for now Copyright Sencha Inc. 2014
  • 46. Sencha – Download ExtJS 5 framework and Sencha Cmd Now that you have an Azure Mobile Service with a Sessions table, it's time to download the ExtJS 5 framework and Sencha CMD • http://www.sencha.com/products/extjs/ • http://www.sencha.com/products/sencha-cmd/ For ExtJS, just unzip the download to a folder on your computer. For Sencha Cmd, run the included installer Copyright Sencha Inc. 2014
  • 47. Sencha – Create workspace Before we can create an application, we will need a 'workspace' to work from. In a Terminal window or a Command Prompt, navigate to the directory where you unzipped the ExtJS files and run the following command that will create a Sencha workspace in a folder named 'dogfoodcon'. (change ~/Sites/ to a path that works for you on your system) > sencha generate workspace ~/Sites/dogfoodcon Resources: • http://docs.sencha.com/cmd/5.x/intro_to_cmd.html • http://docs.sencha.com/cmd/5.x/workspaces.html Copyright Sencha Inc. 2014
  • 48. Sencha – Create workspace After you have created the workspace you should have a folder that looks like the following. The '.sencha' folder has the Sencha specific files such as configuration options, the 'ext' folder is a copy of the ExtJS framework and the 'packages' folder is where common JavaScript and 'theme' packages will reside. Later in this demo we will be adding the 'sencha-azure' package. Copyright Sencha Inc. 2014
  • 49. Sencha – Create app From the newly created workspace directory run the following command that will generate a 'starter' application. Notice that we define the top level namespace of the app to be 'DogFood' and we create the app in the 'sessions' folder > sencha -sdk ext generate app DogFood ./sessions Resources: • http://docs.sencha.com/cmd/5.x/extjs/cmd_app.html Copyright Sencha Inc. 2014
  • 50. Sencha – Create app After running the command to generate the starter app, you should see two new folders, 'build' and 'sessions' in your dogfoodcon workspace folder. Copyright Sencha Inc. 2014
  • 51. Sencha – Open newly created starter app in browser Check to make sure that the starter app that was created with Sencha Cmd will open by loading the app in your browser. Since I have my system configured so that my ~/Sites folder is the document root of my web server, I can view the site at http://localhost/ dogfoodcon/sessions/ The app should look like the following > Copyright Sencha Inc. 2014
  • 52. Sencha – Add Sencha Azure references to app Once we have confirmed that the starter app loads, we can start making changes to it so that the app will pull down data from our Sessions table in our Azure mobile service. In order to do this we must install the sencha-azure package that will include all of the source code for connecting to Azure services and then we have to make changes to our application so that it will use this package. Resources: • http://docs.sencha.com/cmd/5.x/cmd_packages/cmd_packages.html Copyright Sencha Inc. 2014
  • 53. Sencha – Add Sencha Azure references to app.json The first thing we do is edit the application's dogfoodcon/sessions/app.json file an d add 'sencha-azure' to the requires config. By doing this we are telling the application to include the 'sencha-azure' package. When a 'sencha app build' or 'sencha app refresh' is done on the application, the package will be downloaded and installed into the dogfoodcon/packages folder. Copyright Sencha Inc. 2014 "requires: [ "sencha-azure" ] Resources: • http://docs.sencha.com/cmd/5.x/cmd_packages/cmd_packages.html
  • 54. Sencha – Add Sencha Azure references to app Now that we have informed our app that we need to include the 'sencha-azure' package we now need to run either 'sencha app refresh' or ' sencha app build' to have the sencha-azure package downloaded and extracted into our workspace's package folder. So run the following command from the app folder (dogfoodcon/sessions) > sencha app refresh Copyright Sencha Inc. 2014
  • 55. Sencha – Add Sencha Azure references to app Verify that the sencha-azure package is downloaded into the dogfoodcon/packages folder Copyright Sencha Inc. 2014
  • 56. Azure – get "application key" and "mobile service url" Now that we have the sencha-azure package installed, we need the 'application key' and 'mobile service url' from the Azure mobile service • Start by going to the DASHBOARD page of your mobile service. • Make a note of the MOBILE SERVICE URL that can be found under the 'quick glance' section • Click on the MANAGE KEYS link at the bottom of the page and copy the APPLICATION KEY Copyright Sencha Inc. 2014
  • 57. Sencha – Add Sencha Azure references to Application.js Copyright Sencha Inc. 2014 Ext.define('DogFood.Application', {! extend: 'Ext.app.Application',! name: 'DogFood',! ! requires: [! 'Ext.azure.Azure'! ],! ! config: {! azure: {! appKey: 'myazureservice-access-key',! appUrl: 'myazure-service.azure-mobile.net'! }! },! ! launch: function() {! ! // Call Azure initialization! Ext.Azure.init(this.config.azure);! ! }! });! Edit the dogfoodcon/sessions/app/Application.js file and add 'Ext.azure.Azure' to the requires config and then add a call to 'Ext.Azure.init()' in the launch method of the application and pass to this init call an object with the appKey and appUrl properties using the values we got from our Azure mobile service. Resources: • http://docs.sencha.com/touch-azure/2.0.0/#!/guide/configuration
  • 58. Sencha – Add a Grid to the app Now that the sencha-azure package has been installed in our workspace and our app has been configured to use it we will now add a grid to our starter app to show the data from the Sessions table in our Azure mobile service. For the grid, we will have columns for the track, level, title, speaker, and session description. Copyright Sencha Inc. 2014
  • 59. Sencha – Create grid To create the grid and its corresponding ViewModel and ViewController class files, we can either create the class files manually or we can let Sencha Cmd do this for us. Since using Cmd will save us some time we will do that. From the dogfoodcon/sessions folder, execute this command: > sencha generate view -b Ext.grid.Panel -n sessions.Grid Resources: • http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html#sencha_generate_view Copyright Sencha Inc. 2014
  • 60. Sencha – Create grid You should now see a 'sessions' folder in your app with three new js files: Copyright Sencha Inc. 2014
  • 61. Sencha – Create grid Next, we will need to define our own custom xtype for this grid so it can be used in config objects. To do this, add an xtype config and set it to 'sessions-grid' Copyright Sencha Inc. 2014
  • 62. Sencha – Create grid Next, we have to define the columns for the grid. So edit the Grid.js file and add the following: Copyright Sencha Inc. 2014 columns: [! {! header : 'Track',! dataIndex : 'track',! flex : 1! },! {! header : 'Level',! dataIndex : 'level',! width : 100! },! {! header : 'Title',! dataIndex : 'title',! flex : 1! },! {! header : 'Speaker',! dataIndex : 'speaker',! flex : 1! },! {! header : 'Description',! dataIndex : 'description',! flex : 2! }! ]! Resources: • http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel
  • 63. Sencha – Add grid to main tab panel • Find the tabpanel in the Main view class (dogfoodcon/sessions/app/view/main/Main.js) an d replace the 'Tab 1' item with the following config • note the binding to the store, {sessions}, that we'll define later on in our ViewModel class f or this grid. ! ! ! !{! Copyright Sencha Inc. 2014 title !: 'Sessions',! xtype !: 'sessions-grid',! layout !: 'fit',! bind: {! store: '{sessions}'! }! }!
  • 64. Sencha – Add grid to main tab panel Copyright Sencha Inc. 2014 Before After
  • 65. Sencha – Create model Next, we'll create a Model which represents an entity in an application. For our DogFood app, we will call this model 'Dogfood.model.Session' since it will represent a single 'sessio n' entity that we will be storing in our Sessions table in our Azure mobile service. To create the model we can either create the js file manually or we can use Sencha Cmd to generate the file for us. http://docs.sencha.com/extjs/5.0/core_concepts/data_package.html Copyright Sencha Inc. 2014
  • 66. Sencha – Create model Option 1 – manually create the dogfoodcon/sessions/app/model/Session.js file for the model with the following contents Ext.define('DogFood.model.Session', {! extend: 'Ext.data.Model',! ! fields: [! Copyright Sencha Inc. 2014 { name: 'track', ! ! !type: 'string' },! { name: 'level', ! ! !type: 'number' },! { name: 'title', ! ! !type: 'string' },! { name: 'speaker', ! !type: 'string' },! { name: 'description', !type: 'string' }! ! ]! });! Option 2 – use Sencha Cmd to generate the model > sencha generate model --name=Session --fields=track:string,level:number,title:string,speaker:string,description:string
  • 67. Sencha – Create store Now that we have the model defined, we will now create a store and reference this model in th e stores config. To do this, open the DogFood.view.sessions.GridModel class add a store named 'sessions' an d configure it's 'model' property to use the 'DogFood.model.Session' model we just defined. stores: {! sessions: {! Copyright Sencha Inc. 2014 model : 'DogFood.model.Session',! autoLoad : true! }! }!
  • 68. Sencha – Define the proxy For the 'sessions' store, define a proxy which will tell the store how to fetch its data from a remote ser ver. Typically, you would also need a url defined. However, since we are using an 'azure' proxy, the url is built by this proxy for us. So all we have to define is the 'tableName' and since we want ALL of t he data returned, we will also set the enablePagingParams property to false. stores: {! sessions: {! model : 'DogFood.model.Session',! autoLoad : true,! proxy: {! Copyright Sencha Inc. 2014 type : 'azure',! tableName : 'Sessions',! enablePagingParams : false! }! }! }! ! Resources: • http://docs.sencha.com/touch-azure/1.0.0/#!/api/Ext.azure.Proxy • http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.data.proxy.Proxy
  • 69. Sencha – Preview App When you reload your app you should now see a table and if you have data already in your Sessions table in your Azure mobile service, that data should now load and be visible as well. Copyright Sencha Inc. 2014
  • 70. Sencha – Extras The following are extras that are included in the final app which can be downloaded here: https://github.com/jratcliff/DogFoodCon2014 • custom column renderers • editable rows in grid • chart for track counts • responsive UI Copyright Sencha Inc. 2014
  • 71. Sencha – Tips on Publishing app to Azure WebSite Currently, we have been running the code locally but in the real world you would probably want to install the app on a web server that others can access. Below are some tips on what you need to do if you choose to create and use an Azure WebSite for this: • Add a web.config file that defines the .json file extension as an application/json mime-type In the dogfoodcon/sessions folder add a file named web.config with the following: <?xml version="1.0"?>! <configuration>! <system.webServer>! Copyright Sencha Inc. 2014 <staticContent>! <mimeMap fileExtension=".json" mimeType="application/json" />! </staticContent>! </system.webServer>! </configuration> ! ! Modify the dogfoodcon/sessions/build.xml and add the following target definition <target name="-after-build">! <copy file="web.config" tofile="${app.output}/web.config" overwrite="true"/>! </target>!
  • 72. Sencha – Tips on Publishing app to Azure WebSite • Only publish the 'built' version of the app from the app folder run the following command to build your app > sencha app build production! ! This command builds your markup page, JavaScript code, Sass and themes into the build folder. Resources: • http://docs.sencha.com/cmd/5.x/extjs/cmd_app.html#Building_Your_Application Copyright Sencha Inc. 2014
  • 73. Sencha – Tips on Publishing app to Azure WebSite Copyright Sencha Inc. 2014 • Copy the contents of the build/ production/DogFood folder to the site/ wwwroot folder of the Azure WebSite
  • 74. Sencha – Tips on Publishing app to Azure WebSite • Add your Azure WebSite URL to the list of allowed hosts names in the CORS section of your Azure Mobile Service • To do this, make a note of your Azure WebSite url and then click on the 'CONFIGURE' tab of your Azure Mobile Service and scroll down to the 'cross-origin resource sharing (cors)' section and enter your Azure Website url into the 'HOST NAME' field. Copyright Sencha Inc. 2014
  • 75. Sencha – Tips on Publishing app to Azure WebSite Your ExtJS app should now open with the Azure WebSite url you defined and will now pull in the data from your Azure Mobile Service's Session table Copyright Sencha Inc. 2014
  • 76. Sencha – Sencha + Azure Resources Online Docs http://docs.sencha.com/touch-azure/2.0.0/ Blog posts http://www.sencha.com/blog/connecting-your-sencha-touch-apps-with-windows-azure http://www.sencha.com/blog/using-the-new-sencha-extensions-for-microsoft-azure-2.0/ Sencha/Azure tutorial http://azure.microsoft.com/en-us/documentation/articles/partner-sencha-mobile-services-get-started/ Channel 9 videos http://channel9.msdn.com/Shows/Cloud+Cover/Episode-126-Using-Sencha-With-Windows-Azure-Mobile-Services http://channel9.msdn.com/Series/Windows-Azure-Mobile-Services/Getting-Started-with-Windows-Azure-for-Sencha-Touch YouTube https://www.youtube.com/watch?v=ypqICB8dcH4 https://www.youtube.com/watch?v=2HCxQtDx94M Copyright Sencha Inc. 2014
  • 77. SENCHA | Resources WHITE PAPERS WEBINARS SENCHACON Copyright Sencha Inc. 2014
  • 78. Jack Ratcliff Solutions Architect Sencha, Inc jratcliff@sencha.com @jackratcliff Copyright Sencha Inc. 2014
  • 79. Arthur Kay Developer Relations Manager Sencha, Inc arthur.kay@sencha.com www.akawebdesign.com @arthurakay Copyright Sencha Inc. 2014