Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Marco Broglia, ibuildings: Writing an extensible web application with ExtJs packages

Marco Broglia, ibuildings: Writing an extensible web application with ExtJs packages

Maintaining a complex web application through time could be difficult as making it from zero. So writing readable, scalable and maintainable code has become a primary need in business applications. With ExtJs 5 & 6 Sencha offers a strong package system, thought for implementing standalone code blocks, easy to adapt and reuse. We will go through the Sencha package system, talking about how to decoupling and standardize code in order to build a well formed and maintainable web application.

Lee Boonstra

June 08, 2015

More Decks by Lee Boonstra

Other Decks in Technology


  1. your European technology advisor
    your European
    technology advis

    View Slide

  2. Writing an extensible web application
    with ExtJs packages

    View Slide

  3. About me
    Software Engineer
    Web Developer
    Sencha Specialist
    [email protected]

    View Slide

  4. • Writing business enterprise applications
    • Long development time
    • Very long application life-cycle
    • Many developers
    • Team could change many times during life-cycle
    • Use of the same technologies through other applications
    • Need of reusable code to speed up work

    View Slide

  5. • Start writing code in the most common manner could
    became quickly dangerous
    • Application will be unmaintainable and absolutely
    not scalable
    • Refactoring could be a way to solve
    • But is to be take in time!

    View Slide

  6. • Code decoupling
    • Make a class for each important component
    • Split up code in class methods representing macro functionality
    • Make code human readable as much as possible
    Writing Extensible

    View Slide

  7. • Reuse code
    • Group common functionality in abstract classes due to reduce
    maintenance errors
    Writing Extensible

    View Slide

  8. • ExtJs project structure is designed for standard applications
    • Working on a larger application may result in the extension of this
    • Is important to differentiate the application core from components, utils
    and other classes that could be reused
    Extending Project Structure

    View Slide

  9. Extending Project Structure

    View Slide

  10. • This library structure is useful for application maintenance, but is not
    portable through applications
    • Classes are application binded!
    • Maintainance through different teams could be difficult
    • Making changes to the library need making change to the application
    itself and vice versa
    • We need to complete decoupling library from application!
    Extending Project Structure - Problems

    View Slide

  11. • The solution is to transform app to a module of a bigger project
    • From now a project became a space where
    • Can live many applications
    • Are written many library modules
    • Every module could be thought as standalone
    • Only the necessary modules are put
    • Every module could be written and maintained by a different team
    • Every app could use library modules without any binding
    Moving code outside the app project

    View Slide

  12. Sencha Workspaces
    Writing an extensible web application with ExtJs packages

    View Slide

  13. • This idea translates into the Sencha workspace structure
    • A workspace could be generated and maintained with Sencha Cmd

    sencha -sdk /path/to/ext generate workspace .
    • Workspace structure is thought to help project modularity











    Sencha Workspace

    View Slide

  14. • The Sencha Package System allow to create application independent
    • Standalone
    • With dedicated namespace
    • Requirable from application app.json
    • Maintainable through Sencha Cmd
    • Extensible (packages could requires other packages)
    Sencha Package System

    View Slide

  15. • In ExtJs packages could be of two different types
    • Code: Represent a code library package, with javascript source classes,
    overrides and resources needed by these classes
    • Theme: Represent a theme that could be used in the "theme" property of
    • A theme package must extend an ExtJs theme or another custom
    • Is essentially a collection of Sass classes and resources, sometimes
    with javascript overrides needed by the theme
    • Using a package is also possible to extend the Sencha Architect toolbox
    with custom components
    Sencha Package System

    View Slide

  16. • A Sencha package structure is essentially the same of a Sencha application,
    with the main difference that has no entry point














    Package Structure

    View Slide

  17. • A code package can be generated through Sencha Cmd

    sencha generate package -type code MyPackage
    • Package are not automatically binded with a framework in the workspace
    • The first thing to do after creation is to manually edit the .sencha/
    sencha.cfg file setting the correct framework

    package.framework = ext
    • Finally is possible to build package 

    sencha package build
    Code packages

    View Slide

  18. • As the app.json in standard application, the package.json is the package
    • package.json is the file to edit when have to make some configuration on


    "name": "MyPackage",

    "type": "code",

    "creator": "Ibuildings",

    "summary": "Beta package",

    "detailedDescription": "This is a beta package",

    "version": "1.0.0",

    "compatVersion": "1.0.0",

    "format": 1,

    "output": "${package.dir}/build",

    "local": true,

    "requires": [



    Code packages - package.json

    View Slide

  19. • Packages are easy usable in all the workspace applications
    • To add a package in application simply require it in the app.son

    "requires": [


    • In the next build package will be automatically added to application
    • The Loader will be automatically updated with the new namespace
    • Package classes are usable in the application just like other classes
    Code packages - Use in the application

    View Slide

  20. • Package classes are usable simply requiring they somewhere in the

    • After that are exactly the same of application classes

    • Finally is possible to extend package directly in the application or in other
    Code packages - Use cases

    View Slide

  21. • A theme package can be generated through Sencha Cmd

    sencha generate theme MyTheme
    • A theme package must extends another one
    • Is possible to define inheritance from package.json 

    "extend": "ext-theme-crisp"
    • Finally is possible to build package 

    sencha package build
    • Anyway a theme is builded every time you build an application
    Theme packages

    View Slide

  22. • A custom theme could be used in any workspace application just like a
    standard ExtJs theme
    • In app.json

    "theme": "MyTheme"
    • In a Sencha workspace is possible to define as many themes as you want
    • Every application must have only one theme at a time
    Theme packages - Use in the application

    View Slide

  23. • View classes in a code package can be configured to appear in Architect
    • Creating an "architect" folder into the package structure make package to be
    ready for Architect
    • Each file that must appear in the toolbox must have a dedicated
    definition file into that folder
    • Finally each definition file must have a related entry in the package.json file
    Use packages in Architect

    View Slide

  24. • This is an example structure of a package ready for Architect
















    Architect package structure

    View Slide

  25. Questions?
    Thank You

    View Slide

  26. View Slide

  27. your European
    technology advisor
    Via Santa Maria Valle 3, 20123
    Milano Italia
    Gildeweg 39A 4383 NJ
    Vlissingen Nederland
    Goeman Borgesiuslaan 77
    3515 ET Utrecht Nederland
    +39 02 00681 028
    [email protected]
    [email protected]
    your European
    technology advisor

    View Slide