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!
Fiddle 1 Issues • The way it runs code with multiple files - Concatenated into a single <br/>- Requiring classes may break the example<br/>• Data requests are hidden<br/>- All client side, no network requests<br/>• Not so great for full app examples<br/>• Funky UI<br/>12<br/>
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 •
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
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.
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.
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.
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
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/
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.
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+)
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)
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.
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.“
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)
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
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
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!
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
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
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
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' ] } }]
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
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
• 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?
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
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/
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)
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)
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
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/...
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
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:
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
savelee
riru
miyashino
ytaisei
finengine
yrhorita
gawa
huffon
.png){kind=icon}
pharma_x_tech
soracom
bengo4com
koudaiii
mashiike
dougneiner
sugarenia
jponch
michaelherold
keathley
philhawksworth
nonsquared
afnizarnur
keavy
mraible
paigeccino
searls