name: intro class: cols, middle, main .fifty.main-left[ # Interactive Front-end Development by Artem Halas and Stanislav Deviatykh ] .fifty.main-right[.main-circle[].secondary-circle[]] ??? Presenter display slide notes Pre-lecture checklist * Switching between mirroring and non-mirroring works * Unrelated tabs and windows closed or minimized * Do not disturb mode **ON** * Slides cloned, one has presenters mode on * Dependencies installed and scripts are working for lecture example code * Terminal(s) open with code and window to run scripts --- # About the course * Elective course intended to provide practical experience * Started in spring 2016 by * Urmas Talimaa (Glia) * Stenver Jerkku (eAgronom) * Continued by Urmas Talimaa * Now continued by us --- # About the course * Student feedback says that the course is difficult * Extensive **individual** programming homework * Listeners are welcome, but their homework will not be reviewed You will need to write at least 1000 lines of code, **by yourself** to complete homework. If this is not what you signed up for, there is still a option to de-register. --- class: about-us # About us .cols[ .fifty[ ### Artem Halas - Software engineer in Pipedrive - Love cycling .full-image[] ] .fifty[ ### Stanislav Deviatykh - Software engineer in Qminder - Love pixel art .full-image[] ] ] --- # About Pipedrive - First CRM platform made for Salespeople - Estonian #5 Unicorn - 10 Offices in 8 countries - 900 + employees - Used by 95 000 Companies -- # About Qminder - B2B SaaS queue management system - 100+ clients from 50+ countries - 80+ million visitors served --- # Course overview * JavaScript crash course * Basic syntax * Ecosystem & tooling * UI components using React * Means of composition * Testing, testing, testing -- * Application state management * Cross-cutting concerns * Integration with external APIs * Asynchronous code The latter parts of the course are subject to change --- # Course overview * Working from principles over hacking things together * A lot of (unit) testing which will be graded * Functional programming * Composition of simple ideas --- # Course overview * Discussed topics are not specific to the browser nor JavaScript * Many functional programming patterns are similar * For better or for worse, the Web is the most popular and accessible platform * This necessitates learning some JavaScript and the DOM (Document Object Model) --- # Calendar A lot of work! * 3 EAP = 78 hours * 1 homework ~every week --- # Homework * 7 homework, 10 points each * Continuous software project * First one given out today * ~8 hours spent on each homework * Hard deadline 23:59 the next Sunday (10 days) * Miss deadline = 10 points gone from final grade * Catch-up application published Monday morning ??? The catch-up application is the only piece of code that can be used without attribution. It is there to avoid people who fail to produce a good enough solution one week from failing the whole course. --- # Homework * No hand holding! * Slack workspace #help-homework for support * You could help each other as well * A lot of reading and figuring things out from zero * Straight to cold water! * Practical project lead experience --- ## Tips * Start early, homework simply cannot be accepted after deadline * Code style matters! * This includes putting effort variable naming * What cannot be understood, cannot be graded --- # Homework * We've been reading and reviewing code for a long time * We will be reading and reviewing homework from each one of you * It is easy for me to detect when code was pieced together from multiple sources * If you plagiarize homework, you will get an F for the whole course and a note of plagiarism on your university record We are here to teach as a guest lecturer and have zero patience for plagiarism. There are easier ways to score 3 EAPs. --- # Homework - what can I use? * Code from previous years of this course - **NO** * Code from other students - **NO** * Code that you found anywhere from the internet - **NO** * Only okay if it is a small snippet and properly attributed * Basing your homework on the last week's catch-up application - **YES** --- # Exam * 30 points, multiple choice * Will be relatively simple if you attended all the lectures * Exam result not required for final grade * 51 points total = passed --- # Course info Everything is linked to on https://courses.cs.ut.ee/2022/react --- # Materials * All materials including slides are available through the [course repository](https://github.com/urmastalimaa/interactive-frontend-development) * The materials can be read in a book-like format through the GitHub interface * There are _a lot of_ blogs and guides online on this topic, but * blog quality varies wildly, * official documentation is mostly best