Mobile Web App Performance Optimization: Middleware Best Practices

PUNCHKICK INTERACTIVE | WEB APP PERFORMANCE OPTIMIZATION
PUNCHKICK INTERACTIVE
WEB APP PERFORMANCE OPTIMIZATION:
MIDDLEWARE BEST PRACTICES

© 2013 Punchkick Interactive Inc. All rights reserved.

WEB APP PERFORMANCE OPTIMIZATION

AGENDA

1. Planning for Performance Optimizations

2. Traditional Architectural Approach

3. Improved Architectural Approach

4. Summary

Web App Performance Optimization Best Practices
PLANNING FOR
PERFORMANCE OPTIMIZATION

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



COMMON PITFALLS DURING PLANNING

It’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 difﬁcult 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


COMMON PAIN-POINTS FOR APPS

Our 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


TRADITIONAL
ARCHITECTURAL APPROACH

TRADITIONAL ARCHITECTURAL APPROACH

WHAT WE OFTEN SEE

Most 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


TRADITIONAL ARCHITECTURAL APPROACH

PROBLEMS/RISKS WE IDENTIFY

Without 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


IMPROVED
ARCHITECTURAL APPROACH

IMPROVED ARCHITECTURAL APPROACH

CLIENT-SIDE SPEED RACING

All modern Web clients can beneﬁt 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 ﬁltering (e.g. auto-complete)
• Others… get creative!



ADVANTAGES OF MIDDLEWARE APIS

Designing a project-speciﬁc 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
• Simpliﬁes 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



CONTINUED…

Middleware-Layers Increase Security:
• Isolates secret security-keys behind ﬁrewall
• 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)



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



DISADVANTAGES OF MIDDLEWARE APIS

What 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


SUMMARY

SUMMARY

MIDDLEWARE IS A GOOD THING

If 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
✓ Simpliﬁes 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


WEB APP PERFORMANCE OPTIMIZATION

QUESTIONS?

Ryan Unger
Co-Founder & CTO

1-800-549-4104 x 703
ryan@punchkickinteractive.com
@ryanunger

Mobile Web App Performance Optimization: Middleware Best Practices

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Mobile Web App Performance Optimization: Middleware Best Practices