gabmontes

Repaso de JavaScript

Objetivos

• Repasar conceptos de JavaScript que lo hacen diferente de otros lenguajes para dejar una base firme de conocimientos y evitar caer en problemas típicos que aparecen al llegar desde otros lenguajes estructurados o con un paradigma clásico de orientación a objetos.
• Presentar y comprender patrones usados muy frecuentemente en JavaScript para poder resolver problemas típicos sin rápidamente y de una manera óptima y elegante.

Características

JavaScript es un lenguaje de programación que tiene las siguientes características principales:

gabmontes

Introducción a Express

Objetivos

• Crear un web server con Express
• Servir contenido estático

Qué es Express

Express es uno de los frameworks más utilizados para el desarrollo de servicos web con Node.js. Permite crear servicios que de manera modular y su funcionalidad puede ser extendida mediante el uso de middlewares.

gabmontes

Introducción a Node.js

Objetivos

• Conocer la motivación que llevó a la creación de Node.js y su arquitectura interna básica para tener suficiente información y poder tomar decisiones informadas acerca de si Node.js es la herramienta adecuada para resolver un problema específico.
• Conocer y comprender objetos y clases base que provee la plataforma. Entender el sistema de módulos que usa Node.js y algunos módulos base muy importantes.

Introducción y arquitectura

Node.js es un ambiente de ejecución de aplicaciones JavaScript basado en el motor V8, uno de los componentes principales del navegador Google Chrome. Utiliza un modelo de programación basado en eventos, con I/O no bloqueante y se complementa con NPM y módulos que siguen la arquitectura CommonJS para extender su funcionalidad. Fue creado en 2009 por Ryan Dahl en Joyent y actualmente administrado por la Linux Foundation.

gabmontes

(function (global, Promise) {
    "use strict";

    if (!require || !Promise) {
        throw new Error("Could not promisify require");
    }

    global.requireAsync = function (dependencies) {
        return new Promise(function (complete, error) {
            require(dependencies, function () {

gabmontes

(function (global) {
    "use strict";

    if (WinJS) {

        // https://github.com/winjs/angular-winjs/issues/56
        WinJS.UI.Command = WinJS.UI.Command || WinJS.UI.AppBarCommand;

        // https://github.com/winjs/angular-winjs/issues/62
        WinJS.Utilities._setImmediate = WinJS.Utilities._setImmediate || setImmediate.bind(global);

gabmontes

CORS, Express y AngularJS

Cuando una página web realiza un pedido a un recurso en otro dominio (diferente protocolo, subdiminio, dominio o puerto), realiza lo que se llama un "pedido HTTP cross-origin". Por razones de seguridad, los navegadores restringen los pedidos HTTP cross-origin que se inician desde un script (JavaScript), como pueden ser los realizados utilizando el objeto XMLHttpRequest. Para realizar pedidos legítimos a diferentes dominios, hay que implementar el mecanismo CORS o Cross Origin Resource Sharing.

El estándar CORS consiste en agregar headers específicos en los pedidos HTTP y en las respuestas correspondientes para que el servidor informe al navegador qué recursos están disponibles. Solo aquellos recursos disponibles serán accesibles desde dicho navegador.

Adicionalmente, ciertos pedidos como PUT o DELETE deben ser precedidos de un pedido del tipo OPTIONS, llamado preflight, que debe ser aprobado por el servidor antes del envío del pedido original.

Pedido simple

gabmontes

Express y plantillas

Express nos brinda la posibilidad de utilizar plantillas para servir el contenido HTML de nuestros sitios web. Para ello existe un mecanismo mediante el cual se configura la instancia de Express que estemos utilizando para utilizar un motor de plantillas determinado. Este motor realizará la tarea de, partiendo de una plantilla HTML y un objeto de configuración/contenido, generar el HTML que será servido a los clientes.

Dentro de los motores de plantillas más conocidos se encuentran:

• Jade es el más popular y tiene una sintaxis muy limpia para escribir las plantillas
• EJS utiliza un esquema muy similar a ASP para definir las plantillas

Jade

gabmontes

var async = require('async');
var GitHubApi = require('github');

var github = new GitHubApi({
  version: '3.0.0',
  protocol: 'https'
});

github.authenticate({
  type: 'basic',

gabmontes

const config = {
  client: 'pg',
  connection: {
    host     : 'localhost',
    port     : 5432,
    user     : 'user',
    password : 'pass',
    database : 'test'
  }
}

gabmontes

AngularJS + RequireJS done right

Since AngularJS 2.x is not here yet, many applications are still being written using Angular 1.x. When the application that is more complex than the trivial examples you may found out there, it may end up having many modules, services, controllers, view templates and so on. In those real world cases, the main entry point of the application index.html may become a mess like this:

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
        <!-- Angular and modules -->
		<script src="path-to/angular.js"></script>