This presentation covers an elementary introduction to Ext Js 5 and its architecture. It also provides the details of new version of Ext Js i.e Ext Js 6. There are few slides which discuss comparison between Ext Js and other UI development frameworks
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 from Sencha Roadshow
• Latest version 6.0
• Theme
• Fashion
• IDE Plugins
• Professional services
• …
10. New Features in 6.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
17. Idea of Styling and 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
19. When to use what
• 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.
Thank Sushil
Where it took place, first time event in India, Bangalore, Delhi and Mumbai
Info about the slides
What I will be talking in my session
Sass(Syntactically Awesome Stylesheets) the scripts are interpreted into CSS
After understanding what ExtJS has to offer
Explain about the comparison with context to sushil’s explanation
Because Extjs has so many things to offer in itself.
Triton: new theme, which is flat, no images, they use font icons
Fashion used for developing themes,
is a compiler for sass files used to generate CSS, inject the css into the running page and so you can see the changes nearly in real time
Concept of bufferedRenderer, bufferedStore
Show the demo
It is a huge file, in our case the file is of 1661 lines
From 4 they planned to merge the two framework
Check on netmarketshare.com:
44% market still uses Internet explorer, one or the other version
46% market uses chrome
Firefox, safari form the remaining %
Talk about the universal app, different type, modern and classic
Sencha Architect saves developers time by removing the need to type most boilerplate code. Automatic code generation accelerates the development of both desktop and mobile applications.
Test studio check --?
Architect – Q1 or Q2
Which all ide plugins are available
Example of halloween
Adding the cherry on the icing
Chartsly package by one of the speaker at the conference
So, that all from our side, I hope this was useful and informative to you guys
ExtJS is the extensively documented JS library