FRONT-END WEB DEVELOPMENT

SHE Level 4
SCQF Credit Points 20.00
ECTS Credit Points 10.00
Module Code MHI325689
Module Leader Jim Devon
School School of Computing, Engineering and Built Environment
Subject Computing
Trimester
  • B (January start)

Pre-Requisite Knowledge

Web Application Development 1 or equivalent

Summary of Content

This module provides students with the technical foundation to enable them to develop applications which are executed within a web browser. The module covers HTML5, JavaScript frameworks and libraries and other appropriate technologies with implementations that allow client-side scripts to interact with the user, control the browser, communicate asynchronously and alter document content. In addition, widely applied patterns used for client-side web application development are covered. While undertaking the module students develop applications that consume remote services using appropriate technologies and data formats within browser-based applications.

Syllabus

Advantages and disadvantages of large-scale browser-based JavaScript applications HTML/CSS : -360 - HTML 5 capabilities, ie.g. canvas, video and audio, - new and emerging features e.g. offline support and client-side storage elements, - CSS pre-processing, for example LESS, SASS JavaScript : -360 - current programming techniques and practices in JavaScript including DOM scripting techniques and applying object-oriented principles in JavaScript - design patterns relevant to web applications e.g. Module, Revealing Module, Singleton, Constructor MVC, MV* Creating large-scale browser-based JavaScript applications : -360 - architecture and design issues, including architecture patterns, modularisation and dependencies, routing/navigation/history, templating/binding, data access, event-driven messaging - libraries and frameworks which support development of large-scale JavaScript applications, for example e.g. jQuery, Bootstrap, AngularJS - application building and deployment - security: preventing cross-site scripting, Content Security Policy Working with services : -360 - REST services - asynchronous requests and callbacks - XMLHttpRequest/AJAX - cross-origin requests - authentication Real-time web communication : -360 - server push - publish-subscribe - peer-to-peer - techniques and technologies for real-time web communication, including: polling, long polling, WebSocket, HTML5 Server-Sent Events, WebRTC - frameworks which support development of real-time web applications Testing and debugging : -360 - unit testing in JavaScript - client-side test frameworks - use of tools for debugging JavaScript - use of tools for debugging HTTP requests/responses Alternatives to JavaScript, for example WebAssembly, TypeScript

Learning Outcomes

On completion of this module, students should be able to:1 - Determine an appropriate distribution of functionality between the front end (client) and back end (server) tiers of a web application2 - Demonstrate an understanding of the architectures and design patterns commonly used to create front-end web applications. 3 - Critically appraise and select frameworks and libraries which meet specific purposes within the architecture of front-end web applications.4 - Evaluate the requirement for real-time functionality to enhance responsiveness within a web application.5 - Develop and test a rich, responsive, secure and scalable front-end web application which can be executed within a modern web browser and interacts with remote services, making use of appropriate technologies, libraries and frameworks.

Teaching / Learning Strategy

The university 'Strategy for Learning' documentation has informed the learning and teaching strategy for this module. The module's material will be introduced through lectures, while practical exercises, based on the lecture material, will be given to students for their laboratory sessions. Tutorials will be used to help explain and elaborate on both the lecture material and the laboratory exercises. All lecture, laboratory and tutorial material will be made available on GCU Learn. During all lab and tutorial sessions students will receive formative feedback on their performance in undertaking the laboratory and tutorial exercises. Summative feedback and grades will also be provided for the coursework assignment undertaken as part of the module using GCU Learn. GCU Learn will also be used to provide the students with module specific discussion forums to stimulate student and lecturer interaction out with the normal lecture, laboratory and tutorial sessions.

Indicative Reading

-567 Books and articles: Learning JavaScript Design Patterns: A JavaScript and jQuery Developer's Guide 1st Edition, A. Osmani 2017 O'Reilly Single Page Web Applications: JavaScript end-to-end, Michael Mikowski and Josh Powell, 2013, Manning Murach's JavaScript and jQuery (3rd Edition) Mary Delamater and Zak Ruvalcaba 2017 Mike Murach. JavaScript: The Definitive Guide, D. Flanagan, 2011 O'Reilly Angular in Action, J. Wilken and D. Aden, 2018, Manning Real-Time Communication with WebRTC: Peer-to-Peer in the Browser <https://www.amazon.co.uk/Real-Time-Communication-WebRTC-Peer-Peer-ebook/dp/B00JQOL0QE/ref=sr_1_2?ie=UTF8&qid=1536740949&sr=8-2&keywords=webrtc>, Salvatore Loreto <https://www.amazon.co.uk/Salvatore-Loreto/e/B00JKTC3JI/ref=sr_ntt_srch_lnk_2?qid=1536740949&sr=8-2> and Simon Pietro Romano <https://www.amazon.co.uk/Simon-Pietro-Romano/e/B00JJHY920/ref=sr_ntt_srch_lnk_2?qid=1536740949&sr=8-2> 2014 O'Reilly Real-time Web AppsWith HTML5 WebSocket, PHP, and jQuery, J. Lengstorf and P. Legetter, 2013, Apress -567 Online sources: Node.js: Real-Time Web with Socket.io, E. Henri, 2017, Lynda.com course -360

Transferrable Skills

By the end of this module students will have gained competence in the following key areas: Specialist knowledge and application Critical thinking and problem solving Communication skills, written, oral and listening Computer literacy Self confidence, self discipline & self reliance (independent working) Creativity, innovation & independent thinking Ability to prioritise tasks and time management

Module Structure

Activity Total Hours
Lectures (FT) 24.00
Assessment (FT) 20.00
Independent Learning (FT) 132.00
Tutorials (FT) 12.00
Practicals (FT) 12.00

Assessment Methods

Component Duration Weighting Threshold Description
Coursework 1 n/a 50.00 35% Practically based web programming assignment
Exam (Exams Office) 2.00 50.00 35% Written Examination