Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

What’s new in Ext JS 6? Lee Boonstra, Sencha Inc. @ladysign

Slide 3

Slide 3 text

Sales Engineer, Sencha Inc.

Slide 4

Slide 4 text

Lee Boonstra Sales Engineer & Trainer Sencha @ladysign http://www.ladysign-apps.com

Slide 5

Slide 5 text

I  <3  JavaScript!  

Slide 6

Slide 6 text

I  <3  JavaScript!  

Slide 7

Slide 7 text

I  <3  JavaScript!   Purposes of JS: •  Enrich websites •  Build web applications •  Create native phone, tablet & desktop apps with Cordova •  Generate PDFs with JavaScript •  Create real-time web applications and web servers with Node JS •  Create browser chat and video apps with WebRTC •  Create 3D games with WebGL •  Web scarping & screenshotting with Phantom JS! • Compile Sass Stylesheets with Sencha Fashion!

Slide 8

Slide 8 text

What’s new in Ext JS 6? •  Ext JS 6 Toolkits •  Microloader changes •  Pivot Grid •  App templates •  Theming with Fashion

Slide 9

Slide 9 text

History

Slide 10

Slide 10 text

History

Slide 11

Slide 11 text

History

Slide 12

Slide 12 text

History

Slide 13

Slide 13 text

Desktop Computers 2011 Ext JS 4.x •  UI components •  Class System •  Dynamic Loading •  MVC Architecture

Slide 14

Slide 14 text

Phones & Tablets 2012 Sencha Touch 2.x •  Light weight apps •  Everything HTML5 & CSS3 •  Touch Only apps •  Touch components •  Offline support •  iOS4+, Android 2.3+

Slide 15

Slide 15 text

Evolution of touch screens 2014 Ext JS 5.x •  Touch Support •  Responsive Design •  MVVM Architecture

Slide 16

Slide 16 text

Performance on a phone

Slide 17

Slide 17 text

Ext JS + Sencha Touch Can’t share code….

Slide 18

Slide 18 text

Ext  JS  1-­‐4   Ext  JS  5.x   Ext JS 6 Sencha  Touch  1   Sencha  Touch  2   Merge of the frameworks One single code base Serve the right app for the right experience Advanced theming system Mouse & Keyboard support 2007   2009   2014   2015   2010   2012  

Slide 19

Slide 19 text

2015: Ext JS 6 •  Merge both frameworks •  Apps can run on any device •  One code base •  Touch & Mouse/Keyboard support

Slide 20

Slide 20 text

Framework Stack DOM Class / Loader Data MVC / VM Utilities Views (Components)

Slide 21

Slide 21 text

Toolkits

Slide 22

Slide 22 text

Core Classic Modern Classic & Modern Toolkits

Slide 23

Slide 23 text

Classic Toolkit •  Advanced  enterprise  components,   (legacy  browser  components)   •  OpImized  for  desktop  and  tablet   experience   •  Best  performing  grid  component  for   huge  datasets   •  Responsive  Design   •  IE8+  

Slide 24

Slide 24 text

Generate Classic       sencha  generate  app     -­‐-­‐classic  MyApp  ../mypath  

Slide 25

Slide 25 text

•  High  performance  lightweight  applicaIon   framework   •  Device  Themes  for  each  plaTorm   •  Smooth  scrolling  and  animaIons   •  MulI-­‐touch  gestures  and  adapIve   layouts   •  Android  2.3+,  iOS  4+,  Windows  Phone,  BB   Modern Toolkit

Slide 26

Slide 26 text

Generate Modern       sencha  generate  app     -­‐-­‐modern  MyApp  ../mypath  

Slide 27

Slide 27 text

Which toolkit should you use? We  need  to  run  on   legacy  browsers   We  are  only   targeIng   smart  phones   We  want  the   best  experience   on  any  device!   CLASSIC  TOOLKIT   MODERN  TOOLKIT   UNIVERSAL  (BOTH)  

Slide 28

Slide 28 text

•  One  code  base,  both  toolkits.   •  One  single  URL   •  Microloader  can  serve  the  right   experience  for  the  right  device   •  Build  profiles   Universal App

Slide 29

Slide 29 text

Generate Universal       sencha  generate  app   MyApp  ../mypath  

Slide 30

Slide 30 text

DEMO

Slide 31

Slide 31 text

Why do you want to upgrade? We  want  the  latest   framework  for  our   desktop  apps.   We  want  to  use  VCs   and  databinding  for   our  phone  apps.   We  want  the   best  experience   on  any  device!   EXT  JS  5   SENCHA  TOUCH   BOTH  

Slide 32

Slide 32 text

EXT JS 6 can do… We  want  the  latest   framework  for  our   desktop  apps.   We  want  to  use  VCs   and  databinding  for   our  phone  apps.   We  want  the   best  experience   on  any  device!   Ext  6,  Classic  Toolkit   Ext  6,  Modern  Toolkit   Ext  6,  Universal  App  

Slide 33

Slide 33 text

Microloader

Slide 34

Slide 34 text

The Microloader •  Loads JavaScript, CSS and images •  Filters assets based on Platform •  Handles LocalStorage Caching •  Manages both Full and Delta patching •  Monitors HTML5 Application Cache

Slide 35

Slide 35 text

app.json.js properties "js":  [          {                  "path":  "app.js",  //  location  of  asset                  "bundle":  true,  //  container  of  bundles  assets                  "includeInBundle":  true,  //  include  this  file  in  the  bundle                  "platform":  ["ios"],  //  platform(s)  in  which  to  load  this  asset                  "bootstrap":  true,  //  development  only  file.  Not  used  in  built  version                  "update":  "full",  //  localstorage  cache  update  strategy                    "remote":  true  //  copied  into  build  if  available          }   ]  

Slide 36

Slide 36 text

app.json.css properties "css":  [          {                  "path":  "app.css",  //  location  of  asset                  "bootstrap":  true,  //  development  only  file.                    //  platform(s)  in  which  to  load  this  asset                  "platform":  ["desktop",  "chrome",  "windows"],                  "update":  "full",  //  localstorage  cache  update  strategy                  "remote":  true  //  copied  into  build  if  available          }   ]  

Slide 37

Slide 37 text

platformTags •  phone •  tablet •  desktop •  safari •  chrome •  ie10 •  firefox •  touch •  ios •  android •  blackberry •  windows •  tizen

Slide 38

Slide 38 text

platformTags in JS if  (Ext.platformTags.desktop)  {          Ext.create({                  xtype:  'panel',                  title:  'Some  Rather  Descriptive  Title'          });   }  else  {          Ext.create({                  xtype:  'panel',                  title:  'Short  Title'          });   }  

Slide 39

Slide 39 text

app.json.resources properties //  List  of  resources  to  copy  into  the  build   ”resources":  [          ”custom-­‐data.json”   ]  

Slide 40

Slide 40 text

app.json environment properties "production":  {   },     "testing":  {   },     "development":  {          "css":  {                  "path":  "dev-­‐styles.css"                }   }  

Slide 41

Slide 41 text

app.json.loader properties "loader":  {          //  true  (allow  cache),  false,  or  the  value  to  use  as  a  cache  buster          "cache":  "${build.timestamp}",          //  parameter  to  use  when  cache  is  not  true          "cacheParam":  "_dc"   }  

Slide 42

Slide 42 text

app.json.cache properties "cache":  {          //  global  toggle  for  local  storage  caching          "enable":  false,          //  string  path  relative  to  base  for  deltas          "deltas":  "deltas"   }  

Slide 43

Slide 43 text

Build Targets   "builds":  {          "classic":  {                  "toolkit":  "classic",                  "theme":  "theme-­‐neptune"          },                      "modern":  {                "toolkit":  "modern",                "theme":  "theme-­‐neptune"          }   }     build profile

Slide 44

Slide 44 text

index.html  

Slide 45

Slide 45 text

index.html Ext.beforeLoad  =  function  (tags)  {          var  profile  =  tags.desktop  ?  'classic'  :  'modern';            //  var  profile  =  tags.phone  ?  'modern'  :  'classic';            if  (location.search.match(/\bclassic\b/))  {                  profile  =  'classic';          }  else  if  (location.search.match(/\bmodern\b/))  {                  profile  =  'modern';          }            Ext.manifest  =  profile;   };   platforms

Slide 46

Slide 46 text

DEMO

Slide 47

Slide 47 text

Pivot Grids

Slide 48

Slide 48 text

What is a Pivot Grid? • A data summarization tool • Enables fast summarization of large data sets • Provides a simple way to perform basic analytics

Slide 49

Slide 49 text

The classic grid… • What is John Doe's total order amount? • What are the total order amounts by country? • How did sales people perform in a specific year?

Slide 50

Slide 50 text

Summarized Data Using Pivot Grid

Slide 51

Slide 51 text

Pivot Grid – Axes & Aggregator Left Axis Top Axis Aggregator

Slide 52

Slide 52 text

Axes Configurations

Slide 53

Slide 53 text

Aggregator Configurations Examples: •  Sum •  Average •  Min •  Max •  Count •  Own?

Slide 54

Slide 54 text

DEMO

Slide 55

Slide 55 text

App Templates

Slide 56

Slide 56 text

Software in a day

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Sencha App Templates •  Like Twitter Bootstrap app templates. •  Quick start with a full application •  Beyond KitchenSink •  Responsive, pre packaged themes

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Questions?

Slide 66

Slide 66 text

Buy Ext JS 5 Now – Be ready for Ext JS 6!

Slide 67

Slide 67 text

Why  would  you  choose  the  modern  toolkit  for  desktop  apps?    >  Performance  reasons.  The  Modern  (Sencha  Touch)  toolkit,  has  a  layout  engine  which  uses  CSS3  i.s.o.  JS.   Will  the  modern  toolkit  /  themes  have  RTL?    >  Not  at  release.  But  eventually.   I  didn’t  see  the  Tizen  theme  listed.  Did  we  drop  it?    >  Not  officially.  It’s  just  not  there  yet.  On  request  we  will  add  it.   Will  the  new  Classic  theme,  extend  from  Neptune  and  have  the  same  vars?    >  Yes.  

Slide 68

Slide 68 text

Thank you! Lee Boonstra @ladysign [email protected]