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.

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

14. Accelerating Back End
Development

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)

28. Accelerating Run-Time
Performance

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: piq@xh.io
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
info@extspeeder.com
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

39. Thank You!
minborg@speedment.com
www.extspeeder.com

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