Sencha Innovations in Web Application Tooling - Lee Boonstra & Gautam Agrawal

Sencha presentation by Lee Boonstra & Gautam Agrawal for the European Roadshows 2016

Transcript

1. Innovations in Web Application Tooling Gautam Agrawal Lee Boonstra @ladysign
2. A little recap…
3. Universal App Experience
4. Plugins for all Major IDEs
5. Introducing: Sencha plugin for Visual Studio Code
6. Visual Studio Code – Sencha plugin • Visual Studio Code - Lightweight Editor for Windows 7+, Mac OSX, Linux - It’s free, open source. (based on Electron) • Visual Studio Code – plugin for Ext JS developers • Will be available for all Sencha tiers!
7. Plugin Features • Cmd integration - Build & Watch • Code Generation - Apps - Classes, Views, ViewControllers, ViewModels, - Models, Stores, Controllers • Code completion • Code Navigation • Docs Lookup
8. Install VSIX extension • Download EA version: http://pages.sencha.com/ext-js-tools- ea-2016.html • Install VSIX file within Visual Studio Code 1.6+
9. DEMO
10. Sencha Fiddle 2.0
11. The Old Sencha Fiddle (July 2013) • Savable/Forkable • Searchable • Support Latest Frameworks • ~ 55,000 fiddles - ~7,000 distinct users - > 130,000 files - > 17,000 data files •
12. Fiddle 1 Issues • The way it runs code with multiple files - Concatenated into a single <script> - Requiring classes may break the example • Data requests are hidden - All client side, no network requests • Not so great for full app examples • Funky UI 12
13. The new Sencha Fiddle Fiddle 2 mimics local development. Code runs the way it should.
14. Sencha Fiddle 2.0 • Files load individually and remotely! - Much more like local development • Data requests are real network requests! - Inspectable in browser dev tools • Ext JS packages! * • Sencha Inspector integration • Better UI • * being populated •
15. Sencha Architect 4.1
16. Sencha Architect 4.1 release • Contains many bug fixes • Run multiple instances of Architect on your computer • EA Available: http://pages.sencha.com/ext-js-tools-ea-2016.html
17. Integration with Sencha Themer • In Themer Export your Theme as zip • Import the theme package: - Resources > Sencha Theme Resource
18. Manage Ext JS frameworks • Sencha Architect now has option to manage frameworks where you can choose to install or remove framework or Sencha Cmd versions. • You can find the Manage Frameworks option in File tab in Preferences menu.
19. Modern UI Builder • Similar to classic apps, there is now support for UI builder in Modern apps. • Auto-generate grid view columns, store, model, editors, controller actions and mock data.
20. Modern Row Expander
21. Modern Tree Grid
22. Premium Components • Architect 4.1 includes the access to all premium components • You will need the premium license to use the components • With the license you receive the Addons.zip, you will need to extract the packages into the [MyApp]/ext/packages folder and build.
23. DEMO
24. Themer 1.1
25. Sencha Themer 1.1 • Themer will be now part of Pro Tier (instead of Premium) • Modern toolkit support • Integration with Sencha Architect • Export theme to application
26. DEMO
27. New Theming Contest • Show off your creativity and enter to win a great prize. Use Sencha Themer 1.1 Early Access to give our contest app a great new look. • Create a theme for a Sencha App • Top prize winner will receive $2500! https://www.sencha.com/sencha-theming-contest-2016/
28. Fashion
29. Fashion will be open-source! • Fashion, Sencha’s JavaScript theme compiler, to compile Sass Syntax to CSS, super fast. • You can extend Fashion, and write your own JavaScript Theme functions.
30. Sencha Cmd 6.5
31. A Cmd workspace can describe multiple frameworks • Starting with Sencha Cmd 6.1, the "workspace.json file" can describe multiple frameworks. frameworks": { "ext62": "ext", "ext602": "ext-6.0.2" }
32. ES2015 features • Block scoped constructs • Default parameters • Template Literals • Arrow functions • For of loop • Promises • Classes • Modules • New Methods • …
33. About Compatibility You can find an overview of compatibility, in one of these ECMAScript 2015 compatibility tables:http://kangax.github.io/compat-table/es6/ ES2015 Implementations: • V8 (Chrome, Node.js, Opera) • JavaScript Core (Webkit, Safari) • Chakra (MS Edge) • SpiderMonkey (Firefox) • Mobile (iOS 9+, Android 4.4+)
34. There’s 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)
35. Be aware of the transpiler! • If you need to use it, you owe yourself to check the output and end result • Transpilers generate code which is supported by the current browsers. It might not be the code what you would expected.
36. Progressive Web Apps (PWA) support “A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.“
37. Specs of a PWA • Can run on any type of device, OS or platform • Have rich, (native) app-like components / UIs • Have fast performance • Are secure, they run over https • Can load instantly • Can run in offline mode or with a limited network connection • Can be added to the homescreen (and have an icon and a splash screen)
38. Service Worker • Replacement for AppCache • JavaScript based • For offline apps / or bad network connection apps - Load files from browser cache - Save files in browser cache
39. Service Worker in Sencha • Sencha Cmd 6.5 generates the service worker for you. - Writes the caching mechanism - Lists all your assets • Requires Node JS 6+ to be installed. • Setup in app.json http://docs.sencha.com/cmd/guides/progressive_web_apps.html
40. Manifest • JSON manifest that contains paths to icons / splash screens • Add to homescreen • Splash screens / icons Will by out of the box generated by Sencha Cmd 6.5!
41. DEMO
42. New build tool
43. Sencha Cmd is Java based, and makes use of Apache Ant It’s a task runner, which allows you to: • Generation of code and applications • Built-in server (Jetty server) • File watcher • Load assets (Microloader) • Compilation of Sass Themes (Fashion) • Bundling files • Compress, Optimize and Transpile files (Google Closure Compiler) • Support for Cordova, Electron, PWA’s etc… • Upgrade between versions
44. New build tool, based on NodeJS “NodeJSis a Javascriptruntime built on Chrome’s V8 JavaScript engine”
45. Node JS has 2 famous package managers Yarn is faster & more secure but also new and untested NPM is slower but has years of usage and testing
46. Open toolchain
47. New build tool – We are looking into these technologies: • Package managers for fetching all dependencies - NPM & YARN • Bundling your modules to use in a browser - Webpack 2 • Loading assets - Webpack 2 • Built-in server and file watcher - Webpack server. • Transpiling ES2015 code to browser ready ES5 code - Babel • Node modules organisation - Mondorepo (by Sencha) • Compilation of Sass themes - Fashion • Generation of code - Custom template solution vs. Yeoman • Support for: - Electron, Cordova, Service Workers
48. Mondorepo for organization and team collaboration https://www.npmjs.com/package/mondorepo
49. Webpack 2.0 Integration for bundling modules • Split the dependency tree into chunks loaded on demand • Keep initial loading time low • Every static asset should be able to be a module • Ability to integrate 3rd-party libraries as modules • Ability to customize nearly every part of the module bundler • Suited for big projects
50. module.exports = { entry: './app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }, resolve: { alias: { 'somePackage': '/path/to/my/code’ } }, module: { loaders: [{ test: /\.js$/, loader: 'babel', query: { plugins: [ 'babel-plugin-transform-es2015-modules-commonjs' ] } }] } }; Webpack Configuration • Entry point and output initialization • Alias resolution allows code to be located in locations what work for developers • Module Loaders allow for code transformation before bundling Entry & Build Basic config for entry point and location of build files entry: './app.js', output: { path: __dirname + '/build', filename: 'bundle.js' }, Resolver & Alias Powerful aliasing features allow you to keep code where you want. resolve: { alias: { 'somePackage': '/path/to/my/code’ } }, Loaders Transformations applied to a file in your application. This can be used to do anything from transpile to compress images loaders: [{ test: /\.js$/, loader: 'babel', query: { plugins: [ 'babel-plugin-transform-es2015-modules-commonjs' ] } }]
51. Babel: The JavaScript transpiler • Support for ES2015 and beyond • Plugin based allows control of what code is transpiled • Polyfill for new functionality not supported in your target target browser • Source maps for debugging compiled code in the browser
52. ES2015 support in the next Ext JS version • Next Ext JS version will make changes in the class system Ext.Base • Write ES2015 “class” syntax to extend from Sencha classes
53. DEMO
54. Mondorepo Structure { "name": "my-mondo-repo", "version": "0.0.1", "mondo": { "repo": true, "packages": ”packages", "uses": { "magic-sauce": { "repository": "sencha/magic-sauce”, "branch”: "top-secret-dev" }, "my-utilities": { "repository": "my-user/my-utilities" } } }, "license": "ISC", "dependencies": { … } } app.js webpack.config.js package.json mondo_repos magic-sauce MyApplication node_modules package_a my-utilities addinator subtractifier packages import {magic} from 'magic-sauce’ import {add} from 'addinator’ import {sub} from 'subtractifier’ import {trim} from 'addinator/src/utils/trim' Repo can also be a NPM package Repo can be a container of packages const Repo = require('mondorepo').Repo; const repo = Repo.open(); … resolve: { alias: repo.allPackageAliases }, const Repo = require('mondorepo/src/init’); const add = require('addinator'); // Node Require shim allows for easy module mondo run index.js // Mondo CLI will inject initialization automatically! const add = require('addinator'); { 'magic-sauce': '/path/to/mondo_repos/magic-sauce’, 'addinator': '/path/to/mondo_repos/my-utilities/packages/addinator’, ’subtractifier': '/path/to/mondo_repos/my-utilities/packages/subtractifier’ }
55. Electron Packager
56. What is Electron? • Build ‘native’ desktop applications with Web technology • Local access to NodeJS for the real work • Control the runtime
57. Chrome NodeJS What is Electron?
58. • Atom Editor by GitHub • Visual Studio Code Editor by Microsoft • Slack Team Collaboration • Kitematic by Docker • Sencha • Sencha Architect • Sencha Themer • Sencha Inspector • Sencha Test Who uses Electron?
59. What can Sencha do for you? • Wrap your Sencha applications as native desktop apps • Open source ext-electron package by Sencha - IPC (inter process communication) to push heavy workloads to the main process - Example with easy integration, to quickly wrap applications - Support for native menu’s - Support for native GUI’s • File Pickers • Folder Pickers • Tray Icons • Notifications / “Balloons” Download from: http://github.com/sencha/electron-demo
60. Electron Build Process • Builds use the electron-packager Node.js package. • Uses npm scripts instead of gulp or grunt. • You can use the npm or yarn package managers. • The electron-packager wraps the compiled Ext JS application as produced by Sencha Cmd. • Application code will be stored in an “asar” file. - See http://electron.atom.io/docs/tutorial/application-packaging/
61. Electron Supported Platforms • Applications can run on - Windows (32 or 64) - Mac OS X - Linux (x86, x86_64, and armv7l) • Applications can be built on: - Windows (32 or 64) - Mac OS X (darwin, mas) - Linux (x86 or x86_64)
62. And when you are done… Don’t forget to: • Sign your binaries, (to be a verified publisher) • Add an installer (electron-builder) • Create assets (icons, splash screens) • Update Applications (electron-updater)
63. Electron Organization • Render process is almost a normal web app - Entry point is “app.js” in root folder - Other code is in “./app” folder • Main process logic is just Node.js code - Entry point is “main.js” in root folder - Other code is in “./main” folder
64. Render Electron Processes Main ./main.js ./app.js new BrowserWindow() process.type: 'browser' 'render' System UI Heavy Lifting Presentation (DOM)
65. var remote = require('electron').remote; var service = remote.require('./main/service'); var v = service.heavyWork(42, result => { console.log(`Work is done: ${result}`); }); console.log(`Initial work value: ${v}`); // log: // > Initial work value: 21 // > Work is done: 427 Use remote To Off-load Work • Push heavy workloads to the main process. • Initial result is synchronously returned! • Callbacks can be used to return data asynchronously as well. • Very convenient compared to raw IPC methods. module.exports = { heavyWork (value, done) { setTimeout(() => { done(value * 10 + 7); }, 2500); return v / 2; } }; ./main/service.js ./app/...
66. tbar: [{ xtype: 'electronfilefield', options: { filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },{ name: 'All Files', extensions: ['*'] }] }, bind: '{filename}', listeners: { change: 'onFileChange' } }] electronfilefield • Replacement for filefield • Uses Electron’s dialog module • Supports data-binding
67. Native Menus Electron provides native menu access, but… • Menu creation is easiest with a template • Templates have no conditional pieces • API’s to maintain menu state (checked, visible, enabled) are rather new • Editing menus after creation is difficult
68. mixins: [ 'Ext.electron.menu.Manager' ], nativeMenus: { app: [{ label: 'File', submenu: [{ label: 'Reopen', submenu: 'getReopenMenu' }, { label: 'Exit', accelerator: 'CmdOrCtrl+Q', click: 'onExit' }] }, ... Ext.electron.menu.Manager • Declarative, dynamic menus • Menu and menu item properties can be specified via: - Value - Inline function - Named controller method • Click handlers can be: - Inline function - Named controller method
69. getReopenMenu () { var vm = this.getViewModel(); return this.recentFiles.map(file => { return { label: file, click () { vm.set('filename', file); } }; }); } ./app/…/MainController.js Ext.electron.menu.Manager • Submenus can be built in code nativeMenus: { app: [{ label: 'File', submenu: [{ label: 'Reopen', submenu: 'getReopenMenu' }, { ...
70. onFileChange (picker, path) { var recentFiles = this.recentFiles; let i = recentFiles.indexOf(path); if (i > -1) { recentFiles.splice(i, 1); } recentFiles.push(path); if (recentFiles.length > 3) { recentFiles.shift(); } this.getView().reloadNativeMenu('app'); } Ext.electron.menu.Manager • Call reload method when state changes to update the menu:
71. DEMO
72. Conclusion: What’s on the roadmap?
73. The future is bright for Sencha tooling! Out now • Visual Studio Code plugin EA • Sencha Architect 4.1 • Fiddle 2.0 • Sencha Themer 1.1 • Electron for Sencha package • Sencha Cmd 6.5 EA - Google Closure Compiler for ES2015 support - PWA / Service Worker support • Sencha Test 2.0
74. The future is bright for Sencha tooling! Q2 - 2017 • Fashion open sourced • New Sencha Build Tool, open toolchain: - NodeJS based with NPM & Yarn - Webpack bundler - Babel ES2015 transpiler - Mondorepo repository organization • React & Angular 2 bridges
75. Questions?