Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Building ext js apps with ES2015 using sencha visual studio code plugin
Similaire à Building ext js apps with ES2015 using sencha visual studio code plugin (20)
Plus de Sandeep Adwankar
Plus de Sandeep Adwankar (20)
Dernier
Dernier (20)
Building ext js apps with ES2015 using sencha visual studio code plugin
- 1. © 2016 Sencha Inc Build Modern WebApps with ECMAScript 2015 and Sencha Visual Studio Code Plugin Sandeep Adwankar Sr. Product Manager
- 2. © 2016 Sencha Inc More developers use JavaScript (ECMAScript) than any other language 0% 10% 20% 30% 40% 50% 60% JavaScript SQL Java C# PHP Python C++ C Node JS Angular JS Ruby Objective-C Stack Overflow Developer Survey, March 2016
- 3. © 2016 Sencha Inc ECMAScript Evolution
- 4. © 2016 Sencha Inc ES5 Compatibility
- 5. © 2016 Sencha Inc ES2015 features • Block scoped constructs • Default parameters • Template Literals • Arrow functions • For of loop • Promises • Classes • Modules • New Methods • …
- 6. © 2016 Sencha Inc ES2015 Compatibility Windows 7http://kangax.github.io/compat-table/es6/
- 7. © 2016 Sencha Inc Building ES2015 apps Build Tools Cmd 6.5 Dev Environment Sencha VS Code Plugin Build JavaScript Framework – Ext JS 6.0 Create
- 8. © 2016 Sencha Inc Building ES2015 apps with Cmd 6.5 Command Line Tools Cmd 6.5 Dev Environment Sencha VS Code Plugin Build JavaScript Framework Ext JS 6.0 Create
- 9. © 2016 Sencha Inc Sencha Cmd 6.5 • Support for ES 6 - Use new language features (arrow functions, classes, default params, …) - Works with ExtJS today - Limitations (addressed in Ext JS Next): • Can’t extend ExtJS components via native classes • No support for import - Implemented via Closure Compiler • Support for Progressive Web Apps via automatic service worker generation 9
- 10. © 2016 Sencha Inc ES2015 support in Sencha Cmd 6.5 • This will require tooling. Our frameworks have to deal with legacy browsers. • Sencha will need a transpiler to compile back to old fashioned ES5 code. • Our goal is to let your ES2015 code run together with the Sencha framework code. • Cmd is Java based! With Sencha Cmd 6.5, code gets transpiled! Under the hood, we will use Google Closure Compiler. (We replaced Rhino)
- 11. © 2016 Sencha Inc Building ES2015 apps with Sencha VS Code Plugin Command Line Tools Dev Environment Sencha VSCode Plugin Build JavaScript Framework Create
- 12. © 2016 Sencha Inc Visual Studio Code Plugin 1.0 Sencha plugin for the fastest growing source editor – Microsoft’s VS Code • Code generation • Code completion • Code navigation • Inspection & refactoring • Documentation lookup 12
- 13. © 2016 Sencha Inc Sencha Visual Studio Code Plugin • Intellisense • Code Generation • Code Navigation • Command Line Tools • Documentation Lookup • Debugging
- 14. © 2016 Sencha Inc TernJS Eclipse Visual Studio IDE VS Code Ext JS Sencha Cmd Sencha Visual Studio Code Plugin Architecture Provides language services
- 15. © 2016 Sencha Inc IntelliSense – Code Completion • Properties • Keys in Configs • xtypes • Events
- 16. © 2016 Sencha Inc Code Navigation Supports code navigation for • class name • xtypes and other type aliases • methods and properties • config keys • events
- 17. © 2016 Sencha Inc Documentation Lookup Supports documentation lookup (F1) for Ext JS • class name • xtypes and other type aliases • methods and properties • config keys • events
- 18. © 2016 Sencha Inc Code Generation - Create New Ext JS App
- 19. © 2016 Sencha Inc Integration with Sencha Cmd • Watch app source code for changes • Rebuild outputs • Web Server is started and hosts app • See compilation errors as they happen
- 20. © 2016 Sencha Inc Debugging Ext JS Apps • Microsoft’s “Debugger for Chrome” extension • Launch Chrome browser with remote debugging enabled • Attach extension to the browser • Start debugging F5
- 21. © 2016 Sencha Inc Cmd 6.5 and VS Code Demo 21
- 22. © 2016 Sencha Inc Building ECMAScript 2015 apps on Mobile Command Line Tools Cmd 6.5 Dev Environment Sencha VS Code Plugin Build JavaScript Framework Ext JS 6.0 Create Cordova • HTML, CSS, JS • Resources • Configuration • Platform code • Plugin code
- 23. © 2016 Sencha Inc What is Apache Cordova? • Open-source framework • Hosted webview • Single, shared codebase deployed to all targets • Plugins provide a common JS API to access device capabilities • About 6% of apps in stores (13% in enterprise) Native Wrapper <webview> Your JavaScript App Cordova Plugin JS API
- 24. © 2016 Sencha Inc Sencha Cmd for Cordova Apps 24 • Build Profiles for hybrid apps • Preparing Cordova platform builds • Build, Emulate and run app on device
- 25. © 2016 Sencha Inc ES2015 and Cordova Demo 25
- 26. © 2016 Sencha Inc Pushing ECMAScript 2015 Code to Mobile Command Line Tools Cmd 6.5 Dev Environment Sencha VS Code Plugin Build JavaScript Framework Ext JS 6.0 Create Cordova • HTML, CSS, JS • Resources • Configuration • Platform code • Plugin code JavaScript Code Push • HTML, CSS, JS
- 27. NEW CodePush uploads your JavaScript package to the cloud (Azure) After building your Sencha app, run: $ cd cordova $ code-push release-cordova [app] [platform] Phone asks, “Hey, Azure! Do you have an update for me?” Azure says, “Yup! Here’s a ZIP with all the web assets.” Code-Push extracts ZIP and replaces the contents of /www Code Push Workflow
- 28. App Store Policy
- 29. © 2016 Sencha Inc Code Push ES2015 Demo 29
- 30. © 2016 Sencha Inc Q & A 30
- 31. © 2016 Sencha Inc Building Ext JS Apps with ECMAScript 2015 Using Sencha Visual Studio Code Plugin Sandeep Adwankar Sr. Product Manager
- 32. © 2016 Sencha Inc Code Generation - Template Creation • Classes • Views • View Models • View Controllers • Models • Controllers • Stores
- 33. © 2016 Sencha Inc Not all ES2015 features are new to Ext devs Some of these new ES2015 features already exist for years in Ext JS, and they are more advanced. ES2015 Tagged Template Templates Ext Ext.XTemplate Object.is() Ext.Object.equals() Object.assign() Ext.apply() Promises Ext.Promise Classes Ext.Base Modules Ext.Loader
Notes de l'éditeur
- This shows how code completion will work for Properties, xtypes, keys in configs as well as events. For instance, if you were to start typing “xtype: ” and on control space, you would be presented with a list of all available xtypes. As you continue typing, the suggestion list will filter until you arrive at the xtype you seek. At which point, you can simply select the item.
- This functionality enables users to quickly move throughout their application without the need for searching a tree or directory structure. With the Sencha Visual Studio Plugin installed, you can right-click (or use the standard F12 shortcut key) on any of the following and select “Go to Definition” to view an item’s definition.
- This functionality enables users to quickly move throughout their application without the need for searching a tree or directory structure. With the Sencha Visual Studio Plugin installed, you can right-click (or use the standard F12 shortcut key) on any of the following and select “Go to Definition” to view an item’s definition.
- You can create a basic project type containing an example of a Web API project configured to use Ext JS through the ‘New Project’ action. Upon selecting it, the App Generation wizard will appear as you can see. It will be populated with Sencha Cmd location, ExtJS SDK location, theme and toolkit. You can change it as well. This will generate example application. This is an ASP.NET application utilizing Web API (for Web Services, for example), with an Ext JS application baked in the Sencha directory. You can click the ‘Run’ button (or press Control + F5) to launch the system web browser with the application hosted by IISExpress.
- Once an Application has been generated, you can easily start Sencha App Watch to begin development with the Sencha’s Cmd web server based on Jetty web server. To start/stop Sencha Cmd’s ‘app watch’ command at any time, simply right click on the root Ext JS application folder to display the context menu and select ‘Run Sencha App Watch’. One Cmd has started, you will see Sencha Cmd’s output in the console view and your application will be available at location provided Stop the process at any time by right clicking the Ext JS application root again and selecting ‘Stop Sencha App Watch’.
- Once an Application has been generated, you can easily start Sencha App Watch to begin development with the Sencha’s Cmd web server based on Jetty web server. To start/stop Sencha Cmd’s ‘app watch’ command at any time, simply right click on the root Ext JS application folder to display the context menu and select ‘Run Sencha App Watch’. One Cmd has started, you will see Sencha Cmd’s output in the console view and your application will be available at location provided Stop the process at any time by right clicking the Ext JS application root again and selecting ‘Stop Sencha App Watch’.
- Originally made by Nitobi and purchased by Adobe in 2011.
- Building great looking data-intensive web applications has never been easier with Ext JS 6.2, Themer 1.0, and Architect 4.0. Join us for our upcoming webinar where you’ll learn about: - New Calendar component that helps users easily view or manage schedules, and events - D3 Adapter, which enables you to use D3.js data visualizations in your Ext JS apps - New Material Design based theme for the Ext JS Modern Toolkit - Powerful new Grid and Pivot Grid Enhancements including the new data exporter - Sencha Themer which lets you create great-looking customized themes for your apps without writing a single line of code - Architect 4.0 which enables you to visually develop modern apps on both Ext JS Modern and Classic toolkits
- To add a new class (or a specific type of class: Model, Store, View, Controller, etc.) simply “right+click” on the location you want the new class to be created and select Add > New Item… > Sencha > Class (or specific type) Enter in the name of your class and click continue. Here is an example of the output of a Model generated