Prototipos rápidos con JS es un libro práctico que lo introduce a la creación rápida de prototipos de software utilizando las últimas tecnologías web y móviles de vanguardia, incluidas NodeJS, MongoDB, BackboneJS, Twitter Bootstrap, LESS, jQuery, Parse.com, Heroku y otras.

Aquí hay una muestra gratuita, primer capítulo:Introducción, de Prototipos rápidos con JS . También puede obtener un PDF gratuito de LeanPub y explorar ejemplos de código en github.com/azat-co/rpjs. Para comprar una versión completa en formatos PDF, Mobi/Kindle y ePub/iPad, vaya a leanpub.com/rapid-prototyping-with-js.

Introducción

Rapid Prototyping with JS es un libro práctico que le presenta la creación rápida de prototipos de software utilizando las últimas tecnologías web y móviles de vanguardia, incluidas Node.js, MongoDB, Twitter Bootstrap, LESS, jQuery, Parse.com, Heroku y otras.

Para quién es este libro

El libro está diseñado para desarrolladores web y móviles de nivel principiante avanzado e intermedio:alguien que acaba de comenzar a programar y alguien que es experto en otros lenguajes como Ruby on Rails, PHP y Java y quiere aprender JavaScript y Node.js.

La creación rápida de prototipos con JS, como puede ver por el nombre, se trata de llevar su idea a un prototipo funcional en forma de una aplicación web o móvil lo más rápido posible. Este pensamiento se adhiere a la metodología Lean Startup; por lo tanto, este libro sería más valioso para los fundadores de empresas emergentes, pero los empleados de las grandes empresas también podrían encontrarlo útil, especialmente si planean agregar nuevas habilidades a su currículum.

Requisito previo

Los sistemas Mac OS X o UNIX/Linux son muy recomendables para los ejemplos de este libro y para el desarrollo web en general, aunque todavía es posible abrirse camino en un sistema basado en Windows.

Algunos servicios en la nube requieren la información de la tarjeta de crédito/débito de los usuarios, incluso para las cuentas gratuitas.

Qué esperar

Espere mucha codificación y no mucha teoría. Toda la teoría que cubrimos está directamente relacionada con algunos de los aspectos prácticos y es esencial para una mejor comprensión de las tecnologías y los enfoques específicos al tratar con ellos, por ejemplo, JSONP y llamadas entre dominios.

Además de los ejemplos de codificación, el libro cubre prácticamente toda la configuración e implementación paso a paso.

Aprenderá sobre el ejemplo de las aplicaciones web/móviles de Tablero de mensajes que comienzan con los componentes frontales. Hay algunas versiones de estas aplicaciones, pero al final uniremos el front-end y el back-end y los implementaremos en el entorno de producción. La aplicación Tablero de mensajes contiene todos los componentes necesarios típicos de una aplicación web básica y le dará la confianza suficiente para continuar desarrollándose por su cuenta, solicitar un trabajo/ascenso o crear una startup.

Esta es una versión digital del libro, por lo que la mayoría de los enlaces están ocultos como en cualquier otra página web, por ejemplo, jQuery en lugar de http://jquery.com. El contenido del libro tiene hipervínculos locales que le permiten saltar a cualquier sección.

Todo el código fuente de los ejemplos utilizados en este libro está disponible en el libro, así como en un repositorio público de GitHub github.com/azat-co/rpjs. También puede descargar archivos como un archivo ZIP o usar Git para extraerlos. Más adelante en el libro se tratará más sobre cómo instalar y usar Git. Se supone que los archivos de código fuente, la estructura de carpetas y los archivos de implementación funcionan local y/o remotamente en soluciones PaaS, es decir, Windows Azure y Heroku, con modificaciones menores o sin modificaciones.

Notación

Así es como se ven los bloques de código fuente:

var object = {};
object.name = "Bob";

Los comandos de terminal tienen un aspecto similar pero comienzan con el signo de dólar, $:

[Nota al margen]

Leer publicaciones de blog es bueno, pero ver cursos en video es aún mejor porque son más atractivos.

Muchos desarrolladores se quejaron de la falta de material de video de calidad asequible en Node. Es una distracción ver videos de YouTube y una locura pagar $ 500 por un curso de video de Node.

Visite Node University, que tiene cursos de video GRATUITOS en Node:node.university.

[Fin de la nota al margen]

$ git push origin heroku
$ cd /etc/
$ ls

Los nombres de archivos en línea, los nombres de rutas/carpetas, las comillas y las palabras/nombres especiales están en cursiva while nombres de comandos, por ejemplo, mongod y palabras enfatizadas, por ejemplo, Nota , están en negrita .

Conceptos básicos de la web

Resumen

El panorama general del desarrollo de aplicaciones web y móviles consta de los siguientes pasos:

El usuario escribe una URL o sigue un enlace en su navegador (también conocido como cliente);
El navegador realiza una solicitud HTTP al servidor;
El servidor procesa la solicitud y, si hay algún parámetro en una cadena de consulta y/o el cuerpo de la solicitud, los tiene en cuenta;
El servidor actualiza/obtiene/transforma datos en la base de datos;
El servidor responde con una respuesta HTTP que contiene datos en HTML, JSON u otros formatos;
El navegador recibe una respuesta HTTP;
El navegador muestra la respuesta HTTP al usuario en HTML o cualquier otro formato, por ejemplo, JPEG, XML, JSON.

Las aplicaciones móviles actúan de la misma manera que los sitios web regulares, solo que en lugar de un navegador, puede haber una aplicación nativa. Otras diferencias menores incluyen:limitación de transferencia de datos debido al ancho de banda del operador, pantallas más pequeñas y el uso más eficiente del almacenamiento local.

Existen algunos enfoques para el desarrollo móvil, cada uno con sus propias ventajas y desventajas:

Aplicaciones nativas de iOS, Android y Blackberry creadas con Objective-C y Java;
Las aplicaciones nativas se compilan con JavaScript en Appcelerator y luego se integran en Objective-C o Java nativos;
Sitios web móviles adaptados a pantallas más pequeñas con diseño receptivo, marcos CSS como Twitter Bootstrap o Foundation, CSS normal o diferentes plantillas;
Aplicaciones HTML5 que consisten en HTML, CSS y JavaScript, y generalmente se crean con marcos como Sencha Touch, Trigger.io, JO, y luego se empaquetan en una aplicación nativa con PhoneGap.

Lenguaje de marcado de hipertexto

Hyper Text Markup Language, o HTML, no es un lenguaje de programación en sí mismo. Es un conjunto de etiquetas de marcado que describe el contenido y lo presenta de forma estructurada y formateada. Las etiquetas HTML constan de un nombre de etiqueta dentro de los corchetes angulares (<>). En la mayoría de los casos, las etiquetas rodean el contenido con la etiqueta final que tiene barra diagonal. antes del nombre de la etiqueta.

En este ejemplo, cada línea es un elemento HTML:

<h2>Overview of HTML</h2>
<div>HTML is a ...</div>
<link rel="stylesheet" type="text/css" href="style.css" />

El documento HTML en sí mismo es un elemento de html etiqueta y todos los demás elementos son hijos de ese html etiqueta:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h2>Overview of HTML</h2>
    <p>HTML is a ...</p>
  </body>
</html>

Hay diferentes sabores y versiones de HTML, por ejemplo, DHTML, XHTML 1.0, XHTML 1.1, XHTML 2, HTML 4, HTML 5. Este artículo hace un buen trabajo al explicar las diferencias:malentendidos en el marcado:tira cómica XHTML 2/HTML 5.

Hay más información disponible en Wikipedia y w3schools.

Hojas de estilo en cascada

Las hojas de estilo en cascada, o CSS, son una forma de formatear y presentar contenido. Un documento HTML puede tener varias hojas de estilo con la etiqueta enlace como en los ejemplos anteriores o estilo etiqueta:

<style>
  body {
  padding-top: 60px; /* 60px to make some space */
  }
</style>

Cada elemento HTML puede tener id y clase atributo:

<div id="main" class="large">Lorem ipsum dolor sit amet,  Duis sit amet neque eu.</div>

En CSS accedemos a los elementos por su id , clase , nombre de etiqueta y, en algunos casos extremos, por relación padre-hijo o valor de atributo de elemento:

p {
  color:#999999;
}
div#main {
  padding-bottom:2em;
  padding-top:3em;
}
.large {
  font-size:14pt;
}
body > div {
  display:none;         
}
input[name="email"] {
  width:150px;
}

Más información para lectura adicional está disponible en Wikipedia y w3schools.

CSS3 es una actualización de CSS que incluye nuevas formas de hacer las cosas, como esquinas redondeadas, bordes y degradados, que eran posibles en CSS normal solo con la ayuda de imágenes PNG/GIF y otros trucos.

Para obtener más información, consulte CSS3.info, w3school
y el artículo de comparación CSS3 vs CSS en Smashing.

JavaScript

JavaScript se inició en 1995 en Netscape como LiveScript. Tiene la misma relación con Java que un hámster y un jamón :)
Se utiliza tanto para el desarrollo del lado del cliente como del lado del servidor, así como en aplicaciones de escritorio.

Hay un guion etiqueta para usar JavaScript en el documento HTML:

<script type="text/javascript" language="javascript>
  alert("Hello world!");
  //simple alert dialog window
</script>

Por lo general, es una buena idea separar el código JavaScript del HTML; en este ejemplo incluimos app.js archivo:

<script src="js/app.js" type="text/javascript" language="javascript" />

Estos son los principales tipos de objetos/clases de JavaScript:

Objeto de matriz, por ejemplo, var arr = ["apple", "orange", 'kiwi"];
Objeto primitivo booleano, por ejemplo, var bool = true;
Objeto de fecha, por ejemplo, var d = new Date();
Objeto matemático, por ejemplo, var x = Math.floor(3.4890);
Objeto primitivo numérico, por ejemplo, var num = 1;
Objeto primitivo de cadena, por ejemplo, var str = "some string";
Objeto RegExp, por ejemplo, var pattern = /[A-Z]+/;
Propiedades y funciones globales, por ejemplo, NaN
Objetos del navegador, por ejemplo, window.location = 'http://google.com';
Objetos DOM, por ejemplo, var table = document.createElement('table');

La referencia completa de objetos y clases de JavaScript y DOM con ejemplos está disponible en w3school.

Sintaxis típica para la declaración de funciones:

function Sum(a,b) {
  var sum = a+b;
  return sum;
}
console.log(Sum(1,2));

Las funciones en JavaScript son ciudadanos de primera clase debido a la naturaleza de programación funcional del lenguaje. Por lo tanto, las funciones se pueden usar como otras variables/objetos; por ejemplo, las funciones se pueden pasar a otras funciones como argumentos:

var f = function (str1){
  return function(str2){
  return str1+' '+str2;
  };
};
var a = f('hello');
var b = f('goodbye');
console.log((a('Catty'));
console.log((b('Doggy'));

JavaScript tiene una tipificación suelta/débil, a diferencia de la tipificación fuerte en lenguajes como C y Java, lo que hace que JavaScript sea un mejor lenguaje de programación para la creación de prototipos.

Más información sobre JavaScript ejecutado por navegador está disponible en Wikipedia y w3schools.

Metodologías Ágiles

La metodología ágil de desarrollo de software evolucionó debido al hecho de que los métodos tradicionales, como Waterfall, no eran lo suficientemente buenos en situaciones de alta imprevisibilidad, es decir, cuando se desconoce la solución. La metodología Agile incluye Scrum/Sprint, Test-Driven Development, Continuous Deployment, Paired Programming y otras técnicas prácticas, muchas de las cuales se tomaron prestadas de Extreme Programming.

Scrum

En lo que respecta a la gestión, la metodología Agile utiliza el enfoque Scrum. Puede leer más sobre Scrum en:

Wikipedia,
Guía Scrum,
Scrum.org.

La metodología Scrum es una secuencia de ciclos cortos, y cada ciclo se llama sprint . Un sprint suele durar de una a dos semanas. Sprint comienza y termina con una reunión de planificación de Sprint donde se pueden asignar nuevas tareas a los miembros del equipo. No se pueden agregar nuevas tareas al sprint en curso; solo se pueden agregar en las reuniones de sprint.

Una parte esencial de la metodología Scrum es el scrum diario reunión, de ahí el nombre. Cada scrum es una reunión de 5 a 15 minutos de duración que a menudo se lleva a cabo en los pasillos. En scrum reuniones, cada miembro del equipo responde tres preguntas:

¿Qué has hecho desde ayer?
¿Qué vas a hacer hoy?
¿Necesitas algo de otros miembros del equipo?

La flexibilidad hace que Agile sea una mejora con respecto a la metodología Waterfall, especialmente en situaciones de alta incertidumbre, es decir, nuevas empresas.

Ventaja de la metodología Scrum:eficaz donde es difícil planificar con anticipación, y también en situaciones donde se utiliza un circuito de retroalimentación como autoridad principal para la toma de decisiones.

Desarrollo basado en pruebas

El desarrollo basado en pruebas, o TDD, consta de los siguientes pasos:

Escriba casos de prueba automatizados fallidos para una nueva característica/tarea o mejora usando afirmaciones que sean verdaderas o falsas.
Escriba el código para pasar con éxito los casos de prueba.
Refactorice el código si es necesario y agregue funcionalidad mientras mantiene los casos de prueba aprobados.
Repita hasta completar la tarea.

Ventajas del desarrollo basado en pruebas:

menos errores/defectos,
base de código más eficiente,
proporciona a los programadores la confianza de que el código funciona y no rompe la funcionalidad anterior.

Implementación continua

La implementación continua, o CD, es el conjunto de técnicas para ofrecer rápidamente nuevas funciones, correcciones de errores y mejoras a los clientes. El CD incluye pruebas automatizadas e implementación automatizada. Al utilizar la implementación continua, se reduce la escucha manual y se minimiza el tiempo del circuito de retroalimentación. Básicamente, cuanto más rápido el desarrollador pueda obtener los comentarios de los clientes, más rápido podrá pivotar el producto, lo que genera más ventajas sobre la competencia. Muchas empresas emergentes se implementan varias veces en un solo día en comparación con el ciclo de lanzamiento de 6 a 12 meses que sigue siendo típico para corporaciones y grandes empresas.

Una de las soluciones más populares para CD es el servidor de integración continua Jenkins.

Ventajas del enfoque de implementación continua:reduce el tiempo del ciclo de retroalimentación y los gastos generales de mano de obra.

Programación en pareja

La programación en pareja es una técnica en la que dos desarrolladores trabajan juntos en una máquina. Uno de los desarrolladores es conductor y el otro es observador. El conductor escribe el código y el observador lo observa, asiste y hace sugerencias. Luego cambian los roles. El conductor tiene un papel más táctico de centrarse en la tarea actual. Por el contrario, el observador tiene un papel más estratégico supervisando "el panorama general" y las formas de mejorar el código base y hacerlo más eficiente.

Ventajas de la programación en pareja:

Combina atributos con un código base más corto y eficiente, e introduce menos errores y defectos.
Como beneficio adicional, los programadores transmiten conocimientos mientras trabajan juntos. Sin embargo, son posibles situaciones de conflicto entre desarrolladores.

Nodo.js

Node.js es una tecnología del lado del servidor de E/S asíncrona impulsada por eventos para crear servidores web escalables y eficientes. Node.js consiste en el motor JavaScript V8 de Google.

El propósito y uso de Node.js es similar a Twisted para Python y EventMachine para Ruby. La implementación de JavaScript de Node fue la tercera después de los intentos de usar los lenguajes de programación Ruby y C++.

Node.js no es en sí mismo un marco como Ruby on Rails; es más comparable al par PHP+Apache. Estos son algunos de los marcos de Node.js:Express, Meteor, Tower.js, Railsway JS, Geddy, Derby.

Ventajas de usar NodeJS:

Los desarrolladores tienen muchas posibilidades de familiarizarse con JavaScript debido a su estatus como estándar de facto del desarrollo de aplicaciones para web y dispositivos móviles.
Un lenguaje para el desarrollo de front-end y back-end acelera el proceso de codificación. El cerebro de un desarrollador no tiene que cambiar entre diferentes sintaxis. El aprendizaje de métodos y clases va más rápido.
Con NodeJS, puede crear prototipos rápidamente e ingresar al mercado para desarrollar y adquirir clientes de manera temprana. Esta es una ventaja competitiva importante sobre las otras empresas, que utilizan tecnologías menos ágiles, por ejemplo, PHP y MySQL.
NodeJS está diseñado para admitir aplicaciones en tiempo real mediante la utilización de sockets web.

Para obtener más información, visite Wikipedia, Nodejs.org y artículos sobre ReadWrite y O'Reilly.

NoSQL y MongoDB

MongoDB, de huMONGOus, es una base de datos sin relaciones de alto rendimiento para datos de gran tamaño. El concepto NoSQL surgió cuando los sistemas de administración de bases de datos relacionales tradicionales, o RDBMS, no pudieron enfrentar los desafíos de grandes cantidades de datos.

Ventajas de usar MongoDB:

Escalable debido a su naturaleza distribuida:varios servidores y centros de datos pueden tener datos redundantes.
Alto rendimiento:MongoDB es muy efectivo para almacenar y recuperar datos, no la relación entre elementos.
El almacén de valores-clave es ideal para la creación de prototipos porque no requiere que se conozca el esquema y no se necesita un modelo de datos fijo.

Computación en la nube

¿Podría la informática consistir en:

Infraestructura como servicio (IaaS), por ejemplo, Rackspace, Amazon Web Services;
Plataforma como servicio (PaaS), por ejemplo, Heroku, Windows Azure;
Software como servicio (SaaS), por ejemplo, Google Apps, Salesforce.com.

Las plataformas de aplicaciones en la nube proporcionan:

escalabilidad, por ejemplo, generar nuevas instancias en cuestión de minutos;
implementación fácil, por ejemplo, para enviar a Heroku, solo puede usar $ git push;
plan de pago por uso:agregue o elimine memoria y espacio en disco según las demandas;
normalmente no es necesario instalar y configurar bases de datos, servidores de aplicaciones, paquetes, etc.;
seguridad y soporte.

PaaS son ideales para la creación de prototipos, la creación de productos mínimos viables (MVP) y para las empresas emergentes en etapa inicial en general.

Aquí está la lista de las soluciones PaaS más populares:

Heroku
Windows Azure
Nodejitsu
Nodoster

Solicitudes y respuestas HTTP

Cada solicitud y respuesta HTTP consta de los siguientes componentes:

Encabezado:información sobre codificación, longitud del cuerpo, origen, tipo de contenido, etc.;
Cuerpo:contenido, generalmente parámetros o datos que se pasan al servidor o se devuelven a un cliente;

Además, la solicitud HTTP contiene:

Método:Hay varios métodos; los más comunes son GET, POST, PUT, DELETE.
URL:host, puerto, ruta;
Cadena de consulta, es decir, todo después de un signo de interrogación en la URL.

API RESTful

La API RESTful (Representational State Transfer) se hizo popular debido a la demanda en los sistemas distribuidos donde cada transacción debe incluir suficiente información sobre el estado del cliente. En cierto sentido, este estándar no tiene estado porque no se almacena información sobre el estado de los clientes en el servidor, lo que hace posible que cada solicitud sea atendida por un sistema diferente.

Características distintivas de la API RESTful:

Tiene un mejor soporte de escalabilidad debido al hecho de que diferentes componentes se pueden implementar de forma independiente en diferentes servidores;
Se reemplazó el Protocolo simple de acceso a objetos (SOAP) debido a la estructura más simple de verbos y sustantivos;
Utiliza métodos HTTP:GET, POST, DELETE, PUT, OPTIONS, etc.

Este es un ejemplo de una API REST simple de creación, lectura, actualización y eliminación (CRUD) para la recopilación de mensajes:

Método	URL	Significado
OBTENER	/messages.json	Lista de devolución de mensajes en formato JSON
PONER	/messages.json	Actualizar/reemplazar todos los mensajes y devolver estado/error en JSON
POST	/messages.json	Crea un nuevo mensaje y devuelve su id en formato JSON
OBTENER	/messages/{id}.json	Mensaje de retorno con id {id} en formato JSON
PONER	/messages/{id}.json	Actualice/reemplace el mensaje con id {id}, si el mensaje {id} no existe, créelo
ELIMINAR	/messages/{id}.json	Eliminar mensaje con id {id}, devolver estado/error en formato JSON

REST no es un protocolo; es una arquitectura en el sentido de que es más flexible que SOAP, que es un protocolo. Por lo tanto, las URL de la API REST podrían verse como /messages/list.html o /messages/list.xml en caso de que queramos soportar estos formatos.

PUT y DELETE son métodos idempotentes, lo que significa que si el servidor recibe dos o más solicitudes similares, el resultado final será el mismo.

GET es nulipotente y POST no es idempotente y podría afectar el estado y causar efectos secundarios.

Lectura adicional sobre la API REST en Wikipedia y el artículo Una breve introducción a REST.

Muestra de prototipos rápidos con JS