Dynamic package loading and routing with Ext JS
Download as PPTX, PDF0 likes1,133 views
This document discusses dynamic package loading and routing in Ext JS. It describes how to generate and load packages, set up routing between packages, and dynamically load packages. It provides code examples for generating packages, configuring routing and loading packages. Resources are also included for further information on routing, packages and dynamic loading in Ext JS.
![Ext JS Version < 6.5
45
requires: [
“package-loader”
]](https://image.slidesharecdn.com/scd2019-packages-and-routing-190411194112/85/Dynamic-package-loading-and-routing-with-Ext-JS-45-320.jpg)
Dynamic package loading and routing with Ext JS
- 1. Dynamic package loading and routing with Ext JS Nils Dehl 1 Karlsruhe, 10.04.2019
- 2. Nils Dehl • JavaScript Consultant and Trainer • over 10 years Ext JS experience • Sencha MVP • @nilsdehl • nils.dehl@dkd.de • https://github.com/mrsunshine 2
- 3. Routing 3
- 4. 4
- 5. 5
- 7. 7
- 8. 8
- 9. 9
- 11. 11
- 13. 13 me.redirectTo('login', {replace: true}); Coworkee/client/app/view/viewport/ViewportController.js
- 15. 15
- 17. 17
- 21. 21
- 23. 23
- 26. 26
- 29. Packages 29
- 30. 30
- 31. 31
- 32. 32 sencha generate package --namespace App.view.auth Auth
- 33. 33
- 34. 34
- 40. 40
- 41. 41 sencha package repo init -name “dkd" -email “nd@dkd.de”
- 42. 42 sencha package add coworkee.pkg
- 44. 44
- 45. Ext JS Version < 6.5 45 requires: [ “package-loader” ]
- 46. 46
- 47. 47 sencha generate package -require Home then generate package -require Office then generate package -require Organization then generate package -require Person then generate package -require History
- 49. 49 sencha app build —uses
- 50. 50
- 51. 51
- 54. 54
- 57. Resources 57 Coworkee Example App: https://github.com/mrsunshine/Coworkee Routing Guide: https://docs.sencha.com/extjs/6.7.0/guides/application_architecture/router.html Ext.route.Router: https://docs.sencha.com/extjs/6.7.0/classic/Ext.route.Router.html Dynamic Package Loading Blog Post: https://mitchellsimoens.com/2017/04/12/package-loading/ Ext.Package: https://docs.sencha.com/extjs/6.7.0/classic/Ext.Package.html
- 58. dkd sagt Danke dkd Internet Service GmbH Kaiserstraße 73, 60329 Frankfurt am Main 58
- 59. Quelle: Matthias Dörzbacher, dkd Internet Service GmbH 59
- 60. Nils Dehl • JavaScript Consultant and Trainer • over 10 years Ext JS experience • Sencha MVP • @nilsdehl • nils.dehl@dkd.de • https://github.com/mrsunshine 60
Editor's Notes
- #2: Routing Packages dynamic package loading
- #4: Who is using routing?
- #5: Single Page Applications no Page loads no History Back Button leaves app
- #6: Example app Coworkee based on Sencha, extend, on GitHub Track app state bookmark / email make app stateful open specific state view of an SPA app routing should not be used to store any data or session
- #7: Fragment Identifier control the history stack of the browser without reloading the current page
- #8: history stack of an SPA
- #9: back and forward button working
- #10: the ext router lets look how routing works
- #11: start with the login route
- #13: action file Path on slide in the footer slides will be shared
- #14: replace When set to true, this will replace the current resource in the history stack with the hash being set. force Even if the hash will not change, setting this to true will force the Ext.route.Router to react.
- #15: defaultToken
- #16: default route #home
- #17: routes with params
- #18: load a person see url in footer
- #20: before
- #22: un matched route
- #24: onRouteChange Event add search filter to route
- #25: control add listener “routechange”
- #26: Multi route Pipe |
- #29: wildcard Ext.History.getToken()
- #30: Share code between applications reusability structure sharing (Package Repository / Github ) Ext core / themes / fonts / components scheduler or gant/ custom code who is using?
- #31: core modern / classic themes fonts ux / google
- #32: app packages local remote
- #33: generate package via Sencha CMD
- #37: theme require uses
- #38: require other packages / dependencies
- #40: inside of package folder
- #42: local repo init host repo on http get example nexus
- #43: add to local repo from build folder
- #44: reduce initial load size for big apps Load on demand user rights who is using?
- #46: require package-loader package in app.josn
- #47: modules as packages before it was all in app
- #49: theme require uses