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

Copyright Sencha Inc. 2014

Using Sencha’s Technology Stack

Building Powerful Enterprise Applications


Hi, I’m Art!

•  Developer Relations Manager Sencha, Inc.

•  Antioch, IL USA

•  www.akaWebDesign.com


Hi, I’m Jack!

•  Solutions Architect Sencha, Inc.

•  Foristell, MO USA

•  @jackratcliff




The Challenges of Enterprise Software

Development


ENTERPRISE | CHALLENGES


Architecture Spaghetti Code Legacy Code

Big Data

Many Developers

Training Tools

Testing Multi-Device

Multi-Platform Browsers

Automation

CODE TEAM DEPLOYMENT

ENTERPRISE | CHALLENGES

Copyright Sencha Inc. 2014 Support Key

View System

Interface Elements

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

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) Sockets Server Method

Invoca@on Server

No@fica@ons Server i/o

None/HTML5 Complete Par@al

ENTERPRISE | FEATURE MATRIX

Basic Widgets (bu[ons, bars, fields...)

Layout Manager (absolute, flex...)


1.2M JavaScript Repos 200k CSS Repos

98% Abandoned ~ 1 year

MANY LIBRARIES & FRAMEWORKS


No Common Architecture

Duplication of Functionality

Subtly Different Functionality

Uncoordinated Release Cycles

Varying Source Code Styles

Assemble as you Go

The problem with Micro-frameworks

MICRO-FRAMEWORKS


View System

Interface Elements




Styles

















Logic & Data


Invoca@on Server


Basic Widgets (bu[ons, bars, text fields...)


Layout Manager Theming (computed styles)

Styles

Layout Manager (responsive grid)

Localiza@on (locale support)


BOOTSTRAP + PLUGINS


View System

Interface Elements





Styles

















Logic & Data


Invoca@on Server






Styles


Visual Effects (anima@ons)


Interac@ons (drag & drop)


State Manager (history, routes...)

Modularity (direc@ves, modules)





Sockets Server Method Invoca@on

Server No@fica@ons




Styles









Server No@fica@ons


ANGULARJS


View System

Interface Elements





Styles
















Logic & Data


Invoca@on Server






Styles















Invoca@on Server

No@fica@ons




Styles












Invoca@on Server

No@fica@ons



EMBER + HANDLEBARS


View System

Interface Elements





Styles

















Logic & Data


Invoca@on Server


Containers & Windows (panels, cards, modals...)



Styles

















XHR (asynch, conversion) Sockets Server Method

Invoca@on Server

No@fica@ons













Server No@fica@ons


JQUERY + JQUERY UI




Leader in Commercial Grade JavaScript and HTML5

Development More than 60% of the Fortune 100 as clients


Ext JS 5.0 Sencha Touch

2.4 GXT 3.1

Architect 3.1

SENCHA AT A GLANCE | SENCHA PRODUCTS

Space 1.0 Cmd 5.0

DEVELOP DESIGN DEPLOY


Private On-Site Open Enrollment

Live Online

Nightly Builds Premium Forums

Custom Bug Fixes

Troubleshooting

SENCHA AT A GLANCE | SENCHA SERVICES

Enterprise Mentoring

Architectural Plans Embedded Devs Code Reviews Custom Design

TRAINING SUPPORT PRO SERVICES


What’s new in 5.0.x?


View System

Interface Elements





Styles










Modularity (components, packages )







Logic & Data


Invoca@on Server



Visual Effects (anima@ons...)




Persistent Data (extension)


Sockets (extension)

Server No@fica@ons


Server No@fica@ons

EXT JS 5


Scalable

Maintainable

Data Packaging

State Management

Widgets

Layouts

Animation

Visualization & Charting

EXT JS 5 | WHY EXT JS 5


Tablet Support

New Themes

Upgraded Charts

MVVM Architecture

Routing

Session Management

EXT JS 5 | EXT JS 5 NEW FEATURES


Mobile First Framework (Smartphones & Tablets)

Sencha Touch


50+ Built-in Components

Built-in MVC System

Themes for Every Platform

Native Packaging / Cordova

SENCHA TOUCH


Productivity Tool for Sencha App Development

Sencha Cmd


SENCHA TOUCH

JS Compiler

Build Scripts

Application Tuning

Native Packaging

And MORE…


SENCHA TOUCH

JS Compiler

Build Scripts

Application Tuning

Native Packaging

And MORE…


Sencha Space

Secure HTML5 Application Deployment


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

VS VS

SENCHA WORKSPACE SOLVES BYOD


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

SENCHA SPACE | APP FEATURES


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!



sencha-azure Azure Mobile Services •  Data •  Authentication •  Push Notifications

Azure Storage Services •  Table •  Blob

SENCHA | MICROSOFT AZURE


ext-win8 Build native Windows 8 apps with HTML5 Contains overrides for the Security Policy

SENCHA | WINDOWS 8


ExtJS 5 + Azure Demo


•  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

The Steps

Source Code: •  https://github.com/jratcliff/DogFoodCon2014


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



Chose COMPUTE > MOBILE SERVICE > CREATE



•  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)


Azure - Create a table named Sessions

After your mobile service has been created, select it from the mobile services list



From the welcome page of the mobile service, click on the DATA tab



•  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


•  http://www.sencha.com/products/extjs/ •  http://www.sencha.com/products/sencha-cmd/

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

For ExtJS, just unzip the download to a folder on your computer. For Sencha Cmd, run the included installer


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

Sencha – Create workspace

Resources: •  http://docs.sencha.com/cmd/5.x/intro_to_cmd.html •  http://docs.sencha.com/cmd/5.x/workspaces.html


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.

Sencha – Create workspace


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

Sencha – Create app

Resources: •  http://docs.sencha.com/cmd/5.x/extjs/cmd_app.html


After running the command to generate the starter app, you should see two new folders, 'build' and 'sessions' in your dogfoodcon workspace folder.

Sencha – Create app


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 >

Sencha – Open newly created starter app in browser


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


Sencha – Add Sencha Azure references to app.json

"requires: [ "sencha-azure"

]

The first thing we do is edit the application's dogfoodcon/sessions/app.json file and 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.

Resources: •  http://docs.sencha.com/cmd/5.x/cmd_packages/cmd_packages.html



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



Verify that the sencha-azure package is downloaded into the dogfoodcon/packages folder


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

Azure – get "application key" and "mobile service url"


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);!! }!});!

Sencha – Add Sencha Azure references to Application.js

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.


Sencha – Create grid

Resources: •  http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html#sencha_generate_view

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



You should now see a 'sessions' folder in your app with three new js files:



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'



Resources: •  http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel

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! }!]!

Next, we have to define the columns for the grid. So edit the Grid.js file and add the following:


Sencha – Add grid to main tab panel

•  Find the tabpanel in the Main view class (dogfoodcon/sessions/app/view/main/Main.js) and 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 for this grid.

! ! ! !{! title !: 'Sessions',! xtype !: 'sessions-grid',! layout !: 'fit',! bind: {! store: '{sessions}'! }! }!


Sencha – Add grid to main tab panel

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 'session' 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


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: [! { 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 the stores config. To do this, open the DogFood.view.sessions.GridModel class add a store named 'sessions' and configure it's 'model' property to use the 'DogFood.model.Session' model we just defined.

stores: {! sessions: {! 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 server. 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 the data returned, we will also set the enablePagingParams property to false.

stores: {! sessions: {! model : 'DogFood.model.Session',! autoLoad : true,! proxy: {! 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.


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


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>! <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>!



•  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



•  Copy the contents of the build/production/DogFood folder to the site/wwwroot folder of the 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.



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


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


SENCHA | Resources

WEBINARS WHITE PAPERS SENCHACON


Jack Ratcliff Solutions Architect Sencha, Inc [email protected] @jackratcliff


Arthur Kay Developer Relations Manager Sencha, Inc [email protected] www.akawebdesign.com @arthurakay