ExtJS6 - Behind closed doors

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

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