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
2. Overview • Generate Apps • Migrating • Themes • Build Profiles / Platform Switchers • Fashion in action
3. Generate Classic App sencha generate app --classic MyApp /path DEMO
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!
5. Generate Modern App sencha generate app --modern MyApp /path DEMO
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
7. Generate All-in-one App sencha generate app MyApp /path DEMO https://github.com/savelee/ext6playground/tree/master/barfinder
8. Generate Theme sencha generate theme MyTheme
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
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
11. Fashion in action sencha app watch DEMO
12. Resources Github: https://github.com/savelee/ext6playground SpeakerDeck: http://www.speakerdeck.com/savelee