SenchaCon Roadshow Irvine 2017
Download as PPTX, PDF•1 like•180 views
The document discusses the negative impact of slow response times on user experience, highlighting significant losses in traffic and revenue for companies like Google and Amazon when delays occur. It introduces 'ext speeder', a tool designed to accelerate backend development and improve application performance by using in-memory data management. Overall, it emphasizes the need for faster applications to maintain user engagement and enhance business outcomes.
SenchaCon Roadshow Irvine 2017
- 1. Turbo-Charge Your Ext JS App Per Minborg & Emil Forslund, Speedment, Inc
- 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 Destroyed
- 4. 100 ms 1 s 3 s 10 s
- 5. Why is a Progress Bar a Problem? • Google lost 20% of traffic when they became 0,5 seconds slower • Less 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 $) • Research in Aberdeen: 1 second cost 9% of sales 6 Less income Higher Overhead • Unnecessary hardware, licenses cost
- 7. Why is a Progress Bar a Problem? Destroys the Brand • 44% worried 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 Lower Rankings in Search engines 7
- 8. Why is a Progress Bar a Problem? 100 ms 1 s 3 s 10 s Destroyed User Exp. Less Pageviews Less Income Higher Overhead Sad Mobile Surfers Lower Rankings Destroyed Brand
- 9. You will learn how to: • Get rid of progress bars • Make the back end development process faster 9
- 10. About Ext JS and Ext Speeder
- 11. One End Front end Back end One end
- 12. 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 Application
- 13. 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. Web ServerApp Client Data in Ext JS Apps Server UI Components Data Manager Local data Pages, Assets, etc. Data Services REST SOAP etc. Database
- 16. 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
- 17. Web Server Client Data in Ext Speeder Server Complete REST API In-memory Object Store (entire db) Database Automatic Refresh Logic Introspection Data Services
- 18. Web ServerApp Client Data in Ext JS + Ext Speeder Apps Server UI Components Data Manager Local data Pages, Assets, etc. REST Obj Store Database
- 19. 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
- 20. 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.
- 21. Ext Speeder Back End Development Process 1.Connect 2.Generate 3. Use
- 22. Ext Speeder Acceleration • Convert large databases into In-memory Objects • Extreme Performance, real time Big Data
- 23. • 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
- 24. Deployment Scenarios • Stand Alone Java SE 8 • Java EE Application Server - Oracle WebLogic - Tomcat / TomEE - Glassfish / Payara - Wildfly / JBoss - Jetty
- 25. IDEs
- 26. Databases
- 27. 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)
- 29. 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
- 30. 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
- 31. Demo Ext Speeder
- 32. Case Study : Portfolio IQ by xh.io
- 33. Try the demo on AWS: Link: https://piq.xh.io Username: [email protected] Password: piqdemo!
- 34. 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
- 35. How to get Ext Speeder
- 36. What’s included Kickstart package 8h Training voucher 4h Professional Support Tickets
- 37. Need Custom Features Tailored for Your Project? Contact Us [email protected] Additional Database Connectors Scale-Out Over Multiple Nodes Aggregating Operators Create, Update, Delete... Connect Several Databases Reactive WebSockets
- 38. If You Only Remember One Thing Today: 100 ms 1 s 3 s 10 s
- 41. Ext Speeder Example • ~25 million rows • User Interaction “scrollbar” - Sort by price - Skip to row 15,342,132 - Show 50 following rows
- 42. 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
Editor's Notes
- #2: CTO, Head of Development, Based in Palo Alto, CA How many of you are also backend developers?
- #3: Frustrating? How many of you guys have added a progress bar to your app?
- #4: 100 ms is turning a page in a book 10 s is the longest time the brain can focus on one thing
- #5: Joint Experiment to check out your experience of delay.
- #6: Separate presentation xxx at yyy
- #7: Separate presentation xxx at yyy
- #8: It is easier to do a computer app faster than a mobile app. However...
- #9: To summarize...