/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type='text/css'>
body {
  font-family: 'Helvetica Neue';
  background:#000;
  background-size:100%;
  color:#fff;
  margin:0;
  padding:.5em;
}

h1, h2, h3, p {
  margin:0;
  font-weight:200;
}

p, li {
  margin-bottom: .5em;
}

code {
  font-family: "Menlo", monospace;
  letter-spacing: 0;
}

em, i {
  font-weight: 200;
}

strong, b {
  font-weight: 400;
}

mark {
  color: orange;
}

a {
  background: orange;
  color:#000;
  text-decoration:none;
}

img {
  width:100%;
}

div {
  cursor:pointer;
  cursor:hand;
  position:absolute;
  top:0;
  left:0;
}

ol, ul {
  list-style-type: none;
  margin: 0.5em 0;
  padding: 0;
}

ul ul, ul ol, ol ol, ol ul {
  margin-left: .5em;
}

ol li:before, ul li:before {
  color: orange;
}

ol {
  counter-reset: list -1;
}

ol li {
  list-style-type: none;
  counter-increment: list;
}

ol li:before {
  content: counter(list, binary) " ";
}

ul li:before {
  content: "- ";
}

/*

Sunburst-like style (c) Vasily Polovnyov <vast@whiteants.net>

*/

pre code {
  display: block; padding: 0.5em;
  background: #000; color: #f8f8f8;
}

pre .comment,
pre .template_comment,
pre .javadoc {
  color: #aeaeae;
  font-style: italic;
}

pre .keyword,
pre .ruby .function .keyword,
pre .request,
pre .status,
pre .nginx .title {
  color: #E28964;
}

pre .function .keyword,
pre .sub .keyword,
pre .method,
pre .list .title {
  color: #99CF50;
}

pre .string,
pre .tag .value,
pre .cdata,
pre .filter .argument,
pre .attr_selector,
pre .apache .cbracket,
pre .date,
pre .tex .command {
  color: #65B042;
}

pre .subst {
  color: #DAEFA3;
}

pre .regexp {
  color: #E9C062;
}

pre .title,
pre .sub .identifier,
pre .pi,
pre .tag,
pre .tag .keyword,
pre .decorator,
pre .shebang,
pre .prompt {
  color: #89BDFF;
}

pre .class .title,
pre .haskell .type,
pre .smalltalk .class,
pre .javadoctag,
pre .yardoctag,
pre .phpdoc {
  text-decoration: underline;
}

pre .symbol,
pre .ruby .symbol .string,
pre .number {
  color: #3387CC;
}

pre .params,
pre .variable,
pre .clojure .attribute {
  color: #3E87E3;
}

pre .css .tag,
pre .rules .property,
pre .pseudo,
pre .tex .special {
  color: #CDA869;
}

pre .css .class {
  color: #9B703F;
}

pre .rules .keyword {
  color: #C5AF75;
}

pre .rules .value {
  color: #CF6A4C;
}

pre .css .id {
  color: #8B98AB;
}

pre .annotation,
pre .apache .sqbracket,
pre .nginx .built_in {
  color: #9B859D;
}

pre .preprocessor {
  color: #8996A8;
}

pre .hexcolor,
pre .css .value .number {
  color: #DD7B3B;
}

pre .css .function {
  color: #DAD085;
}

pre .diff .header,
pre .chunk,
pre .tex .formula {
  background-color: #0E2231;
  color: #F8F8F8;
  font-style: italic;
}

pre .diff .change {
  background-color: #4A410D;
  color: #F8F8F8;
}

pre .addition {
  background-color: #253B22;
  color: #F8F8F8;
}

pre .deletion {
  background-color: #420E09;
  color: #F8F8F8;
}

pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

</style>
<script type='text/javascript'>
window.onload = function() {
    var s = document.getElementsByTagName('div'), cur = 0;
    if (!s) return;
    function go(n) {
        cur = n;
        var i = 1e3, e = s[n];
        for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
        e.style.display = 'inline-block';
        e.style.fontSize = i + 'px';
        if (e.firstChild.nodeName === 'IMG') {
            document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
            e.firstChild.style.display = 'none';
        } else {
            document.body.style.backgroundImage = '';
            document.body.style.backgroundColor = e.style.backgroundColor;
        }
        while (
            e.offsetWidth > window.innerWidth ||
            e.offsetHeight > window.innerHeight) {
            e.style.fontSize = (i -= 10) + 'px';
            if (i < 0) break;
        }
        e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
        if (window.location.hash !== n) window.location.hash = n;
        document.title = e.textContent || e.innerText;
    }
    document.onclick = function() {
        go(++cur % (s.length));
    };
    document.onkeydown = function(e) {
        (e.which === 39) && go(Math.min(s.length - 1, ++cur));
        (e.which === 37) && go(Math.max(0, --cur));
    };
    function parse_hash() {
        return Math.max(Math.min(
            s.length - 1,
            parseInt(window.location.hash.substring(1), 10)), 0);
    }
    if (window.location.hash) cur = parse_hash() || cur;
    window.onhashchange = function() {
        var c = parse_hash();
        if (c !== cur) go(c);
    };

    go(cur);
};
</script></head><body>
<div><h1>Hybrid Apps</h1>
<p>with Angular.js &amp;co</p>
</div>
<div><h2>Tech Stack</h2>
<ul>
<li>Angular.js &amp; 3rd party modules</li>
<li>Pages ≙ Routes</li>
<li>CustomStuff™</li>
</ul>
</div>
<div><p>Using <em>CustomStuff™</em> allows developers to quickly create projec-specific solutions</p>
</div>
<div><p><em>Angular modules</em> allow developers to skip writing the BoringStuff™</p>
<p>e.g. QR code generators</p>
</div>
<div><p>&quot;Modules&quot; are loosly coupled and can be re-used parts of earlier projects (see below)</p>
</div>
<div><h3>Not so good</h3>
<ul>
<li>Animations &amp; gestures</li>
</ul>
</div>
<div><h2>Case Study: Centbox</h2>
</div>
<div><p><img src="https://infrastructure.ruhmesmeile.com/jira/secure/attachment/11633/iOS-Simulator_-_iPhone_Retina__4-inch____iOS_7.0.3__11B508_.png" alt=""></p>
</div>
<div><p>Custom SCSS Framework with styles for iOS7 and Android 4</p>
</div>
<div><p>Data via JSON API and custom Angular.js Service</p>
</div>
<div><h3>Stuff we can recycle</h3>
<ul>
<li>The SCSS framework</li>
<li>Notification helper (works with Cordova)</li>
<li>The EpicModel helper managing the API data</li>
</ul>
</div>
<div><p>(these are all really well documented and just a copy&amp;pasta away)</p>
</div>
<div><h2>Deploy</h2>
</div>
<div><ul>
<li>as app using codova</li>
<li>as link to web site</li>
</ul>
</div>
<div><h3>Cordova (aka. PhoneGap)</h3>
<ul>
<li>bundles standalone web app into native app</li>
<li>offers plugins to access native device services (notifactions, etc.)</li>
</ul>
</div>
<div><ul>
<li>has to potential to seemlessly, even on a build server</li>
<li>is in fact a PITA beause auf SDK installs and certificates</li>
</ul>
</div>
<div><p>build.phonegap.com offers cordova build as-a-service</p>
</div>
<div><h2>Conclusion</h2>
</div>
<div><p>Works quite well. Would use again.</p>
</div>

## slides.md

      
    Raw
  

              slides.md
            
          
    Hybrid Apps

with Angular.js &co

Tech Stack


Angular.js & 3rd party modules
Pages ≙ Routes
CustomStuff™


Using CustomStuff™ allows developers to quickly create projec-specific solutions

Angular modules allow developers to skip writing the BoringStuff™
e.g. QR code generators

"Modules" are loosly coupled and can be re-used parts of earlier projects (see below)

Not so good


Animations & gestures


Case Study: Centbox


Custom SCSS Framework with styles for iOS7 and Android 4

Data via JSON API and custom Angular.js Service

Stuff we can recycle


The SCSS framework
Notification helper (works with Cordova)
The EpicModel helper managing the API data


(these are all really well documented and just a copy&pasta away)

Deploy


as app using codova
as link to web site


Cordova (aka. PhoneGap)


bundles standalone web app into native app
offers plugins to access native device services (notifactions, etc.)


has to potential to seemlessly, even on a build server
is in fact a PITA beause auf SDK installs and certificates


build.phonegap.com offers cordova build as-a-service

Conclusion


Works quite well. Would use again.
	<!DOCTYPE html>
	<html>
	<head>
	<title>Foo</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<style type='text/css'>
	body {
	font-family: 'Helvetica Neue';
	background:#000;
	background-size:100%;
	color:#fff;
	margin:0;
	padding:.5em;
	}

	h1, h2, h3, p {
	margin:0;
	font-weight:200;
	}

	p, li {
	margin-bottom: .5em;
	}

	code {
	font-family: "Menlo", monospace;
	letter-spacing: 0;
	}

	em, i {
	font-weight: 200;
	}

	strong, b {
	font-weight: 400;
	}

	mark {
	color: orange;
	}

	a {
	background: orange;
	color:#000;
	text-decoration:none;
	}

	img {
	width:100%;
	}

	div {
	cursor:pointer;
	cursor:hand;
	position:absolute;
	top:0;
	left:0;
	}

	ol, ul {
	list-style-type: none;
	margin: 0.5em 0;
	padding: 0;
	}

	ul ul, ul ol, ol ol, ol ul {
	margin-left: .5em;
	}

	ol li:before, ul li:before {
	color: orange;
	}

	ol {
	counter-reset: list -1;
	}

	ol li {
	list-style-type: none;
	counter-increment: list;
	}

	ol li:before {
	content: counter(list, binary) " ";
	}

	ul li:before {
	content: "- ";
	}

	/*

	Sunburst-like style (c) Vasily Polovnyov <vast@whiteants.net>

	*/

	pre code {
	display: block; padding: 0.5em;
	background: #000; color: #f8f8f8;
	}

	pre .comment,
	pre .template_comment,
	pre .javadoc {
	color: #aeaeae;
	font-style: italic;
	}

	pre .keyword,
	pre .ruby .function .keyword,
	pre .request,
	pre .status,
	pre .nginx .title {
	color: #E28964;
	}

	pre .function .keyword,
	pre .sub .keyword,
	pre .method,
	pre .list .title {
	color: #99CF50;
	}

	pre .string,
	pre .tag .value,
	pre .cdata,
	pre .filter .argument,
	pre .attr_selector,
	pre .apache .cbracket,
	pre .date,
	pre .tex .command {
	color: #65B042;
	}

	pre .subst {
	color: #DAEFA3;
	}

	pre .regexp {
	color: #E9C062;
	}

	pre .title,
	pre .sub .identifier,
	pre .pi,
	pre .tag,
	pre .tag .keyword,
	pre .decorator,
	pre .shebang,
	pre .prompt {
	color: #89BDFF;
	}

	pre .class .title,
	pre .haskell .type,
	pre .smalltalk .class,
	pre .javadoctag,
	pre .yardoctag,
	pre .phpdoc {
	text-decoration: underline;
	}

	pre .symbol,
	pre .ruby .symbol .string,
	pre .number {
	color: #3387CC;
	}

	pre .params,
	pre .variable,
	pre .clojure .attribute {
	color: #3E87E3;
	}

	pre .css .tag,
	pre .rules .property,
	pre .pseudo,
	pre .tex .special {
	color: #CDA869;
	}

	pre .css .class {
	color: #9B703F;
	}

	pre .rules .keyword {
	color: #C5AF75;
	}

	pre .rules .value {
	color: #CF6A4C;
	}

	pre .css .id {
	color: #8B98AB;
	}

	pre .annotation,
	pre .apache .sqbracket,
	pre .nginx .built_in {
	color: #9B859D;
	}

	pre .preprocessor {
	color: #8996A8;
	}

	pre .hexcolor,
	pre .css .value .number {
	color: #DD7B3B;
	}

	pre .css .function {
	color: #DAD085;
	}

	pre .diff .header,
	pre .chunk,
	pre .tex .formula {
	background-color: #0E2231;
	color: #F8F8F8;
	font-style: italic;
	}

	pre .diff .change {
	background-color: #4A410D;
	color: #F8F8F8;
	}

	pre .addition {
	background-color: #253B22;
	color: #F8F8F8;
	}

	pre .deletion {
	background-color: #420E09;
	color: #F8F8F8;
	}

	pre .coffeescript .javascript,
	pre .javascript .xml,
	pre .tex .formula,
	pre .xml .javascript,
	pre .xml .vbscript,
	pre .xml .css,
	pre .xml .cdata {
	opacity: 0.5;
	}

	</style>
	<script type='text/javascript'>
	window.onload = function() {
	var s = document.getElementsByTagName('div'), cur = 0;
	if (!s) return;
	function go(n) {
	cur = n;
	var i = 1e3, e = s[n];
	for (var k = 0; k < s.length; k++) s[k].style.display = 'none';
	e.style.display = 'inline-block';
	e.style.fontSize = i + 'px';
	if (e.firstChild.nodeName === 'IMG') {
	document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')';
	e.firstChild.style.display = 'none';
	} else {
	document.body.style.backgroundImage = '';
	document.body.style.backgroundColor = e.style.backgroundColor;
	}
	while (
	e.offsetWidth > window.innerWidth \|\|
	e.offsetHeight > window.innerHeight) {
	e.style.fontSize = (i -= 10) + 'px';
	if (i < 0) break;
	}
	e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px';
	if (window.location.hash !== n) window.location.hash = n;
	document.title = e.textContent \|\| e.innerText;
	}
	document.onclick = function() {
	go(++cur % (s.length));
	};
	document.onkeydown = function(e) {
	(e.which === 39) && go(Math.min(s.length - 1, ++cur));
	(e.which === 37) && go(Math.max(0, --cur));
	};
	function parse_hash() {
	return Math.max(Math.min(
	s.length - 1,
	parseInt(window.location.hash.substring(1), 10)), 0);
	}
	if (window.location.hash) cur = parse_hash() \|\| cur;
	window.onhashchange = function() {
	var c = parse_hash();
	if (c !== cur) go(c);
	};

	go(cur);
	};
	</script></head><body>
	<div><h1>Hybrid Apps</h1>
	<p>with Angular.js &co</p>
	</div>
	<div><h2>Tech Stack</h2>
	<ul>
	<li>Angular.js & 3rd party modules</li>
	<li>Pages ≙ Routes</li>
	<li>CustomStuff™</li>
	</ul>
	</div>
	<div><p>Using <em>CustomStuff™</em> allows developers to quickly create projec-specific solutions</p>
	</div>
	<div><p><em>Angular modules</em> allow developers to skip writing the BoringStuff™</p>
	<p>e.g. QR code generators</p>
	</div>
	<div><p>"Modules" are loosly coupled and can be re-used parts of earlier projects (see below)</p>
	</div>
	<div><h3>Not so good</h3>
	<ul>
	<li>Animations & gestures</li>
	</ul>
	</div>
	<div><h2>Case Study: Centbox</h2>
	</div>
	<div><p><img src="https://infrastructure.ruhmesmeile.com/jira/secure/attachment/11633/iOS-Simulator_-_iPhone_Retina__4-inch____iOS_7.0.3__11B508_.png" alt=""></p>
	</div>
	<div><p>Custom SCSS Framework with styles for iOS7 and Android 4</p>
	</div>
	<div><p>Data via JSON API and custom Angular.js Service</p>
	</div>
	<div><h3>Stuff we can recycle</h3>
	<ul>
	<li>The SCSS framework</li>
	<li>Notification helper (works with Cordova)</li>
	<li>The EpicModel helper managing the API data</li>
	</ul>
	</div>
	<div><p>(these are all really well documented and just a copy&pasta away)</p>
	</div>
	<div><h2>Deploy</h2>
	</div>
	<div><ul>
	<li>as app using codova</li>
	<li>as link to web site</li>
	</ul>
	</div>
	<div><h3>Cordova (aka. PhoneGap)</h3>
	<ul>
	<li>bundles standalone web app into native app</li>
	<li>offers plugins to access native device services (notifactions, etc.)</li>
	</ul>
	</div>
	<div><ul>
	<li>has to potential to seemlessly, even on a build server</li>
	<li>is in fact a PITA beause auf SDK installs and certificates</li>
	</ul>
	</div>
	<div><p>build.phonegap.com offers cordova build as-a-service</p>
	</div>
	<div><h2>Conclusion</h2>
	</div>
	<div><p>Works quite well. Would use again.</p>
	</div>