De HTML a Express
45
De HTML a Express
-
Upload
antonio-kobashikawa-carrasco -
Category
Internet
-
view
315 -
download
0
Transcript of De HTML a Express
De HTML a Express
Acerca de mi
Rulo Kobashikawa
@rulokoba
Simple HTML
Un site estático simple es una colección de archivos:
● HTML● CSS● Javascript● Imágenes, audio, video,
etc
site
css
js
styles.css
scripts.js
index.html
img
photo.jpg
Simple HTML : index.html
El documento html organiza el contenido y la forma de presentarlo.
Indica los archivos que requiere.
<!DOCTYPE html><html lang="es">
<head> <meta charset="UTF-8"> <title>Mi Site</title> <link rel="stylesheet" href="css/styles.css"></head>
<body> <h1>Mi Site</h1> <img src="img/photo.jpg"> <script src="js/scripts.js"></script></body>
</html>
Simple HTML : index.html
Mi Site<!DOCTYPE html><html lang="es">
<head> <meta charset="UTF-8"> <title>Mi Site</title> <link rel="stylesheet" href="css/styles.css"></head>
<body> <h1>Mi Site</h1> <img src="img/photo.jpg"> <script src="js/scripts.js"></script></body>
</html>
body { font-family: Arial, sans-serif; text-align: center;}
Simple CSS : styles.css
Las hojas de estilo permiten centralizar las indicaciones de diseño y formato.
body { font-family: Arial, sans-serif; text-align: center; background: gray;}img { border: 10px solid white;}
Simple CSS : styles.css
Mi Site
function() { //...}
Simple JS : scripts.js
Los scripts permiten definir comportamientos especiales:
● Manipular el contenido● Obtener datos externos
AJAX
EFECTOS
COMPONENTS
function() { //...}
Simple JS : scripts.js
Mi Site
Backend
Es usual extender las funcionalidades de un servidor web (como Apache, Nginx) con ayuda de un framework:
● CakePHP● Laravel (PHP)● Rails (Ruby)● Django (Python)● Express (NodeJS, Javascript)
WEBSERVER
PLANTILLAS
FRAMEWORK DATOS
REST
Frameworks para Backend
Es usual extender las funcionalidades de un servidor web (como Apache, Nginx) con ayuda de un framework:
● CakePHP● Laravel (PHP)● Rails (Ruby)● Django (Python)● Express (NodeJS, Javascript)
SPA: Single Page Application
En las páginas tipo SPA, la interfaz se va acercando a las de aplicaciones de escritorio.
Frameworks para SPA
Para manejar esa complejidad, han aparecido varios frameworks, como:
● Backbone● Ember● Angular● Flux (React)
Usando AngularJS : idea
Extender el HTML
DIRECTIVE
SERVICE FACTORY
CONTROLLER
MODULE
miApp
miController$scope
Usando AngularJS : esquema básico
<!DOCTYPE html><html lang="es" ng-app="miApp">
<head> <meta charset="UTF-8"> <title>Mi Site</title> <link rel="stylesheet" href="css/styles.css"></head>
<body ng-controller="MiController"> ... <script src="js/angular.js"></script></body>
</html>
Usando AngularJS : ejemplo básico
<div class="container" ng-init="nombre='Mundo';">
<h1>Hola {{ nombre }}</h1>
<input type="text" ng-model="nombre">
</div >
Usando AngularJS : module
angular.module('miApp', []);
define la aplicación y sus dependencias
Usando AngularJS : controller
angular.module('miApp') .controller('MiController', MiController);
function MiController($scope) {...}
define un controlador y sus dependencias
Usando AngularJS : directivas
● ng-app● ng-controller● ng-init● ng-model● ng-repeat● ng-show● ng-hide
Alteran el comportamiento de un elemento HTML.
Es posible definir directivas personalizadas.
Usando AngularJS : service
angular.module('miApp') .service('miService', miService);
function miService() { this.miMetodo = function() {...};
}...function MiController($scope, miService) {...};
un service puede proveer datos a un controller
Usando AngularJS : factoryangular.module('miApp') .factory('miFactory', miFactory);
function miFactory() { var factory = {}; factory.miMetodo = function() {...}; return factory;}...function MiController($scope, miFactory) {...};
un factory también puede proveer datos a un controller
Usando AngularJS : esquema simple
Todo en un único archivo.site
js
app.js
index.html
Usando AngularJS : separando
● modulos en app● rutas en routes● controladores en
controllers● services y factories en
services
site
js
app.js
index.html
controllers.js
services.js
routes.js
Usando AngularJS : reorganizando
El esquema simple se replica en cada módulo
site
js
app.js
index.html
mod1
mod2
app.js
Usando AngularJS : creciendo
La separación se va replicando en cada módulo
site
js
app.js
index.html
mod1
controllers.js services.js
routes.js
app.js
mod2
controllers.js services.js
routes.js
Usando NodeJS
● https://nodejs.org● http://expressjs.com/
● https://github.com/creationix/nvm
● http://nodemon.io/
Usando NodeJS : idea
● Usar Javascript en el lado del servidor
● Google V8 Javascript EngineRyan Dahl2009
● Event driveNon blocking I/O APISimple, no threads
● 2014: io.js2015: node.js + io.js
Usando NodeJS : usado por
Usando NodeJS : empleabilidad
Usando NodeJS : empleabilidad
Usando NodeJS : init
$ npm init
Inicializa un proyecto:
● package.json● node_modules/
Instalar un módulo.
instala package.json
instala módulo
actualiza package.json
Usando NodeJS : install
$ npm install
$ npm install modulo
$ npm install --save modulo
Desinstalar un módulo.
actualiza package json
Usando NodeJS : uninstall
$ npm uninstall modulo
$ npm uninstall --save modulo
Usando Express : install
$ npm install -g express
$ npm install express-generator
Instala el generador de express
Usando Express : base
$ cd miproyecto
$ express
$ npm install
Genera una base para iniciar una proyecto en express
Usando Express : run
$ npm start
Se puede correr inmediatamente en el puerto 3000
Express
Welcome to Express
http://localhost:3000
Usando Express : directorios
Estructura de directorios que usa Express
miproyecto
bin
app.js
public
routes
views
Usando Express + Angular
Usando Angular con Express
miproyecto
bin
app.js
public
routes
views
index.html
Usando Express + Angular
Usando Angular con Express
miproyecto
bin
app.js
public
routes
views
index.html
js
app.js
index.html
controllers.js
services.js
routes.js
Usando Express + Angular : nunjucks
Express puede usar diversos sistemas de template:
● jade (default)● nunjucks
// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'html');var nunjucks = require('nunjucks');nunjucks.configure('views', { autoescape: true, noCache: true, express: app, watch: true});
app.use(express.static(path.join(__dirname, 'public')));
app.js
Usando Express + Angular : nunjucks
/* GET home page. */router.get('/', function(req, res, next) { res.render('index.html', { title: 'Express' });});
routes/index.js
<!DOCTYPE html><html lang="es" ng-app="miApp"><head> <meta charset="UTF-8"> <title>{{title}}</title></head><body> {% block body %}{% endblock %}</body></html>
{% extends "layout.html" %}{% block body %}<h1>{{message}}</h1><h2>{{error.status}}</h2><pre>{{error.stack}}</pre>{% block body %}
views/error.html
views/layout.html{% extends "layout.html" %}{% block body %} <div ng-controller="MiController"> <h1>{{ title }}</h1> <p>Welcome to {{title}}</p> <script src="/js/angular.js"></script> </div>{% endblock %}
views/index.html
JS en Backend y Frontend ^^
Algunos Links
● NodeJS: http://nodejs.org/
● ExpressJS: http://expressjs.com/
● AngularJS: https://angularjs.org/
● Nunjucks: https://mozilla.github.io/nunjucks/
● Expresss + Nunjucks: https://github.com/akobashikawa/express-nunjucks
Gracias(^^)
@rulokoba
