El objetivo principal de este MOOC es el de proporcionar los conocimientos necesarios para desarrollar aplicaciones Web en el lado cliente, en los navegadores. Para ello es fundamental conocer las bases del desarrollo de aplicaciones Web según el patrón MVC (Modelo Vista Controlador) y las implicaciones de su implantación en los navegadores. Para llevar a la práctica estos conceptos se realizan proyectos de ejemplo utilizando dos de las tecnologías punteras en la actualidad: ReactJS y Angular 2.

El uso de estas tecnologías en el desarrollo de servicios en Internet hace que la experiencia de usuario sea mucho más satisfactoria y las posibilidades de las aplicaciones mucho más amplias. Por otra parte, al repartir la carga de ejecución entre los diferentes dispositivos, los servicios son mucho más eficientes en cuanto a consumo de recursos, escalabilidad y rendimiento.

• Conocer los fundamentos del patrón MVC y del desarrollo de aplicaciones Web

• Analizar y asimilar las implicaciones del desarrollo de este patrón en el lado cliente (en los navegadores Web)

• Aplicar estos conocimientos al desarrollo de aplicaciones con ReactJS y Angular 2 analizando las diferencias, ventajas e inconvenientes de cada uno de ellos.

• Conocer las principales tecnologías de bases de datos en cliente

0. Introduction to the course

Welcome to pupils and introduction to this MOOC

1. Web applications development basis. Client-server model. MVC pattern

This module presents the basis of web development, HTML, JavaScript, CSS and the models and patterns related to this development that is so demanded nowadays

2. Client-based web application development. Technologies and useful tools

This second module introduces the related technologies, libraries and useful tools to help in web development. These tools such as Babel, Firebug, Minify, Watchify, ...

3. Angular 2. Introduction. Angular 2 basis

This module introduces Angular 2 with a hello world application

4. Angular 2. Templates, directives and data binding

This module presents the first steps with Angular 2, the templating system, and how to create directives and perform data binding

5. Angular 2. Modules, services and dependency injections

The Module 5 describes how to create Modules in Angular 2, and complement them with services and other dependencies

6 Angular 2. Routes, backends and forms

This module introduces routes in the application, presents the way to do forms in Angular 2

7. ReactJS. Introduction. ReactJS basis and JSX

In the seventh module we get to ReactJS, the basis and the language JSX that is an extension of JavaScript

8. ReactJS. Components and their lifecycle

ReactJS Components are explained in this module with simple examples, also the component lifecycle is explained

9. ReactJS. Composition of components

This module introduces the way components communicate and coordinate to create the application, again with simple examples

10. ReactJS. Adding Flux or Redux, completing the architecture

With ReactJS we have our views, but we also need controllers and models (MVC pattern), for this we add Flux or Redux to our application and create a simple but very powerful architecture

11. ReactJS. React Native

This module provides an introduction to React Native, a framework that allows to build native mobile applications using JavaScript and React. The different components, features and APIs provided by React Native will be described.

12. Client-based databases. PouchDB and CouchDB

This module presents PouchDB and combines it with the previous technologies. PouchDB is a client Database.

Cada uno de los temas estará compuesto por varios elementos:

• Vídeo-lecciones en las que el profesor explica los contenidos y realiza tutoriales prácticos explicando cada una de las tecnologías. Estos vídeos se producirán utilizando un sistema de creación de vídeos desarrollado como resultado de los trabajos de investigación del propio equipo docente y validado en MOOCs y cursos online previos. En algunos vídeos también se valorará la posibilidad de incorporar cuestionarios integrados. Esta integración se realizará mediante otra herramienta desarrollada por el grupo de innovación educativa.

• Presentaciones con los contenidos teóricos explicados durante la impartición del tema así como la explicación detallada de los ejemplos realizados.

• Autoevaluación de los contenidos aprendidos en el tema mediante cuestionarios.

• Objetos de aprendizaje con ejercicios de programación autoevaluables. Estos objetos de aprendizaje serán desarrollados empleando una de las soluciones tecnológicas desarrolladas dentro del grupo de innovación educativa y validada en diferentes asignaturas de la ETSIT.

• Propuestas de prácticas de programación opcionales.

• Relación de enlaces de utilidad a la documentación relevante de cada tecnología así como a tutoriales complementarios para profundizar en cada uno de los conceptos aprendidos

Se utilizarán mecánicas de “gamificación” en algunos elementos del curso para hacer más atractiva la participación de los alumnos.

Además se fomentará el uso de las siguientes herramientas:

• Foro de la asignatura para la consulta de dudas y la sugerencia de temas relacionados con el curso.

• Repositorio de código en la plataforma GitHub donde se irán publicando los materiales de las prácticas propuestas así como su solución. Estas soluciones se publicarán siguiendo una estructura de ramas en la cual cada uno de los pasos necesarios para su desarrollo es independiente y autocontenido.

• Uso de plataformas PaaS gratuitas para el despliegue y prueba de las prácticas desarrolladas durante el curso.

• Estudiantes de ingeniería o de otras titulaciones relacionadas con los servicios de Internet que deseen aprender sobre el uso de tecnologías Web de cliente

• Profesionales que desean renovar sus conocimientos de desarrollo de aplicaciones y servicios Web aprendiendo las tecnologías más punteras

• Cualquier desarrollador Web que desee aprender estas nuevas tecnologías

La evaluación del curso se realiza mediante varios mecanismos:

• Al final de cada módulo se incluye una autoevaluación tipo test mediante la cual el alumno puede determinar su nivel de asimilación de los conceptos.

• Se propondrán prácticas que serán evaluadas entre iguales (evaluación P2P). También se publicará su solución en la plataforma GitHub. Estas soluciones se publicarán siguiendo una estructura de ramas en la cual cada uno de los pasos necesarios para su desarrollo es independiente y autocontenido.

El equipo docente realizará las actividades de dinamización de los foros, el blog del profesor y la herramienta de correo electrónico para comunicaciones directas.

Además fomentará el uso de los recursos multimedia proporcionados y la realización de actividades extra en las prácticas poniendo ejemplos de aplicaciones y servicios de éxito en Internet.

Se “gamificarán” algunas de las prácticas para hacer más atractivo su desarrollo y fomentar la participación individual y colaborativa.