index.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>cheztone the stack presentation</title>

		<meta name="description" content="Description of the tech stack used to build cheztone.org using reveal.js">
		<meta name="author" content="Tony Proum">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/league.css" id="theme">

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</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>Web tools for web devs</h1>
				</section>
                <section>
                    <section>
                        <h2>Quick Review</h2>
                    </section>
					<section>
						<pre>
							<code class="javascript">
if(condition){
	dialog('A null & condition check');
}
							</code>
						</pre>
					</section>
					<section>
						<pre>
							<code class="javascript">
// Declare at the beginning
var firstName, lastName, price, discount, fullPrice;

// Use later
firstName = "John";
lastName = "Doe";

price = 19.90;
discount = 0.10;

fullPrice = price * 100 / discount;
							</code>
						</pre>
					</section>
                    <section>
                        <figure>
                            <img src="images/iceberg.png">
                            <figcaption>
                            <small>How JavaScript can seem... an image from <a href="http://twitter.com/angustweets">Angus Croll</a>'s
                            <a href="https://speakerdeck.com/anguscroll/the-politics-of-javascript">"The Politics Of JavaScript"</a> presentation</small>
                            </figcaption>
                        </figure>
                    </section>
					<section>
						<pre>
							<code class="javascript">
$('.dialog-id #ok').click(function(){
	if(condition){
		postData();
	}
	if(condition2){
		getData();
	}
	// ...
});
							</code>
						</pre>
					</section>
                    <section>
                        <figure>
                            <img src="images/plumbing.png">
                            <figcaption>
                                <small>I will cover all user cases !</small>
                            </figcaption>
                        </figure>
                    </section>
                    <section>
                        <img src="images/multiFile.png">
                    </section>
                    <section>
                        <figure>
                            <img src="images/plumbingLimit.png">
                            <figcaption>
                                <small>I'll be in trouble (translate version)</small>
                            </figcaption>
                        </figure>
                    </section>
                </section>
				<section>
					<h1>Actual Stack</h1>
					<ul>
						<li>Node/Npm</li>
						<li>Grunt</li>
						<li>Bower</li>
						<li>AngularJS</li>
					</ul>
				</section>

				<section>
                    <img src="images/nodejs.png"/>
					<section>
						<p>Chrome's JavaScript runtime</p>
						<p>A JVM for javascript devs</p>
						<p>Run tools writes in javascript</p>
					</section>
					<section>
						<p>example from nodejs.org</p>
						 <pre>
							 <code class="javascript">
var http = require('http');

http.createServer(function (req, res) {
	res.writeHead(200, {'Content-Type': 'text/plain'});
  	res.end('Hello World\n');
}).listen(1337, '127.0.0.1');

console.log('Server running at http://127.0.0.1:1337/');
							</code>
					 	</pre>
					</section>
					<section>
						<p>result</p>
						<pre>
							 <code>
node example.js
Server running at http://127.0.0.1:1337/
							</code>
						</pre>
					</section>
					<section>
						<figure>
							<img src="images/nodeHello.png">
							<figcaption>
								<small>results</small>
							</figcaption>
						</figure>
					</section>

				</section>
				<section>
                    <img src="images/npm.png"/>
					<section>
						<p>Package manager for NodeJS</p>
					</section>

					<section>
						<p>Allow to install tools using command line</p>
						<p>examples :</p>
						<pre>
							<code class="c">
npm install -g grunt-cli bower
							</code>
						</pre>
					</section>
				</section>
				<section>
                    <img src="images/grunt.png"/>
					<section>
						<h3>Grunt</h3>
                        <p>Javascript task runner</p>
                        <p>Ant or Maven for web devs</p>
                        <p>Allows to build your app for prod purpose</p>
					</section>
                    <section>
                        <h3>Run Common tasks</h3>
                    </section>
					<section>
						<h3>Serve</h3>
						<p>Live Reload rocks !</p>
					</section>
					<section>
						<h3>Build</h3>
                        <div style="float: right;"><img src="images/compress.png"></div>
                        <div>
                            <p>minify</p>
                            <p>cdnify</p>
                        </div>
                    </section>
					<section>
                        <img src="images/sass.png">
						<p>CSS with superpowers</p>
					</section>
				</section>
				<section>
                    <img src="images/bower.png"/>
					<section>
						<h3>Bower</h3>
						<p>Javascript dependency manager</p>
					</section>
                    <section>
                        <pre>
                            <code class="c">
bower init
                            </code>
                        </pre>
                    </section>
                    <section>
                        <pre>
                            <code class="javascript">
{
  name: 'Test',
  version: '0.0.0',
  authors: [
    'Tony Proum'
  ],
  description: 'a test project',
  main: 'js/test.js',
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}
? Looks good?
                            </code>
                        </pre>
                    </section>
					<section>
						<h3>How to use</h3>
						<pre>
							<code class="c">
bower install --save angular
							</code>
						</pre>
					</section>
                    <section>
                        <pre>
                            <code class="javascript">
{
  "name": "Test",
  "version": "0.0.0",
  "authors": [
    "Tony Proum"
  ],
  "description": "a test project",
  "main": "js/test.js",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.4.1"
  }
}
                            </code>
                        </pre>
                    </section>
                </section>
				<section>
                    <img src="images/angularjs.png"/>
					<section>
						<p>Single page web application</p>
					</section>
                    <section>
                        <p>Past</p>
                        <img src="images/clientToServer.png">
                    </section>
					<section>
						<h3>Client side</h3>
						<ul>
							<li>Model View Controller</li>
							<li>Reusable Components</li>
							<li>Two way data binding</li>
						</ul>
                        <img src="images/clientToServerWithAngular.png">
					</section>
					<section>
						<h3>Split responsibilities</h3>
						<ul>
							<li>View : HTML/CSS</li>
							<li>Controller : Drive actions</li>
							<li>Model : Data access/Local storage</li>
						</ul>
					</section>
					<section>
						<h3>Directive</h3>
                        <ul>
                            <li>Super charged HTML5</li>
                            <li>Follow HTML5 best practices</li>
                            <li>Reusable components</li>
                            <li>Help to be more descriptive</li>
                        </ul>
					</section>
					<section>
						<div>
							<pre>
*.js
								<code class="javascript">
app.directive('my-directive',function(){
   return {
        restrict : 'E',
        templateUrl : '<h1>My Beautiful component says : {{value}}</h1>',
        controller : 'MyAppController',
        scope : {
            value : '='
        }
   }
});
								</code>
							</pre>
						</div>
					</section>
                    <section>
<pre>
*.html
                            <code>
<my-directive value="Hello World"></my-directive>
                            </code>
                        </pre>
                    </section>
                    <section>
                        <p>Result</p>
                        <pre>
                            <code>
<h1>My Beautiful component says : Hello World</h1>
                            </code>
                        </pre>
                    </section>
					<section>
						<h3>Controller</h3>
                        <pre>
                            <code>
app.controller('MyAppController',function(){
  $scope.$watch('value',function(){
    //do something
  })
});
                            </code>
                        </pre>
					</section>
                    <section>
                        <h3>Notes for offline</h3>
                        <ul>
                            <li>Warning : refresh will delete your data without a local storage</li>
                        </ul>
                    </section>
				</section>
				<section>
					<section>
						<h1>Future</h1>
						<ul>
							<li>TypeScript</li>
							<li>AngularJS 2</li>
							<li>Gulp</li>
						</ul>
					</section>
				</section>
				<section>
					<h3>TypeScript</h3>
					<pre>
						<code class="javascript">
class Point {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
  getDist() {
    return Math.sqrt(this.x * this.x +
    this.y * this.y);
  }
}
var p = new Point(3,4);
var dist = p.getDist();
alert("Hypotenuse is: " + dist);
						</code>
					</pre>
				</section>
				<section>
						<section>
						<h3>Angular2</h3>
						<pre>
							<code class="javascript">
@Component({
  selector: 'my-app'
})
@View({
  template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
  name: string;

  constructor() {
	this.name = 'Alice';
  }
}
							</code>
						</pre>
					</section>
					<section>
						<img src="images/benchmark.png">
					</section>
				</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 at:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'zoom', // none/fade/slide/convex/concave/zoom

				// Optional reveal.js plugins
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.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, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>