Skip to content

Instantly share code, notes, and snippets.

@killercup
Forked from anonymous/index.html
Last active Jan 4, 2016
Embed
What would you like to do?
<!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>App Views ≙ 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 codorva</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 (notifications, etc.)</li>
</ul>
</div>
<div><ul>
<li>has potential to work seemlessly, even on a build server</li>
<li>is in fact a PITA beause of 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>
<div><p>thx</p>
</div>

Hybrid Apps

with Angular.js &co


Tech Stack

  • Angular.js & 3rd party modules
  • App Views ≙ 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 cordova
  • as link to web site

Cordova (aka. PhoneGap)

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

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

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


Conclusion


Works quite well. Would use again.


thx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment