itson-navojoa-slides

View Github Repository Open presentation in a new window

keogh

See all presentation from keogh

itson-navojoa-slides

0 0

itson-navojoa-slides

Slides in Reveal.js for Web Development Workshop in ITSon Navojoa 2014

On Github keogh / itson-navojoa-slides

Taller de Desarrollo Web

 

Chat con Angular.js + Node.js + Socket.io + Bower + Grunt.js + Bootstrap

By Isaac Zepeda

2014

¿Quién soy?

Isaac Zepeda

Web Developer

Ruby

Javascript

Angular.js

Node.js

...

Contacto

Agenda

  • The Players
  • HelloWorld en Angular.js
  • The Chat Seed
  • Grunt.js tasks
  • Codeando el Chat Frontend
  • Conectando con Socket.io
  • The End

The Players

 

+ + + + +

Angular.js

  • Javascript Framework
  • Model-View-Whatever
  • Two-way Data Binding
  • It's awesome!

 

http://angularjs.org

 

  • Ejecuta Javascript en el Servidor
  • Non-Blocking I/O model
  • Ejecuta comandos en bash

 

http://nodejs.org

  • Applicaciones en Tiempo Real
  • Comunicación en dos vías
  • Websockets

 

http://socket.io

Bower

  • Manejador de Dependencias
  • Front-end

 

http://bower.io

  • Automatización
  • Task Runner
  • Server, livereload, SASS, JS Hint, y mucho mas!

 

http://gruntjs.com

  • Front-end Framework
  • CSS
  • Algunos Javascript Components
  • Rapid layout

 

http://getbootstrap.com

Hello World Angular.js

angular.module('app', [])
  .controller('MainCtrl', function ($scope) {
    $scope.world = 'Mundo';
  });
<html ng-app="app">
  <body ng-controller="MainCtrl">
    Hello {{world}}!
  </body>
</html>

The Chat Seed

https://github.com/keogh/itson-navojoa-seed

Fork

Clonar Repositorio

 

git clone git@github.com:keogh/itson-navojoa-seed.git chat-app

Instalación

Desde la carpeta del proyecto

npm install
bower install

Grunt.js: Instalación

 

npm install -g grunt grunt-cli

Grunt.js Tasks

module.exports = function (grunt) {
  require('load-grunt-tasks')(grunt);

  grunt.initConfig({
    connect: {
      server: {
        options: {
          port: 9000,
          hostname: 'localhost',
          livereload: 35729,
          base: 'app'
        }
      }
    }
  });

  grunt.registerTask('server', [
    'connect:server'
  ]);
}
grunt server

El Front-end

Conectando con Socket.io

var io = require("socket.io").listen(8080);
var users = [];

io.sockets.on('connection', function (socket) {
  socket.on('username', function (username) {
    users.push(username);
    io.sockets.emit('users', users);

    socket.on('msg', function (msg) {
      io.sockets.emit('msg', username, msg);
    });

    socket.on('disconnect', function () {
      users.splice(users.indexOf(username), 1);
      io.sockets.emit('users', users);
    });
  });
});

Diagrama

Gracias!