building enterprise apps with sencha extjs/touch & deftjs

Building Enterprise Apps withSencha & DeftJSryan canulla | @ryancanulla

ryancanulla.com | @ryancanulla

Our Roadmap

Create workspace/apps

Configure deft and create login views

Add localization

Add viewController/businessService

Reorganize workspace & add unittesting

Add documentation

•••••

•

ryancanulla.com | @ryancanulla

Sencha CMD

Cross-platform

Command line tool

Provides automated tasks around the fulllife-cycle of your applications

•••

ryancanulla.com | @ryancanulla

Sencha CMD

Code generators

Application management

Web server

•••

ryancanulla.com | @ryancanulla

$ sencha generate [command]

workspace

app

•

•

ryancanulla.com | @ryancanulla

Workspace Overview

.sencha/ # Sencha-specific files workspace/ # Workspace-specific content sencha.cfg # Workspace config file plugin.xml # Workspace-level pluginpackages/ # Sencha Cmd packagesbuild/ # Where build output is placedweb/ # Applicationmobile/ # Application

ryancanulla.com | @ryancanulla

App Overview

.sencha/ # Sencha-specific files app/ # App-specific content sencha.cfg # App config file build-impl.xml # Standard app build script plugin.xml # App-level pluginindex.html # Entry point to your appapp.json # App configurationapp.js # Initialization logicapp/ # MVC structure

ryancanulla.com | @ryancanulla

$ sencha app [command]

build - Executes the build process for an application

refresh - Updates the application metadata file

upgrade -Upgrade the application SDK

•

•

•

ryancanulla.com | @ryancanulla

$ sencha web [options] [command]

--port, -p

start

stop

•

•

•

ryancanulla.com | @ryancanulla

Create workspace/apps withSencha CMD

ryancanulla.com | @ryancanulla

Integrating DeftJS

Add Deft to your app.json

"requires": [ "deft@0.9.0" ]

Refresh & build your app

$ sencha app refresh$ sencha app build

•

•

ryancanulla.com | @ryancanulla

DeftJS Features

IoC Container

MVC with ViewControllers

Promises and Deferreds

•••

ryancanulla.com | @ryancanulla

IoC Container

Eager and lazy instantiation

Injects dependencies before the class constructor isexecuted

userService: ‘SampleApp.service.UserService’

inject[ ‘userService’ ]

••

••

ryancanulla.com | @ryancanulla

MVC with ViewControllers

Class annotation-driven

Supports multiple view instances

Integrates with destruction lifecycle

Automatically cleans up listeners

Control a view and delegate work to injected business service (service classes, Stores, etc.)

•••••

ryancanulla.com | @ryancanulla

Promises and Deferreds

Provides an elegant way to deal with async calls

Register success, failure, cancellation orprogress callbacks

Allows chaining

Implements the CommonJS Promises/Aspecification

••

••

ryancanulla.com | @ryancanulla

Configure DeftJS IOC Containerand create a login view

https://github.com/ryancanulla/sencha-deft-sample/tree/step-one

ryancanulla.com | @ryancanulla

Add localization

https://github.com/ryancanulla/sencha-deft-sample/tree/step-two

ryancanulla.com | @ryancanulla

Architecture Overview

ryancanulla.com | @ryancanulla

Modular Directory Structure

Organized by functionality

Essential for large applications

module.js

Configure IOC container Define events Define constants

•••

---

ryancanulla.com | @ryancanulla

View Controllers

Configure view data

Listen for events

View: user interaction

Services, stores, models (data changes)

••

--

ryancanulla.com | @ryancanulla

Business Services

Business specific logic

Build the data to power your view

Available for injection

Fire events

••••

ryancanulla.com | @ryancanulla

Custom Proxy

ryancanulla.com | @ryancanulla

Add viewController/businessService

https://github.com/ryancanulla/sencha-deft-sample/tree/step-three

ryancanulla.com | @ryancanulla

Unit Testing

ryancanulla.com | @ryancanulla

Unit Testing

Jasmine

Karma Runner

••

ryancanulla.com | @ryancanulla

Reorganize workspace & add unittesting

https://github.com/ryancanulla/sencha-deft-sample/tree/step-four

ryancanulla.com | @ryancanulla

JSDuck Documentation

$ [sudo] gem install jsduck$ jsduck --config jsduck-conf.json

ryancanulla.com | @ryancanulla

Add documentation

https://github.com/ryancanulla/sencha-deft-sample/tree/step-five