Guía básica para organizar un Proyecto de Desarrollo de Aplicación Web

Este artículo es una guía básico sobre cómo organizar un proyecto completo de desarrollo de una Aplicación Web, ya sea para uso interno o para uso comercial. Este artículo se compone de los siguientes apartados:

Sección #1: Visión de conjunto
Capítulo 1: Aplicaciones de Escritorio vs Aplicaciones Móviles vs Aplicaciones Web

Sección #2: El Front-End
Capítulo 2: El Front-End
Capítulo 3: Javascript
Capítulo 4: Características de Javascript al detalle
Capítulo 5: Javascript comparado con otros lenguajes
Capítulo 6: Como programar en Javascript sin usar Javascript usando los superconjuntos
Capítulo 7: Typescript
Capítulo 8: React JS

Sección #3: El Back-End
Capítulo 9: Introducción al Back-End
Capítulo 10: Filosofía de programación en el Back-End
Capítulo 11: Preparar los servidores

Sección #4: Conclusiones
Capítulo 12: Consejos finales

Sin más dilación comenzamos ya con la guía:

Sección #1: Visión de conjunto

Capítulo 1: Aplicaciones de Escritorio vs Aplicaciones Móviles vs Aplicaciones Web

Aplicaciones de Escritorio
En primer lugar, las aplicaciones de escritorio están diseñadas para funcionar sobre todo en ordenadores de sobremesa o portátiles que utilizan los sistemas operativos Windows (de Microsoft) Mac OS (de Apple) o una de las muchas distribuciones de Linux.

La mejor forma de crear software para esta clase de equipos es con la ayuda de entornos de desarrollo integrado (IDE). Cuentan con editor de código fuente, depurador y compilador. Además, son compatibles con múltiples lenguajes.

Algunos de los mejores entornos de programación para crear un proyecto de esta clase son Anjuta DevStudio, Delphi, Eclipse, NetBeans, Visual Studio y Xamarin Studio. Por su parte, los lenguajes que más se recomiedan en este contexto son C#, C++, Visual Basic y Delphi Pascal.

Aplicaciones Móviles
En segundo lugar, las aplicaciones móviles están diseñadas para funcionar sobre todo en teléfonos inteligentes, tabletas y otros equipos móviles que utilizan los sistemas operativos Android (de Google) e iOS (de Apple). Permiten a los usuarios de tales dispositivos realizar actividades profesionales, educativas y recreativas, y les proporcionan acceso a diversos servicios.

Como ocurre con las de escritorio, es posible diseñar una aplicación móvil con la ayuda de un entorno de programación. Delphi, Eclipse y Visual Studio son multiplataforma, lo que significa que también te sirven para crear software para móviles. Otros IDE muy populares son AIDE, Android Studio, B4A, Python, Unity y Xamarin.

Ahora bien, al momento de elegir el lenguaje de programación más adecuado para crear una aplicación móvil, es importante considerar el sistema operativo en el que funcionará dicho software. Los más utilizados para Android son Java y Kotlin; y para iOS, Objetive-C y Swift. Por otro lado, existen lenguajes que funcionan en ambas plataformas, siendo Javascript y TypeScript los exponentes más destacados de la actualidad.

Aplicaciones Web
En tercer lugar, las aplicaciones web están diseñadas para funcionar en todos los navegadores de internet, independientemente del equipo y el sistema operativo utilizado. Por lo general, estos programas están alojados en un servidor web, disponibles para el público en general o para los usuarios autorizados.
El desarrollo de las aplicaciones web ha impuesto un nuevo paradigma. A diferencia de las aplicaciones de escritorio y móviles, no hace falta instalar un software. Para utilizarla, basta con ingresar al sitio en cuestión desde cualquier dispositivo, lo que garantiza la accesibilidad universal. Otra ventaja es que los usuarios evitan destinar recursos de sus propios dispositivos a la ejecución de la misma.

Existen dos modelos que intervienen en el desarrollo y funcionamiento de una aplicación. El primero es el front-backend. Describe a dos partes del software que son interdependientes entre sí: la que interactúa con los usuarios y recolecta sus datos (front end), y la que los procesa (back-end).
El segundo es el modelo cliente-servidor, que reparte las tareas entre el proveedor de los recursos o servicios y el demandante. En otras palabras, el cliente hace una petición y el servidor devuelve una respuesta.

Entornos de desarrollo
La lista de entornos de desarrollo que puedes usar para desarrollar aplicaciones web es muy amplia. Conoce las principales alternativas y sus características más destacadas.

Visual Studio Code. Ofrece sugerencias inteligentes de acuerdo a las características del código, ofrece distintos tipos de depuración, se integra perfectamente con los comandos de GIT y permite la instalación de extensiones que aumentan sus prestaciones.

Visual Studio. Sigue funcionando a la misma la velocidad independientemente de la complejidad del código. Además, emite recomendaciones para optimizar el rendimiento del programa y te permite instalar solo las herramientas y componentes que realmente necesitas.

Net Beans. Posee una función de resaltado de texto y herramientas que facilitan la refactorización del código. Es compatible con CSS,HTML5, Java, JS, PHP, y otros lenguajes.

Eclipse Web Tools Platform (WTP). Te muestra la API de cada uno de los componentes y los escanea en busca de vioalaciones de seguridad. Al mismo tiempo, comprueba los archivos y te indica cuáles son las propiedades sin usarse.

Sencha Ext. Completo marco de trabajo de JS con más de 140 componentes prediseñados. Viene con herramientas que reducen la necesidad de escribir código, permitiéndote realizar gran parte del diseño y la programación mediante la manipulación de elementos gráficos.

Web Storm. Cuenta con funciones inteligentes de refactorización y finalización de código JS y TS, y con prestaciones que hacen posible la detección de errores y redundancias en tiempo real.

Aptana Studio. Es compatible con CSS, HTML, HTML5, JS, PHP y Ruby. Permite consultar el grado de compatibilidad de tus elementos en el navegador y dispone de un terminal de línea de comandos incorporado.

Sublime. Viene con una potente herramienta de búsqueda que agiliza la localización y el reemplazo de cualquier porción de código. También te muestra la sintaxis de cada función, clase y método con solo colocar el cursor encima del símbolo correspondiente. Se trata de una prestación que te ahorrará mucho tiempo y evitará que cometas errores.

Light Table. Permite visualizar los valores de cualquier expresión en tiempo real mediante una función que bien puede considerarse un Println de última generación. Y el administrador de plugins te permitirá acceder a una lista de útiles complementos.
UEStudio. Es uno de los editores de texto más potentes del mercado, compatible incluso con lenguajes ensambladores. Admite la posibilidad de intercambiar archivos por medio de servidores remotos y su interfaz se adapta completamente al gusto del usuario.

Komodo IDE. Soporta Go, JS, Node.js, Perl, PHP, Python, Ruby y otros lenguajes. Su sencilla interfaz de navegación de archivos y proyectos facilita la gestión de flujos de trabajo. Y es compatible con los sistemas de control de versiones Bazaar, CVS, Git, Mercurial, Perforce y Subversion.

Brackets. Cuenta con una interesante herramienta para visualizar todos los fragmentos de código con elementos en común. Asimismo, te ofrece una vista de tu código HTML y CSS, en la que podrás ver, en tiempo real, los resultados de los cambios efectuados.

RJ TextEd. Fue desarrollado en Delphi XE6, de Embarcadero Technologies y publicado bajo licencia Freeware. Soporta ASP, JS y PHP. Además, facilita la edición, visualización previa, revisión y autocompletado de los archivos CSS y HTML.

Atom. Te confiere la posibilidad de compartir tu espacio de trabajo con otros desarrolladores para poder emprender proyectos en equipo. Su interfaz se puede dividir en varios paneles, lo que facilita la comparación y edición simultánea de archivos.

Frameworks
Existe una herramienta cuyo objetivo es facilitar y agilizar la labor de los programadores al proporcionar un conjunto de funciones ya listas para incorporar en tus proyectos. Nos referimos a los frameworks, también conocidos como entornos o marcos de trabajo.

Los marcos de trabajo más populares del momento son Angular, React, Vue y ASP.NET. Los primeros tres son de código abierto. Conoce las principales prestaciones que te ofrece cada uno.

Angular. Este framework de la pila MEAN permite crear aplicaciones web de una sola página. Su capacidad para reutilizar componentes previamente cargados y generar código optimizado para la máquina virtual permite que las páginas funcionen a gran velocidad. Por otro lado, permite crear visualizaciones con una sintaxis de plantilla simple, pero potente, y proteger las aplicaciones web contra fallos.

React. Esta tecnología desarrollada por Facebook es una de las tecnologías clave de la pila MERN. Posee todos los componentes de la pila MEAN, excepto Angular. Su principal cometido es facilitar la creación de interfaces de usuario. Además, es compatible con la extensión JSX, que permite enlazar la lógica de un componente con la expresión de su renderizaso a fin de tener acceso directamente a las referencias y variables de JS.

Vue. Se destaca por rastrear automáticamente las dependencias para renderizar solo los componentes en los que detecte un cambio de estado. De esta manera, logra optimizar el rendimiento de la aplicación. Además, las plantillas HTML y la posibilidad de insertar librerías mediante el uso de etiquetas script simplifica en gran manera migrar proyectos existentes.

Microsoft ASP.net. Facilita la implementación de componentes que tienen funcionalidades en común con la ayuda de una unidad de código conocida como ensamblado. También cuenta con útiles colecciones de bibliotecas de clase, que son algo así como los bloques necesarios para construir una aplicación. Gracias a estas, te será más fácil darle a tu software la facultad para gestionar sistemas de archivos, trabajar con texto, abrir una base de datos, etc.

El marco de trabajo Bootstrap
Bootstrap es un framework especialmente diseñado para desarrollar el front end. Ofrece soporte para HTML5 y CSS3, concediéndote toda la libertad que necesitas para crear interfaces de usuario completamente a tu medida. Por otro lado, su herramienta de diseño tienen un sistema de cuadrícula que facilita en gran manera insertar contenido de forma responsiva. Y la etiqueta “img-responsive” hace lo propio con las imágenes, permitiendo que se adapten a la pantalla del dispositivo del usuario.

Puedes añadir librerías de Bootstrap para ampliar las prestaciones de Reactor, Vue y ASP.NET. Es posible hacer esto desde la línea de comando, a través de una CDN o con un administrador de paquetes, como ocurre con el framework de Microsoft (emplea NuGet).

Aplicación de escritorio vs aplicación web
Repasemos las diferencias entre una aplicación de escritorio y una web. Mientras que la primera necesita instalarse en un ordenador local para poder utilizarla, la primera se ejecuta desde un navegador de internet. Por otro lado, el software de escritorio solo puede abrirse en el equipo en el que ha sido instalado. En cambio, las aplicaciones web se pueden abrir en cualquier dispositivo en línea.

Ahora bien, las ventajas de las aplicaciones de escritorio es que suelen ser más robustas y estables, y su tiempo de respuesta es menor. Por su parte, las aplicaciones web se destacan por ser de acceso universal y ofrecer compatibilidad con cualquier dispositivo. Además, no ocupan espacio en el disco duro y se integran perfectamente con distintos servicios de internet.

Hoy en día, es cada vez más común que los desarrolladores ofrezcan dos versiones de la misma aplicación: para ordenadores y para la web. Es lo que se conoce como modelo mixto. De esta manera, les ofrecen a sus usuarios lo mejor de los dos mundos. Por lo general, el software para escritorio viene con todas las funcionalidades y la aplicación en la nube ofrece las prestaciones básicas.

FODA

Cómo evaluar tus aplicaciones con el sistema FODA
El análisis DAFO (también conocido como FODA) te ayudará a comprobar la efectividad de cualquier aplicación, sea del tipo que sea. Consta de cuatro dimensiones: debilidades, amenazas, fortalezas y oportunidades.

Esta metodología se representen en una matriz o tabla, en donde los elementos negativos aparecen en la columna de la izquierda y los positivos en la derecha. A su vez, los factores de análisis internos son parte de la primera fila y los de análisis externo de la segunda. Estructurándola de tal manera, la matriz DAFO tendrá este aspecto.

Hablemos de cada uno de los elementos que conforman al análisis DAFO.

Debilidades. Consiste en hallar los puntos débiles e inconvenientes de tu aplicación con respecto a las mejores que existen en el mercado. El objetivo es encontrar cuáles son los problemas de diseño y de funcionamiento que la ponen en desventaja frente a la competencia. Trata de contestar las siguientes preguntas: ¿En qué puede mejorar? ¿Qué elementos deben descartarse? ¿Cuáles son las principales quejas y críticas de los usuarios? ¿En qué aspectos es más vulnerable?

Amenazas. Se trata de evaluar el entorno empresarial y las características del mercado con el fin de determinar qué eventualidades pueden afectar el futuro desarrollo del software. ¿Podrías experimentar problemas financieros que afecten su viabilidad? ¿Corre el riesgo de quedarse obsoleto la rápida evolución de la tecnología? ¿Podría sufrir un ataque informático o una falla que afecte la integridad, seguridad o privacidad de los datos delicados?

Fortalezas. Es necesario identificar qué partes de tu programa están funcionando bien con el fin de explotarlas al máximo y comunicarlas eficazmente a los usuarios. ¿Qué tareas realiza mejor que las demás? ¿En qué aspectos es único? ¿Qué lo hace una mejor opción para los consumidores?

Oportunidades. El análisis de los aspectos negativos y positivos, y de la competencia te ayudará a encontrar las oportunidades de mejora para tu aplicación. ¿Qué correcciones o actualizaciones se deben hacer? ¿Qué necesidades tienen los usuarios que las alternativas actuales no solucionan?

Sección #2: El Front-End

Capítulo 2: El Front-End

Definición
El front end constituye la interfaz de una aplicación, la parte con la que los usuarios interactúan. Incluye los menús, campos de entrada, botones y controles deslizantes. También está conformado por los aspectos visuales que hacen más agradable la experiencia, como elementos de diseño, fuentes y contenido.

En el caso de las aplicaciones web, existen distintos lenguajes de programación orientados al front-end. Los más utilizados son:

HTML. Designa la función de cada elemento. En otras palabras, permite diseñar el esqueleto de la página.

CSS. Sirve para definir la presentación de la app, es decir, todo lo que tiene que ver con su apariencia.

JavaScript. Se encarga de controlar el comportamiento del software, lo que incluye la interacción con el usuario.

Librería vs framework
Las librerías y los frameworks poseen elementos prediseñados que facilitan la labor de los desarrolladores. Se pueden implementar en distintos entornos de desarrollo y son compatibles con los lenguajes de programación más usados.

A menudo, estos dos términos se usan como sinónimos, pero la realidad es que son diferentes. Una librería aportan nuevas prestaciones a un IDE, concediéndoles acceso a más funciones y componentes.

El framework, por su parte, es una clase especial de biblioteca de clases, razón por la que se le confunde con una librería. Actúa como la infraestructura o el armazón en el proceso de desarrollo. De hecho, es posible añadir librerías al framework para hacerlo más funcional.

Capítulo 3: Javascript

Definiciones
JS es un lenguaje de secuencias de comandos que le ofrece a un sitio de internet la capacidad de efectuar tareas complejas. Gracias a ello, el portal puede hacer más que limitarse a mostrar información.

De hecho, es la programación en JS lo que diferencia una aplicación web de una página estática. Permite crear contenido que se actualiza de forma dinámica, controlar los elementos multimedia o responder a eventos causados por el propio usuario. Junto con HTML y CSS, constituye la tercia de lenguajes que pueden leer todos los navegadores de forma nativa.

Ahora bien, no hay que confundir JS con Java. El primero fue creado en 1995 por Netscape, aunque originalmente se llamaba Mocha y, posteriormente, LiveScript. El segundo fue desarrollado en 1996 por Sun Microsystems. Fue hasta 2002 (cuando Java ya era un lenguaje popular) que adoptó el nombre que tiene al día de hoy. El parecido en el nombre de ambos lenguajes ha hecho que algunos asuman que JS es una prolongación de Java. Pero, en realidad, no tienen nada en común: sus semánticas y propósitos son muy diferentes.

Historia
Como adelantamos antes, JS vio la luz en 1995. Fue creado por el programador estadounidense Brendan Eich para funcionar en el navegador web Netscape Navigator.

Después de su lanzamiento, otros navegadores de la época desarrollaron lenguajes similares. Tal es el caso de Microsoft, con su Jscript. Sin embargo, en 1997 fue aceptado como el estándar para todos los navegadores por parte de la European Computer Manufacturers ‘Association (ECMA), y así ha permanecido hasta la actualidad.

Aunque JS se utiliza principalmente como un lenguaje del lado del cliente, desde su mismo principio ha ofrecido posibilidades del lado del servidor (el back-end). Pero fue hasta mediados de la década de los 2000 que comenzaron a proliferar implementaciones en este sentido.

Otro hito importante en la historia de JS ocurrió en 2002, cuando la tecnología AJAX múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JS y Document Object Model (DOM).

En junio de 2015, la ECMA publicó un estándar que garantizó el uso de características avanzadas por parte de JS. Esto incluyó la aparición de clases para la programación orientada a objetos, expresiones de flecha, promesas para programación asíncrona, iteradores y módulos para organizar el código.

Principales componentes de JS
Todo aquel que se está iniciando en la programación en JS debe comprender algunos conceptos. De eso hablaremos a continuación.

Elementos básicos
Los elementos que siempre estarán presentes en tu código JS son:

Condicionales. Permite al programa tomar decisiones dependiendo de las instrucciones ingresadas.

Bucles. Indican que cierta tarea se repita una y otra vez hasta que se produzca un evento que le ponga fin.

Funciones. Contienen las instrucciones para ejecutar determinada tarea. Siempre que necesites ejecutar una función, podrás “llamarla”, sin necesidad de volver a escribirla. Por eso se les describe como bloques de código reutilizables.

Eventos. En esta categoría, se engloban las acciones o sucesos que ocurren durante la ejecución de la aplicación. Se puede programar el software para que responda de determinada manera ante un evento.

Jquery
La biblioteca Jquery le confiere a los desarrolladores la posibilidad de crear potentes aplicaciones web sin tener que realizar toda la codificación por sí mismos. Vienen con funciones para la creación de una animación, el desarrollo de aplicaciones AJAX, la gestión de distintos eventos y la navegación por una página.

AJAX
El conjunto de tecnologías AJAX posibilita la creación aplicaciones web que se ejecuta en el navegador del usuario y, al mismo tiempo, establece conexión con un servidor en segundo plano. De esta manera, se evita recargar la página preservar los cambios hechos por el usuario, mejorando así su experiencia en general.

Como su nombre lo indica (AJAX es un acrónimo de Asynchronous JS And XML), se trata de una tecnología asíncrona, lo que impide que las solicitudes al servidor interfieran con la visualización y el comportamiento del sitio web.

JSON
A fin de facilitar que todos los programadores pudieran leer y escribir piezas de código en JS, y que diferentes ordenadores pudieran interpretarlos, se creó el formato de texto JSON. Se trata del acrónimo de Notación de Objetos de JS(por sus siglas en inglés).

JSON es independiente del lenguaje, aunque se basa en convenciones reconocidas en el ámbito de la programación en C, C++, C#, Java, JS, Perl y Python, entre otros. Define seis tipos de valores: booleanos, cadenas, matrices, nulo, números y objetos. Esto lo convierte en un formato de intercambio de datos idóneo para usarse con AJAX y la API REST.

Capítulo 4: Características de JS al detalle

Cómo usar JS
Como programador de aplicaciones web, convivirás estrechamente con el lenguaje JS. Es posible incluirlo en un documento, en los elementos HTML y desde un archivo JS. Conozcamos más sobre este fascinante lenguaje.
Variables y palabras reservadas
Las siguientes palabras no pueden ser utilizadas como funciones, identificadores de objetos, métodos y variables. Están reservadas como palabras claves en uso por la especificación ECMAScript:

Break. Finaliza un bucle, un label o una sentencia switch.

Case. Compara una expresión con otras predefinidas y ejecuta la declaración que corresponda.

Catch. Enmarca un bloque de instrucciones a intentar y da una respuesta en caso de que se produzca una excepción.

Const. Convierte una variable en una constante, lo que significa que no se puede modificar.

Continue. Finaliza la ejecución de la sentencia de una iteración o bucle.

Debugger. Invoca cualquier funcionalidad de depuración disponible.

Default. Compara una expresión con otras predefinidas y ejecuta la declaración que corresponda.

Delete. Elimina la propiedad de un objeto.

Do. Ejecuta una sentencia especificada una y otra vez mientras se cumpla una condición.

Else. Ejecuta una sentencia especificada mientras se cumpla una condición.

Export. Exporta funciones, objetos o tipos de dato hacia otros programas.

Finally. Enmarca un bloque de instrucciones a intentar y da una respuesta en caso de que se produzca una excepción.

For. Crea un bucle de tres expresiones opcionales, seguida de una sentencia dentro de un bucle.

Function. Declara una función con determinados parámetros.

If. Ejecuta una sentencia especificada mientras se cumpla una condición.

Import. Importa funciones, objetos o tipos de dato procedentes de otros programas.

In. Itera en todas las propiedades de un objeto codificado por cadenas.

Instanceof. Comprueba si un objeto contiene la propiedad prototype.

Let. Declara una variable con ámbito de bloque o de alcance local.

New. Crear una instancia de un tipo de objeto.

Return. Termina la ejecución de una función y especifica el valor que debe ser devuelto.

Super. Llama y accede a las funciones del padre de un objeto.

Switch. Compara una expresión con otras predefinidas y ejecuta la declaración que corresponda.

Throw. Lanza una excepción previamente definida.

Try. Enmarca un bloque de instrucciones a intentar y da una respuesta en caso de que se produzca una excepción.

Typeof. Devuelve una cadena que especifica de qué tipo es un operando.

Var. Declara una variable.

Void. Hace referencia a una expresión que se evalúa sin devolver un valor.

While. Ejecuta una sentencia especificada una y otra vez mientras se cumpla una condición.

With. Prolonga el alcance de una cadena.

Tipos de datos
JS es un lenguaje no tipado, lo que significa que una misma variable puede contener varios tipos de datos distintos. Existe 7 categorías diferentes:

Boolean. Datos lógicos, que solo tienen dos valores posibles: true (verdadero) y false (falso).

Null. Dato que no debe tener ningún valor asignado.

Number. Valor numérico.

Object. Valor en memoria accesible mediante un identificador.

String. Cadena de texto.

Symbol. Valor único e inmutable.

Undefined. Dato al que no se le ha asignado ningún valor.

Capítulo 5: JS comparado con otros lenguajes

Similitudes y diferencias entre JS y C++
El lenguaje que más se parece a JS es C++, ya que tienen sintaxis similares, pero aun así son muy distintos.

JS no necesita ser compilado, y es un lenguaje dinámico (se puede modificar mientras está en ejecución). Además, no hace falta especificar el tipo de variable a declarar, y es utilizado para los scripts de los sitios web y ejecutado por el navegador.

En contraste, C++ requiere ser compilado antes de ejecutarlo, y es estático, lo que significa que no se puede modificar cuando está en marcha. Por otro lado, es obligatorio declarar de qué tipo es una variable, y no se puede ejecutar en un navegador. Más bien, es ejecutado de forma nativa por el sistema operativo de un ordenador.

Por último, cabe señalar que, mientras que JS es un lenguaje de alto nivel, C++ es considerado de nivel medio.

Similitudes y diferencias entre JS y Java
Los parecidos y disparidades entre JS y Java coinciden con todas las que hemos mencionado al comparar al primero con C++. Pero hay más aspectos que distinguen a un lenguaje del otro.
En el caso de JS, se depura en una sola fase y está basado en prototipos, lo que lo obliga a simular las características propias de la programación orientada a objetos. Y cabe señalar que su campo de acción se limita principalmente a páginas web y se basa en un estándar abierto, así que cualquier desarrollador puede usarlo libremente.

Por su parte, Java se depura en dos fases y está completamente orientado a objetos. Además, es mucho más potente y versátil, ya que puede utilizarse para crear aplicaciones de todo tipo que funcionen en equipos de escritorio, dispositivos móviles e incluso en navegadores. Ahora bien, aunque algunos los consideren como un lenguaje libre, en realidad es propiedad de Oracle, una empresa privada.

Capítulo 6: Como programar en JS sin usar JS usando los superconjuntos

Los superconjuntos
En los últimos años, se ha popularizado la costumbre de usar superconjuntos de JS. Con este término, se hace referencia a un lenguaje que es totalmente compatible y se integra perfectamente en JS, aportándole nuevas funcionalidades. Te presentamos los más utilizados y sus principales prestaciones.

TS. Agrega objetos y tipos estáticos basados en clases. Soporta archivos con datos sobre librerías existentes, lo que hace posible que otros programas pueden usar los valores de los ficheros como si fueran entidades estáticas.

Coffescript. Inspirado en Haskell2, Python y Ruby, añade azúcar sintáctico, es decir, hace que las construcciones en JS sean más fáciles de leer y de expresar. Sus aportaciones también incluyen la coincidencia de patrones y la comprensión de listas.

LiveScript. Permite escribir en un lenguaje más expresivo y elimina la necesidad de incluir secciones boilerplate, es decir, piezas de código que deben escribirse una y otra vez. Además, ofrece mejoras en la programación imperativa y orientada a objetos.

Reactor JS. Ayuda a construir aplicaciones cuyos datos cambian constantemente. Es declarativo, sencillo y se puede combinar con facilidad. También puede utilizarse para capas que no forman parte de la UI.

Dart. Está orientado a objetos y basado en clases. Realiza la recolección de basura al estilo del lenguaje C, y admite clases abstractas, inferencia de tipos, interfaces y mixins.

EMScripten. Procesa bytecode de LLVM (Máquina Virtual de Nivel Bajo), creando un archivo que puede ser ejecutado en JS y, por lo tanto, en navegadores web.

Babel. Convierte código ECMAScript 2015+ (ES6+) en una versión compatible con los motores JS más antiguos.

Traceur. Compila programas escritos con desarrollos de JS que podrían ver la luz en el futuro para hacerlos compatibles con los navegadores modernos.

GoogleWeb Toolkit GWT. Convierte un programa escrito en Java en su equivalente en JS y HTML.

ELM. Permite realizar la currificación, es decir, la conversión de una función de múltiples argumentos en una secuencia de funciones que utilizan un único argumento.

Haxe. Permite trabajar con parámetros propios de la programación orientada a objetos y es compatible con la inferencia de tipos. También admite las clases genéricas, los iteradores, la programación funcional y la reflectividad.

ClojureScript. Facilita la programación concurrente, lo que hace posible que varios cálculos se efectúen de forma simultánea. Es ideal para los desarrolladores que apuestan por la implementación de estructuras de datos persistentes y de objetos inmutables.

Opal. Compila el código de Ruby al JS, para poder ejecutarlo en cualquier navegador de internet.

Capítulo 7: Typescript

Descripción básica
TS es lenguaje creado por Microsoft, una propuesta de código libre y abierto. Desde el principio, fue concebido para funcionar como un superconjunto de JS, confiriéndole la posibilidad de trabajar con objetos basados en clases y tipos estáticos. Es compatible con los módulos básicos de Node.js y con las cabeceras para librerías de D3.js, jQuery, MongoDB.

Ventajas e inconvenientes
A continuación, te ofrecemos un listado de las ventajas de TS:

• Si ya estás familiarizado con JS, es fácil de aprender.

• Le confiere a JS características que generalmente se pueden encontrar en lenguajes más robustos, como Java o C#.

• Es compatible con versiones anteriores de ECMAScript.

• Ofrece más ayuda contextual que JS, lo que facilitará la programación y disminuirá los errores.

• Garantiza la creación de código estandarizado, lo que resulta ideal cuando el proyecto es desarrollado por un equipo de varios integrantes.

• Es compatible las librerías de D3.js, jQuery, MongoDB, entre otras, y los frameworks de JS.

Hablemos ahora de las desventajas:

• El sistema de tipos puede ser difícil de dominar cuando te has acostumbrado al tipado débil de JS.

• No es soportado directamente por los navegadores, lo que te obligará a compilar cada que desees probarlo en el navegador.

• Los archivos .d.ts, recomendados para trabajar sin problemas con los módulos y las bibliotecas de terceros, no siempre están disponibles o no funcionan correctamente.

Tipos de datos
Los tipos de datos en TS son:

Boolean. Datos lógicos, que solo tienen dos valores posibles: true (verdadero) y false (falso).

String. Cadena de texto.

Array. Conjuntos de valores diferenciados entre sí con un índice.

Tuple. Valor de una variable que almacena un conjunto de elementos que están tipados.

Enum. Valores numéricos que identifican a las constantes.

Any. Adoptan cualquier valor, y este puede variar a lo largo de una ejecución.

Void. No retorna nada.

Null. Dato que no debe tener ningún valor asignado.

Undefined. Dato al que no se le ha asignado ningún valor.

Never. Retorna en error o una excepción.

Object. Valor en memoria accesible mediante un identificador.

Clases e interfaces
Las clases en Typescrits son estructuras compuestas por atributos y métodos. Funciona como una molde que permite crear objetos del mismo tiempo, también conocidos como instancias de la clase. Por su parte, las interfaces son un mecanismo que funciona de modo similar a la herencia múltiple. Es decir, permiten son clase que utiliza los elementos de varias clases.

Es muy habitual usar simplemente interfaces, desprovistas de inicialización y funcionalidad, ya que esas partes es común que sean delegadas en los servicios. Pero en el caso de usar clases, tus nuevos objetos serán creados con la palabra «new».

Controladores
Los controladores tienen la función de gestionar la lógica y la vista componente. Constituyen el entornos donde se crean las variables y la información necesaria para desplegar la vista. También se ocupa de controlar el comportamiento del componente antes diferentes eventualidades.

Promesas
Uno de los conceptos más avanzados es el de las promesas. Con este término, se hace referencia al resultado de una operación asincrónica. TypeScript permite interactuar con las promesas por medio del método then, como se muestra a continuación:

Capítulo 8: React JS

Descripción básica
React es una biblioteca JS, parte de la pila MERN, que facilita el desarrollo de la capa front end de las aplicaciones de una sola página. Fue creado por Facebook y es mantenido por una comunidad de software libre en la que han colaborado más de mil desarrolladores. La función de Rect es ayudar a crear aplicaciones cuya información se actualiza constantemente.

Ventajas e inconvenientes
Las ventajas de usar React incluyen:

• Dispone de una función que facilita la renderización de componentes cliente-servidor.

• La extensión JSX facilita leer el código de los componentes, ver su diseño y observar cómo se conectan y combinan entre sí.

• Se integra con utilidades para pruebas, como jest.

• Es compatible con distintos marcos de trabajo.

Ahora hablemos de las desventajas de React:

• Solo funciona para la capa de vista, lo que significa que tienes que conectar tu código al servidor con una herramienta adicional.

• La curva de aprendizaje puede ser empinada para algunos.

Sección #3: El Back-End

Capítulo 9: Introducción al Back-End

El back-end es la capa de acceso a datos de un software o cualquier dispositivo. Este nivel no es directamente accesible por los usuarios por motivos de seguridad y complejidad. Esta capa contiene la lógica de la aplicación que maneja los datos de la misma. El back-end se ejecuta en el servidor de código y además accede al servidor de base de datos; en ocasiones ambos dos pueden estar en la misma máquina.

El back-end, o informalmente la trastienda o los bastidores, es la zona de tu aplicación que no puede ver directamente el usuario pero cuya acción es totalmente necesaria. Ambos extremos front-end y back-end trabajan estrechamente coordinados para que la aplicación exista y funcione adecuadamente.

El back-end se programa empleando un lenguaje de programación para back-end. Para usar este lenguaje, debido a la complejidad existente, suele ser necesaroi emplear un framkework o marco de trabajo, que simplifica gran cantidad de operaciones rutinarias y estandariza el código. Los lenguajes de programación más usados son son Node.js / Typescript con su framework Express.js, PHP con frameworks como Symphony Framework o Laravel, Python con sus frameworks Django o Flask, Go, Ruby con su framework Ruby on Rails y C# con sus frameworks Entity Framework Core o ASP.NET.

Capítulo 10: Filosofía de programación en el Back-End

La filosofía de programación de un back-end de una aplicación web tiene unas lineas generales comunes a todas las aplicaciones web. Debe tenerse un equilibrio entre la carga de trabajo en el front-end y la del back-end.

Esta filosofía también tiene unas líneas particulaes que tienen que ver con el tipo de aplicación web que estemos considerando.

Capítulo 11: Preparar los servidores

En primer lugar debemos saber que una típica aplicación web requiere de 3 servidores ya sean lógicos o físicos:
1.- Servidor web de front-end. Si hay mucho tráfico puede ser necesario utilizar un proveedor de servicios de computación en la nube para poder atender todas las peticiones de contenidos.
2.- Servidor de código back-end. Si hay mucha carga de trabajo se generarán varias instancias de este servidor para tender todas las solicitudes.
3.- Servidor de base de datos. A veces se usan 3 servidores para tener redundancia.
Usualmente estos 3 servidores suelen repartirse entre 2 servidores físicos pero hay mucha casuística.

Los servidores quedan definidos por 3 características:
– Máquina física o virtual considerada. Servidor físico o virtualizado, cuantos núcleos, cuanta memoria, cuanto almacenamiento, qué tipo de acceso a red, qué ancho de banda, cuanta redundancia, que política de backup.
– Su sistema operativo.
De código abierto (Ubuntu, Debian, Centos, etc) o de código de licencia propietaria (Windows Server + IIS).
– Quién hace el mantenimiento (es un servidor gestionado por una empresa de hosting o es un servidor propio).
– Quien hace la configuración del servidor. La respuesta suele ser siempre la misma: nosotros. En algunos casos este servicio puede estar subcontratado. Si lo lleva la propia empresa que proporciona el hosting, probablemente se trate de un hosting compartido más que de un servidor.

Sección #4: Conclusiones

Capítulo 12: Consejos finales

Si estás empezando en un proyecto web por primera primera y aprendiéndolo al tiempo:
Ejemplo para un proyecto en Node (Node.js® es una plataforma basada en el tiempo de ejecución de JavaScript de Chrome para crear fácilmente aplicaciones de red rápidas y escalables) ya sea con Angular o con Reactor.

-> Conoce el paradigma

-> Conoce la dimensión del proyecto:
Es más fácil empezar programando el back-end queel front-end porque son menos tecnologías.

Antes de empezar a usar la base de datos Mongo debemos conocer bien su filosofía (no relacional).

Los navegadores y los servidores no son todos iguales: el código se debe testear en condiciones reales.

-> Formación previa de calidad con prácticas:
Proveete una formación de calidad que incluya práctica.

-> Instala correctamente el entorno:

-> Familiarizate con la estructura de carpetas de un proyecto en Node:

-> Elje un entorno sólido a la altura del tipo de proyecto a realizar

Tecnologías :
Usar una buena plantilla de cuadro de mando / plantilla dashboard para centralizar el desarrollo.
Pila de tecnologías. Elije la pila MERN o la MEAN.

Back-End
Elije las que quieras pero no te recomendamos:
SQL – No permite hacer tratamiento avanzado de datos
PHP – Da muchos problemas de compatibilidad y salvo que se use un framework es realmente dificil hacer algo complejo con él
Java – Da muchos problemas al cambiar de arquitectura de máquina
Te recomendamos:
MongoDB – Para proyectos complejos
Microsoft SQL Server – Base de datos tradicionales con un buen rendimiento

Front-End:
Elije las que quieras pero te recomendamos:
Typescript JS o Reactor JS

-> Traza un camino fácil a la hora de asignar medios
Hay muchas formas de hacer un proyecto. Si estás empezando nuestro mejor consejo es que elijas caminos fáciles.

– Regla de oro
Dimensiona las necesidades bien antes de empezar el proyecto.

– Servidor
Necesitades: Núcleos, memoria ram, espacio en disco, nivel de redundancia, conexión de red, ips públicas

Servidor local
Trabaja en servidor local pero no pierdas de vista las pruebas periódicas (semanales) en el servidor físico donde se instalará definitivamente

Servidor físico
Más deseable > menos deseable
Servidor físico dedicado de un hosting > Servidor en la nube > Servidor físico propio
Sistema operativo del servidor. Recomendamos: Centos. Debian. Ubuntu.

– Plantilla web
Usar una buena plantilla de cuadro de mando / plantilla dashboard para centralizar el desarrollo, sea gratuita o de pago.

– Imágenes
Librerías de licencia abierta para imágenes, iconos, sonidos, etc.

– Código abierto
Considera ejemplos de código y librerías de código abierto bien probadas para contruir parte de tu código.