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

ExtJS6 - Behind closed doors

ExtJS6 - Behind closed doors

Behind closed doors demo by Lee Boonstra. Sencha Ext JS 6. What's new.

Lee Boonstra

April 03, 2015
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. Ext JS 6 Demo
    Behind closed doors
    @ladysign

    View Slide

  2. Overview
    ● Generate Apps
    ● Migrating
    ● Themes
    ● Build Profiles / Platform Switchers
    ● Fashion in action

    View Slide

  3. Generate Classic App
    sencha generate app --classic MyApp /path
    DEMO

    View Slide

  4. Migrating Apps from Ext 5 to 6.
    ● generate classic app
    ● copy over app folder
    ● note app.json
    ● run sencha app
    refresh
    Preview app.json:
    https://github.
    com/savelee/ext6playground/blob/master/play
    station/app.json
    What’s new/different:
    ● builds
    ● theme
    ● toolkit
    ● output
    Migrating my “simple” playstation app took
    me less than 10min!

    View Slide

  5. Generate Modern App
    sencha generate app --modern MyApp /path
    DEMO

    View Slide

  6. Migrating Apps from ST2 to Ext6.
    ● generate modern app
    ● copy over models
    ● clear view folder
    ● generate views, and edit
    views by manually
    copying content over
    ● sencha app refresh
    ● manually rewrite
    controllers (and stores?)
    ● create listeners in views
    ● create references in
    views
    https://github.
    com/savelee/ext6playground/tree/master/dinm
    u

    View Slide

  7. Generate All-in-one App
    sencha generate app MyApp /path
    DEMO
    https://github.com/savelee/ext6playground/tree/master/barfinder

    View Slide

  8. Generate Theme
    sencha generate theme MyTheme

    View Slide

  9. Migrating Themes
    ● generate theme
    ● copy sass/src
    ● copy sass/var
    ● copy resources
    ● edit package.json
    ● skip slicer
    ● edit app.json
    ● copy app sass
    ● sencha app build
    Preview folder structure packages
    Skip Slicer .sencha/app/sencha.cfg
    Preview package.json:
    https://github.
    com/savelee/ext6playground/blob/master/pack
    ages/local/senchacon-theme/package.json
    What’s new/different:
    ● extend

    View Slide

  10. Build profiles / platform switcher...
    ● edit themes
    ● edit app.json
    ○ create build profiles
    ○ disable theme
    ○ configure output
    ○ configure bootstrap
    ● sencha app refresh
    ● sencha app build
    ● edit index.html
    ○ create url switch
    ○ create platform switch
    Preview app.json, preview index.html:
    https://github.
    com/savelee/ext6playground/tree/master/sencha
    con
    Preview package.json.
    What’s new/different:
    ● builds
    ○ create theme builds
    ● output
    ○ modify to create multiple
    output manifest files
    ● bootstrap
    ○ load correct manifest file
    ● theme
    ○ disable, we use builds instead
    ● index.html
    ○ platform switcher

    View Slide

  11. Fashion in action
    sencha app watch
    DEMO

    View Slide

  12. Resources
    Github:
    https://github.com/savelee/ext6playground
    SpeakerDeck:
    http://www.speakerdeck.com/savelee

    View Slide