FE408
Frontend and API Performance
Faculty
Mikhail Kuznetcov
Tech lead at Zalando, Berlin
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
One of the main user experience factors is performance. Every second that users have to wait dramatically increases their frustration and the likelihood of them giving up and switching to another product or service. Performance is an even more important topic now that most users browse the web on mobile devices, and web development revolves more and more around running JavaScript in the browser.
During this course, students will learn how browsers work and the different things that can affect performance. It will guide them through the tools and techniques they can use to research and fix performance issues in real-world projects. The goal of this course is to equip the students with the knowledge required to create fast and smooth web experiences.
Learning highlights
- Get deep knowledge of the steps a browser takes to load a website.
- Learn about performance metrics and how they are used to measure page load performance.
- Understand how network requests can be optimised to speed up initial page loads.
- Learn how to optimise JavaScript bundles with code splitting and tree shaking.
- Learn O notation basics in regards to JavaScript performance and memory use.
- Discover ways to improve animations and perceived performance.
Course outline
15 classes
Introduction to Web Performance
Course overview
Performance fundamentals
Critical rendering path
Web Vitals
Network & caching
Request lifecycle
Compression (gzip, brotli, etc.)
HTTP concepts
Faster Loading
Content delivery networks (CDN)
Preloading and lazy loading
Edge computing
JavaScript Bundles
Bundles
Lazy loading
Tree shaking
Webpack & vite
JavaScript Performance
Algorithms complexity
Data loading in JS
Profiling JavaScript
Web Workers
Render Performance
Rendering pipeline
Layouts
Images
Fonts
Performant animations
Rendering
CSS
Repaints
Animations in React
Memory Performance
Event loop
Micro-, macrotasks
GC & memory leaks
Tools overview & Practice session
Tools overview & Practice session
PWA & SSG apps
SSG frameworks
PWA capabilities
React performance
React dev tools
Features overview
Optimising react apps
SSR with Next.js
React SSR
Next.js features
Optimising Next.js
Server performance
Server caching
DB
Cloud solutions
Profiling the server
Running NodeJS in production
App Level Solutions
HTTP pros and cons
WebSockets / ServerSent Events / gRPC
GraphQL
Summary & Final exam
Summary & Final exam
Prerequisites
Skill: HTML, CSS, and JavaScript
Skill: Shell basics
Desirable: Node.js basics
Methodology
Lectures and demonstration format
Group debates where we’ll discuss problem-solving techniques.
Discord channel to ask questions to the teacher.
Homework will be given at least twice a week, and it will be reviewed first thing next class.
Project presentation and feedback upon completion of the two Friday assignments.
Grading
Mikhail worked as front-end and full-stack engineer for over 10+ years. He has experience, and worked with a variety of technologies, frameworks, libraries and development tools. Mikhail has experience with frameworks of front-end web development: Vue, React, Svelte.
Mikhail has spoken at conferences across the globe on topics around JavaScript and frameworks since 2017. He is currently leading frontend teams at the largest EU online fashion retail company - Zalando. Where his main focus is the development of a platform, architecture and professional growth of middle/senior engineer.
See full profileApply for this course
Frontend and API Performance
by Mikhail Kuznetcov
Total hours
45 Hours
Dates
Mar 11 - Mar 29, 2024
Fee for single course
€1500
Fee for degree students
€750
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ
Will I receive a certificate after completion?
Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.
Do I need a visa?
This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.
Can I get a discount?
Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.