Ext Js introduction and new features in Ext Js 6

Ext Js introduction and new features in Ext Js 6

• 1.
  Introduction to ExtJS Sushil Shinde Sujith Sudhakaran Sushil.shinde@synerzip.com sujith.sudhakaran@synerzip.com
• 2.
  EXT JS |Introduction  Ext JS is a pure JavaScript web application framework  Framework to build feature-rich cross-platform web applications targeting desktops, tablets, and smartphones  Features hundreds of high-performance UI widgets  Responsive design and templates  Object oriented architecture  Robust data packages  Packaged with rich customizable themes  JavaScript driven development
• 3.
  EXT JS |Class System  Ext JS ships with more than 300 classes  ‘Ext’ is global singleton object with 78 methods and 59 properties  Ext.Define(‘className’, ‘Class members’, ‘onClassCreatedCallback’ ) : To define new custom class  Ext.Create(‘className’) : To create an object of class  Class can have constructor, private members and static members  Ext JS supports inheritance : using ‘extend’ keyword
• 4.
  EXT JS |Data Package • The data package is what loads and saves your application data • Data package classes: – Ext.data.Model – Ext.data.Store – Ext.data.proxy.Proxy
• 5.
  EXT JS |Application Architecture  Ext JS provides support for both MVC and MVVM application architectures  What is MVC?  What is MVVM?  (M) Model: It is a class which defines the fields for their data  (V) View: Any type of component that is visually represented like panel, form  (C) Controller: A class used as a place to maintain view’s logic  (VM) ViewModel: Is a class which manages data specific to views  (VC) View Controller: Is a class which creates one-to-one relation between view and controller
• 6.
  EXT JS |MVVM and Data Binding  Two – way data binding  Live synchronization between Views and Models  Computed values and fields
• 7.
  EXT JS |UI Components  Out of the box components:  Dialog Boxes  Tree, Tree grid  Combo-box, Sliders  Pickers (Date, Time, Color etc.)  Menu, Buttons, Toolbar and Tooltips  Grid  ….. Many more  Data Validation and dirty indicators  Drag and Drop
• 8.
  Key takeaways fromSencha Roadshow • Latest version 6.0 • Theme • Fashion • IDE Plugins • Professional services • …
• 9.
  EXT JS |Comparison Angular ExtJS
• 10.
  New Features in6.0 • Single framework for creating applications that runs on all types of devices, from phones to tablets to desktops • Toolkits as classic and modern – Classic consists of visual elements from ExtJS – Modern consists of the visual elements from Touch • Concept of Universal Apps • New Theme – Triton • Fashion • ExtJS Premium – Pivot grid – Exporter Plugin • Microloader
• 11.
  Sample bootstrap.js
• 12.
  Changed Architecture
• 13.
  Compatibility
• 15.
  Sencha Tools
• 16.
  IDE Plugins
• 17.
  Idea of Stylingand Theming • Comes as a part of branding the application/company • To provide consistent look and feel • Standardize styles of components • Provide alternate look and feel for the same application • We can say it as a after thought than design philosophy • Change the look and feel of an existing application • Maintaining the existing functionality and make it look different • Theming • Styling
• 18.
  Lastly few thingsabout Sencha charts
• 19.
  When to usewhat • ExtJS • You want to use handy components delivered with Sencha Ext JS. It is a huge time saver. • You do not want to worry regarding cross compatibility issues while Programming and Development. It is a big plus. • You or your client need specialized licensing or an accountable party to call for support. • Universal apps, you can achieve responsiveness by managing the config files • If paid support contracts and a per-seat / per-server commercial license is affordable. • Angular • Smaller Footprint is required • Responsive design is a requirement for your application. • Your organization find value in automated testing and automated testing is a part of your development culture. • It would be cheaper to integrate existing 3rd-party components which are free. • Your team is comfortable with CSS and dealing with cross-browser compatibility issues. • If the team will be able to manage integrating new releases and bug fixes from the selected 3rd-party libraries throughout the application's development lifecycle.
• 20.
  Sencha Customers
• 21.
  Thanks