Sencha Products Introduction

1. Introduction to Sencha Products
Ext JS, Tools, Test, ExtReact, GXT
Sandeep Adwankar
Sr. Product Manager, Sencha
Twitter: adwankar

2. Ext JS Framework
Latest Version: 6.5.2
2

3. Ext JS Framework
• Comprehensive framework for data-intensive
cross-platform applications
• Hundreds of rich set of pre tested and
integrated customizable components
• Create Infinite grid with data package that
access data from any data source
• Responsive UI to support multiple browsers,
devices and screen sizes
3

4. Grid Component
• Handles massive amounts of
records without impacting
performance with buffered
rendering
• Enables sorting, grouping,
summary rows and more
4

5. Pivot Grid Component
• Summarize and analyze large
data sets for more informed
decision making
• Aggregates multidimensional
data
5

6. Charts
• Visually represent data with a
broad range of dynamic and
static charts — including line,
bar, and pie charts
• Browser variations are
handled automatically so
charts display beautifully on
all devices
6

7. D3 Visualizations
• Brings the power of
sophisticated data
visualizations to any web
developer
• Provides D3 trees, sunbursts,
heatmaps, and more as
ready-to-use components
• Integration with data stores to
update the visualizations as
data changes
7

8. Calendar / Date Panel
• Easily view and manage
schedules and events within
your apps
• Integrates with Google
Calendar
8

9. Forms
• Flexible forms for your most
demanding data entry
requirements
• Field masking, extensible
validations and numerous
labeling and error display
options
9

10. ExampleApps
• Employee Directory
10

11. Ext JS Tools
11

12. Key Use Cases
Visually Build Ext JS Apps,
Code generation
Benefits
Reduce manual coding,
Reduce bugs,
Quicker time to market
User Persona
ExtJS Developer with background in
building apps visually
Roadmap
Better code generation,
Ext JS.Next support
Latest Version: 4.2.2
Ext JS Edition: Pro
Sencha Architect

13. Sencha Architect - Walkthrough
13

14. Key Use Cases
Visually Create Ext JS themes,
theme package generation,
Create UIs
Benefits
Portable themes,
Reduced learning curve,
Quicker time to market
User Persona
Ext JS Designer, Developer with ability to
create inspirational visuals
Roadmap
CSS,
Better integration with Architect,
Ext JS.Next support
Latest Version: 1.3
Ext JS Edition: Pro
Sencha Themer

15. Sencha Themer - Walkthrough
15

16. Key Use Cases
Build optimized Ext JS web apps,
mobile apps (cordova),
ES6, PWA Apps
Benefits
Single tool for building, tuning, packaging
User Persona
ExtJS Developer,
Build Engineer
Roadmap
Ext JS.Next Support
New build tool to support modern
tooling
Latest Version: 6.5.2
Ext JS Edition: Standard
Sencha Cmd

17. Sencha Cmd - Walkthrough
17

18. Key Use Cases
Use favorite IDE to
quickly write Ext JS code,
Code/Docs Navigation
Benefits
Developer productivity
User Persona
ExtJS Developer creating Java or Node
based web apps
Roadmap
Support for JetBrains 2017 IDEs,
Ext JS.Next Support
Latest Version: 6.0.11
Ext JS Edition: Pro
JetBrains Plugin

19. Key Use Cases
Use favorite IDE to
quickly write Ext JS code,
Code/Docs Navigation
Benefits
Developer productivity
User Persona
Ext JS Developer creating Java based
web apps
Roadmap
Support for New Eclipse versions,
Ext JS.Next Support
Latest Version: 6.0.4
Ext JS Edition: Pro
Eclipse Plugin

20. Key Use Cases
Use favorite IDE to
quickly write Ext JS code,
Code/Docs Navigation
Benefits
Developer productivity
User Persona
ExtJS Developer creating web apps with
ASP.net
Roadmap
Support for Visual Studio 2017,
Ext JS.Next Support
Latest Version: 6.0.6
Ext JS Edition: Pro
Visual Studio Plugin

21. Key Use Case
Use favorite editor to
quickly write Ext JS code,
Code/Docs Navigation
Benefits
Developer productivity
User Persona
ExtJS Developer migrating from sublime
or other text based editors
Roadmap
Support for VS Code versions,
Ext JS.Next Support
Latest Version: 1.0.1
Ext JS Edition: Standard
Visual Studio Code Plugin

22. Visual Studio Code Plugin - Walkthrough
22

23. Key Use Cases
Debug data binding,
Show component over-nesting,
Inspect stores
Benefits
Identify app performance issues,
Quicker debugging
User Persona
Ext JS Developer, Senior Architect
responsible for app performance
Roadmap
Ext JS.Next Support
Latest Version: 6.0.2
Ext JS Edition: Premium
Sencha Inspector

24. Sencha Inspector - Walkthrough
24

25. Key Use Cases
Create mockups for Ext JS apps
Benefits
Use visual assets that match Ext JS UI
components
User Persona
ExtJS Developer, Designer responsible
for designing new interface
Roadmap
Ext JS versions support
Latest Version: 3.0
Ext JS Edition: Standard
Ext JS Stencils

26. Ext JS Stencils - Walkthrough
26

27. Key Use Cases
Create code snippets for learning,
sharing with others,
or Sencha Support
Benefits
Quickly create code snippets in cloud,
No download of framework or tools
User Persona
Tinkerer, Architect,
Ext JS Developer
Roadmap
UX Updates
Latest Version: 2.0.0
Ext JS Edition: Standard
Sencha Fiddle

28. Sencha Fiddle - Walkthrough
28

29. Sencha Test
Latest Version 2.1
29

30. Why Sencha Test?
Boosts quality of enterprise applications built using Ext JS framework.
Sencha Test Offers:
• Deeper Integration with Ext JS
• Ability to Test Dynamic Nature of Ext JS
• Faster Test Creation Capability
• Cross Browser Simultaneous Test Execution
30
Help teams automate tests and achieve more
coverage easier and faster

31. Sencha Test Overview
31
Sencha Studio
• Test generation
• Test management
CLI & CICD
• Automate test execution
• Launch tests outside Studio
Cross-Browser Testing
• One test across browsers
• Execute test simultaneously
ST API & Visual Testing
• Write tests with minimal code
• Screen comparison

32. Out Of The Box Integrations
32
Jasmine
Test Framework
Browser FarmsJira/Jenkins / Teamcity
Istanbul
Code Coverage

33. ExtReact
Latest Version 6.5.2
33

34. ExtReact – Most Comprehensive Set of Components for React
Apps
• Hundreds of powerful UI components that can be
quickly and easily added to React apps
• Supports Modern Tooling – NPM, JSX,
TypeScript, WebPack, Babel, Yeoman
• Build adaptive and engaging React app design
with layouts and responsive configuration
• Powerful data management with buffered
rendering

35. Sencha Fiddle - Walkthrough
35

36. GXT
Latest Version 4.0.2
36

37. GXT - Build Desktop and Touch-Enabled WebApps in Java
• Code in Java using GWT
• Compiles to optimized HTML &
JavaScript
• MVC architecture
• Robust data APIs & rich UI widgets
• Big data grids & plugin-free charting
• Cross platform browser compatibility
• Supports touch gestures
37

38. Summary
38

39. Data Intensive
Analyze, visualize and interact with
complex data from any source
Cross-platform and great looking
Enables developers to deliver web apps
for desktop, tablet and smartphones that
are visually stunning
Comprehensive
Accelerate time to market with 100s of
integrated, tested, documented UI
components, and robust enterprise tools
Professional Enterprise Support
Worldwide Technical Support &
Maintenance
The Sencha Advantage

40. Try it out!
https://www.sencha.com/products/evaluate/
40

41. Q&A
41
Sandeep Adwankar
Sr. Product Manage, Sencha
Twitter: adwankar