2. The Nimble Premise
•
Nimbleness has become an imperative in order to maintain
competitiveness and meet customer demands and
expectations.
•
While improved agility is important in all facets of technology,
it becomes increasingly critical the closer you get to the final
customer experience.
3. Nimble
•
Nimbleness - definitionRisk averseness
- one shot to get it rightRisk averseness
- one shot to get it right
•
Nimbleness is most vital at the point of
customer interaction
•
What Prevents Nimbleness
•
Onerous communication, external
dependencies, heavy handed
processes
•
Risk averseness Engineered for high
•
D
Quick and light - rapidly
performance and
respond to changing shot to get it right”
• “One
continuous
conditions
experimentation
Streamlined tools and
processes for minimal
workflow friction
5. Brief History of Web Apps
Presentation Layer
Presentation Layer
Application Layer
Application Layer
Services Layer
Data Layer
Data Layer
Classic 3 tier app
New services layer
no change
7. Pain Points
•
Speed to market dictated by backend agility
•
CMS systems are designed for non-coders but code is always
required to do interesting things
•
Awkward overlap between front-end and backend domains css and javascript sources, inline javascript, DOM layout
•
Canary deployments/testing are hard to do on server
•
Tight coupling - i.e. server generated HTML and client selectors
•
Test environment instability and non-representative of prod
8. A New UX Layer
•
Entirely browser resident
UX Layer
•
Light coupling to the presentation layer
Presentation Layer
•
Liberates UX teams to iterate and
innovate on their own terms
•
Presentation layer has diminished role,
more of a shim layer
•
Provide the same benefits to the user
experience that web services did for the
backend
•
Built with all the same modern web
technologies
•
Aerobatic seeks to be the UX layer
delivery platform
Application Layer
Services Layer
Data Layer
9. Benefits
•
Liberates UX/UI teams to tighten build->test->deploy->test loop
•
Decouples presentation tier from web server platform allowing for independent
release cadences
•
Encourages a modern streamlined web dev workflow based on best of breed tools
and techniques
•
Out of the box concurrent deployments for canary and A/B testing
•
Highly optimized cloud-based asset delivery
•
Develop directly against production site in simulator mode, preview changes live
•
Deploy as often as you wish, stage to prod via “git push” and specify traffic control
rules for one or more versions
•
Rollback is simple matter of redirecting traffic elsewhere
11. Terminology
airport - the home base for the Aerobatic delivery platform in the cloud - node.js running on AWS!
cockpit.js - javascript file that is included in the integration HTML rendered by the backend web
server which encapsulates all the intelligence powering Aerobatic on the client.
flightPlan - a JSON manifest downloaded by cockpit.js which determines which version of each
UX asset to deliver to the user.
hangar - where the UX asset versions are housed and retrieved from by the Aerobatic cloud.
Currently this is GitHub.
trafficControl - set of rules that dictate how traffic should be directed to one or more versions
based on a percentage allocation
dashboard - web based tool for defining traffic control rules and more, url is
airport.aerobaticapp.com/owner/repo
simulatorMode - setting that allows development of UX assets directly on the production site !
aerobatic.json - a configuration file that lives in the root of the UX assets repo which specifies
meta data about the app including which module is the main module for each page
12. UX Asset Delivery
•
Assets are asynchronously loaded via
Require.js
•
Every javascript, stylesheet, and template is:
minified, compressed, fingerprinted, and
aggressively cached at both the CDN and
browser
•
Provides a Rails-like asset pipeline that
supports pre-processing of CoffeeScript,
Jade, Stylus, Sass, Mustache, LESS, and
more
•
No need to configure local build steps, let
Aerobatic do the work for you
13. Development Experience
•
Mildly opinionated - mostly just forces use of AMD modules to structure code
•
No proprietary libraries or coding conventions to conform to
•
Supports all leading Javascript and CSS libraries such as jQuery, Angular,
Ember, Bootstrap, Backbone, etc.
•
Simply git push to your repository and your assets are ready to be served in
production
•
Provides a built-in test runner powered by Mocha, Chai, and PhantomJS. Run
tests either from the console or browser.
•
Cleanly integrates with 3rd party JavaScript components such as web analytics,
ad-retargeters, social widgets, etc.
•
You can focus on writing great apps and let Aerobatic take care of the plumbing
14. Simulator Mode
•
Redirects asset delivery to
developer’s localhost
•
Non-minified assets for ease of
debugging
•
Start server via “aerobatic”
command from repository root
•
npm install -g aerobatic
•
Same exact codebase powers
Aerobatic platform in the cloud
15. Sample Scenarios
•
Canary deploy home page design overhaul to 5% of customers
and monitor that conversion rates do not suffer
•
Send clients or approvers a preview link to a proposed future
version of the site. Upon approval, just flip the switch to make it
live.
•
Run usability tests right on the live site
•
Work around rigid CMS constraints that only allow a single
template per page type.
•
Run A/B tests on equal playing field between control and test
versions - everything loaded the same way.
16. Try it Out Yourself!
Checkout the Barnstormer Music
sample app at:
http://www.barnstormermusic.biz
Fork one of the repos and create
your own version of the UX that you
can experience live on the same
site. That’s the power of Aerobatic.
Learn more at
www.aerobaticapp.com