Learn how to use our newly released Open Tooling for Ext JS (ExtGen and ExtBuild) with your React and Angular applications (as ExtReactGen and ExtAngularGen). See how easy it is to integrate our fully supported component library into your React or Angular apps, as well as: - What ExtReact and ExtAngular is, and how it relates to Ext JS components, theming environment and layout system - Discover where everything lives (git, npm, etc.)

1. Sencha ©2018
Getting Started with Ext JS Open
Tooling in Your React & Angular Apps
Marc Gusmano
marc.gusmano@sencha.com

2. Sencha ©2018
Webinar intro
Learn how to use our newly released Open Tooling for Ext JS (ExtGen and
ExtBuild) with your React and Angular applications (as ExtReactGen and
ExtAngularGen).
You will see how easy it is to integrate our fully supported component library
into your React or Angular apps, as well as:
• What ExtReact and ExtAngular is, and how it relates to Ext JS components,
theming environment and layout system
• Discover where everything lives (git, npm, etc.)
• See a live demonstration
Getting Started with Ext JS Open Tooling in Your React & Angular Apps

3. Sencha ©2018
Ext JS 6.6 – Review of Key Highlights
● Ext JS npm packages
● New Open Tooling - ExtGen, ExtBuild
● New modern components
● New beautiful Graphite theme
● Localization support for modern apps
● Dynamic Material Theme Styling
● Advanced Ext JS routing
● Enhanced gauges components
Most Comprehensive JavaScript Framework now with Open Tooling

4. Sencha ©2018
Ext JS 6.6 npm Packages
● Ext JS Framework, components and themes
available as npm Packages
● Better manage versioning with npm based
dependency management
● Sencha hosted private npm repository to give
you access to latest releases
● Automated activations to easily convert from
trial to production framework
Better Maintainable Apps with Dependency Management
Theme Packages
Premium Packages
Core Packages
Classic
Toolkit
Modern
Toolkit

5. Sencha ©2018
Ext JS 6.6 Open Tooling - ExtGen
● Generate your first app with just one
command
● Use any of four new app templates to create
desktop, mobile or cross-platform apps
● Interactive mode to guide you through
application creation mode
● Watch immediately changes to code in live
running app
Generate your first app within minutes

6. Sencha ©2018
A version of ext-gen for each framework
● ext-gen
● Ext JS Framework applications (Ext JS 6.6 and Ext JS CE)
● https://github.com/sencha/ext-gen
● ext-react-gen
● React Framework applications (React 16x)
● https://github.com/sencha/ext-react
● ext-angular-gen
● Angular Framework applications (Angular 7x)
● https://github.com/sencha/ext-angular

7. Sencha ©2018
ext-gen – login and install
● npm login --registry=https://npm.sencha.com/ --scope=@sencha
● npm install -g @sencha/ext-gen
● npm install -g @sencha/ext-react-gen
(install for ext-angular-gen will be discussed soon…)

8. Sencha ©2018
Running ext-gen
Shorthand: ext

9. Sencha ©2018
ext-gen --help

10. Sencha ©2018
ExtGen sample application

11. Sencha ©2018
Running ext-react-gen
Shorthand: xrg

12. Sencha ©2018
ext-react-gen --help

13. Sencha ©2018
ExtReact sample application

14. Sencha ©2018
ext-angular-gen – early-adopter npm
Shorthand: xng
● npm login --registry=https://sencha.myget.org/F/early-adopter/npm/ --scope=@sencha
● npm install -g @sencha/ext-angular-gen
(contact Sencha Sales for an ID and password for early adopter access)

15. Sencha ©2018
Running ext-angular-gen
Shorthand: xrg

16. Sencha ©2018
ExtAngular sample application

17. Sencha ©2018
• 115+ UI Components
• Themer
• Cmd
• Ext JS component bridges
• Typescript transpiler
• Webpack: Build
ExtAngular

18. Sencha ©2018
Questions?
Marc Gusmano
marc.gusmano@sencha.com
https://www.sencha.com/products/extjs/evaluate/

19. Sencha ©2018
Thank You!
Blog
https://www.sencha.com/blog/
Free Trials – All Products
https://www.sencha.com/products/evaluate/
Ext JS 6.6 with Open Tooling Free Trial
https://www.sencha.com/products/extjs/evaluate/opentooling/
Support Portal
https://www.sencha.com/support/