fosdem2014/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5   <meta name="Author" content="KaiRo - Robert Kaiser">
   6   <title>Developing Webapps for Firefox OS</title>
   7   <link rel="stylesheet" type="text/css" href="slides.css">
   8   <script type="text/javascript" src="slides.js"></script>
   9   <link rel="contents" href="#index" title="Overview">
  10   <link rel="index" id="link-toc" href="#toc" title="Contents">
  11   <link rel="start" id="link-start" href="#index" title="Start">
  12 </head>
  13 <body onload="docLoaded();">
  14 <header id="header"><div id="header-text">Web App Dev</div>
  15   <div id="subheader-text"></div>
  16   <a id="headerlogo" href="#index" title="Startseite">Mozilla</a>
  17 </header>
  18 <nav id="slidenav">
  19   <a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
  20   <a href="#index" id="nav-start" accesskey="s">start</a> ||
  21   <a href="#" id="nav-prev" accesskey="p" hidden>&lt; back</a>
  22   <span id="nav-prev-nolink" class="nolink">&lt; back</span> |
  23   <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd &gt;</a>
  24   <span id="nav-next-nolink" class="nolink">fwd &gt;</span>
  25 </nav>
  26
  27 <article id="toc" title="Table of Contents">
  28 <h1>Table of Contents</h1>
  29 <h2>Developing Webapps for Firefox OS</h2>
  30
  31 <div class="captionedbox">
  32 <p class="captionedbox-caption">The following slides are available in this presentation:</p>
  33 <div class="captionedbox-content">
  34 <ul id="toc-list">
  35 </ul>
  36 </article>
  37
  38 <article id="index" title="Start Page">
  39 <h1>Developing Webapps for Firefox OS</h1>
  40 <h2>The Efficient &amp; Simplistic Approach</h2>
  41
  42 <div class="simplebox">
  43 <mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
  44 "KaiRo" &lt;kairo@kairo.at&gt;
  45 <br><small>Project Manager, Mozilla QA</small>
  46 </div>
  47
  48 <div class="simplebox">
  49 <mark><a href="http://sayak.in/">Sayak Sarkar</a></mark>
  50 <br><small>Mozilla Reps Mentor, India</small>
  51 </div>
  52
  53 <div class="captionedbox">
  54 <p class="captionedbox-caption">Slides:
  55   <a href="http://slides.kairo.at/fosdem2014/">http://slides.kairo.at/fosdem2014/</a></p>
  56 <div class="captionedbox-content small">
  57 <ul class="small">
  58   <li>Created for
  59     <a href="http://fosdem.org/2014/schedule/track/mozilla/">Mozilla
  60     Developer Room</a> at <a href="http://www.fosdem.org/">FOSDEM 2014</a> in
  61     Brussels.</li>
  62   <li>Written in HTML 5 with CSS 3 and JavaScript.</li>
  63   <li>Navigation via links on all slides, via access keys
  64    (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
  65   <li><a href="#toc">Contents</a></li>
  66   <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
  67         alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
  68         src="cc-by-sa-80x15.png"></a> 01/2014 Robert Kaiser &amp; Sayak Sarkar -
  69     "Mozilla", "Firefox" and their logos are
  70     <a href="http://www.mozilla.org/foundation/trademarks/list.html">trademarks
  71     of the Mozilla Foundation</a>.</li>
  72 </ul>
  73 </div>
  74 </div>
  75 </article>
  76
  77 <article id="webapp" title="Web Apps">
  78 <h1>What is a Web App?</h1>
  79
  80 <div class="simplebox">
  81 <ul>
  82 <li>hosted / packaged</li>
  83 <li>"web site" (HTML/CSS/JS) + app manifest</li>
  84 </ul>
  85 </div>
  86 </article>
  87
  88 <article id="manifest" title="App Manifest">
  89 <h1>App Manifest</h1>
  90
  91 <div class="simplebox">
  92 <pre class="small"><code>{
  93   "name": "Lantea Maps",
  94   "description": "Display maps and record (GPS) tracks of your location.",
  95   "launch_path": "/index.html",
  96   "appcache_path": "/manifest.appcache",
  97   "permissions": {
  98     "storage": {
  99       "description": "Required for saving settings, tracks, and the tile cache."
 100     },
 101     "geolocation": {
 102       "description": "Required record tracks."
 103     }
 104   },
 105   "developer": {
 106     "name": "Robert Kaiser",
 107     "url": "http://www.kairo.at/"
 108   },
 109   "icons": {
 110     "16": "/style/lanteaIcon16.png",
 111     "32": "/style/lanteaIcon32.png",
 112     "64": "/style/lanteaIcon64.png",
 113     "128": "/style/lanteaIcon128.png"
 114   }
 115 }
 116 </code></pre>
 117 </div>
 118 </article>
 119
 120 <article id="bestpractices" title="Best Practices">
 121 <h1>Best Practices for Development</h1>
 122
 123 <div class="simplebox">
 124 <p>When writing, think of later maintenance:</p>
 125 <ul class="arrows">
 126   <li>Readable for someone unfamiliar with that code</li>
 127   <li>Variable names that explain themselves</li>
 128   <li>Comments with explanations for anything non-obvious</li>
 129   <li>That's true for CSS and HTML as well!</li>
 130   <li>Group thing in logical ways</li>
 131 </ul>
 132 </div>
 133 </article>
 134
 135 <article id="practices-conclusion" title="Conclusion on Practices">
 136 <h1>Best Practices for Development</h1>
 137
 138 <div class="simplebox">
 139 <p>How should code look like when you want to write a patch?</p>
 140 <ul class="arrows">
 141   <li>Write your own code like that!</li>
 142 </ul>
 143 </div>
 144 </article>
 145
 146 <article id="libraries" title="Careful with Libraries">
 147 <h1>Be Careful with Libraries</h1>
 148
 149 <div class="simplebox">
 150 <ul>
 151   <li>When starting to learn things, you should know what every line does</li>
 152   <li>Due to e.g. CSP restrictions, libraries can give odd errors in apps</li>
 153   <li>Size &amp; efficiency: How much of the library do you actually use?</li>
 154   <li>It's easier to patch your own code than a library</li>
 155   <li>Be aware of licenses!</li>
 156 </ul>
 157
 158 </div>
 159 </article>
 160
 161 <article id="libraries-conclusion" title="Conclusions on Libraries">
 162 <h1>Be Careful with Libraries</h1>
 163
 164 <div class="simplebox">
 165 <ul class="arrows">
 166   <li>Only use libraries if you really trust them, use a big enough portion of them, and really know what you are doing.</li>
 167   <li>Also, ideally, the basic logic of your app stands without libraries and they are only helpers.</li>
 168 </ul>
 169 </div>
 170 </article>
 171
 172 <article id="devtools" title="Developer Tools">
 173 <h1>Web App Development Tools</h1>
 174
 175 <div class="simplebox">
 176 <img src="devtools.png" alt="Firefox DevTools" class="slidepic">
 177 <p class="cent">App Manager - and more!</p>
 178 <p class="cent largetext"><strong>DEMO TIME!</strong></p>
 179 <p class="ensurepicinbox"></p>
 180 </div>
 181 </article>
 182
 183 <article id="end" title="The End">
 184
 185 <div class="simplebox">
 186 <img src="be-the-future.png" alt="Firefox OS - Be The Future" class="slidepic">
 187 <p class="cent largetext"><strong>Questions?</strong></p>
 188 <p class="ensurepicinbox"></p>
 189 </div>
 190 </article>
 191
 192 </body>
 193 </html>