• Like

Mobile Web App Performance Optimization: Middleware Best Practices

  • 368 views
Uploaded on

If you have many API integrations, middleware is a non-negotiable part of any product development lifecycle, because designing a project-specific middleware is the single most effective way to create …

If you have many API integrations, middleware is a non-negotiable part of any product development lifecycle, because designing a project-specific middleware is the single most effective way to create speed improvements at an order of magnitude, improve overall code quality and project security, and also lower client-side development costs.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
368
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONPUNCHKICK INTERACTIVEWEB APP PERFORMANCE OPTIMIZATION:MIDDLEWARE BEST PRACTICES© 2013 Punchkick Interactive Inc. All rights reserved.
  • 2. WEB APP PERFORMANCE OPTIMIZATIONAGENDA PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATION1. Planning for Performance Optimizations2. Traditional Architectural Approach3. Improved Architectural Approach4. Summary
  • 3. PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONWeb App Performance Optimization Best PracticesPLANNING FORPERFORMANCE OPTIMIZATION
  • 4. PLANNING FOR PERFORMANCE OPTIMIZATIONSCONSIDERATIONS WHEN DESIGNINGA WICKED-FAST WEB/NATIVE APP PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONThe single most important driver of the decision-making processtowards a middleware API is the number of 3rd party integrations.Factors We Consider During Planning Include:• Number of 3rd party API integrations• Audiences client-capabilities• Number of clients within the product lifecycle• Codebase maintenance plans• Remote environment© 2013 Punchkick Interactive Inc. All rights reserved.
  • 5. PLANNING FOR PERFORMANCE OPTIMIZATIONSCOMMON PITFALLS DURING PLANNING PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONIt’s very easy to have a well-intentioned plan spin out of control,into something that has a massive implementation cycle.Keep the Following in Mind:• A complex caching strategy is more difficult to add post-launch• Think about each single point of failure abstractly when planning for security concerns• Some premature optimization is acceptable, but try to avoid overly-premature optimization• Devices matter; architect for the correct audience• 3rd party dependencies aren’t always engineered to be fast• All projects have an "expires by" sticker; apps should be updated as new technologies are hardened© 2013 Punchkick Interactive Inc. All rights reserved.
  • 6. PLANNING FOR PERFORMANCE OPTIMIZATIONSCOMMON PAIN-POINTS FOR APPS PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONOur design principals strive to address several pain points that arecommon to most Web projects.Symptoms of Poorly-Planned Apps:• Many data-integrations and business logic present within the client-side codebase• Each just-in-time page load is expensive• Lots of HTTP overhead with each AJAX request• Caching is an afterthought, and sometimes missed• Page loads depend heavily on 3rd party availability, introducing many points of failure© 2013 Punchkick Interactive Inc. All rights reserved.
  • 7. PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONWeb App Performance Optimization Best PracticesTRADITIONALARCHITECTURAL APPROACH
  • 8. TRADITIONAL ARCHITECTURAL APPROACHWHAT WE OFTEN SEE PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONMost Web apps we review don’t maintain a middleware strategy,and this leads to a few less-than-ideal issues.Fingerprint of a Less-That-Ideal Architecture:• Client talks to each API integration one-by-one• Multiple clients handle business logic (e.g. mWeb, native, etc.)• Each API has its own coding standards, errors, and protocols• Every request has HTTP overhead• API keys are exposed• Static page content isnt cached© 2013 Punchkick Interactive Inc. All rights reserved.
  • 9. TRADITIONAL ARCHITECTURAL APPROACHPROBLEMS/RISKS WE IDENTIFY PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONWithout a solid middleware strategy, unforeseen problems andproduct risks can arise.What a Less-That-Ideal Architecture Means to You:• Lots of integration code to maintain• Many points of failure• Page loads are slow• Requests not always secure• Business logic in the client• Can help embrace institutional knowledge isolation© 2013 Punchkick Interactive Inc. All rights reserved.
  • 10. PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONWeb App Performance Optimization Best PracticesIMPROVEDARCHITECTURAL APPROACH
  • 11. IMPROVED ARCHITECTURAL APPROACHCLIENT-SIDE SPEED RACING PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONAll modern Web clients can benefit from a creative approach tobrowser-based optimizations.Client-Side Speed-Improvement Opportunities:• Prefetching of subsequent page data• Browser caching of static NoSQL data• Just-in-time data filtering (e.g. auto-complete)• Others… get creative!© 2013 Punchkick Interactive Inc. All rights reserved.
  • 12. IMPROVED ARCHITECTURAL APPROACHADVANTAGES OF MIDDLEWARE APIS PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONDesigning a project-specific middleware is the single most effectiveway to create speed improvements at an order of magnitude,improve overall code quality and project security, and also lowerclient-side development costs.Middleware-Layers Improve Maintainability:• Consolidates all 3rd party API calls into one place• Isolates business logic to provide a single point of maintenance• Forces the spread of institutional knowledge to broader team• Simplifies client codebase by providing: ✓ Consistent API interface and coding standards for client requests ✓ Consistent error codes/messaging for client requests ✓ RESTful endpoints, regardless of individual 3rd party API protocols© 2013 Punchkick Interactive Inc. All rights reserved.
  • 13. IMPROVED ARCHITECTURAL APPROACHADVANTAGES OF MIDDLEWARE APISCONTINUED… PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONMiddleware-Layers Increase Security:• Isolates secret security-keys behind firewall• Can provide secure endpoints to wrap unsecured API requests• Ensures a single point of failureMiddleware-Layers Speed Execution Times:• Can leverage multi-threaded server code for expensive data analysis, geospatial calculations, etc.• Can preprocess/optimize binary content (e.g. images)© 2013 Punchkick Interactive Inc. All rights reserved.
  • 14. IMPROVED ARCHITECTURAL APPROACHADVANTAGES OF MIDDLEWARE APISCONTINUED… PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONPerhaps the single-most compelling advantage of developing amiddleware API is faster data access.Middleware-Layers Provide Faster Data Access:• Consolidate groups of API requests into a single response• Eliminate HTTP overhead using sockets• Customize caching headers for different content types• Cache commonly-used 3rd party API data to memory, NoSQL data store, etc. for request-free utilization by clients• Provide lightweight data packages to client by throwing out extraneous data from heavy 3rd party API queries© 2013 Punchkick Interactive Inc. All rights reserved.
  • 15. IMPROVED ARCHITECTURAL APPROACHDISADVANTAGES OF MIDDLEWARE APIS PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONWhat goes up, must also go down. And with many advantages tosupport a middleware, there also a few disadvantages as well.Potential Middleware Disadvantages:• Adds processing overhead to the server-layer• Can be a detrimental single point of failure when poorly coded• Not worth doing unless there is a culture of test-driven development, code commenting, and shared documentation• Initially increases overall product cost ✓ Needs to be written and maintained separate from the client ✓ Most effective when physically hosted near client-side app© 2013 Punchkick Interactive Inc. All rights reserved.
  • 16. PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATION Web App Performance Optimization Best Practices SUMMARY
  • 17. SUMMARYMIDDLEWARE IS A GOOD THING PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONIf you have many API integrations, middleware is a non-negotiablepart of any product development lifecycle.Why Middleware APIs Are a Good Thing:• Advantages ✓ MUCH faster data access and page execution times ✓ MUCH easier to maintain business logic ✓ Simplifies client codebases, making them easier to maintain ✓ Often times more secure ✓ Overall product development lifecycle can be faster• Disadvantages ✓ Initially increases overall product cost ✓ MUST be independently maintained© 2013 Punchkick Interactive Inc. All rights reserved.
  • 18. WEB APP PERFORMANCE OPTIMIZATIONQUESTIONS? PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATIONRyan UngerCo-Founder & CTO1-800-549-4104 x 703ryan@punchkickinteractive.com@ryanunger