SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

548 views

Published on

The SenchaCon 2016 Keynote presentation includes talks from Art Landro, Gautam Agrawal and Mark Brocato from Sencha.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
548
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 2
  • So in that world, who rules?
  • You do! You Rule the World!

    You all CREATE THE MAGIC
    Power & Influence is Increasing

    The software developers wielding web technology skills and tools that turn ideas into amazing applications that drive operations and businesses around the planet, rule the world.

  • 5
  • 93 PERCENT!!!

    93% of the respondents said that web technologies are critical to their strategy for desktop and mobile.

    We were expecting a high number, but this is amazing!

    Web Technology is Winning!

    Look at some more interesting data –

    Since in Vegas, let’s follow the money!!!
  • 7
  • 8
  • Mark Twain has been credited with this famous quote, although there is a lot of conflicting stories on the exact wording.

    But let’s apply the quote
    Much more recent history…
    5-10 Years

  • OK. Maybe it wasn’t Clippy –

    but it’s close….

  • It’s the Desktop….

    Paper

    Look at some numbers
  • 12
  • 13
  • Over NINE BILLION!!!! They are managing NINE BILLION parts in their Global R&D, Production and Maintenance systems.

    Again – I am always impressed with the amount of data you need to work with every day…

    As this trend continues – at some point in our lives we will be saying more data was created in the last 2 MONTHS (let alone 2 years) than in all human history combined – ---
    As this trend continues there will be increasing pressure on you to develop web applications that can visualize the data.



  • 15
  • 16
  • 17
  • So first, lets level set as a group on what’s not changing in our world.
  • 19
  • So what are we working on in the coming weeks and months to help you overcome the challenges you face?

    – both the ones that are changing constantly and the ones we just went through.
  • 21
  • 22
  • 23
  • Modern JavaScript and open tooling means we will help you improve development productivity and provide you with greater flexibility in tool selection both from Sencha and the JS Community at large.

    Gautam and Mark will give you a preview of how Sencha plans to take advantages of the latest advancements in JavaScript and open web tooling in their upcoming demo.
  • 25
  • We’re building our bridges to React and Ang

    I want to be really clear here - we absolutely want you to build your entire application from the ground up with Ext JS or GXT.

    But we know that for some of you
    pockets in your organization
    built applications React and Angular2
    advantage powerful Ext JS components
    data grid and the pivot grid.

    By building these bridges
    help you transform all web applications
    powerful, data-centric, cross-platform applications.

    We will be showing you the technology
  • 27
  • Everyone here knows how challenging it is to build truly awesome apps for millions of users that run
    the world’s businesses
    Governments
    non-profits

    We are here to ensure your success. As a matter of fact, we consider it our mission.

    Our Mission is to provide everything you need, from products to support to services, to rapidly build data intensive cross platform enterprise web applications so you can deliver the right experience - right time -right screen.
  • I’ve been doing a lot of talking about what we’re building, and how great and powerful it is going to be –

    but who is excited about seeing it?

    I would now like to introduce Gautam Agrawal, Senior Director of Products and Mark Brocato, Senior Manager of Engineering.

    Gentlemen….
  • Thank Art for the intro.

    My third SenchaCon as a Senchan, but the first time on Keynote stage. I’m really excited to be here.

    It can’t get better than this… right Mark?

    Alright… lets welcoming everyone. Thank you, all the Sencha developers, simply rock. Together we have built the world’s most advanced and comprehensive JavaScript stack.. or what I like to refer as the FullStack JavaScript platform. So thank you for being a Sencha developer and a part of our community.
  • We have lots of great stuff to share with you today, and some really cool demos, but I want to take a few minutes to recap what we’ve accomplished together since the last SenchaCon.
  • With the merger of Ext JS and Sencha Touch, we have arrived in the world of Universal Apps.

    With Ext JS 6, you are now creating apps that deliver tailored user experiences for desktop, tablets, and smartphones while sharing and reusing the maximum amount of code.

    So yes… the web is winning, because you are delivering universal app experiences at a fraction of the cost of building separately for each platform.
  • I remember the days of Ext JS 4 and 5 when the only tool we had was Sencha Cmd, which is a big help for tasks such as scaffolding, build creation, etc. but… the number of times I would have to go to the API docs to look up methods, properties, configs... was just staggering.

    With the release of IDE plugins, we have come a long way in a very short amount of time. We now have plugins for all major IDEs. All versions of JetBrains, Eclipse, and Visual Studio are supported.

    These plugins provide an amazing amount of functionality including code completion, navigation, refactoring, context-based documentation look-ups. It’s easily increases our productivity by of more than 10x.
  • So today.. we’re giving you an early access to yet another plugin for the Microsoft Visual Studio Code.

    VS Code is the fastest growing source code editor with over 2 million installs within a year of its release. I have to say… it feels like with VS Code, Microsoft has delivered something that developers are really like.

    The VS Code plugin will be available for all tiers of Ext JS packages. Std, Pro, and Premium.

    Mark: show us what VS code plugin looks like and what Sencha developers can now do within VS Code.

    Turn over to Mark  2 - 3 min VS Code Demo Turn over to Gautam 

    Awesome …. that was cool.

    To learn more about the VS Code plugin… check out Ryan Salva and Sandeep Adwankar’s session on app development with Visual Studio. Ryan is a Program Manager at Microsoft, and Sandeep is our Product Manager for Sencha Tools.
  • As Art said, we are drowning in data, and businesses are demanding applications that can do more and more analytics and visualizations, rather than just presenting raw data.

    And so we delivered some components for analytics and data visualization. Pivot Grid, Data Exporter, and D3 Adapter.

    And now what is really cool is we have now integrated the Pivot Grid and D3 Adapter as well.

    Mark: Can you walk us through an example where we have integrated our Pivot Grid with D3?

    Turn over to Mark  Pivot Grid and D3 demo from Mark’s machine Turn over to Gautam 

    Wow… that’s just amazing. I am sure we don’t need that super expensive reporting and business intelligence solutions anymore.

    There are a number of sessions on these topics, and I would encourage you to not miss Vitaly’s session n Adding Magic to your Ext JS apps with D3 visualizations.
  • I am super excited to share that not only we are providing you these premium components, but we have also brought them into Sencha Architect with the early access release of version 4.1 that we will be providing you today. And this is because of the sheer number of requests we received from our Architect users.
  • Let’s look at Theming. We’ve made big enhancements to our theming capabilities. From the Fashion, our theme compiler, to the all new Material theme that supports animations, shadows, depth, and much more… and recently the no code visual theming tool, Sencha Themer.

    I have to say.. this is an area that far.. far exceeded my expectations. Marc and his team build a fantastic product and the feedback from all of you in our community has been just mind blowing.

    As you heard from Art, Sencha Themer will now be available in the Ext JS Pro package and I’m really excited about that. In fact if you have a current Ext JS Pro subscription, and you log into our support portal after the keynote, you should already see that Themer is available to download.
  • But wait… that’s not all on theming. We’re also giving you an early access release of Themer 1.1 today. Themer 1.1 enables your directly theme your apps.

    Mark: This is getting better and better. Let’s show everyone how it works. It’s simpler than ever.

    Turn over to Mark  3-4 min Themer 1.1 demo

    Question to Mark: The themer UI looks suspiciously like Ext JS, but it’s something you download and install on the desktop. How is that possible?

    Mark mentions about Ext-Electron package, and that it will be made available in GitHub today. And also mention that we even have a full session on Building Native Desktop Apps with Ext JS and Electron by Don Griffin.

    For those of you who are doing lot of work in the theming area, don’t miss out on Andrew’s session on Theming Made Easy. The other session you shouldn’t miss on theming is Theming the Modern Toolkit by Phil.

    Turn over to Gautam 
  • While we are on the theming topic, I am super excited to announce a new Theming contest, with a prize of $2500. All you need to do is … show us your creativity. The tools are already there, so I it won’t be hard to implement any design you have in mind. We’d love to see what kind of UI experiences you come up with.

    Details of this contest will be posted on our website right after the keynote. You can even come by the Sencha Zone and look for me, Mark or any of the people on the theming team to get your questions answered and get a jump start on your competition!

    Should be fun. I wish I could participate in the Theming Contest 
  • How many of you have played with or know about Sencha Test?

    Early this year, we rolled out Sencha Test, our solution for Unit and Functional Test automation that integrates with your CI systems and allows you to execute your test on local browser pools or cloud based browser farms. Since then, a number of you have engaged your Test Automation teams to implement Sencha Test in your environments. You can write or record tests using Sencha Test for your Sencha apps, and run them automatically across multiple browsers.

    One of the common feedback we have received since the release of Sencha Test is even though most of you are building single page apps, a lot of time security and authentication requirements from the enterprise hide your single page apps behind a login or authentication page, making them multi-page apps.

    I am very happy to announce that today we are giving you an early access version of Sencha Test 2.0, which has Selenium WebDriver integrated, and allows you to test multi-page applications as well.

    There is a lot of great sessions on Sencha Test but don’t miss out on Craig Comstock’s session on how to write tests with Sencha Test Futures API and WebDriver integration.
  • How many of you are already building Progressive Web Apps?

    It’s amazing to learn what the web can do today. From access to device hardware, to push notifications, and using apps offline. There is almost nothing out of the reach for the web now. Progressive Web Apps allow you to create experiences that combine the best of the web and the best of apps.

    Today… we are enabling you to create Progressive Web Apps. Mark: show us how we’re enabling the creation of Progressive Web Apps for Sencha Developers.

    Turn over to Mark  7 - 8 min PWA Demo Turn over to Gautam 

    Amazing… I guess there is hardly any benefit to building native apps now 
  • How many of you have written some React or Angular Code?

    As Art said, the world of JavaScript is pretty heterogeneous, and while you may be using React, and Angular 2, or may be even something else… one of the things that JavaScript developers always look out for.. are the powerful components that that Sencha provides..

    I can’t count how many times I get the question that Can I use your Grid in my React app, or Can I use your Pivot Grid in my Angular app.

    So today, we’re providing you a bridge to use Sencha components in your React and Angular 2 applications.

    That sounds really cool… Mark: I always thought that’s impossible? Walk us through this.

    Turn over to Mark  7 - 8 min React Bridge demo, Mention your own and Marc Gusmano’s Session on Angular 2 Bridge Turn over to Gautam 

    Really amazing… you’ve really made it possible, and the simplicity of how you can use Sencha components in React apps is astonishing.
  • Wait… there’s more coming. The world of JavaScript is going through a big transformation. With ES6 standards in place, JavaScript is poised a major language like Java. Its already 2nd on the popularity charts. So Mark… tell us about some of the language changes in JavaScript, and how are we’re planning on handling them.

    Turn over to Mark  5 - 6 min Ext JS 7 & Tools preview Turn over to Gautam 

    Great! That sound really awesome.
  • When ECMAScript 6 arrived in 2015 it brought a ton of new language features.

    Way too many to cover in even a full session.

    And so I want concentrate on two language features that I think are of particular interest.

    Those are classes and module imports.
  • * optionally
  • * optionally
  • Not supported
  • @extjs/modern

    Export default main
  • Nuclear Pizza Machine
    Neatly prepared moustache
    Narcoleptic Pasta Manufacturer
    Nutmeg Pludering Muse
  • Nuclear Pizza Machine
    Neatly prepared moustache
    Narcoleptic Pasta Manufacturer
    Nutmeg Pludering Muse
  • Sugery syntax aside, what’s in it for you?

    Well there’s this thing called the nuclear pizza machine. You may have heard it referred to as npm. it has over 34,000 packages that solve almost every problem imaginable. We want to make it easy to take advantage of those. And this bit of syntax is the key to unlocking that ecosystem.
  • And so we’re developing a new node based toolchain as the successor to sencha cmd as well as a webpack plugin that will allow you to grab the functionality you need from npm and deliver to the browser as a single minified, optimized bundle.

    MODERNIZING the Ext Class
    OPEN
  • And so we’re developing a new node based toolchain as the successor to sencha cmd as well as a webpack plugin that will allow you to grab the functionality you need from npm and deliver to the browser as a single minified, optimized bundle.

    MODERNIZING the Ext Class
    OPEN
  • And so we’re developing a new node based toolchain as the successor to sencha cmd as well as a webpack plugin that will allow you to grab the functionality you need from npm and deliver to the browser as a single minified, optimized bundle.

    MODERNIZING the Ext Class
    OPEN

  • I want to thank you all for your enthusiasm and Mark for his marathon of demos.

    If you want to speak to any of us, we would be glad to answer your questions. Find us in the Community Pavilion and breakout sessions.

    Enjoy SenchaCon.

    At this point, I would like to turn things back over to Art.

    Thanks everyone.
  • SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato

    1. 1. SenchaCon 2016 CEO, Art Landro
    2. 2. Welcome!
    3. 3. Who Rules the World?
    4. 4. Is Web App Dev Winning in the Enterprise? “State of the Modern Web” Research Report
    5. 5. This Year 75%+ Next Year 76%+
    6. 6. Why is web technology an important part of your desktop or mobile application strategy?
    7. 7. Reports of my death have been greatly exaggerated - Mark Twain
    8. 8. Reports of my death have been greatly exaggerated
    9. 9. Reports of my death have been greatly exaggerated - The Desktop
    10. 10. Importance of desktop as an application platform in the next 12 months
    11. 11. More Data Created In Last Two Years Than All Human History COMBINED Beginning of recorded History – 2014 2014 – Present
    12. 12. 9,000,000,000+
    13. 13. How is the need to visualize and analyze complex datasets within your web applications changing?
    14. 14. Data Visualization and Analytics
    15. 15. We Delivered
    16. 16. What’s Not Changing
    17. 17. Time Resources Expectations
    18. 18. Winning With the Modern Web What are we working on?
    19. 19. Joint Partner Solutions IBMi Applications Ext Speeder Oracle Forms
    20. 20. GXT
    21. 21. Productivity Tools
    22. 22. Modern JavaScript Open Tooling
    23. 23. Heterogeneous Building Bridges
    24. 24. Heterogeneous Building Bridges
    25. 25. Testing Earlier
    26. 26. To provide YOU with everything you need to build data intensive cross-platform web applications Our Mission
    27. 27. Demo
    28. 28. Keynote Demo Gautam Agrawal & Mark Brocato
    29. 29. A little recap…
    30. 30. Universal App Experience
    31. 31. Plugins for all Major IDEs
    32. 32. New Visual Studio Code Plugin
    33. 33. Pivot Grid Data Exporter New Components for Analytics & Visualization D3 Adapter
    34. 34. Sencha Architect 4.1
    35. 35. Material Theme & Visual Theming
    36. 36. Sencha Themer 1.1
    37. 37. Sencha Theming Contest
    38. 38. WebDriver Integration + Multi-Page Apps Sencha Test 2.0
    39. 39. Best of Web + Best of Apps Progressive Web Apps
    40. 40. Bridges to React & Angular
    41. 41. Embracing Modern JavaScript Wait… there is more coming in 2017
    42. 42. ES6 Features • Classes • Imports • Statics • Block Scoping • Arrow Functions • Native Promises • Enhanced Object Properties • Destructuring • Default Arguments • Block Scoping • Decorators • Proxies • Generators • Iterators • For…of • Date/Time formatting • Number formatting • Map • Set • Weak-link Data Structures • super • Getter/Setter • Template Strings • Rest Parameter • Spread Operator • Typed Arrays
    43. 43. Together at Last! Cmd 6.5 EA
    44. 44. Sencha Cmd 6.5
    45. 45. ES6 Goodies! Ext.define('HelloWorld', { extend: 'Ext.Component', config: { names: [] }, say(message='Hello') { const { names } = this; this.setHtml( names.map(name => `${this.message} ${name}!`) ); } });
    46. 46. ES6 Goodies! Ext.define('HelloWorld', { extend: 'Ext.Component', config: { names: [] }, say(message='Hello') { const { names } = this; this.setHtml( names.map(name => `${this.message} ${name}!`) ); } });
    47. 47. ES6 Goodies! Ext.define('HelloWorld', { extend: 'Ext.Component', config: { names: [] }, say(message='Hello') { const { names } = this; this.setHtml( names.map(name => `${this.message} ${name}!`) ); } });
    48. 48. ES6 Goodies! Ext.define('HelloWorld', { extend: 'Ext.Component', config: { names: [] }, say(message='Hello') { const { names } = this; this.setHtml( names.map(name => `${this.message} ${name}!`) ); } });
    49. 49. ES6 Goodies! Ext.define('HelloWorld', { extend: 'Ext.Component', config: { names: [] }, say(message='Hello') { const { names } = this; this.setHtml( names.map(name => `${this.message} ${name}!`) ); } });
    50. 50. class HelloWorld { say(message='Hello', names=['World']) { Ext.Msg.alert( names.map(name => `Hello ${name}!`) ); } } ES6 in Cmd 6.5
    51. 51. class HelloWorld extends Ext.Component { say(message='Hello', names=['World']) { Ext.Msg.alert( names.map(name => `Hello ${name}!`) ); } } ES6 in Cmd 6.5
    52. 52. Hello World MVC Ext.define('App.view.main.Main', { extend: 'Ext.Container', requires: [ 'App.view.main.MainController', 'Ext.Button' ], controller: 'main', items: [{ xtype: 'button', handler: 'onButtonClick' }] }); Main.js Ext.define('App.view.main.MainController', { extend: 'Ext.app.ViewController', requires: [ 'Ext.Msg' ], alias: 'controller.main', onButtonClick: function() { Ext.Msg.alert('Alert', 'Hello World!'); } }); MainController.js
    53. 53. The Main View with ES6 export default class Main { }
    54. 54. The Main View with ES6 import { container } from '@extjs/modern'; export default class Main { }
    55. 55. The Main View with ES6 import { container } from '@extjs/modern'; export default class Main extends container { }
    56. 56. The Main View with ES6 import { container, button } from '@extjs/modern'; export default class Main extends container { }
    57. 57. The Main View with ES6 import { container, button } from '@extjs/modern'; export default class Main extends container { items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }
    58. 58. The Main View with ES6 import { container, button } from '@extjs/modern'; export default class Main extends container { items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }
    59. 59. The Main View with ES6 import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; @define({ items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { }
    60. 60. The Main View with ES6 import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { }
    61. 61. The Main View with ES6 import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, viewModel: { ... }, items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { }
    62. 62. The Main View with ES6 import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, viewModel: { ... }, mixins: [ ... ], items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { }
    63. 63. The Main View with ES6 import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, viewModel: { ... }, mixins: [ ... ], items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { doStuff() { // amazing code here } }
    64. 64. The Main View with ES6 import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, viewModel: { ... }, mixins: [ ... ], items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { // intentionally left blank }
    65. 65. The MainController export default class MainController { }
    66. 66. The MainController import { controller } from '@extjs/core/controller'; export default class MainController { }
    67. 67. The MainController import { controller } from '@extjs/core/controller'; export default class MainController extends controller { }
    68. 68. The MainController import { controller } from '@extjs/core/controller'; export default class MainController extends controller { } import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { } Main.js
    69. 69. The MainController import { controller } from '@extjs/core/controller'; export default class MainController extends controller { onButtonClick() { } } import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { } Main.js
    70. 70. The MainController import { controller } from '@extjs/core/controller'; import { Msg } from '@extjs/modern'; export default class MainController extends controller { onButtonClick() { } } import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { } Main.js
    71. 71. The MainController import { controller } from '@extjs/core/controller'; import { Msg } from '@extjs/modern'; export default class MainController extends controller { onButtonClick() { Msg.alert('Alert', 'Hello World!'); } } import { define } from '@extjs/kernel'; import { container, button } from '@extjs/modern'; import MainController from './MainController'; @define({ controller: MainController, items: [{ xtype: button, text: 'Click Me', handler: 'onButtonClick' }] }) export default class Main extends container { } Main.js
    72. 72. Tooling
    73. 73. Nuclear Pizza Machine 360,000+ packages
    74. 74. Nuclear Pizza Machine 360,000+ packages import { stuff } from 'package';
    75. 75. New Open Tool Chain ??? Scanner Parser Indexer Optimizer
    76. 76. More on This… The Modern Toolchain Ross Gerbasi
    77. 77. Later on Today… The Modern Toolchain Ross Gerbasi Modernizing the Ext JS Class System Don Griffin
    78. 78. Enjoy All of the EA Releases

    ×