TS/JS Design Patterns with Canvas: Learn Properly from Zerocho

Learn about the uses, pros and cons of various design patterns while creating a drawing board with TypeScript/JavaScript. Learning the canvas API is a bonus!

(4.7) 27 reviews

619 learners

Level Intermediate

Course period Unlimited

Design Pattern
Design Pattern
oop
oop
TypeScript
TypeScript
JavaScript
JavaScript
canvas
canvas
Design Pattern
Design Pattern
oop
oop
TypeScript
TypeScript
JavaScript
JavaScript
canvas
canvas

Reviews from Early Learners

Reviews from Early Learners

4.7

5.0

bottlewook

24% enrolled

The content is very difficult, so I'm not making much progress, but I'm grateful for the JavaScript design pattern lecture 😊😊 As a non-major developer, this is something I really wanted to study, and I'm getting a lot of help from it while working at the company, with the explanation and the Paint example!

5.0

문석청

32% enrolled

Thank you for the great lecture.

5.0

불타는금호동

100% enrolled

This was a more meaningful course because I could learn design patterns from a frontend perspective. It was great to see various examples of how to use classes! If there had been React examples as well, I think I would have gotten a much clearer sense of how to apply this in the real world, but I was able to gain insights by studying this part additionally on my own. Thank you for the great course!

What you will gain after the course

  • TypeScript Design Patterns

  • JavaScript Design Patterns

  • Create a drawing board with canvas

Is learning design patterns really helpful for me? 🤔

I've seen so many people ask this question. Here's my answer.

Yes, it helps more than living without knowing!

I've always said, " Design patterns aren't something you learn. They just naturally emerge as you optimize your code ." However, given the nature of JavaScript and TypeScript, which don't actively use object-oriented concepts and classes, I've seen many people avoid actively using design patterns . So, I'd like to introduce you to what design patterns are and what types there are.

After watching this lecture, you'll realize that you're already using several design patterns, and that they can help you optimize your code in this way .

There are many design patterns, but not all of them are useful. However, three or four useful design patterns will significantly improve the quality of your code.

Let's look at a simple example to see the usefulness of design patterns!

Do you ever find yourself repeating the same if statement across multiple functions in your code? This means you'll need to modify three functions every time you add a new if statement.

By leveraging the factory and state patterns, you can make these changes so cleanly! You only need to modify one function when a change is needed.

Features of this course

📌 In this lecture, you will learn the 23 design patterns from the GoF book and other design patterns adapted to JavaScript/TypeScript .

📌 Design patterns are inseparable from the SOLID principles . We'll also introduce the SOLID principles.

📌 For a practical example, let's create a drawing board using the HTML canvas API (and some tips for using the developer tool Debugger!)

📌 It's done in TypeScript , but also covers differences from JavaScript (there are differences in some design patterns due to the language's characteristics).

I recommend this to these people

Anyone who wants to learn design patterns

Anyone interested in clean code and object orientation and looking to learn design patterns

Anyone who needs JS/TS examples

Those who need JavaScript and TypeScript examples because the design pattern books/lectures on the market are written in other languages.

For those who want to understand with practical examples

For those who want to understand design patterns through code used in practice instead of the animal, cat, and car classes that appear every time.

After class

  • I now know what design pattern the code I am writing is using.

  • You can cleanly refactor your current code by applying the design patterns you've learned.

  • When explaining code to others, instead of explaining it in detail , you can simply say , "I used this design pattern!"

  • When writing new code, you will be able to determine which design pattern is most efficient to use.

  • You can make patterns simpler by using JavaScript/TypeScript language features.

Learn about these things.

Learn with TypeScript syntax

There are differences from other object-oriented languages like Java. I'll start by explaining structural typing, interfaces, and abstract classes.

Learn JavaScript grammar too

In most cases, TypeScript and JavaScript code are virtually identical. However, I'll explain any differences.

The lecture notes include a summary and UML.

As the code becomes increasingly complex, I've separately displayed the parts where design patterns are applied in UML . I'll explain UML in the lecture.

Let's make a simple (but not simple) drawing board.

Instead of relying on examples that don't really resonate, learn design patterns by building real programs. It was a struggle to cram in 25 design patterns...

Things to note before taking the course

Practice environment

  • The course will be conducted using Visual Studio Code Live Server on Windows 11. However, your operating system or IDE is not affected.

  • TypeScript version 5.5 or higher is sufficient.

Player Knowledge and Precautions

  • Basic JavaScript and TypeScript syntax

  • If you don't know TypeScript, you can remove the type part from TypeScript code and it will be JavaScript (although there are some parts where the design pattern is different because it is JavaScript).

  • Creating a drawing board is a secondary role, and the main purpose of this lecture is to learn design patterns.



Recommended for
these people

Who is this course right for?

  • Anyone who wants to write more efficient code with JavaScript

  • For those who are curious about where design patterns can be used

  • For those who are curious about the use of classes in JavaScript

  • For those who are curious about the use of interfaces and abstract classes in TypeScript

Need to know before starting?

  • JavaScript

  • TypeScript

Hello
This is zerocho

67,648

Learners

1,741

Reviews

9,765

Answers

4.8

Rating

25

Courses

One of the key strengths of my courses is the Q&A support (Winner of the Inflearn Q&A King award twice). I respond to your questions within 24 hours, doing my best to help you out! I’ll answer your questions with the mindset that we are tackling the problems together!

One of the key strengths of my courses is the Q&A support. (Winner of the Inflearn Q&A King award twice) I respond to your questions within 24 hours, doing my best to help you out! You’ll feel like we’re solving the problems together.

👉ZeroCho Lectures
ZeroCho's full lecture roadmap. A complete roadmap of all my courses is available here.

– Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook
ZeroCho.com Operator
– Currently) Broadcasting development-related content on ZeroCho TV via YouTube
– Formerly) Smoretalk CTO
– Formerly) CTO of Today's Pickup (Youngest Development Team Lead at Kakao Mobility after exit to Kakao Mobility)

  • Author of Node.js Textbook, Self-Guided JavaScript by ZeroCho, Let's Get IT JavaScript, and TypeScript Textbook

  • Operator of ZeroCho.com

  • Currently running a YouTube channel ZeroCho TV, covering development topics

  • Former CTO at SmoreTalk

  • Former CTO at Today Pickup (acquired by Kakao Mobility, where I became the youngest lead developer)

More

Curriculum

All

34 lectures ∙ (6hr 16min)

Published: 
Last updated: 

Reviews

All

27 reviews

4.7

27 reviews

  • seukchungmoon8847님의 프로필 이미지
    seukchungmoon8847

    Reviews 38

    Average Rating 5.0

    5

    32% enrolled

    Thank you for the great lecture.

    • bwlimtony7082님의 프로필 이미지
      bwlimtony7082

      Reviews 3

      Average Rating 5.0

      5

      24% enrolled

      The content is very difficult, so I'm not making much progress, but I'm grateful for the JavaScript design pattern lecture 😊😊 As a non-major developer, this is something I really wanted to study, and I'm getting a lot of help from it while working at the company, with the explanation and the Paint example!

      • 30110303님의 프로필 이미지
        30110303

        Reviews 4

        Average Rating 5.0

        5

        100% enrolled

        This was a more meaningful course because I could learn design patterns from a frontend perspective. It was great to see various examples of how to use classes! If there had been React examples as well, I think I would have gotten a much clearer sense of how to apply this in the real world, but I was able to gain insights by studying this part additionally on my own. Thank you for the great course!

        • pehwish0827님의 프로필 이미지
          pehwish0827

          Reviews 7

          Average Rating 5.0

          5

          100% enrolled

          • beamch61227님의 프로필 이미지
            beamch61227

            Reviews 9

            Average Rating 5.0

            5

            62% enrolled

            zerocho's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!

            $46.20