Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Aerobatic Introduction
Semelhante a Aerobatic Introduction (20)
Último
Último (20)
Aerobatic Introduction
- 1. Aerobatic A UX delivery platform ! for nimble web apps
- 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
- 4. Not Nimble Onerous communication, external dependencies, heavy process Risk averseness - one shot to get it right Inefficient, cumbersome tooling and workflows
- 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
- 6. Presentation Layer Split browser server javascript, css, selectors, AJAX script tags, HTML output, inline script, css links, page titles, onclick attributes
- 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
- 10. UX Layer Backend UI Developer Data/ Services Web Server/ CMS raw page response Visitor’s Browser push changes UX assets Integration Code <head> <script> __config__ = { pageId: “homePage”, aerobaticAppOwner: "repo_owner", aerobaticAppRepo: "repo", }; </script> <script src="//cdn.aerobaticapp.com/cockpit.js"></script> </head> Aerobatic
- 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