Dive into ExtJs

Pros and cons of using ExtJs framework for single page applications
Video: http://youtu.be/eR-0hDs1URs

Transcript

1. Dive into Sencha ExtJs Sergii Danilov M.C.Dean, Web-developer
2. © 2012 M.C. Dean, Inc. Trends of site development
3. © 2012 M.C. Dean, Inc. Classic site Model (View model) MVC Controller View Server side - MVC Make view model and put it to View Request Response MVC Controller (JSON) Ajax Ajax model Client side - JQuery
4. © 2012 M.C. Dean, Inc. JavaScript application MVC Controller Base View loads just first time and it contains JS App code JavaScript application Request Response Web API Controller View model for JSON Ajax HTML Template JavaScript modules Server side – MVC 4 Client side
5. © 2012 M.C. Dean, Inc. Dive...
6. © 2012 M.C. Dean, Inc. What is ExtJs?
7. © 2012 M.C. Dean, Inc. Features available out of the box • Loader (RequireJS, CommonJS) • DOM queries (JQuery, Prototype) • Work with data (Underscore.js) • Application architecture (Backbone.js, AngularJS, Ember.js, KnockoutJS) • UI elements(JQuery UI, Kendo UI)
8. © 2012 M.C. Dean, Inc. Object model of ExtJs 4 Component Draggable Panel Tab Panel Window mixin extend extend extend Observable Resizable mixin mixin
9. © 2012 M.C. Dean, Inc. Extend
10. © 2012 M.C. Dean, Inc. Mixins
11. © 2012 M.C. Dean, Inc. Requires
12. © 2012 M.C. Dean, Inc. Alias
13. © 2012 M.C. Dean, Inc. Singleton
14. © 2012 M.C. Dean, Inc. Statics
15. © 2012 M.C. Dean, Inc. MVC pattern
16. © 2012 M.C. Dean, Inc. Model, Store View Controller
17. © 2012 M.C. Dean, Inc. Model
18. © 2012 M.C. Dean, Inc. Store
19. © 2012 M.C. Dean, Inc. Controller
20. © 2012 M.C. Dean, Inc. View
21. © 2012 M.C. Dean, Inc. Loader
22. © 2012 M.C. Dean, Inc. Application
23. © 2012 M.C. Dean, Inc. Viewport
24. © 2012 M.C. Dean, Inc. 'use strict';
25. © 2012 M.C. Dean, Inc. Declarative interface 4+ 3.6+ 6+ 10+ 11+
26. © 2012 M.C. Dean, Inc. You can do this… but I don’t recommend!
27. © 2012 M.C. Dean, Inc. Simple and modular
28. © 2012 M.C. Dean, Inc. Event (in controller)
29. © 2012 M.C. Dean, Inc. Event (in view)
30. © 2012 M.C. Dean, Inc. Communication • Server Proxy  Ajax  Rest  JsonP  Direct • Client Proxy  Local Storage Proxy  Session Storage Proxy  Memory Proxy • Ajax
31. © 2012 M.C. Dean, Inc. A lot of UI elements
32. © 2012 M.C. Dean, Inc. Demo
33. © 2012 M.C. Dean, Inc. Pros and Cons + All in one + High development speed + Cross-browser compatibility + The extensibility of components + JS optimization for deployment ‒ It costs little money ‒ Hardly theme changes
34. You have reached the end of this module. Thanks Do you have any questions? Sources: 1. http://www.sencha.com/ 2. http://docs.sencha.com/ext-js/4-1/ 3. http://docs.sencha.com/ext-js/4-2/extjs-build/examples 4. https://market.sencha.com/