FRONT-END WEB DEVELOPMENT

SHE Level 4
SCQF Credit Points 20.00
ECTS Credit Points 10.00
Module Code MHI326717
Module Leader James Paterson
School School of Computing, Engineering and Built Environment
Subject Computing
Trimester
  • A (September 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. The percentage of Work Based Learning for this module, as represented by the proportion of the Activity Types which take place off campus, is 80%. The percentage of Work Based Assessment for this module is 10%.

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 successful 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

Work based Education aims to maximise the direct and digitally mediated contact time with students by practicing teaching and learning strategies that use authentic work based scenarios and encourage action learning, enquiry based learning, problem based learning and peer learning. All these approaches aim to directly involve the students in the process of learning and to encourage sharing of learning between students. The module team will determine the level and accuracy of knowledge acquisition at key points in the delivery, inputting when necessary either directly or with the support of external experts who will add to the authenticity, the credibility and application of the education and learning in the workplace.? The course material is introduced through lectures in the form of online presentations. Students will engage with practical web development and tutorial activities including during sessions on campus which will allow students to discuss key concepts and issues with peers and with instructors. Students will be expected to undertake a significant level of independent study within the workplace, including practical activities, and links will be provided to appropriate external material such as podcasts, MOOCs, videos and literature to supplement the module content. Students will also be encouraged to reflect upon the theoretical learning within the work place and the application of newly learned concepts to the work environment. 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
Independent Learning (FT) 132.00
Assessment (FT) 20.00
Tutorials (FT) 12.00
Practicals (FT) 12.00
Lectures (FT) 24.00

Assessment Methods

Component Duration Weighting Threshold Description
Course Work 02 n/a 50.00 35% Report (2000 words)
Course Work 01 n/a 50.00 35% Practically based web programming assignment