Frontend architecture and patterns bootcamp

Focused View

Vitor Fonseca

4:21:04

6 View

1. Introduction to Frontend Software Architecture

1. Course structure.mp4

03:41

2. What is software architecture.mp4

03:03

3. Why is software architecture important for frontend development.mp4

03:08

4. Overview of different frontend architecture patterns.mp4

04:04

2. Component-Based pattern

1.1 Component based pattern repository.html

1. Problem presentation.mp4

06:31

2.1 Component based pattern repository.html

2. What is component-based pattern.mp4

03:23

3.1 Component based pattern repository.html

3. Building a simple component-based application.mp4

07:35

4. Common issues with component-based pattern and how to mitigate them.mp4

03:47

3. Single-Page Application Architecture

1.1 SPA architecture repository.html

1. Problem presentation.mp4

03:59

2. What is a Single-Page Application (SPA).mp4

04:41

3.1 SPA architecture repository.html

3. Building a simple SPA application.mp4

26:51

4. Common issues with SPA architecture and how to mitigate them.mp4

02:37

4. State Management pattern

1.1 State management pattern repository.html

1. Problem presentation.mp4

07:17

2. What is state management pattern.mp4

03:04

3.1 State management pattern repository.html

3. Building a simple state management application.mp4

09:36

4.1 Memoization guide.html

4.2 React profiler.html

4. Common issues with state management pattern and how to mitigate them.mp4

04:00

5. Microfrontends Architecture

1.1 Microfrontend repository demo.html

1. Problem presentation.mp4

07:11

2.1 Microfrontend example.html

2.2 Microfrontend using Vue and Vite.html

2.3 Web components.html

2. What is micro frontend architecture.mp4

11:51

3.1 Microfrontend repository demo.html

3. Presenting a simple micro frontend application - part 1.mp4

19:47

4.1 Microfrontend repository demo.html

4. Presenting a simple micro frontend application - part 2.mp4

21:58

5. Common issues with microfrontend architecture and how to mitigate them.mp4

09:44

6. Serverless Architecture

1.1 Serverless architecture repository.html

1. Problem presentation.mp4

03:07

2. What is serverless architecture.mp4

04:31

3.1 Serverless architecture repository.html

3. Building a simple serverless application.mp4

17:44

4. Common issues with serverless architecture and how to mitigate them.mp4

02:55

7. Progressive Web Apps

1.1 PWA demo repository.html

1. Problem presentation.mp4

04:38

2. What are progressive web apps (PWA).mp4

09:11

3.1 Javascript Event Listener.html

3.2 JS Vanilla PWA.html

3. Building a simple PWA.mp4

14:43

4.1 PWA and React.html

4.2 PWA with Vue.html

4.3 Service worker with Angular.html

4. Best practices for PWAs.mp4

07:48

8. Server-Side Rendering (SSR)

1.1 Demo server side rendering repository.html

1. Problem presentation.mp4

07:26

2.1 Server side rendering and Vue.html

2.2 SSR vs SSG.html

2. What is server-side rendering (SSR).mp4

05:51

3.1 Demo server side rendering repository.html

3. Building a simple SSR application.mp4

09:44

4. Common issues with SSR and how to mitigate them.mp4

04:08

9. Conclusion

1.1 Frontend patterns.html

1.2 How to create a scalable and maintainable frontend architecture.html

1.3 Modern frontend architecture.html

1. Thank you, and goodbye.mp4

01:30

Description

Ultimate guide to learn frontend architectures and patterns, its pros and cons, and the best: all in Javascript!

What You'll Learn?

How to create well architectured frontend projects
The pros and cons of each frontend architecture/pattern, and how to avoid implementation problems
The basis of good frontend architectures, in a framework agnostic way
How to implement some famous frontend architectures/patterns and its benefits

Who is this for?

Frontend developers

Fullstack developers

Backend developers

Developers

Programmers

What You Need to Know?

Basic knowledge over javascript

Basic knowledge about how internet works

More details

Description
Frontend Architecture and Patterns bootcamp

This comprehensive course covers a wide range of software architecture topics, including component-based patterns, single-page application architecture, state management pattern, microfrontend architecture, serverless architecture, progressive web apps (PWAs), and server-side rendering (SSR). With this knowledge, you'll be ready to design and develop maintanable, scalable and faster frontend applications, improving your user's experience! And better: you'll learn practically! For each module of this course, I have prepared a specific repository, where you'll be able to play with and apply all the knowledge I teach you!

What You'll Learn:
For each of the topics of this course, we are going to talk about:
A generic software development problem. From "project takes to long to run the pipeline", to "many places should be changed because of one changing requirement". I'll give you a link to a repository with this problem, and you'll be able to solve this problem by yourself
An architecture or pattern that comes to solve this problem
How do we implement this architecture or pattern (using only Vanilla Javascript). For all the modules, I recommend you to play with the repository, before watch this "solving class"
Good and bad practices in this architecture/pattern implementation, tips and common issues

Why Enroll:
-> Practical Approach: You'll not just watch theorical classes about architectures and patterns. You'll have real world issues, from software development world, and at the same time, you'll be able to learn how to fix these problems.
-> Know-how: You'll have a portfolio of tools you can use to solve the most common software developments world issues. What should you do to rank your page well in Google, for example? Here you'll have one of the tools to solve this problem, and this is just one!
-> Improve the quality of your products: Do you want to keep writing shitty code forever? Or do you want to write scalable, maintainable and faster frontend applications? Improve your user's experience, constructing a tools box of techniques to serve quality platforms. This tools box construction starts here!

Who Is This For:
Web developers aiming to improve the overall performance of their websites
Frontend and full stack developers aiming to create silky-smooth user interfaces
Developers that want to learn how to write quality code, applying the most actual architectures and patterns in the market

Enroll now and let's redefine web together!
Who this course is for:
Frontend developers
Fullstack developers
Backend developers
Developers
Programmers

User Reviews

Rating

average 0

Total votes0

Focused display

Vitor FonsecaExpert in web developmentHello and welcome! I'm Vitor Fonseca, a highly experienced professional in the world of web development. With 7+ years of hands-on expertise, I've had the privilege of working with many important companies worldwide.Why Choose My Courses: I'm passionate about sharing my knowledge with learners like you. My courses are designed to cater to all levels, from newcomers to seasoned professionals.What You'll Gain: In my courses, you'll acquire practical skills and deep insights into web development. You can expect engaging, real-world knowledge that can benefit your career.My Teaching Style: I believe in making learning enjoyable and accessible. I use various teaching methods, but the most important one for me, it's hands-on. In my opinion, IT learning just happens when you practice what you want to learn. So, practice is everything.Join Me on This Journey: I invite you to explore my courses, ask questions, and become part of a dynamic learning community. Whether you're just starting or looking to advance, there's something here for you.Thank you for considering my expertise. I look forward to helping you excel in web development!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.