MediaComem / comem-masrad-dfa

MAS-RAD DFA course

MAS-RAD | CAS-DAR | Advanced Front-end Development (DFA)

• Prerequisite
• Plan
• Additional concepts and tools
• Documentation
• Useful links

The goal of this course is to discover concepts and tools to organize the front-end side of a web application and enrich the user interface/experience according to current good practices.

You will:

• learn how to make good use of a CSS framework to build a responsive HTML user interface
• learn (or review) how to manipulate the DOM API with or without a library
• learn how to manage asynchronous communications with a Web API on the back end
• learn how the use of a framework does help to organize the front-end code of a single page application
• be introduced to frameworks that help you develop and build your web application for multiple devices

This course uses subjects from or based on COMEM+ architecture & deployment, web-oriented architecture and mobile development courses taught to students of Media Engineering at HEIG-VD.

Prerequisite

• Basics of HTML, CSS and JavaScript
• Use of command line
• Use of Git, Git branching and Collaborating with Git on GitHub

Plan

• ✔ Introduction

• ✔ Setting up your environment

• Bootstrap

  • ✔ Getting started
  • ✔ Layout management (practice)

• JavaScript

  • ✔ Basics and more

• DOM Manipulation

  • ✔ With JavaScript
  • ✔ With jQuery

• Web Service and asynchronous operations

  • ✔ RESTful APIs
  • ✔ Basic Promises
  • ✔ Observables with Rxjs

• ✔ Modular JavaScript (✔ practice)

• ✔ TypeScript

• Angular

  • ✔ Angular CLI

  • ✔ Getting started

  • Angular Forms

  • ✔ Hands-On exercise

  • ✔ Navigation & Routing

• ✔ Project Starter

• Geolocation & map features

  • ✔ Geolocation
  • ✔ Angular Leaflet

Additional concepts and tools

• ✔ Code and architecture principles

• ✔ Node Package Manager (npm)

• ✔ JavaScript Closures

• ✔ JavaScript Prototypes

• ✔ JavaScript ES6 Classes

• ✔ Advanced Promises

• ✔ SOP & CORS

Documentation

• ✔ Travel Log API

Useful links

• ✔ REST demonstration API (implementation & docs source) used in the RESTful APIs exercise