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

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

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

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

Lee Boonstra

December 09, 2016
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. 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!
  2. Plugin Features • Cmd integration - Build & Watch •

    Code Generation - Apps - Classes, Views, ViewControllers, ViewModels, - Models, Stores, Controllers • Code completion • Code Navigation • Docs Lookup
  3. 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 •
  4. 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
  5. 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 •
  6. 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
  7. Integration with Sencha Themer • In Themer Export your Theme

    as zip • Import the theme package: - Resources > Sencha Theme Resource
  8. 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.
  9. 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.
  10. 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.
  11. 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
  12. 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/
  13. 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.
  14. 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" }
  15. ES2015 features • Block scoped constructs • Default parameters •

    Template Literals • Arrow functions • For of loop • Promises • Classes • Modules • New Methods • …
  16. 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+)
  17. 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)
  18. 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.
  19. 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.“
  20. 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)
  21. 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
  22. 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
  23. 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!
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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' ] } }]
  29. 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
  30. 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
  31. 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’ }
  32. What is Electron? • Build ‘native’ desktop applications with Web

    technology • Local access to NodeJS for the real work • Control the runtime
  33. • 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?
  34. 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
  35. 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/
  36. 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)
  37. 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)
  38. 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
  39. 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/...
  40. 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
  41. 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
  42. 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
  43. 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' }, { ...
  44. 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:
  45. 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
  46. 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