Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Keynote

 Keynote

The Sencha Platform, keynote by Art Landro, Danny McLaughlin and Lee Boonstra. Learn what's new in Ext JS 6, GXT and Sencha Space.

Lee Boonstra

June 03, 2015
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. View Slide

  2. Danny McLaughlin
    Vice President EMEA, Sencha

    View Slide

  3. Welcome to SenchaDay!
    WIFI:  RodeHoed  
    Pasw:  rodehoed1987  
    Twi7er:  #senchacon  

    View Slide

  4. KEYNOTE

    View Slide

  5. View Slide

  6. Welcome to the Future
    of Application Development

    View Slide

  7. “… software is eating the world”
    – Marc Andreessen  

    View Slide

  8. The Web App World is Fragmented + Complex

    View Slide

  9. And Complexity is Going to Increase
    Wearables
    Medical
    Automotive

    View Slide

  10. Wearables
    Medical
    Automotive

    View Slide

  11. Fragmentation on Steroids
    The Global 2000
    Source:  IDG  Research,  Sep  2014  
    +1,000,000
    8,000,000

    View Slide

  12. The Web App World is Fragmented + Complex

    View Slide

  13. The Sencha Platform

    View Slide

  14. The Rising Pace of Complexity

    View Slide

  15.        
    Enable enterprises to easily and seamlessly:
    design | develop | deploy
    mission critical web applications
    The right experience
    On the right screen
    At the right time
    The Sencha Mission

    View Slide

  16. Design
    Prototype | Theme
     
    Manage
    Secure | Deploy | Analyze
    Develop
    SDK (Ext JS / GXT) | Test | Tools
    Enterprise Workflow Integration
    IDE | Backend Connectivity | Build/CI
    Education & Support
    Implementation &
    Customization Services
    Sencha Web Application Lifecycle Management Platform

    View Slide

  17. Danny McLaughlin &
    Lee Boonstra

    View Slide

  18. What’s new in GXT

    View Slide

  19. Touch Support
    GXT 4
    Neptune Touch Theme
    Executive Dashboard App

    View Slide

  20. GXT 4.0
    •  standard widgets touch-enabled
    (nav tabs, button, slider, etc.)
    •  you can add new
    GestureRecognizers to any
    widget
    •  some chart types enhanced for
    touch also
    •  Test it on your tablet:
    gxt-dashboard.appspot.com

    View Slide

  21. Theme Builder GUI
    •  Stand-alone desktop application
    to modify your GXT themes
    •  Configuration editing for many
    components
    •  Change colors and gradients

    View Slide

  22. View Slide

  23. GXT 4.0 & Theme Builder GUI
    •  GXT 4.0 commercial release
    targeting Q3
    •  End of Q2, beta for support
    customers

    View Slide

  24. What’s new in Ext JS 5

    View Slide

  25. 3D Column Charts (type bar3d)

    View Slide

  26. Chart Events

    View Slide

  27. Example
    1 "plugins:"{"
    2 """"""""ptype:"'chartitemevents',"
    3 """"""""moveEvents:"true"
    4 "},"
    5 "
    6 "series:"[{"
    7 """"""""type:"'line',"
    8 """"""""xField:"'month',"
    9 """"""""yField:"'high',"
    10 """"""""marker:"{"
    11 """"""""""""radius:"4"
    12 """"""""},"
    13 """"""""listeners:"{"
    14 """"""""""""itemclick:"function(chart,"item){"}"
    15 """"""""}"
    16 "}],"

    View Slide

  28. Color Picker Component (xtype: colorfield)

    View Slide

  29. Rating Widget (xtype: rating)

    View Slide

  30. Spreadsheet Selection Model + clipboard plugin

    View Slide

  31. Example
    1 """"selModel":"{"
    2 """"""""type:"'spreadsheet',"
    3 """"""""columnSelect:"true,"
    4 """"""""rowSelect:"true,"
    5 """"""""cellSelect:"true,"
    6 """"""""checkboxSelect:"true,"
    7 """"},"
    8 "
    9 """"plugins:"'clipboard',""
    10 """//Ext.grid.plugin.Clipboard"
    "

    View Slide

  32. Pivot Grid 1. Ext.define('MyApp.view.pivots.Basic',**
    2. $$$requires:*[*
    3. $$$$$$'Ext.util.Format'*
    4. ***],*
    5. 999extend:*'Mz.pivot.Grid',*
    6. 999alias:*'widget.pivotbasic',*
    7. *
    8. ***aggregate:*[{*
    9. *****dataIndex:*'value',*
    10. ***header:*'Sum9of9value',*
    11. ***aggregator:*'sum'*
    12. ***},*{*
    13. ******dataIndex:*'value',*
    14. ******header:*'#9records',*
    15. ******aggregator:*'count',*
    16. ******align:*'right',*
    17. ******renderer:*
    Ext.util.Format.numberRenderer('0')*
    18. ***}],*
    19. ****selType9:*'checkboxmodel',*
    20. ****leftAxis:*[{*
    21. ******dataIndex:**'company',*
    22. ******header:*****'Company',*
    23. ******sortable:***false*
    24. ***},{*
    25. ******dataIndex:**'year',*
    26. ******header:*****'Year',*
    27. ******sortable:***false*
    28. ***}],*
    29. ***topAxis:*[{*
    30. ******width:*120,*
    31. ******dataIndex:*'country*
    32. ***}]*
    33. });*
    *
    *

    View Slide

  33. Accessibility Enhancements
    • ARIA support for screen
    readers (like JAWS)
    • keyboard navigation

    View Slide

  34. Ext JS 5.1.1
    •  We fixed many many bugs!
    •  ARIA support for border layouts
    •  keepRawData config in Reader
    to discard its rawData.
    •  Cell editors support widgets
    •  Lazy instantiation plugin for
    child items

    View Slide

  35. Ext JS 6: Merge of the frameworks

    View Slide

  36. Ext JS 6
    •  Toolkits
    •  Classic (legacy views)
    •  Modern (modern touch views)
    •  Universal Apps
    •  1 code base, classic + modern view
    •  Single URL
    •  Ext loader will serve UI based on
    specified rules

    View Slide

  37. DEMO

    View Slide

  38. http://pages.sencha.com/Ext-JS-6-Beta-1.html
    Early Access Release

    View Slide

  39. Buy Ext JS 5 now, and be ready for Ext JS 6!

    View Slide

  40. Fashion

    View Slide

  41. Application Theming
    •  Faster compilation of Sass
    Stylesheets
    •  Runs on top of JavaScript
    •  No Ruby

    View Slide

  42. DEMO

    View Slide

  43. TOOLS

    View Slide

  44. Sencha Inspector
    •  Connect to any Sencha App
    •  Running in any browser
    •  Inspect the component tree
    •  Understands MVVM
    •  Record & Inspect Events
    •  Live edit themes

    View Slide

  45. DEMO

    View Slide

  46. JetBrains IDE Sencha Integration
    •  Any of these JetBrains Products:
    •  IntelliJ 14.1+
    •  WebStorm 10+
    •  PHPStorm 9+
    •  RubyMine 7.1+

    View Slide

  47. Plugin Features
    •  Code Completion
    •  Code Refactoring
    •  Code Inspecting
    •  Code Generation
    •  Add to the requires
    •  Package Support
    •  SDK Version selection
    •  Spell Checking

    View Slide

  48. Download beta
    •  Choose Plugins
    •  Click: Browse Plugins
    •  Search: “sencha”
    •  Install Plugin

    View Slide

  49. DEMO

    View Slide

  50. View Slide

  51. Sencha Space

    View Slide

  52. Ready for production

    View Slide

  53. Easy deployment of apps
    •  Zip up your application and upload to Sencha Space via Sencha Cmd
    •  Secure data & source code
    •  Offline availability
    •  http://space.sencha.io/docs/developer/application_deployment.html
    sencha  config  -­‐prop  app.version=myapp  
    then  app  publish  

    View Slide

  54. DEMO

    View Slide

  55. Application Insights

    View Slide

  56. Track information
    •  Device Specific information
    •  Event Capture API
    Ext.space.Logger.logEvent({  
         category:  "UserData",  
         action:  JSON.stringify(record.data),  
         label:  "",  
         extra:  "”  
    }).then(function(){  
           console.log("Successfully  logged");  
    },  function(error)  {  
           console.log("Error",error);  
    });  

    View Slide

  57. Try out Sencha Space for free!
    https://manage.space.sencha.com/#register

    View Slide

  58. View Slide

  59. View Slide