Building Enterprise Apps with Sencha & DeftJS

1,267 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,267
On SlideShare
0
From Embeds
0
Number of Embeds
790
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building Enterprise Apps with Sencha & DeftJS

  1. 1. Building Enterprise Apps with Sencha & DeftJS ryan canulla | @ryancanulla Thursday, November 7, 13
  2. 2. Our Roadmap • • Configure deft and create login views Add localization • Add viewController/businessService • • Reorganize workspace & add unit testing Add documentation • Create workspace/apps ryancanulla.com | @ryancanulla Thursday, November 7, 13
  3. 3. Sencha CMD • Command line tool • Provides automated tasks around the • Cross-platform full life-cycle of your applications ryancanulla.com | @ryancanulla Thursday, November 7, 13
  4. 4. Sencha CMD • Application management • Web server • Code generators ryancanulla.com | @ryancanulla Thursday, November 7, 13
  5. 5. $ sencha generate [command] • app • workspace ryancanulla.com | @ryancanulla Thursday, November 7, 13
  6. 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 Sencha Cmd packages Where build output is placed Application Application ryancanulla.com | @ryancanulla Thursday, November 7, 13
  7. 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 Thursday, November 7, 13
  8. 8. $ sencha app [command] • refresh • upgrade • build - Executes the build process for an application - Updates the application metadata file -Upgrade the application SDK ryancanulla.com | @ryancanulla Thursday, November 7, 13
  9. 9. $ sencha web [options] [command] • start • stop • --port, -p ryancanulla.com | @ryancanulla Thursday, November 7, 13
  10. 10. Create workspace/apps with Sencha CMD ryancanulla.com | @ryancanulla Thursday, November 7, 13
  11. 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 Thursday, November 7, 13
  12. 12. DeftJS Features • MVC with ViewControllers • Promises and Deferreds • IoC Container ryancanulla.com | @ryancanulla Thursday, November 7, 13
  13. 13. IoC Container • Injects dependencies before the class • Eager and lazy instantiation constructor is executed • inject[ ‘userService’ ] • userService: ‘SampleApp.service.UserService’ ryancanulla.com | @ryancanulla Thursday, November 7, 13
  14. 14. MVC with ViewControllers • Supports multiple view instances • Integrates with destruction lifecycle • Automatically cleans up listeners • Control a view and delegate work to • Class annotation-driven injected business service (service classes, Stores, etc.) ryancanulla.com | @ryancanulla Thursday, November 7, 13
  15. 15. Promises and Deferreds • Provides an elegant way to deal with async calls • Register success, failure, cancellation or progress callbacks • Implements the CommonJS Promises/A • Allows chaining specification ryancanulla.com | @ryancanulla Thursday, November 7, 13
  16. 16. Configure DeftJS IOC Container and create a login view https://github.com/ryancanulla/sencha-deft-sample/tree/step-one ryancanulla.com | @ryancanulla Thursday, November 7, 13
  17. 17. Add localization https://github.com/ryancanulla/sencha-deft-sample/tree/step-two ryancanulla.com | @ryancanulla Thursday, November 7, 13
  18. 18. Architecture Overview ryancanulla.com | @ryancanulla Thursday, November 7, 13
  19. 19. Modular Directory Structure • Essential for large applications • module.js • Organized by functionality - Configure IOC container - Define events - Define constants ryancanulla.com | @ryancanulla Thursday, November 7, 13
  20. 20. View Controllers • Listen for events • Configure view data - View: user interaction - Services, stores, models (data changes) ryancanulla.com | @ryancanulla Thursday, November 7, 13
  21. 21. Business Services • Build the data to power your view • Available for injection • Fire events • Business specific logic ryancanulla.com | @ryancanulla Thursday, November 7, 13
  22. 22. Custom Proxy ryancanulla.com | @ryancanulla Thursday, November 7, 13
  23. 23. Add viewController/businessService https://github.com/ryancanulla/sencha-deft-sample/tree/step-three ryancanulla.com | @ryancanulla Thursday, November 7, 13
  24. 24. Unit Testing ryancanulla.com | @ryancanulla Thursday, November 7, 13
  25. 25. Unit Testing • Karma Runner • Jasmine ryancanulla.com | @ryancanulla Thursday, November 7, 13
  26. 26. Reorganize workspace & add unit testing https://github.com/ryancanulla/sencha-deft-sample/tree/step-four ryancanulla.com | @ryancanulla Thursday, November 7, 13
  27. 27. JSDuck Documentation $ [sudo] gem install jsduck $ jsduck --config jsduck-conf.json ryancanulla.com | @ryancanulla Thursday, November 7, 13
  28. 28. Add documentation https://github.com/ryancanulla/sencha-deft-sample/tree/step-five ryancanulla.com | @ryancanulla Thursday, November 7, 13

×