Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
348 lines (321 sloc) 10.9 KB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>future of web developement</h1>
<p>
<br>
</p>
<p>by <a href="http://twitter.com/evangenieur" class="roll">@Evangenieur</a>
</p>
<p>
<br>
</p>
<p>at &nbsp;the first <a href="https://twitter.com/HTGrenoble" class="roll">HumanTalks Grenoble</a>
</p>
</section>
<section>
<h2>Web</h2>
<h3>has evolved</h3>
<div>
<br>
</div>
<div class="fragment">it is now :</div>
<div>
<br>
</div>
<div>
<ul>
<li class="fragment">Multi Device<br>
</li>
<li class="fragment">Real-Time</li>
<li class="fragment">Cloud Based</li>
<li class="fragment">Social<br>
</li>
</ul>
<div style="text-align: left;">
<br>
</div>
<div class="fragment" style="text-align: center;">This is how <b>Web Development</b> should be now.</div>
</div>
</section>
<section>
<section>
<h2>One Language to RULE THEM ALL</h2>
<div>
<b>JavaScript</b> : <a href="https://github.com/languages">#1 Top Github languages 21%</a>
<br>
<br>
<a href="http://mashable.com/2012/11/12/javascript/">Is JavaScript the Future of Programming ?</a><small>3k shares in 24h</small>
</div>
<div>
<br>
</div>
<h4>Multi Device</h4>
<div>Work on any Device : Desktop, Mobile, TV, Server</div>
<div>
<br>
</div>
<h4>Mobile APP</h4>
<div>
<a href="http://phonegap.com/">PhoneGap</a> : Create Mobile App using HTML/Javascript</div>
<div>
<br>
</div>
<h4>SERVER</h4>
<div>Node.js :&nbsp;<a href="https://github.com/popular/starred" style="font: inherit;">#2 Starred repository on Github&nbsp;</a>
</div>
<div>
<ul>
</ul>
</div>
</section>
<section>
<h2>Doesn't like Javascript ?</h2>
<div>
<div style="font: inherit;">
<br>
</div>
<p>Verbose syntax, Language restrictions</p>
<p>
<br>
</p>
<pre><code class="javascript">square = function (x) { return x * x; };</code></pre>
<div>
<br>
</div>
<div style="font: inherit;">
<a href="http://coffeescript.org/">CoffeeScript</a>&nbsp;: a Python / Ruby inspired Meta-Language</div>
<div style="font: inherit;">
<br>
</div>
<pre><code class="CoffeeScript">square = (x) -&gt; x * x</code></pre>
<div>
<br>
</div>
<div>
<a href="https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS">List of Languages that compile to Javascript</a>
</div>
<div>
<br>
</div>
<h4>Make your choice ...</h4>
<div>
<br>
</div>
</div>
</section>
</section>
<section>
<section>
<h2>Real-TIME Web Communication</h2>
<div>Technics : HTTP Long polling, Flash, Websocket, ...</div>
<div>
<br>
</div>
<div>Library :&nbsp;<a href="http://socket.io/">Socket.io</a>,&nbsp;<a href="http://sockjs.org/">SocksJS</a>
</div>
<div>
</div>
<div>
<br>
</div>
<div>
<div style="font: inherit;">Server</div>
<div style="font: inherit;">
<pre><code class="CoffeeScript">socket.on "event", (data) -&gt; console.log data</code></pre>
<br>
</div>
<div style="font: inherit;">Client</div>
<div>
<pre><code class="CoffeeScript">socket.emit "event", { key: "value"}</code></pre>
</div>
</div>
</section>
<section>
<h2>
<a href="https://github.com/zappajs/zappajs">ZappaJS</a>
</h2>
<div>A CoffeeScript DSL to Express and Socket.io for the lazy</div>
<div>
<br>
</div>
<div>Server</div>
<div>
<pre><code class="CoffeeScript">
@client "/client.js": -&gt;
@connect()
@on connect: -&gt;
@emit "event", key: "value"
@on event: (data) -&gt; console.log data
</code></pre>
</div>
<div>
<br>
</div>
<div>
<br>
</div>
</section>
</section>
<section>
<h2>Real-TIME COLLABORATIVE FrameworkS</h2>
<div>
<a href="http://meteor.com">Meteor</a>&nbsp;</div>
<div>Funded $11.2M</div>
<div>Client Database pub-sub / Social Auth</div>
<div>Hot Code Pushes / Project Deployment</div>
<div>Live page update / Data-View Binding</div>
<div>
<br>
</div>
<div>
<a href="http://derbyjs.com/">Derby</a>
</div>
<div>Client / Server side template rendering</div>
<div>Conflict Resolution</div>
<div>
<br>
</div>
<div>
<a href="http://www.socketstream.org/">SocketStream</a>
</div>
<div>Low-Level and Fully Customizable Template, Transport</div>
<div>
<br>
</div>
</section>
<section>
<h2>CLOUD</h2>
<h3>Platform as a Service</h3>
<div>
<a href="http://nodester.com/">Nodester</a>&nbsp;(Open Source)</div>
<div>
<a href="http://nodejitsu.com/">Nodejitsu</a>&nbsp;+ JoyenCloud</div>
<div>
<a href="http://www.heroku.com/">Heroku</a>
</div>
<div>Microsoft Azure</div>
<div>
<br>
</div>
<h3>Data as a Service</h3>
<div>
<a href="https://mongolab.com/home">Mongolab</a>&nbsp;(MongoDb)<br>
</div>
<div>
<a href="http://www.iriscouch.com/">iris Couch</a> ( Couchdb )</div>
<div>
<a href="http://redis-cloud.com/">Redis Cloud</a> (redis)</div>
</section>
<section>
<h2>Social</h2>
<h4>Repository</h4>
<div>
<a href="https://github.com/">GitHub</a>
</div>
<div>
<a href="https://bitbucket.org/">BitBucket</a>
</div>
<div>
<br>
</div>
<h4>Snippet</h4>
<div>
<a href="http://jsfiddle.net/">JSFiddle</a>
</div>
<div>
<a href="http://codepen.io/">Codepen.io</a>
</div>
<div>
<br>
</div>
<h4>IDE</h4>
<div>
<a href="https://c9.io/">Cloud9</a>
</div>
</section>
<section>
<h2>What's COMING NEXT ...</h2>
<p>
<br>
</p>
<h3>Browser&nbsp;Capabilities<br>
</h3>
<div>P2P with&nbsp;<a href="http://www.webrtc.org/">WebRTC</a>&nbsp;</div>
<div>for Audio / Video Chat,&nbsp;Multiplayer Game, etc..</div>
<div>
<br>
</div>
<h3>Live Coding&nbsp;</h3>
<div>
<a href="https://vimeo.com/36579366" style="font: inherit;">Inventing on Principles</a>
<br>
</div>
<div>
<a href="http://www.chris-granger.com/2012/04/12/light-table---a-new-ide-concept/">Light Table</a>
</div>
<div>
<a href="http://nodeknockout.com/teams/evangenieur">WebPipes.io</a>
</div>
<div>
<br>
</div>
<div>
<h3 style="font: inherit;">
<a href="http://unhosted.org/">
<b>UNHOSTED</b>
</a>
</h3>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>