Building Enterprise Apps with Sencha & DeftJS

Building Enterprise Apps with Sencha & DeftJSryan canulla | @ryancanulla

Thursday, November 7, 13

ryancanulla.com | @ryancanulla

Our Roadmap

•Create workspace/apps

•Configure deft and create login views

•Add localization

•Add viewController/businessService

•Reorganize workspace & add unit testing

•Add documentation



Sencha CMD

•Cross-platform

•Command line tool

•Provides automated tasks around the full life-cycle of your applications



Sencha CMD

•Code generators

•Application management

•Web server



$ sencha generate [command]

• workspace

• app



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



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



$ sencha app [command]

•build - Executes the build process for an application

•refresh - Updates the application metadata file

•upgrade -Upgrade the application SDK



$ sencha web [options] [command]

•--port, -p

•start

•stop



Create workspace/apps with Sencha CMD



Integrating DeftJS

•Add Deft to your app.json

"requires": [ "[email protected]" ]

•Refresh & build your app

$ sencha app refresh$ sencha app build


mailto:[email protected]

mailto:[email protected]


DeftJS Features

• IoC Container

• MVC with ViewControllers

• Promises and Deferreds



IoC Container

•Eager and lazy instantiation

•Injects dependencies before the class constructor is executed

•userService: ‘SampleApp.service.UserService’

•inject[ ‘userService’ ]



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



Promises and Deferreds

•Provides an elegant way to deal with async calls

•Register success, failure, cancellation or progress callbacks

•Allows chaining

•Implements the CommonJS Promises/A specification


http://wiki.commonjs.org/wiki/Promises/A





Configure DeftJS IOC Container and create a login view

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





Add localization

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





Architecture Overview



Modular Directory Structure

•Organized by functionality

•Essential for large applications

• module.js- Configure IOC container- Define events- Define constants



View Controllers

•Configure view data

•Listen for events -View: user interaction-Services, stores, models (data changes)



Business Services

•Business specific logic

•Build the data to power your view

•Available for injection

•Fire events



Custom Proxy



Add viewController/businessService

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





Unit Testing



Unit Testing

•Jasmine

•Karma Runner



Reorganize workspace & add unit testing

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





JSDuck Documentation

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



Add documentation

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




Building Enterprise Apps with Sencha & DeftJS

Technology

sencha app build

sencha app command

sencha app refresh

sencha workspace

command app

app overview

sencha web options command

upgrade build