Introduction to Sencha Ext JS Olga Petrova olga@sencha.com Sales Engineer EMEA
Agenda Use Case How It Works Advantages Demo
Use case
Ext JS a Javascript framework for building enterprise data-intensive web applications
Enterprise Needs fast development of complex business-critical apps that have to be alive for several years
Fast short time-to-market short release time
Complex many modules and submodules hundreds or thousands of user stories huge codebase
Business-critical need to be stable and reliable suit changing business requirements data-intensive product vs app development
Alive for several years easy maintainable and supportable follow all modern technologies work with all new browsers and devices
provides everything a developer needs to rapidly build data intensive cross-platform enterprise web applications
How it works
Used technologies
Ext JS is a frontend technology RAD Server IIS Apache Tomcat Node JS Delphi C++ Java.NET PHP Interbase Oracle SQL Server MongoDB MySQL
Client-Server communication: the 1990s
Client-Server communication: Modern web app
Ext JS Advantages
Ext JS robust components advanced data package cross-platform archtectural patterns theming tooling modern web features
Ext JS components
Robust components Grid Tree TreeGrid PivotGrid Chart Calendar Dashboard Form Form fields Window Panel Toolbar Menu d3 Visualizations etc.
Robust components all components are perfectly compatible optimized to work with huge datasets easily customizable
Advanced grids Large dataset support High performance, paging Spreadsheet functionality Range selection Copy to clipboard ARIA support
Chart integration Built-in Sencha Charts (Canvas & SVG) (Touch) interactivity Customizable Exportable Drawing package D3 (visualization) integration
D3 Adapter Integrates the D3.js library and Org Chart provides some of the most commonly used D3 visualizations as ready to use components in Ext JS Integration with data stores Pan/zoom interactions 24
Pivot Grid Analytics capabilities for Ext JS grid Results Filtering & Grouping Sub-totals and Grand-totals Configurator for Ad-Hoc analysis Drilldown to raw records Integrated with Charts Excel export of any Ext JS grid
Data Exporter Supports export for native XLSX format, HTML, CSV, and TSV. Capability to configure the exports data Column styling in the exported documents Available for Grids and Pivot Grid 26
Calendar Component Provides all the building blocks needed to include advanced calendaring capabilities Day, Week, & Month views Store to define events Time zone support Drag, Resize & Validation Google s Calendar API integration 27
Standard Components in Ext JS page 1
Standard Components in Ext JS page 2
Declarative definition { xtype: 'grid', columns: [{ xtype: 'datecolumn', text: 'Time', dataindex: 'timestamp', format: 'F j, Y \\a\\t H:i' }, { xtype: 'numbercolumn', text: 'Magnitude', dataindex: 'size', width: 140, format: '0.0' }] } 30
Component s Demo Modern Toolkit http://examples.sencha.com/extjs/6.5.0/exampl es/kitchensink/?modern Classic Toolkit http://examples.sencha.com/extjs/6.5.0/exampl es/kitchensink/?classic#all 31
Ext JS is cross-platform
The Web Application World is Fragmented and Complex
Cross-platform one code base one app for desktop/tablet/mobile different views for different devices
Ext JS Histrory
Sencha Ext JS A History of Innovation (2007) Ext JS 2.x (2010) Touch 1.x Ext JS 5.x (2014) Ext JS 3.x (2009) (2011) Ext JS 4.x Touch 2.x (2015) Ext JS 6.x 36
New in Ext JS 6.0 Merged Ext JS & Touch Views / UI Components Classic Toolkit Modern Toolkit Views / UI Components Sencha Ext JS Utilities MVC / MVVM Data Package!== Core Utilities MVC / MVVM Data Package Sencha Touch DOM DOM Class / Loader Class / Loader Sencha Ext JS 6
Which toolkit should you use? We are only targeting smart phones We need to run on legacy browsers We want the best experience on any device! MODERN TOOLKIT CLASSIC TOOLKIT UNIVERSAL (BOTH)
Classic Toolkit Advanced enterprise components Optimized for desktop and tablet experience Support for legacy browsers Full ARIA support
Modern Toolkit High performance lightweight application framework Support only modern browsers Device themes for each platform Optimized for touch devices Limited ARIA support
Universal Apps Desktop, Tablets, Phones Modern & Legacy Ext JS Browsers Device Specific UX
Supported Browsers / Platforms / Devices Widest selection of browsers and operating systems Modern and legacy browsers Desktops, Tablets, & Smartphones Safari 6+ Firefox IE 8+ Chrome Opera 12+ Safari on ios 6+ Chrome on Android 4.1+ IE 10+ on Windows 8
Adaptive Design (Targeted UX) Executive Dashboard Admin Dashboard
Coworkee (Employee Directory) https://github.com/sencha-extjs-examples/coworkee 44
Data Package
Advanced data package Model Store Data Types Proxy Reader Writer Field Association Validator Operation Batch Session
Architectural patterns
Architectural patterns clean code separation MVVM, MVC data binding (two-way)
Theming
Theming SASS themes several build-in themes Javascript SASS compiler run-time theming
Theming Classic Toolkit Several out of the box themes 1 ARIA theme 1 legacy Windows theme Modern Toolkit Device specific themes ios Material Design Some universal themes
Material Theme New material theme that closely follows the Material Design spec to ensure all apps look fresh and clean on any device More than just color and icons handles everything from spacing and fonts to shadows and ripples effects Implements the Material Design spec for every single UI component in the Modern toolkit 52
ios Theme An all new and refreshed theme for ios devices following the UI specifications of ios 9 Future releases will evolve along with the style of future releases of ios 53
Create custom themes Extend from one of the existing themes Configure by writing Sass code Sencha Cmd compiles your Sass code to production ready CSS code
Tooling
Web Application Lifecycle Management Platform Strategy Education & Support Test Tools Develop Frameworks Tools Design Mockup Prototype Enterprise Workflow Integration IDE Backend Connectivity Build/CI Customization Services Implementation & 56
Tooling Ext JS Stencils Designer Tool Sencha Architect Visual Builder IDE Plugins Productivity Sencha Fiddle Ext JS/ExtReact online Sencha Themer App Styling Sencha Inspector Debugging Sencha Test App Testing Sencha Cmd Build Optimization
Ext JS Stencils Complete set of UI asset kit for Ext JS Supported Design Tools Adobe Illustrator Sketch Omnigraffle Balsamiq
Sencha Architect Visual application builder Build the UI and code fully featured applications Theme designer Best practices generated code Teams can create their own templates, or use existing ones
Sencha IDE Plugins Code Generation Code Completion Code Navigation Code Inspection Code Refactoring Documentation Lookup Sencha Cmd Integration Build and Watch
Sencha Fiddle Test code snippets Tool used by Sencha Support Learning resource https://fiddle.sencha.com/
Sencha Themer UI tool for theming Ext JS application 400+ configurable parameters Run-time theming
Sencha Inspector Inspect Component Tree Inspect Data Stores Inspect Layouts Inspect Events Inspect MVC/MVVM Inspect & Modify Theme Remote Debugging for Mobile
Sencha Test Studio Easy to setup Write Unit & Application Tests Built-in Inspector and Event Recorder Integration with CI systems Integration with browser farms Code Coverage 64
Sencha Cmd Generation of code and applications Built-in server (Jetty server) File watcher Load assets (Microloader) Compilation of Sass Themes (Fashion) Bundling files Compress, Optimize and Transpile files (Google Closure Compiler) Support for Cordova, Electron, PWA s etc. Upgrade between versions
Modern web features ECMAScript 6 support Progressive Web App support manifest offline mode
A Complete Framework
Sencha Ext JS Features Add-On (Ext JS Premium Only) High- Performance Customizable UI Widgets Backend Agnostic Data Package Layout Manager and Responsive Configs Advanced Charting Package Easily Customizable Themes Accessibility Package (ARIA) for Section 508 compliance App Templates Pivot Grid for Analytics
Documentation http://docs.sencha.com/
Sencha ExtReact 6.5 The Most Comprehensive Set of Components for React Apps 115+ powerful UI components - are commercially tested and supported - work together seamlessly Reduce time to market and upgrade and maintenance costs Deliver visually stunning apps faster 115+ UI Components Sencha Themer Sencha Cmd Ext JS Reactor: component bridge Babel: ES6 & JSX transpiler Webpack: Build
Sencha Products Goals Multi-device Development Sencha Frameworks maximize reusability of code for building web applications targeting desktop, tablets, and smartphones. Development Efficiency Sencha Tools significantly improve developer productivity, development experience and minimize errors during development. Improve Quality Sencha Test automates application testing across different browsers and helps improve application quality
Questions?