![Page 1: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/1.jpg)
Turbo-Charge Your Ext JS AppPer Minborg, Speedment & Jon Jarboe, Senchafeaturing Anselm McClain, xh.ioNovember 9, 2016
![Page 2: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/2.jpg)
You will learn:
• About Ext JS and Ext Speeder
• How to make the back end development process faster
• How Ext Speeder improves your performance
2
![Page 3: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/3.jpg)
Ext Speeder Related Sessions
• 2:00 PM, Using Ext JS Components to Turn Big Data into Actionable Intelligence
• Olga Petrova, Sencha, Starvine 3-5
• 4:10 PM, How to Auto Generate a Back-end in Minutes
• Emil Forslund, Per Minborg, Starvine 1-2
3
![Page 4: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/4.jpg)
About Ext JS and Ext Speeder
![Page 5: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/5.jpg)
Fast Development and Extreme Performance
Front end
Back endOne end
![Page 6: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/6.jpg)
Ext Speeder
• Database back end tool for applications
• Simplifies development of database applications
• Quickly design, develop and deploy Ext JS applications
• Automatic generation of code, no need to worry about the back end
• In-memory acceleration
EXT JS Application
![Page 7: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/7.jpg)
Sencha Ext JSRapidly build feature-rich, data intensive cross-platform enterprise applications
• High performance, customizable widgets
• Backend agnostic data package
• Responsive layout manager
• Advanced charting package
• Easily customizable themes
• ARIA / 508 Compliance
![Page 8: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/8.jpg)
Accelerating Back End Development
![Page 9: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/9.jpg)
Web ServerApp
Client
Data in Ext JS Apps
Server
UI Components
Data Manager
Local data
Pages, Assets, etc.
Data Services
REST
SOAP
etc.
Database
![Page 10: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/10.jpg)
Traditional Back End Development Process
• Model the database 5h
• Secure Connection 1h
• Parse http command 1h
• Deserialize parameters 1h
• Manage database connections 1h
• Convert into SQL 2h
• Optimize queries 3h
• Parse database response 2h• Format into JSON 1h• Send back to Client 1h• Write XML config 1h• Deploy in Java EE 1h• Fix bugs 4h• Run Application 0.1 h
24 h
![Page 11: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/11.jpg)
Web Server
Client
Data in Ext Speeder
Server
Complete REST API
In-memoryObject Store(entire db)
Database
Automatic Refresh Logic
Introspection
Data Services
![Page 12: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/12.jpg)
Web ServerApp
Client
Data in Ext JS + Ext Speeder Apps
Server
UI Components
Data Manager
Local data
Pages, Assets, etc.
REST
Obj Store Database
![Page 13: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/13.jpg)
Ext Speeder Back End Development Process • Install Ext Speeder 0.4 h
• Connect to database 0.1h
• Select tables and columns 0.3 h
• Press ”Generate” 0.0 h
• Deploy in Java EE 0.1h
• Run application 0.1h
1 h
![Page 14: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/14.jpg)
Ext Speeder
• REST API automatically generated
• In-Memory Technology for High Perfor-mance
• Deployment stand-alone or in Java EE server like Oracle WebLogic or Tomcat.
![Page 15: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/15.jpg)
Ext Speeder Back End Development Process
1. Connect
2. Generate
3. Use
![Page 16: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/16.jpg)
Ext Speeder Acceleration• Convert large databases into
In-memory Objects
• Extreme Performance, real time Big Data
![Page 17: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/17.jpg)
• Downloads a copy of the most recent database state in the background
• Seamlessly switches over to the copy
• Configurable in-memory reload time-Default reload each hour-Configurable per second, minute or hour
• Multi-versioning concurrent control (MVCC)
Automatic Data Reload
![Page 18: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/18.jpg)
Deployment Scenarios
• Stand Alone Java SE 8
• Java EE Application Server- Oracle WebLogic
- Tomcat / TomEE
- Glassfish / Payara
- Wildfly / JBoss
- Jetty
![Page 19: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/19.jpg)
IDEs
![Page 20: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/20.jpg)
Databases
![Page 21: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/21.jpg)
Ext JS Versions
• No change in Ext Speeder - Works for these versions: -Ext JS 6 (BufferedStore) -Ext JS 5 (BufferedStore) -Ext JS 4 (Use regular Store with buffered = true)
![Page 22: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/22.jpg)
Accelerating Run-Time Performance
![Page 23: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/23.jpg)
How Ext Speeder improves your performance
• Data Database objects are stored in-memory
• Sort A sorted view of every column resides in-memory
• Filter Resolved without querying the database. In-memory filtering lookup.
• Skip In-memory dictionaries improve skip performance
• Total Number of results are cached for each set of parameters
![Page 24: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/24.jpg)
Performance Test : Open database
• Open database with US doctors
• 40 million objects
• Comparison with and without Ext Speeder
See full video on www.extspeeder.com
![Page 25: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/25.jpg)
Performance Test : Pivot Grid
See full video on www.extspeeder.com
![Page 26: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/26.jpg)
Case Study : Portfolio IQ by xh.io
See full video on www.extspeeder.com
![Page 27: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/27.jpg)
Ext Speeder: Summary
• Data-driven apps developed faster with less effort
• Seamless integration with Ext JS Grid
• Improved User Experience with apps accessing large amounts of data
• Lower effort to create and maintain comprehensive REST APIs
![Page 28: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/28.jpg)
How to get Ext Speeder
![Page 29: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/29.jpg)
Want Maintenance & Support?
• Up to 5 Developers $ 2,475 / Year
• Every Additional Developer $ 495 / Year
• Renewal: 50% of regular price
![Page 30: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/30.jpg)
Need Custom Features Tailored for Your Project?
Contact [email protected]
Additional Database Connectors
Scale-Out Over Multiple Nodes
Aggregating Operators
Create, Update, Delete...
Connect Several Databases
Reactive WebSockets
![Page 31: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/31.jpg)
Learn More
Ext Speederhttp://www.extspeeder.com
Ext JShttps://www.sencha.com/products/extjs/
Xh.iohttps://xh.io/
![Page 32: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/32.jpg)
Please Take the Survey in the Mobile App
• Navigate to this session in the mobile app
• Click on “Evaluate Session”
• Respondents will be entered into a drawing to win one of five $50 Amazon gift cards
![Page 34: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/34.jpg)
![Page 35: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/35.jpg)
Ext Speeder Example
• ~25 million rows
• User Interaction “scrollbar”- Sort by price
- Skip to row 15,342,132
- Show 50 following rows
![Page 36: SenchaCon 2016 - Turbocharge Your Ext JS App Performance](https://reader037.vdocument.in/reader037/viewer/2022103104/58887b4a1a28ab34788b644b/html5/thumbnails/36.jpg)
Ext Speeder Example
• Use the sorted view “price” in descending order (instant)
• Use the dictionary to find the closest token for 15,342,132 (instant)- Closest token might be $30.23 at 15,342,102
• Find that token (instant)
• Skip (15,342,132 – 15,342,102 = 30 rows) (30 operations)
• Retrieve the following 50 rows directly from memory
• Convert to JSON