Dive into ExtJs

Fd08d1add523c9554941ed12c9690397?s=47 Sergii
July 10, 2013

Dive into ExtJs

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

Fd08d1add523c9554941ed12c9690397?s=128

Sergii

July 10, 2013
Tweet

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/