Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca Learn how to build enterprise applications with Sencha & DeftJS. This session will discuss the build process and application architecture, as well as DeftJS integration — leave with all of the tools needed to begin writing scalable, maintainable and testable Sencha applications.

1. Building Enterprise Apps with
Sencha & DeftJS
ryan canulla | @ryancanulla

2. Our Roadmap
•
•
•
•
•
•
Create workspace/apps
Configure deft and create login views
Add localization
Add viewController/businessService
Reorganize workspace & add unit
testing
ryancanulla.com | @ryancanulla
Add documentation

3. Sencha CMD
•
•
•
Cross-platform
Command line tool
Provides automated tasks around the full
life-cycle of your applications
ryancanulla.com | @ryancanulla

4. Sencha CMD
•
•
•
Code generators
Application management
Web server
ryancanulla.com | @ryancanulla

5. $ sencha generate [command]
•
workspace
•
app
ryancanulla.com | @ryancanulla

6. Workspace Overview
.sencha/
workspace/
sencha.cfg
plugin.xml
packages/
build/
web/
mobile/
# Sencha-specific files
# Workspace-specific content
# Workspace config file
# Workspace-level plugin
# Senchabuildpackagesis placed
# Where Cmd output
# Application
# Application
ryancanulla.com | @ryancanulla

7. App Overview
.sencha/
app/
sencha.cfg
build-impl.xml
plugin.xml
index.html
app.json
app.js
app/
# Sencha-specific files
# App-specific content
# App config file
# Standard app build script
# App-level plugin
# Entry point to your app
# App configuration
# Initialization logic
# MVC structure
ryancanulla.com | @ryancanulla

8. $ sencha app [command]
•
build
•
refresh
•
upgrade
- Executes the build process for an application
- Updates the application metadata file
-Upgrade the application SDK
ryancanulla.com | @ryancanulla

9. $ sencha web [options] [command]
•
--port, -p
•
start
•
stop
ryancanulla.com | @ryancanulla

10. Create workspace/apps with
Sencha CMD
ryancanulla.com | @ryancanulla

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

12. DeftJS Features
•
•
•
IoC Container
MVC with ViewControllers
Promises and Deferreds
ryancanulla.com | @ryancanulla

13. IoC Container
•
•
•
•
Eager and lazy instantiation
Injects dependencies before the class constructor is
executed
userService: ‘SampleApp.service.UserService’
inject[ ‘userService’ ]
ryancanulla.com | @ryancanulla

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

15. 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
ryancanulla.com | @ryancanulla

16. Configure DeftJS IOC Container
and create a login view
https://github.com/ryancanulla/sencha-deft-sample/tree/step-one
ryancanulla.com | @ryancanulla

17. Add localization
https://github.com/ryancanulla/sencha-deft-sample/tree/step-two
ryancanulla.com | @ryancanulla

18. Architecture Overview
ryancanulla.com | @ryancanulla

19. Modular Directory Structure
•
•
•
Organized by functionality
Essential for large applications
-
module.js
Configure IOC container
Define events
Define constants
ryancanulla.com | @ryancanulla

20. View Controllers
•
•
Configure view data
-
Listen for events
View: user interaction
Services, stores, models
(data changes)
ryancanulla.com | @ryancanulla

21. Business Services
•
•
•
•
Business specific logic
Build the data to power your view
Available for injection
Fire events
ryancanulla.com | @ryancanulla

22. Custom Proxy
ryancanulla.com | @ryancanulla

23. Add viewController/businessService
https://github.com/ryancanulla/sencha-deft-sample/tree/step-three
ryancanulla.com | @ryancanulla

24. Unit Testing
ryancanulla.com | @ryancanulla

25. Unit Testing
•
•
Jasmine
Karma Runner
ryancanulla.com | @ryancanulla

26. Reorganize workspace & add unit
testing
https://github.com/ryancanulla/sencha-deft-sample/tree/step-four
ryancanulla.com | @ryancanulla

27. JSDuck Documentation
$ [sudo] gem install jsduck
$ jsduck --config jsduck-conf.json
ryancanulla.com | @ryancanulla

28. Add documentation
https://github.com/ryancanulla/sencha-deft-sample/tree/step-five
ryancanulla.com | @ryancanulla