Embed Size (px)
DESCRIPTION
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.
Citation preview
© 2013 Punchkick Interactive Inc. All rights reserved.
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
PUNCHKICK INTERACTIVEWEB APP PERFORMANCE OPTIMIZATION: MIDDLEWARE BEST PRACTICES
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
1. Planning for Performance Optimizations
2. Traditional Architectural Approach
3. Improved Architectural Approach
4. Summary
WEB APP PERFORMANCE OPTIMIZATION
AGENDA
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
Web App Performance Optimization Best Practices
PLANNING FOR PERFORMANCE OPTIMIZATION
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
PLANNING FOR PERFORMANCE OPTIMIZATIONS
CONSIDERATIONS WHEN DESIGNING A WICKED-FAST WEB/NATIVE APP
The single most important driver of the decision-making process towards 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
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
PLANNING FOR PERFORMANCE OPTIMIZATIONS
COMMON PITFALLS DURING PLANNINGIt’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
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
PLANNING FOR PERFORMANCE OPTIMIZATIONS
COMMON PAIN-POINTS FOR APPSOur design principals strive to address several pain points that are common 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
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
Web App Performance Optimization Best Practices
TRADITIONAL ARCHITECTURAL APPROACH
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
TRADITIONAL ARCHITECTURAL APPROACH
WHAT WE OFTEN SEEMost 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 isn't cached
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
TRADITIONAL ARCHITECTURAL APPROACH
PROBLEMS/RISKS WE IDENTIFYWithout a solid middleware strategy, unforeseen problems and product 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
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
Web App Performance Optimization Best Practices
IMPROVED ARCHITECTURAL APPROACH
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
IMPROVED ARCHITECTURAL APPROACH
CLIENT-SIDE SPEED RACINGAll modern Web clients can benefit from a creative approach to browser-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!
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
IMPROVED ARCHITECTURAL APPROACH
ADVANTAGES OF MIDDLEWARE APISDesigning 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.
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
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
IMPROVED ARCHITECTURAL APPROACH
ADVANTAGES OF MIDDLEWARE APIS CONTINUED…
Middleware-Layers Increase Security:• Isolates secret security-keys behind firewall• Can provide secure endpoints to wrap unsecured API requests• Ensures a single point of failure
Middleware-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)
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
IMPROVED ARCHITECTURAL APPROACH
ADVANTAGES OF MIDDLEWARE APIS CONTINUED…
Perhaps the single-most compelling advantage of developing a middleware 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
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
IMPROVED ARCHITECTURAL APPROACH
DISADVANTAGES OF MIDDLEWARE APISWhat goes up, must also go down. And with many advantages to support 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
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
Web App Performance Optimization Best Practices
SUMMARY
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
© 2013 Punchkick Interactive Inc. All rights reserved.
SUMMARY
MIDDLEWARE IS A GOOD THINGIf you have many API integrations, middleware is a non-negotiable part 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
PUN
CHKICK IN
TERACTIVE | WEB APP PERFORM
ANCE OPTIM
IZATION
Ryan Unger Co-Founder & CTO
1-800-549-4104 x [email protected]@ryanunger
WEB APP PERFORMANCE OPTIMIZATION
QUESTIONS?
