Introduction to Sencha Ext JS

Transcription

1

2 Introduction to Sencha Ext JS Olga Petrova Sales Engineer EMEA

3 Agenda Use Case How It Works Advantages Demo

4 Use case

5 Ext JS a Javascript framework for building enterprise data-intensive web applications

6 Enterprise Needs fast development of complex business-critical apps that have to be alive for several years

7 Fast short time-to-market short release time

8 Complex many modules and submodules hundreds or thousands of user stories huge codebase

9 Business-critical need to be stable and reliable suit changing business requirements data-intensive product vs app development

10 Alive for several years easy maintainable and supportable follow all modern technologies work with all new browsers and devices

11 provides everything a developer needs to rapidly build data intensive cross-platform enterprise web applications

12 How it works

13 Used technologies

14 Ext JS is a frontend technology RAD Server IIS Apache Tomcat Node JS Delphi C++ Java.NET PHP Interbase Oracle SQL Server MongoDB MySQL

15 Client-Server communication: the 1990s

16 Client-Server communication: Modern web app

17 Ext JS Advantages

18 Ext JS robust components advanced data package cross-platform archtectural patterns theming tooling modern web features

19 Ext JS components

20 Robust components Grid Tree TreeGrid PivotGrid Chart Calendar Dashboard Form Form fields Window Panel Toolbar Menu d3 Visualizations etc.

21 Robust components all components are perfectly compatible optimized to work with huge datasets easily customizable

22 Advanced grids Large dataset support High performance, paging Spreadsheet functionality Range selection Copy to clipboard ARIA support

23 Chart integration Built-in Sencha Charts (Canvas & SVG) (Touch) interactivity Customizable Exportable Drawing package D3 (visualization) integration

24 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

25 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

26 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

27 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

28 Standard Components in Ext JS page 1

29 Standard Components in Ext JS page 2

30 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

31 Component s Demo Modern Toolkit es/kitchensink/?modern Classic Toolkit es/kitchensink/?classic#all 31

32 Ext JS is cross-platform

33 The Web Application World is Fragmented and Complex

34 Cross-platform one code base one app for desktop/tablet/mobile different views for different devices

35 Ext JS Histrory

36 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

37 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

38 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)

39 Classic Toolkit Advanced enterprise components Optimized for desktop and tablet experience Support for legacy browsers Full ARIA support

40 Modern Toolkit High performance lightweight application framework Support only modern browsers Device themes for each platform Optimized for touch devices Limited ARIA support

41 Universal Apps Desktop, Tablets, Phones Modern & Legacy Ext JS Browsers Device Specific UX

42 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

43 Adaptive Design (Targeted UX) Executive Dashboard Admin Dashboard

44 Coworkee (Employee Directory) 44

45 Data Package

46 Advanced data package Model Store Data Types Proxy Reader Writer Field Association Validator Operation Batch Session

47 Architectural patterns

48 Architectural patterns clean code separation MVVM, MVC data binding (two-way)

49 Theming

50 Theming SASS themes several build-in themes Javascript SASS compiler run-time theming

51 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

52 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

53 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

54 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

55 Tooling

56 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

57 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

58 Ext JS Stencils Complete set of UI asset kit for Ext JS Supported Design Tools Adobe Illustrator Sketch Omnigraffle Balsamiq

59 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

60 Sencha IDE Plugins Code Generation Code Completion Code Navigation Code Inspection Code Refactoring Documentation Lookup Sencha Cmd Integration Build and Watch

61 Sencha Fiddle Test code snippets Tool used by Sencha Support Learning resource

62 Sencha Themer UI tool for theming Ext JS application 400+ configurable parameters Run-time theming

63 Sencha Inspector Inspect Component Tree Inspect Data Stores Inspect Layouts Inspect Events Inspect MVC/MVVM Inspect & Modify Theme Remote Debugging for Mobile

64 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

65 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

66 Modern web features ECMAScript 6 support Progressive Web App support manifest offline mode

67 A Complete Framework

68 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

69 Documentation

70 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

71 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

72 Questions?