aerobatic introduction
DESCRIPTION
Introduction to the Aerobatic UX delivery platform for nimble web apps.TRANSCRIPT
AerobaticA UX delivery platform !for nimble web apps
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.
• 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 -
• “One shot to get it right”
• D
Nimble
Quick and light - rapidly respond to changing
conditions
Engineered for high performance and
continuous experimentation
Streamlined tools and processes for minimal
workflow friction
Not Nimble
Onerous communication, external dependencies,
heavy process
Risk averseness - one shot to get it right
Inefficient, cumbersome tooling and workflows
Brief History of Web Apps
Data Layer
Application Layer
Presentation Layer
Classic 3 tier app
Data Layer
Application Layer
Presentation Layer
Services Layer
New services layer
no change
Presentation Layer Split
browser
server
javascript, css, selectors, AJAX
script tags, HTML output, inline script, css links, page titles, onclick attributes
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
A New UX Layer
Data Layer
Application Layer
Presentation Layer
Services Layer
UX Layer
• Entirely browser resident
• Light coupling to the 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
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
UX LayerBackend
Web Server/CMS
Visitor’s Browser
<head> <script> __config__ = { pageId: “homePage”, aerobaticAppOwner: "repo_owner", aerobaticAppRepo: "repo", }; </script> <script src="//cdn.aerobaticapp.com/cockpit.js"></script> </head>
Integration Code
AerobaticUX assets
UI Developer
push changesData/
Services
raw page response
Terminologyairport - 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
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
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
• 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
Simulator Mode
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.
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