Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

executable file 705 lines (656 sloc) 32.124 kB
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="css/prettify.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="http://use.typekit.com/klk4dac.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body onload="prettyPrint()">
<div id="impress" >
<!-- ########### -->
<!-- ## INTRO ## -->
<!-- ########### -->
<section id="intro-1" class="step cube cube-1 intro intro-1 vcentered-box" data-x="0" data-y="50">
<div class="wrapper blue-triangle-banner">
<div class="inner-bg">
<h1 class="title serif">Building APIs</h1>
<h2 class="signature">Lalit Kapoor</h2>
<h3 class="credentials">CTO, Goodybag</h3>
<div class="icon-circle-arrow-right arrow"></div>
</div>
</div>
</section>
<section id="intro-2" class="step cube cube-2 intro intro-2 vcentered-box gb-bg" data-x="300" data-y="50" data-z="-300" data-perspective="100" data-rotate-y="90">
<div class="wrapper blue-triangle-banner">
<div class="inner-bg">
<h1 class="title serif">Goodybag</h1>
<p class="sub-text">We're a neato tech-startup in<br /><span class="script atx">Austin, TX</span></p>
<div class="icon-circle-arrow-down arrow"></div>
</div>
</div>
</section>
<section id="intro-3" class="step cube cube-3 intro intro-3 gb-bg" data-x="0" data-y="350" data-z="-300" data-perspective="1000" data-rotate-x="-90" data-rotate-z="90">
<div class="page">
<div class="content">
<div class="title-wrapper">
<h1 class="title serif">Goodybag</h1>
<p class="sub-title">We pretty much just write <code>{code}</code> all day.</p>
</div>
<p><b>We of course wrote the<br /><em>Goodybag API</em> - which powers:</b></p>
<ul>
<li>Our Loyalty Platform</li>
<li>Our Consumer and Business web interface</li>
<li>Our Mobile Application</li>
<li>Tons of other stuff too</li>
</ul>
</div>
</div>
</section>
<!-- #################### -->
<!-- ## WHAT ARE APIS? ## -->
<!-- #################### -->
<section id="what-are-apis-1" class="step what-are-apis what-are-apis-1" data-x="0" data-y="3000" data-z="-2000" data-perspective="1000" data-rotate-z="90">
<div class="page">
<div class="content">
<div class="title-wrapper">
<h1 class="title serif">
<div class="what">What</div>
are <span class="apis">API's</span><span class="question-mark">?</span>
</h1>
<div class="corner-dots"></div>
</div>
<p>Hold on to your <strong class="script blue beers"><em>beers</em></strong>. We're about to find out.</p>
<div class="next-direction">
<span class="icon-circle-arrow-down"></span>
</div>
</div>
</div>
</section>
<section id="what-are-apis-2" class="step what-are-apis what-are-apis-2" data-x="-1000" data-y="3000" data-z="-2000" data-perspective="1000" data-rotate-z="0">
<div class="page">
<div class="content with-topic">
<h2 class="topic">What are APIs?</h2>
<div class="title-wrapper">
<h1 class="title serif">APIs are the <strong class="blue">exposed</strong> pieces of functionality within a given system</h1>
</div>
<ul>
<li>Each function performs a single task</li>
<li>Set of functionality enabling products and services</li>
<li>For example, Twitter has an awesome API</li>
</ul>
</div>
</div>
</section>
<section id="what-are-apis-3" class="step what-are-apis what-are-apis-3" data-x="-800" data-y="4200" data-z="-2000" data-perspective="1000" data-rotate-z="-90">
<div class="page">
<div class="content with-topic">
<h2 class="topic">What are APIs?</h2>
<div class="title-wrapper">
<h1 class="title serif">Why do I need an API?</h1>
</div>
<ul>
<li>Streamline functionality across multiple products (e.g. Mobile App, Admin Panel, Analytics Dashboard, etc.)</li>
<li>Separate back-end logic from the front-end interface</li>
<li>Consolidate a system's critical functional pieces</li>
<li>Modular application design</li>
<li>Makes <em>Unit Testing a breeze</em></li>
</ul>
</div>
</div>
</section>
<section id="what-are-apis-4" class="step what-are-apis what-are-apis-3" data-x="-1600" data-y="4200" data-z="-2000" data-perspective="1000" data-rotate-z="-90">
<div class="page">
<div class="content with-topic">
<h2 class="topic">What are APIs?</h2>
<div class="title-wrapper">
<h1 class="title serif">Enough, with the fancy talk, Lalit, let's dig in.</h1>
</div>
</div>
</div>
</section>
<!-- ################## -->
<!-- ## HOW TO BUILD ## -->
<!-- ################## -->
<section id="how-to-build-1" class="step how-to-build how-to-build-1" data-x="-600" data-y="3000" data-z="-8000" data-perspective="1000" data-rotate-z="90">
<div class="page">
<div class="content">
<div class="title-wrapper">
<h1 class="title serif">How to Build an API</h1>
<h2 class="sub-title">...Like a Boss</h2>
</div>
<div class="inline-columns">
<div class="column">
<ul>
<li><em>Lots</em> of planning</li>
<li>And more planning</li>
<li>And then plan some more</li>
</ul>
</div>
<div class="column">
<img src="img/like-a-boss.gif" />
</div>
</div>
</div>
</div>
</section>
<section id="how-to-build-2" class="step how-to-build how-to-build-2" data-x="-1800" data-y="3000" data-z="-8000" data-perspective="1000" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">How to Buid an API</h2>
<div class="title-wrapper">
<h1 class="title serif">Determine which system functions to expose</h1>
</div>
<ul>
<li>Expose <em>only what is necessary</em></li>
<li>Be as light-weight as possible (minimalism is the best way to start)</li>
</ul>
</div>
</div>
</section>
<section id="how-to-build-3" class="step how-to-build how-to-build-3" data-x="-1800" data-y="4000" data-z="-8000" data-perspective="1000" data-rotate-z="270">
<div class="page">
<div class="content with-topic">
<h2 class="topic">How to Buid an API</h2>
<div class="title-wrapper">
<h1 class="title serif">Determine how you will expose your API</h1>
<h2 class="sub-title">Is it important for your API to work on the web?</h2>
</div>
<ul>
<li>Good API's are the ones that are easy to work with</li>
<li>Serve up just the data, no extraneous HTML markup</li>
<li>Use open standards like <b class="blue">HTTP and REST</b></li>
<li>Use well-known formats like <b class="blue">JSON and XML</b> to exchange information</li>
</ul>
</div>
</div>
</section>
<section id="how-to-build-4" class="step how-to-build how-to-build-4" data-x="-800" data-y="4000" data-z="-8000" data-perspective="1000" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">How to Buid an API</h2>
<div class="title-wrapper">
<h1 class="title serif">Determine which technologies you will use</h1>
</div>
<p>At Goodybag, we chose <b class="blue">Node.js</b> and <b class="blue">MongoDb</b></p>
</div>
</div>
</section>
<!-- ###################### -->
<!-- ## WHY DID GOODYBAG ## -->
<!-- ###################### -->
<section id="why-technologies-1" class="step why-technologies why-technologies-1" data-x="-1800" data-y="4000" data-z="-8000" data-perspective="1000" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<div class="title-wrapper">
<h1 class="title serif">Why did Goodybag choose <b class="blue">Node.js</b> and <b class="blue">MongoDb</b> to build their API?</h1>
</div>
<div class="logo-container">
<img class="logo" src="img/node-logo.png" />
<img class="logo" src="img/mongodb-logo.png" />
</div>
</div>
</div>
</section>
<section id="why-technologies-2" class="step why-technologies why-technologies-2" data-x="3000" data-y="3000">
<div class="page">
<div class="content with-topic">
<h2 class="topic">node.js and mongo</h2>
<div class="title-wrapper">
<h1 class="title serif">Why Node.js</h1>
<h2 class="sub-title">Because Javascript is flippin' awesome</h2>
</div>
<p>Node is a V8 powered Javascript framework designed for writing <b class="blue">event-driven</b> and <b class="blue">network based</b> applications.</p>
<p>V8 is just Google's Javascript engine.</p>
</div>
</div>
</section>
<section id="why-technologies-3" class="step why-technologies why-technologies-3" data-x="2000" data-y="3000" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<h2 class="topic">node.js and mongo</h2>
<div class="title-wrapper">
<h1 class="title serif">Why Node.js</h1>
<h2 class="sub-title">Because Javascript is flippin' awesome</h2>
</div>
<ul>
<li>It's very light-weight</li>
<li>Our applications are mostly I/O bound</li>
<li>We do a lot of network communication</li>
<li>Node's event loop is great for <em>1000s</em> of network connections on a single machine</li>
<li>Fast growing community</li>
<li>Code re-usability</li>
</ul>
</div>
</div>
</section>
<section id="why-technologies-4" class="step why-technologies why-technologies-4" data-x="2800" data-y="3000" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">node.js and mongo</h2>
<div class="title-wrapper">
<h1 class="title serif">It's not all peaches and cream</h1>
<h2 class="sub-title">There are some pain points when using node</h2>
</div>
<ul>
<li>Change to an asynchronous work-flow</li>
<li>Callback Hell - <em>we use async.js to assist with control-flow</em></li>
<li>Exceptions can get messy</li>
<li>CPU intensive tasks will hold up everyone!</li>
</ul>
</div>
</div>
</section>
<section id="why-technologies-5" class="step why-technologies why-technologies-5" data-x="2800" data-y="3000" data-z="500" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">node.js and mongo</h2>
<div class="title-wrapper">
<h1 class="title serif">Why MongoDb?</h1>
<h2 class="sub-title">WHY DID YOU NOT USE MYSQL?!</h2>
</div>
<ul>
<li>Schema-less designs means we can be flexible with our data model as we iterate quickly and stabilize</li>
<li>Nested documents</li>
<li>BSON/JSON</li>
<li>Decent Querying interface</li>
</ul>
</div>
</div>
</section>
<section id="why-technologies-6" class="step why-technologies why-technologies-6" data-x="2800" data-y="2000" data-z="500" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<h2 class="topic">node.js and mongo</h2>
<div class="title-wrapper">
<h1 class="title serif">Challenges with MongoDb</h1>
</div>
<ul>
<li>Lack of transactions - <em>we did some custom engineering to resolve those issues</em></li>
<li>Cannot run operations on data during an update</li>
<li>Cannot easily retrieve specific items from an array in a document - <em>some solutions might exist in release v2.2 - aggregation framework, look at v2.1</em></li>
</ul>
</div>
</div>
</section>
<!-- #################### -->
<!-- ## TWITTER THINGY ## -->
<!-- #################### -->
<section id="twitter-thingy-1" class="step twitter-thingy twitter-thingy-1" data-x="2800" data-y="2000" data-z="-6000">
<div class="page">
<div class="content with-topic">
<div class="title-wrapper">
<h1 class="title serif">Let's build a miniature <div class="platform blue">Twitter Platform <div class="icon-twitter"></div></div></h1>
</div>
</div>
</div>
</section>
<section id="twitter-thingy-2" class="step twitter-thingy twitter-thingy-2" data-x="2800" data-y="2000" data-z="-5500">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">Identify the components of our system</h1>
</div>
<ul>
<li>Users</li>
<li>Tweets (140 character status messages)</li>
<li>Streams (user's own tweets + the tweets of people the user follows)</li>
</ul>
</div>
</div>
</section>
<section id="twitter-thingy-3" class="step twitter-thingy twitter-thingy-3" data-x="2800" data-y="1200" data-z="-5500" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">What functionality do we want to support</h1>
</div>
<ul>
<li><b class="blue">[public]</b> We want people to be able to register and create unique identities</li>
<li><b class="blue">[public]</b> We want users to login before they can do anything with their own accounts</li>
<li><b class="blue">[public]</b> We want users to be able to view information about other users</li>
<li><b class="blue">[public, auth]</b> We want users to be able to follow other users</li>
</ul>
</div>
</div>
</section>
<section id="twitter-thingy-4" class="step twitter-thingy twitter-thingy-4" data-x="2800" data-y="1200" data-z="-5000" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">What functionality do we want to support continued</h1>
</div>
<ul>
<li><b class="blue">[public, auth]</b> We want users to be able to post 140 character status messages that are visible to the public</li>
<li><b class="blue">[public]</b> We want to be able to retrieve single tweets</li>
<li><b class="blue">[private]</b> We want tweets published into our follower’s streams</li>
<li><b class="blue">[public, auth]</b> We want to be able to view our own streams, but no one else's</li>
</ul>
</div>
</div>
</section>
<section id="twitter-thingy-5" class="step twitter-thingy twitter-thingy-5" data-x="1800" data-y="1200" data-z="-5000" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">Determine how to expose the public functions</h1>
</div>
<p>We want to consume <span class="blue">JSON</span> requests and return data in a <span class="blue">JSON</span> format as well</p>
</div>
</div>
</section>
<section id="twitter-thingy-6" class="step twitter-thingy twitter-thingy-6" data-x="1800" data-y="2200" data-z="-5000" data-rotate-z="270">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Functionality</h2>
<div class="title-wrapper">
<h1 class="title serif">Determine how to expose the public functions</h1>
</div>
<h2 class="blue">Users</h2>
<ul>
<li><code>register (alias, email, password, name, url)</code><br /><em>returns successful or error c</em>ode</li>
<li><code>login (alias, password)</code><br /><em>returns success or error code</em></li>
<li><code>get (alias)</code><br /><em>returns information about the user (in this case name, email addr</em>ess, list of follower’s aliases) or an error code</li>
<li><code>follow (alias, followee_alias)</code><br /><em>returns successful or error code</em></li>
</ul>
</div>
</div>
</section>
<section id="twitter-thingy-7" class="step twitter-thingy twitter-thingy-7" data-x="1800" data-y="2200" data-z="-4500" data-rotate-z="270">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Functionality</h2>
<div class="title-wrapper">
<h1 class="title serif">Determine how to expose the public functions</h1>
</div>
<h2 class="blue">Tweets</h2>
<ul>
<li><code>get (id)</code><br /><em>returns a single tweet message or error code</em></li>
<li><code>list (alias)</code><br /><em>returns a list of tweets for a specific user sorted by </em>most recent first or an error code</li>
<li><code>add (alias, message)</code><br /><em>returns successful or error code</em></li>
</ul>
</div>
</div>
</section>
<section id="twitter-thingy-8" class="step twitter-thingy twitter-thingy-8" data-x="1800" data-y="2200" data-z="-4000" data-rotate-z="270">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Functionality</h2>
<div class="title-wrapper">
<h1 class="title serif">Determine how to expose the public functions</h1>
</div>
<h2 class="blue">Streams</h2>
<ul>
<li><code>list (alias)</code><br /><em>returns a list of tweets for the alias and the users that alias follows sorted by most recent first or an error code</em></li>
<li><code>addTweet (alias, message)</code><br /><em>add a tweet message to the specified user’s stream</em></li>
</ul>
</div>
</div>
</section>
<section id="twitter-thingy-9" class="step twitter-thingy twitter-thingy-9" data-x="2800" data-y="2200" data-z="-4000" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">Determining the Routes</h1>
</div>
<ul>
<li><code>[POST]</code> - api.mini-twitter.com/v1/users/register</li>
<li><code>[POST]</code> - api.mini-twitter.com/v1/users/login</li>
<li><code>[GET]</code> - api.mini-twitter.com/v1/users/:alias</li>
<li><code>[POST]</code> - api.mini-twitter.com/v1/relationships/follow</li>
<li><code>[POST]</code> - api.mini-twitter.com/v1/tweets</li>
<li><code>[GET]</code> - api.mini-twitter.com/v1/tweets{?alias=:alias}</li>
<li><code>[GET]</code> - api.mini-twitter.com/v1/tweets/:id</li>
<li><code>[GET]</code> - api.mini-twitter.com/v1/tweets/stream</li>
</ul>
</div>
</div>
</section>
<section id="twitter-thingy-10" class="step twitter-thingy twitter-thingy-10" data-x="2800" data-y="1200" data-z="-4000" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">Setup the initial app</h1>
</div>
<pre class="prettyprint linenums lang-js">
var express = require('express')
, mongojs = require('mongojs')
, sanitize = require('./middleware/sanitize')
, users = require('./routes/users')
, tweets = require('./routes/tweets')
, streams = require('./routes/streams')
, app = express.createServer();
mongojs.connect(process.env['MONGO_URL']);
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.session({ secret: 'secret'}));
app.use(express.methodOverride());
</pre>
</div>
</div>
</section>
<section id="twitter-thingy-11" class="step twitter-thingy twitter-thingy-11" data-x="2800" data-y="200" data-z="-4000" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">Expose the Routes</h1>
</div>
<pre class="prettyprint linenums lang-js">
app.post('/v1/users/register', sanitize, users.register);
app.post('/v1/users/login', sanitize, users.login);
app.get('/v1/users/:alias', sanitize, users.get);
app.post('/v1/relationships/follow', auth.check, sanitize, users.follow);
app.post('/v1/tweets', auth.check, sanitize, tweets.add);
app.get('/v1/tweets', sanitize, tweets.list);
app.get('/v1/tweets/:id', sanitize, tweets.get);
app.get('/v1/tweets/stream', auth.check, sanitize, streams.list);
app.listen(parseInt(process.env['PORT_WWW']));
</pre>
</div>
</div>
</section>
<section id="twitter-thingy-12" class="step twitter-thingy twitter-thingy-12" data-x="3800" data-y="1200" data-z="-4000" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">Handle the Routes</h1>
</div>
<h2 class="blue">users.js</h2>
<pre class="prettyprint linenums lang-js">
// users.js
var api = require('./api')
, routes = module.exports;
routes.register = function (req, res) {
api.users.register(req.body, function(err)){
if (err) {
res.send(err.message, 500);
return;
}
res.send(200);
}
}
</pre>
</div>
</div>
</section>
<section id="twitter-thingy-13" class="step twitter-thingy twitter-thingy-13" data-x="3800" data-y="1200" data-z="-3500" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">Handle the Routes</h1>
</div>
<h2 class="blue">api/users.js</h2>
<pre class="prettyprint linenums lang-js">
// api/users.js
...
op.add = function (data, callback) {
var user = {
email: data.email
, password: data.password
, alias: data.alias
, name: data.name
};
db.users.schema.validate.add(user), function(err){
if (err) callback(errs.SCHEMA_VALIDATION_ERROR);
else db.users.collection.insert(, { safe: true }, callback || noop);
});
};
...
</pre>
</div>
</div>
</section>
<section id="twitter-thingy-14" class="step twitter-thingy twitter-thingy-14" data-x="3800" data-y="2200" data-z="-3500" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<h2 class="topic">Twitter Platform</h2>
<div class="title-wrapper">
<h1 class="title serif">Don't forget</h1>
</div>
<ul>
<li>Build clients to your APIs</li>
<li>Write unit tests</li>
<li>Thorough documentation means high adoptability</li>
</ul>
</div>
</div>
</section>
<!-- ############### -->
<!-- ## PLATFORMS ## -->
<!-- ############### -->
<section id="platforms-1" class="step platforms platforms-1" data-x="2800" data-y="2000">
<div class="page">
<div class="content with-topic">
<div class="title-wrapper">
<h1 class="title serif">Platforms</h1>
<h2 class="sub-title">And that's it - You've built an API</h2>
</div>
<p>You've built a platform for succinct communication.</p>
<p>Now you can:</p>
<ul>
<li>Built web or mobile apps</li>
<li>Completely separate products that utilize your platform</li>
</ul>
</div>
</div>
</section>
<section id="platforms-2" class="step platforms platforms-2" data-x="2800" data-y="2000" data-z="500">
<div class="page">
<div class="content with-topic">
<div class="title-wrapper">
<h1 class="title serif">Platforms</h1>
<h2 class="sub-title">Building a platform is no easy task - we only touched on a few components</h2>
</div>
<p>Each system will have its own set of challenges. It's important that you identify them and address them head on.</p>
</div>
</div>
</section>
<section id="platforms-3" class="step platforms platforms-3" data-x="1800" data-y="2000" data-z="500" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<div class="title-wrapper">
<h1 class="title serif">Platforms</h1>
<h2 class="sub-title">Our platform was simple, but the real world is much crazier</h2>
</div>
<div class="inline-columns">
<div class="column" style="width: 68%; margin-right: 2%">
<p>Twitter has <b class="blue">TONS</b> of users. So when <em>Justin Bieber</em> tweets, <b>All hell breaks loose</b>.</p>
<p>Twitter has obviously optimized for the <em>Bieber Case</em>.</p>
</div>
<div class="column" style="width: 30%">
<img src="img/bieber.jpg" style="max-width: 100%" />
</div>
</div>
</div>
</div>
</section>
<section id="platforms-4" class="step platforms platforms-4" data-x="2800" data-y="2800" data-z="-500">
<div class="page">
<div class="content with-topic">
<div class="title-wrapper">
<h1 class="title serif">The Goodybag Platform</h1>
<h2 class="sub-title">Goodybag our platform faced some of the following challenges</h2>
</div>
<ul>
<li>Financial matters – <em>consistency, reliability, and availability</em></li>
<li>Low latency responses</li>
<li>And most important to us is security and privacy</li>
</ul>
<p>Keeping these things in mind we thought hard about our technologies and setting up our architecture.</p>
</div>
</div>
</section>
<section id="platforms-5" class="step platforms platforms-5" data-x="2800" data-y="2800" data-z="1000">
<div class="page">
<div class="content with-topic">
<div class="gb-cards">
<img src="img/gb-cards.png" />
</div>
<div class="title-wrapper">
<h1 class="title serif">Let's see a TapIn at <div class="goodybag blue">Goodybag</div></h1>
</div>
</div>
</div>
</section>
<img id="platforms-6" style="width: 800px; box-shadow: 0 0 35px rgba(0,0,0, 0.4)" class="step platforms" src="img/tapin-diagram.png" data-x="2800" data-y="2800" data-z="1500" />
<img id="platforms-7" style="width: 800px; box-shadow: 0 0 35px rgba(0,0,0, 0.4)" class="step platforms" src="img/platform-diagram.png" data-x="2800" data-y="2800" data-z="1500" />
<img id="platforms-8" style="width: 800px; box-shadow: 0 0 35px rgba(0,0,0, 0.4)" class="step platforms" src="img/goodybag-diagram.png" data-x="2800" data-y="2800" data-z="1500" />
<section id="platforms-9" class="step platforms platforms-9" data-x="2800" data-y="3600" data-z="1000" data-rotate-z="90">
<div class="page">
<div class="content with-topic">
<div class="title-wrapper">
<h1 class="title serif">Adding Value</h1>
<h2 class="sub-title">Every one of our products uses our API</h2>
</div>
<ul>
<li>Consumer Site - SPA</li>
<li>Business Site - SPA</li>
<li>Consumer Mobile App (Native/Web) – iOS/Android/Web</li>
<li>Business Mobile App (Native) – iOS/Android/Web</li>
<li>Tablet App (Native) – Java (Where actual redemption occurs)</li>
<li>Admin Interface – SPA</li>
<li>Analytics Dashboard - SPA</li>
</ul>
</div>
</div>
</section>
<section id="platforms-10" class="step platforms platforms-10" data-x="2800" data-y="2600" data-z="1000" data-rotate-z="180">
<div class="page">
<div class="content with-topic">
<div class="title-wrapper">
<h1 class="title serif">So, let's recap</h1>
<h2 class="sub-title">Why you should build APIs <em>almost</em> all of your apps</h2>
</div>
<ul>
<li>You don’t look like a <span class="blue">n00b</span> – <em>Just Kidding</em></li>
<li>Awesome segregation of code</li>
<li>It’s all about enabling others to doing things</li>
<li>Enables you to hire more than just full stack engineers</li>
<li>Easily integrate with other services</li>
<li>Enables 3rd party developers</li>
<li><em>Even Obama</em> is requiring all Federal Agencies to build APIs</li>
</ul>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.