Turbocharge your Ext JS Apps

Web applications are becoming increasingly data intensive and complex. Yet, users demand a great user experience, including blazingly fast speeds, across many device types. In this talk, we will show you how you can dramatically improve the performance of your web applications by using Sencha Ext JS and Ext Speeder. You will learn how to: accelerate your back-end data requests up to 10x by leveraging sophisticated in-memory, object-oriented techniques, significantly improve application responsiveness without making any modifications to your client Ext JS application, and quickly get started with database acceleration in standard J2EE environments.

Transcript

1. Turbo-Charge Your Ext JS App Dan Lawesson, PhD Speedment, Inc May and June, 2017
3. Why is a Progress Bar a Problem? •  100 milliseconds is a direct response •  > 1 second you will experience a delay •  > 3 seconds, 57% leave the site •  > 10 seconds, 100% tired 3 User Experience is Ruined !
4. 100 ms! 1 s! 3 s! 10 s!
5. Why is a Progress Bar a Problem? •  Google lost 20% of traffic by half a second delay •  Fewer simultaneous visitors 5 Less Pageviews
6. Why is a Progress Bar a Problem? •  Amazon: Every 100 ms delay costs 1% of sales (1,4 Billion $) •  Aberdeen Group: 1 second cost 9% of sales 6 Less Revenue Higher Overhead •  Unnecessary hardware, licenses cost
7. Why is a Progress Bar a Problem? Destroys the Brand •  44% worry when paying transactions take too long •  They tell their friends Disappointed Cellphone and Tablet Surfers •  58% expect faster response on a cellphone than on a computer Bad Search Rankings 7
8. Why is a Progress Bar a Problem? 100 ms! 1 s! 3 s! 10 s! Ø  Destroyed User Exp.! Ø  Less Pageviews! Ø  Less Revenue! Ø  Higher Overhead! Ø  Sad Mobile Surfers! Ø  Bad Rankings! ! Ø  Destroyed Brand!
9. You will learn how to: •  Get rid of progress bars •  Make the back end development process faster 9
10. How to get a piece of it: Looking forward to hearing from you! Name: __________________________________ ☐ Yes! Send me links to Quickstart Videos ☐ Yes! Let’s book a free Strategy Consultant Call
11. About Ext JS and Ext Speeder
12. One End Front end Back end One end
13. Ext Speeder •  Database back end tool for applications •  In-memory acceleration •  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 EXT JS ApplicaDon
14. Sencha Ext JS Rapidly 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
15. Accelerating Back End Development
16. Web Server App Client Data in Ext JS Apps Server UI Components Data Manager Local data Pages, Assets, etc. Data Services REST SOAP etc. Database
17. 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
18. Web Server Client Data in Ext Speeder Server Complete REST API In-memory Object Store (entire db) Database Automatic Refresh Logic Introspection Data Services
19. Web Server App Client Data in Ext JS + Ext Speeder Apps Server UI Components Data Manager Local data Pages, Assets, etc. REST Obj Store Database
20. 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
21. One Piece at a Time •  Legacy backend coexists with Ext Speeder •  Incremental Integration Process
22. Ext Speeder ! •  REST API automatically generated •  In-Memory Technology for High Performance •  Deployment stand-alone or in Java EE server like Oracle WebLogic or Tomcat.
23. Ext Speeder Back End Development Process 1. Connect 2. Generate 3. Use
24. Ext Speeder Acceleration •  Convert large databases into In-memory Objects •  Extreme Performance, real time Big Data
25. •  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
26. Deployment Scenarios •  Stand Alone Java SE 8 •  Java EE Application Server -  Oracle WebLogic -  Tomcat / TomEE -  Glassfish / Payara -  Wildfly / JBoss -  Jetty
27. IDEs
28. Databases
29. 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)
30. Accelerating Run-Time Performance
31. 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
32. 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
33. Demo Ext Speeder
34. Case Study : Portfolio IQ by xh.io
35. Try the demo on AWS: Link: https://piq.xh.io Username: piq@xh.io Password: piqdemo!
36. Ext Speeder: Summary •  Improved User Experience with apps accessing large amounts of data •  Data-driven apps developed faster with less effort •  Seamless integration with Ext JS Grid •  Lower effort to create and maintain comprehensive REST APIs
37. How to get Ext Speeder
38. What’s included Kickstart package 8h Training voucher 4h Professional Support Tickets
39. Need Custom Features Tailored for Your Project? Contact Us info@extspeeder.com Additional Database Connectors Scale-Out Over Multiple Nodes Aggregating Operators Create, Update, Delete... Connect Several Databases Reactive WebSockets
40. If You Only Remember One Thing From Today: 100 ms! 1 s! 3 s! 10 s! https://calendly.com/speedment
41. Thank You! dan@speedment.com www.extspeeder.com