Frontend Architecture And Patterns Bootcamp

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

Requirements

Basic knowledge over javascript

Basic knowledge about how internet works

Description

Frontend Architecture and Patterns bootcampThis 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 yourselfAn architecture or pattern that comes to solve this problemHow 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 issuesWhy 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 websitesFrontend and full stack developers aiming to create silky-smooth user interfacesDevelopers that want to learn how to write quality code, applying the most actual architectures and patterns in the marketEnroll now and let's redefine web together!

Overview

Section 1: Introduction to Frontend Software Architecture

Lecture 1 Course structure

Lecture 2 What is software architecture?

Lecture 3 Why is software architecture important for frontend development?

Lecture 4 Overview of different frontend architecture patterns

Section 2: Component-Based pattern

Lecture 5 Problem presentation

Lecture 6 What is component-based pattern?

Lecture 7 Building a simple component-based application

Lecture 8 Common issues with component-based pattern and how to mitigate them

Section 3: Single-Page Application Architecture

Lecture 9 Problem presentation

Lecture 10 What is a Single-Page Application (SPA)?

Lecture 11 Building a simple SPA application

Lecture 12 Common issues with SPA architecture and how to mitigate them

Section 4: State Management pattern

Lecture 13 Problem presentation

Lecture 14 What is state management pattern?

Lecture 15 Building a simple state management application

Lecture 16 Common issues with state management pattern and how to mitigate them

Section 5: Microfrontends Architecture

Lecture 17 Problem presentation

Lecture 18 What is micro frontend architecture?

Lecture 19 Presenting a simple micro frontend application - part 1

Lecture 20 Presenting a simple micro frontend application - part 2

Lecture 21 Common issues with microfrontend architecture and how to mitigate them

Section 6: Serverless Architecture

Lecture 22 Problem presentation

Lecture 23 What is serverless architecture?

Lecture 24 Building a simple serverless application

Lecture 25 Common issues with serverless architecture and how to mitigate them

Section 7: Progressive Web Apps

Lecture 26 Problem presentation

Lecture 27 What are progressive web apps (PWA)?

Lecture 28 Building a simple PWA

Lecture 29 Best practices for PWAs

Section 8: Server-Side Rendering (SSR)

Lecture 30 Problem presentation

Lecture 31 What is server-side rendering (SSR)?

Lecture 32 Building a simple SSR application

Lecture 33 Common issues with SSR and how to mitigate them

Section 9: Conclusion

Lecture 34 Thank you, and goodbye

Frontend developers,Fullstack developers,Backend developers,Developers,Programmers