{"id":4165,"date":"2026-08-10T09:10:52","date_gmt":"2026-08-10T09:10:52","guid":{"rendered":"https:\/\/nokobox.com\/index.php\/item\/frontendmasters-javascript-design-patterns-for-web-apps-2024-8\/"},"modified":"2026-08-10T09:10:52","modified_gmt":"2026-08-10T09:10:52","slug":"frontendmasters-javascript-design-patterns-for-web-apps-2024-8","status":"publish","type":"digital_item","link":"https:\/\/nokobox.com\/index.php\/item\/frontendmasters-javascript-design-patterns-for-web-apps-2024-8\/","title":{"rendered":"FrontendMasters \u2013 JavaScript Design Patterns for Web Apps 2024-8"},"content":{"rendered":"<div class=\"w-post-elm post_content\">\n<h2 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Description<\/span><\/h2>\n<p dir=\"ltr\" style=\"text-align: left;\" data-sourcepos=\"32:1-32:295\"><span style=\"vertical-align: inherit;\"><strong>JavaScript Design Patterns for Web Apps<\/strong>, In this course, you will learn about design patterns for front-end projects using JavaScript. You\u2019ll understand the benefits and challenges of design patterns and learn how to implement different patterns to improve the readability, reusability, modularity, and scalability of your simple JavaScript projects. You will learn how to implement classic and modern design patterns in front-end development, achieve better scalability in data management and application state, and improve user experience. The syllabus of this course includes design patterns for Single Page Applications (SPA), Multi Page Applications (MPA), data, state management and some advanced ideas that you can implement in your own projects if possible.<\/span><\/p>\n<h3 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">What you will learn in the JavaScript Design Patterns for Web Apps course<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li data-sourcepos=\"17:1-17:51\"><span style=\"vertical-align: inherit;\">How to write reusable and easy-to-maintain code<\/span><\/li>\n<li data-sourcepos=\"18:1-18:65\"><span style=\"vertical-align: inherit;\">The principles and methods of implementing design patterns in front-end programs<\/span><\/li>\n<li data-sourcepos=\"19:1-19:56\"><span style=\"vertical-align: inherit;\">Classic and modern design patterns such as MVC, MVVM and Observer<\/span><\/li>\n<li data-sourcepos=\"20:1-20:59\"><span style=\"vertical-align: inherit;\">Manage application data and state using appropriate templates<\/span><\/li>\n<li data-sourcepos=\"21:1-22:0\"><span style=\"vertical-align: inherit;\">Techniques for improving user experience in web applications<\/span><\/li>\n<\/ul>\n<h3 class=\"\" dir=\"ltr\" style=\"text-align: left;\" data-sourcepos=\"23:1-23:31\"><span style=\"vertical-align: inherit;\">This course is suitable for people who:<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left;\" data-sourcepos=\"25:1-29:0\">\n<li data-sourcepos=\"25:1-25:52\"><span style=\"vertical-align: inherit;\">They have basic knowledge of working with simple JavaScript and DOM<\/span><\/li>\n<li data-sourcepos=\"26:1-26:60\"><span style=\"vertical-align: inherit;\">Looking to improve their skills in web application development<\/span><\/li>\n<li data-sourcepos=\"27:1-27:93\"><span style=\"vertical-align: inherit;\">Want to learn design patterns to create more efficient and scalable front-end applications<\/span><\/li>\n<li data-sourcepos=\"28:1-29:0\"><span style=\"vertical-align: inherit;\">Looking to improve the user experience of their web applications<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Course details<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li><span style=\"vertical-align: inherit;\">Publisher: <\/span><a href=\"https:\/\/href.li\/?https:\/\/frontendmasters.com\/workshops\/web-app-patterns\/\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit;\">FrontendMasters<\/span><\/a><\/li>\n<li><span style=\"vertical-align: inherit;\">Lecturer: <\/span><a class=\"FM-Link\" href=\"https:\/\/downloadlynet.ir\/tag\/maximiliano-firtman\/\"><span style=\"vertical-align: inherit;\">Maximiliano Firtman<\/span><\/a><\/li>\n<li><span style=\"vertical-align: inherit;\">Training level: beginner to advanced<\/span><\/li>\n<li><span style=\"vertical-align: inherit;\">Training duration: 4 hours and 24 minutes<\/span><\/li>\n<li><span style=\"vertical-align: inherit;\">Number of courses: 34<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Course headings<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: left;\">1- Introduction<br \/>\n2- What are Design Patterns<br \/>\n3- Components of a Design Pattern<br \/>\n4- Design Patterns for VanillaJS Web Apps<br \/>\n5- Classic Patterns<br \/>\n6- Singleton Factory Patterns<br \/>\n7- Decorator Pattern<br \/>\n8- Adapter Mixin Value Object Patterns<br \/>\n9- Observer Template Method Patterns<br \/>\n10- Memento Command Patterns<br \/>\n11- Todo Masters Project Setup<br \/>\n12- ECMAScript Modules globalThis<br \/>\n13- Observer Pattern with Mixins<br \/>\n14- Creating the Data Classes<br \/>\n15- Adding TodoList Methods<br \/>\n16- Add Delete Commands<br \/>\n17- Rendering TodoList Items<br \/>\n18- Saving Todos in LocalStorage<br \/>\n19- Adding Keyboard Shortcuts<br \/>\n20- Undo with Memento Pattern<br \/>\n21- Single Page Application Patterns<br \/>\n22- Coffee Masters Project Tour<br \/>\n23- Lazy Loading JavaScript Components<br \/>\n24- View Transitions<br \/>\n25- Morphing Elements Between Pages<br \/>\n26- HTML Template Interpolation<br \/>\n27- Routing Metadata<br \/>\n28- Multi-Page Application Patterns<br \/>\n29- Cooking Masters Project Tour<br \/>\n30- Prefetch Prerender<br \/>\n31- Promisify Flux Redux Patterns<br \/>\n32- Lazy Sync Proxy Middleware Patterns<br \/>\n33- Advanced Ideas<br \/>\n34- Wrapping Up<\/p>\n<h3 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Course prerequisites<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left;\">\n<li dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Experience writing HTML and CSS<\/span><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Experience with JavaScript and DOM APIs<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">&nbsp;Course images<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-925854 aligncenter\" src=\"https:\/\/downloadly.ir\/wp-content\/uploads\/2024\/07\/JavaScript-Design-Patterns-for-Web-Apps-1.jpg\" alt=\"JavaScript Design Patterns for Web Apps\" width=\"777\" height=\"169\"><\/p>\n<h3 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Sample video of the course<\/span><\/h3>\n<div style=\"width: 640px;\" class=\"wp-video\"><span class=\"mejs-offscreen\">Video Player<\/span><\/p>\n<div id=\"mep_0\" class=\"mejs-container mejs-container-keyboard-inactive wp-video-shortcode mejs-video\" tabindex=\"0\" role=\"application\" aria-label=\"Video Player\" style=\"width: 640px; height: 360px; min-width: 217px;\">\n<div class=\"mejs-inner\">\n<div class=\"mejs-mediaelement\"><mediaelementwrapper id=\"video-130738-1\"><video class=\"wp-video-shortcode\" id=\"video-130738-1_html5\" width=\"640\" height=\"360\" preload=\"metadata\" src=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Practical_Web_App_Patterns_with_Vanilla_JS_Downloadly.ir.mp4?_=1\" style=\"width: 640px; height: 360px;\"><source type=\"video\/mp4\" src=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Practical_Web_App_Patterns_with_Vanilla_JS_Downloadly.ir.mp4?_=1\"><a href=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Practical_Web_App_Patterns_with_Vanilla_JS_Downloadly.ir.mp4?nocache=1786100511138\">https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Practical_Web_App_Patterns_with_Vanilla_JS_Downloadly.ir.mp4<\/a><\/video><\/mediaelementwrapper><\/div>\n<div class=\"mejs-layers\">\n<div class=\"mejs-poster mejs-layer\" style=\"display: none; width: 100%; height: 100%;\"><\/div>\n<div class=\"mejs-overlay mejs-layer\" style=\"display: none; width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-loading\"><span class=\"mejs-overlay-loading-bg-img\"><\/span><\/div>\n<\/div>\n<div class=\"mejs-overlay mejs-layer\" style=\"display: none; width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-error\"><\/div>\n<\/div>\n<div class=\"mejs-overlay mejs-layer mejs-overlay-play\" style=\"width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-button\" role=\"button\" tabindex=\"0\" aria-label=\"Play\" aria-pressed=\"false\"><\/div>\n<\/div>\n<\/div>\n<div class=\"mejs-controls\">\n<div class=\"mejs-button mejs-playpause-button mejs-play\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Play\" aria-label=\"Play\" tabindex=\"0\"><\/button><\/div>\n<div class=\"mejs-time mejs-currenttime-container\" role=\"timer\" aria-live=\"off\"><span class=\"mejs-currenttime\">00:00<\/span><\/div>\n<div class=\"mejs-time-rail\"><span class=\"mejs-time-total mejs-time-slider\" role=\"slider\" tabindex=\"0\" aria-label=\"Time Slider\" aria-valuemin=\"0\" aria-valuemax=\"0\" aria-valuenow=\"0\" aria-valuetext=\"00:00\"><span class=\"mejs-time-buffering\" style=\"display: none;\"><\/span><span class=\"mejs-time-loaded\"><\/span><span class=\"mejs-time-current\"><\/span><span class=\"mejs-time-hovered no-hover\"><\/span><span class=\"mejs-time-handle\"><span class=\"mejs-time-handle-content\"><\/span><\/span><span class=\"mejs-time-float\"><span class=\"mejs-time-float-current\">00:00<\/span><span class=\"mejs-time-float-corner\"><\/span><\/span><\/span><\/div>\n<div class=\"mejs-time mejs-duration-container\"><span class=\"mejs-duration\">00:00<\/span><\/div>\n<div class=\"mejs-button mejs-volume-button mejs-mute\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Mute\" aria-label=\"Mute\" tabindex=\"0\"><\/button><a href=\"javascript:void(0);\" class=\"mejs-volume-slider\" aria-label=\"Volume Slider\" aria-valuemin=\"0\" aria-valuemax=\"100\" role=\"slider\" aria-orientation=\"vertical\"><span class=\"mejs-offscreen\">Use Up\/Down Arrow keys to increase or decrease volume.<\/span><\/p>\n<div class=\"mejs-volume-total\">\n<div class=\"mejs-volume-current\" style=\"bottom: 0px; height: 100%;\"><\/div>\n<div class=\"mejs-volume-handle\" style=\"bottom: 100%; margin-bottom: -3px;\"><\/div>\n<\/div>\n<p><\/a><\/div>\n<div class=\"mejs-button mejs-fullscreen-button\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Fullscreen\" aria-label=\"Fullscreen\" tabindex=\"0\"><\/button><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div dir=\"ltr\" style=\"text-align: left;\">\n<h3><span style=\"vertical-align: inherit;\">Installation guide<\/span><\/h3>\n<p><span style=\"vertical-align: inherit;\">After Extract, view with your favorite Player.<\/span><\/p>\n<p><span style=\"vertical-align: inherit;\">Subtitle: None<\/span><\/p>\n<p><span style=\"vertical-align: inherit;\">Quality: 2K (2160p)<\/span><\/p>\n<p>Previous title:<\/p>\n<p>Practical Web App Patterns with Vanilla JS<\/p>\n<p><strong>Changes:<\/strong><\/p>\n<p>Version 2024\/8 has decreased by 27 minutes compared to 2024\/6. Also, the course quality has been increased from 1080p to 2K (2160p).<\/p>\n<\/div>\n<h3 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Download link<\/span><\/h3>\n<h4><strong>Downloadly<\/strong><\/h4>\n<p dir=\"ltr\"><a href=\"https:\/\/dl3.downloadly.ir\/Files\/Elearning\/FrontendMasters_JavaScript_Design_Patterns_for_Web_Apps_2024_8.part1_Downloadly.ir.rar?nocache=1786100510\"><span style=\"vertical-align: inherit;\">Download Part 1 \u2013 1 GB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left;\"><a href=\"https:\/\/dl3.downloadly.ir\/Files\/Elearning\/FrontendMasters_JavaScript_Design_Patterns_for_Web_Apps_2024_8.part2_Downloadly.ir.rar?nocache=1786100510\"><span style=\"vertical-align: inherit;\">Download Part 2 \u2013 778 MB<\/span><\/a><\/p>\n<h4><strong>Rapidgator<\/strong><\/h4>\n<p dir=\"ltr\"><a href=\"https:\/\/rapidgator.net\/file\/20591aaca68eeeeaca304a1872aa0a08\/FrontendMasters_JavaScript_Design_Patterns_for_Web_Apps_2024_8.part1_Downloadly.ir.rar.html\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit;\">Download Part 1 \u2013 1 GB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left;\"><a href=\"https:\/\/rapidgator.net\/file\/37699d0a002b4b411b0787337cae60e9\/FrontendMasters_JavaScript_Design_Patterns_for_Web_Apps_2024_8.part2_Downloadly.ir.rar.html\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit;\">Download Part 2 \u2013 778 MB<\/span><\/a><\/p>\n<h5>File(s) password:&nbsp;&nbsp;<a>www.downloadly.ir<\/a><\/h5>\n<h3 dir=\"ltr\" style=\"text-align: left;\"><span style=\"vertical-align: inherit;\">Size<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: left;\">1.77 GB<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Description JavaScript Design Patterns for Web Apps, In this course, you will learn about design patterns for front-end projects using JavaScript. You\u2019ll unders<\/p>\n","protected":false},"author":1,"template":"","dgi_category":[10458],"dgi_tag":[45181,45182,45183,45184,45185,45186,42840],"class_list":["post-4165","digital_item","type-digital_item","status-publish","has-post-thumbnail","hentry","dgi_category-video-tutorials","dgi_tag-course-practical-web-app-patterns-with-vanilla-js","dgi_tag-download-course-practical-web-app-patterns-with-vanilla-js","dgi_tag-download-practical-web-app-patterns-with-vanilla-js","dgi_tag-free-download-practical-web-app-patterns-with-vanilla-js","dgi_tag-free-practical-web-app-patterns-with-vanilla-js","dgi_tag-javascript-design-patterns-for-web-apps","dgi_tag-maximiliano-firtman"],"_links":{"self":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item\/4165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item"}],"about":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/types\/digital_item"}],"author":[{"embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item\/4165\/revisions"}],"wp:attachment":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/media?parent=4165"}],"wp:term":[{"taxonomy":"dgi_category","embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/dgi_category?post=4165"},{"taxonomy":"dgi_tag","embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/dgi_tag?post=4165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}