Web Development at the Speed of Thought: Succeeding in

the App Economy

Sandeep Adwankar

Download Early Access Ext JS ToolsVS Code PluginArchitect 4.1Themer 1.1Cmd 6.5

http://aka.ms/sencha-code

Web App Economy – Cloud Apps in Enterprise are increasing

* Netskope Cloud Report, Worldwide, Sept 2016

977 Cloud Apps per Enterprise*

Web App Economy – Some Apps Are Used More Often

Average percentage of enterprise users using cloud app - OKTA Business@ work March 2016

Web App Economy – New Metrics for Success

5

High Velocity Feature Delivery Delightful Design

Slack Daily Active Users

Developing Delightful Web Apps at High Velocity

6

Meaningful Mockups

Beautifully Styled Apps

Efficient App Coding

Performant Apps

Ext JS Apps

Build New Feature for SenchaCon App

Engagement Metric • Show summarized data of sessions

attended by company• Show by countries• Show over last 5 SenchaCons• Show details for each attendee –

name, year, country etc.

7

Meaningful Mockups

Meaningful Mockups

Best Practices for Ext JS Apps:

• Establish clear requirements between owner and designer

• Use Standard components to reduce risk of custom development

9

Did you add feedback button?

Yes, it is in About view

Meaningful Mockups using Ext JS Stencils

• Drag and drop component symbols to mockups faster

• Supports Components from Modern and Classic toolkit

• A complete UI asset kit for - Adobe Illustrator

- Sketch

- Omnigraffle

- Balsamiq

- SVG/PNG

10

Ext JS Stencils – Mock-up Engagement Metrics

11

Efficient App Coding

Efficient App Coding

Best Practices for Ext JS Apps:

• Scaffold your apps

• Use Code generation when possible

• Refactor to manage complexity

• Use Sencha build tools

13

Efficient App Coding using Sencha IDE Plugins

• Code completion, inspection & refactoring

• Code generation

• Code Navigation

• Docs lookup

• Cmd App watch

14

Efficient App Coding using Sencha Architect

• Visually build apps

• Code generation, less manual coding

• Easy configuring classes

• Easy refactoring

• Build your templates

15

Sencha Architect 4.1 – What’s New

• Drag and drop Premium Components

- Calendar component

- Pivot grid component

- Exporter

• Better Grid Support

- Row widget, header resizer for Classic

- Row expander for Modern

- Grid Builder support in Modern

• Extend Controller and Models

• Asset Manager to manage frameworks

16

Sencha Architect 4.1 – Code Engagement Metrics

• Add Pivot Grid with DrillDown Plugin

17

Performant Apps

Performant Apps

Best Practices for Ext JS Apps:

• Validate local data stores

• Validate Data bindings

• Avoid component over-nesting

• Optimize layout runs

19

Performant Apps using Sencha Inspector

• Inspect over nested components and minimize to improve performance

• For classic toolkit, identify unnecessary components in layout runs

• Identify issues with data binding

• Debug issues with proxy and stores

20

Sencha Inspector – Inspect Engagement Metrics

• Inspect Stores

21

Beautifully Styled Apps

Beautifully Styled Apps

Best Practices for Ext JS Apps:

• Quick Start with predefined themes

• Create components with UIs

• Use unique web fonts

• Use consistent color palette

23

Beautifully Style apps using Sencha Themer

• Design themes in an interactive visual environment - no code

• Quick configurations for global theme variables

• Support for component Uis

• View live style update to your Ext JS app – No compile, build, reload

• Package your theme, apply to your app and share with ease

24

Sencha Themer 1.1 - What’s New

• Directly connect your app to Themer

• Inspect Sass variables of components in your app

• Modify Sass variables and see changes live

Themer Now Part of Pro Bundle

25

New Theming Contest App

Theme App to Win $2500

Sencha Themer - Style Engagement Metrics

• Style the app

26

Summary

Use Ext JS Tools to deliver delightful web apps at high velocity

28

Meaningful Mockups with Ext JS Stencils

Beautifully Style Apps with Sencha Themer

Efficient App Coding with Ext JS Plugins and Architect

Performant Apps with Sencha Inspector