[Udemy] Angular 2 - Архитектура с применением ngRx - Создаем чат-приложение

[Udemy] Angular 2 - Архитектура с применением ngRx - Создаем чат-приложение

Angular 2 NgRx Architecture Course: Build a Chat Application
​

​

Спойлер: Описание

<div class="what-you-get__content"> <div class="what-you-get__title"> What Will I Learn? </div> <div class="what-you-get__items"> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">Build a Chat Application From to to bottom</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">Understand the Flux Architecture, its benefits, strong points and most beneficial use cases</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">Understand Single Store Architecture solutions like Redux or Ngrx Store</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">Know all the usual notions of Store solutions, like Actions and Reducers </span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">Know how to model the application state of a single store architecture, leveraging Typescript custom types to do so</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">Know the difference between a model and a view model and what to put inside the store</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">know how to derive a view model from a model and how to do that</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">understand the notion of selector in the context of store solutions</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">know the difference between smart components and presentation components</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">know how to build smart components using the Ngrx Store library</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">know how to use the Ngrx Effects library</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">know not only the Ngrx libraries but know also how they all fit together and what are the benefits of a store solution</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">know how to setup the Ngrx store developers tools</span> </div> <div class="what-you-get__item"> <span class="udi udi-check what-you-get__icon"></span> <span class="what-you-get__text">know how to debug RxJs applications in general</span> </div> </div> </div> <a class="what-you-get__curriculum-link" href="/angular-ngrx-course/#curriculum" target="_self" rel=" noopener noreferrer"> View Curriculum </a> <div class="description__title"> Description </div> One Of The Most Famous Bugs Of All Time ? Let me take you through a journey in time. Let's jump on a time machine and go back to 2014: we find ourselves in the Facebook headquarters at Menlo Park. Not only we went back in time, but we found ourselves becoming part of one of the most advanced software development teams in the world. You might think that the team would be busy adding some new feature, but at our arrival the team is working relentlessly trying to fix one particular bug: something as simple as a counter of unread messages in a chat system. This is one of those situations that only a developer could understand. The team tries to fix the bug in all sorts of ways, but the bug keeps coming back, month after month ! The counter says that there are several unread messages: the user clicks on the counter and there is nothing there. Its a super visible bug in the biggest web application in the world: 1.3 Billion users and counting, endless resources to spare, some of the very best software teams in the world. And yet an apparently simple but highly elusive bug just keeps coming back: a counter is incorrectly calculated: how can this happen ? That's what you will find out in this course. A Bug That Originated a New Architecture ? How could such an advanced team with nearly limitless resources struggle to fix a single bug ? As a developer you might find that this situation is really not that surprising; you might have been in a place and time when you had to tell your manager that the application can't be saved: that its so badly written that its needs to be rebuilt from scratch. If it has never happened to you, it probably will during your development career. You have found an architecture problem in your application: happens to every team. In this course we are going to understand exactly what was the real problem behind the Facebook counter bug, and learn the new frontend software architecture that it originated: Flux. This new architecture was presented to the world in a series of talks. Those talks included a demo of the original chat counter problem. Have you ever seen that demo chat application in the third talk of the Flux&nbsp;recommended talks ? &nbsp;That's what you will be building in this course. What Will We Build In This Course ? We are going to build step by step a chat application that reproduces the situation that the Facebook team faced with the unread messages counter. We are going to solve the problem not by using the original Flux dispatcher, instead we are going to use a derived single store RxJs-based solution: The Angular Reactive Extensions Ngrx Store. We are going to use the Angular CLI to quickly scaffold an application, and implement the frontend of the chat application from scratch: from an empty folder - every line of code will be explained. The backend will also be explained but we will initially get a running backend as a starting point, so that we focus on the frontend architecture and the store solution. We are going to build the application using Reactive Programming principles and a set of libraries of the Angular Reactives Extensions (Ngrx) Ecosystem: this will include the Ngrx Store, Ngrx Effects, DB, Router integration. We are going to cover the benefits of Immutability and OnPush change detection, its advantages and disadvantages. What Will you Learn In this Course? We are going to learn how to leverage Typescript to clearly define the domain model, the view model and even transfer models of our application, as well as the application state that goes inside the store. We are going to learn what types of state are usually kept inside the store, and how they relate to the state in the database. We will learn all the usual concepts of Store architectures: Actions, Dispatching and Reducers. We will cover the Ngrx Dev Tools including the time-travelling debugger, and we will introduce a small utility library to helps us debug RxJs applications in general. We will cover debugging techniques for our Typescript code in both the client and the server. We will cover backend API design for frontends that use store architectures: what type of API to design if building an API from scratch, and how to integrate a store with existing APIs. Course Overview The course will start with a short architectural overview on the Facebook counter problem, Flux and unidirectional data flow. We will then dive straight into the building of the frontend of our chat application. Once we have a store solution up and running we are going to introduce the Dev Tools and add more libraries of the Ngrx ecosystem step by step. What Will You Be Able to to at the End Of This Course ? The goal of the course is simple: you will be proficient in the Flux and single store architectures and will know when to use a store solution and why, what are the reasons and more common use cases for doing so. You will be able to use Typescript to model all the data structures needed for the several different layers of your application. You will know how to develop applications using RxJs and the Ngrx Store, understand the concepts related to store architectures and know how to setup the developers tools and use the most important libraries of the Ngrx ecosystem. Free samples of multiple parts of the course are available. <div class="audience" data-purpose="course-audience"> <div class="audience__title"> Who is the target audience? </div> Angular Developers looking to Learn Ngrx Store and its surrounding Library Ecosystem </div> About the Angular University: The Angular University aims to be the one place that you &nbsp;go in order to learn and keep up with the Angular 2&nbsp;ecosystem. We provide premium quality video tutorials, screencast style. About the course instructor: Hello, my name is Vasco &nbsp;and I'm a&nbsp;Software Developer with 17 years of experience,&nbsp;very&nbsp;seasoned&nbsp;building user&nbsp;interfaces with Angular. I've worked&nbsp;as a Frontend&nbsp;Developer/Architect in a large&nbsp;variety of enterprise&nbsp;projects throughout the years. &nbsp;&nbsp; I worked on a ton of projects, everything from&nbsp;single page applications to&nbsp;help build the&nbsp;European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal&nbsp;framework teams that built frameworks for in-house departments of tens of developers. And that's just a few of them, please check my Linkedin for extensive recommendations. I also love&nbsp;to teach, write and talk about technology. &nbsp;I am looking forward to be your Angular 2&nbsp;instructor, Kind Regards, Vasco ​

​

​

Спойлер: Содержание

Curriculum For This Course Expand All 88 Урок s - 08:24:48 [+] Introduction - The Flux Architecture 10:22 Course Helicopter View 06:53 + Scaffolding the Chat Application - Gettting The Most Important Part Right 9 Урок s - 44:53 [Installing an IDE - Webstorm or Visual Studio Code] 03:43 Scaffolding an Application Using the Angular CLI 04:46 Installing The Lodash Utility Library 02:35 Using the Angular CLI to Scaffold All Application Components 06:25 What Should be put inside the Store ? 02:20 A Critical Notion For Any UI We Build - Model vs View Model 04:47 + Introducing A Store Solution - The Ngrx Store, Actions And Reducers 10 Урок s - 51:46 [Store Concepts Introduction] 02:52 How To Switch Git Branches During The Course 03:59 Getting a REST API Server Running 04:58 Installing A Store Solution 02:18 Defining The Store Application State - How Many Types Of State Are Th 06:03 The Store as an Observable of Application State 04:40 + Implementing The Thread Блок View Using Reactive Programming 10 Урок s - 49:24 [Smart Components and Reactive Programming Techniques - Introduction] 03:38 Building the Thread Блок Using Reactive Programming 09:18 See How Simple It Is To Implement An Unread Messages Counter Using A Store 06:09 A Simple Way To Debug An Angular Program 01:45 Defining a View Model - Difference Between View Model and Model 04:27 Refactoring the Thread Блок Component - Extracting Mapping Functions 01:37 + Ngrx Effects and the NgRx Dev Tools 7 Урок s - 31:29 [Ngrx Effects and DevTools Introduction] 01:48 Simplifying Smart Components - The Ngrx Effects Library 04:18 Understanding the NgRx @effect Decorator - How to Use It ? 04:33 The Added Value Of Ngrx Effects and How It Simplifies Smart Components 02:59 + Implementing the Message Блок Smart Component 13 Урок s - 01:22:57 [Selecting A Thread - Initial Implementation] 05:49 Understanding Combine Reducers 10:58 Writing The Reducing Logic of Select Thread Action 01:59 Introducing the Message Блок Component 04:45 Message Блок - Reviewing the Implementation of the Name List Selector 08:46 Review of The Messages List Implementation - View to View Model Mapping 04:52 Implementation of the Highlight Selected Thread Functionality 03:35 Implementation of the Change Selected User Smart Component 06:31 + Getting The Chat Functionality Up and Running ! 14 Урок s - 01:27:26 [Solving the Facebook Counter Problem - Блок Introduction] 05:11 Implementing The Write New Message Effect Using Ngrx Effects 07:37 Send New Message Implementation - Client Part 06:13 New Server Branch - View Send New Message In Action 04:38 Refresh Chat Messages Side Effect Implementation 06:36 Fetch New Messages - Implementing the Reducer Logic 04:55 Finish Implementing the Refresh Messages HTTP Service 10:10 Implementing The unread Messages Counter Reducing Logic 08:02 Unread Message Counter - See The Solution for The Facebook Counter Issue 04:44 + Finishing Up - Error Handling, Router Integration, Ngrx Store Freeze 6 Урок s - 33:06 [Error Handling With Ngrx Store - How To Use The RxJs Catch Operator] 06:02 Implementing the Error Handling Reducer Logic 02:27 Displaying Errors On the Screen - Implementing the Messages Smart Component 06:43 Immutability In Reducer Functions - How to Use the Ngrx Store Freeze Library 05:22 + Performance Tunning - Immutability and OnPush Change Detection 13 Урок s - 01:23:08 [OnPush Change Detection and Immutability - What Are the Advantages ?] 07:36 Why Freezing Selector Output Does Not Help Leverage OnPush Change Detection 04:20 Understanding How OnPush Change Detection Works And How To Leverage It 04:19 How To Write Reducers That Leverage OnPush Change Detection 11:36 Refactoring Remaining Reducers - Will This Be Enough To Leverage OnPush ? 09:13 Introducing a New Functional Programming Concept - Memoization 06:41 Introducting The Reselect Library - How To Create a Memoized Selector 02:58 + Building A Development Server 4 Урок s - 30:19 [Building The Get All User Data REST API From A to Z] 19:32 Running And Debugging Our ts-node Development Server 06:00 Calling Our REST API Server From the Client - Configuring the Angular CLI 03:39​

Учебный План По Данному Курсу Развернуть Все 88 Урок з - 08:24:48 [+] Введение - Архитектура Потока 10:22 Конечно, Вид С Вертолета 06:53 + Монтаж Приложение чат - становится самым важным правой части 9 Урок з - 44:53 [установки среды IDE Webstorm или Visual Studio кодU] 03:43 Монтаж аппликации, используя угловой КИНК 04:46 Установка Утилиты Библиотека Лодашь 02:35 Используя угловой CLI на эшафот всех компонентов приложения 06:25 Что надо ставить в магазине ? 02:20 Важным понятием для любого пользовательского интерфейса мы строим - модель против посмотреть 04:47 + Введения Раствора Магазин - Магазин Ngrx, Действия И Редукторы 10 Урок с - 51:46 [концепции магазина Введение] 02:52 Как Переключить Ветвей Git В Ходе 03:59 Получение API-интерфейс rest сервер 04:58 Установка Решения Магазина 02:18 Определение Хранить Состояние Приложения - Сколько Типов Государства-Й 06:03 В магазине в качестве наблюдаемого состояния приложения 04:40 + Внедрение Нить Вид На Блок С Помощью Реактивного Программирования 10 Урок з - 49:24 [умный компоненты и реактивного программирования - Введение] 03:38 Дом-нить Блок С Помощью Реактивного Программирования 09:18 Видите, Как Это Просто Реализовать Счетчик Непрочитанных Сообщений Через Магазин 06:09 Простой Способ Отладки Угловой Программу 01:45 Определяя вид модели - разница между моделью представления и модели 04:27 Рефакторинг-нить Компонент Блок - Извлечения Функции Сопоставления 01:37 + Эффекты Ngrx и инструменты NgRx Дев 7 Урок с - 31:29 [эффекты Ngrx и инструменты разработчика Введение] 01:48 Упрощение Интеллектуальных Компонентов - Ngrx Библиотека Эффектов 04:18 Понимание NgRx @эффект декоратор - как его использовать ? 04:33 Добавленную стоимость Ngrx эффекты и как она упрощает Смарт-компонентов 02:59 + Осуществлении сообщение Компонент Блок Смарт 13 Урок з - 01:22:57 [выбор потока первоначальной реализации] 05:49 Понимание Сочетать Редукторы 10:58 Написание снижения логика выбора-нить действий 01:59 Представляя сообщение Компонент Блок 04:45 Сообщение Блок - обзора хода осуществления списке имя селектора 08:46 Просмотр списка Сообщений внедрения - для просмотра картографическая модель 04:52 Осуществления выделения выбранных ниток функциональность 03:35 Внедрение изменения выбранного интеллектуального компонента пользователей 06:31 + Получение функции чата и работает ! 14 Урок з - 01:27:26 [решение проблемы противодействия Facebook - Блок Введение] 05:11 Осуществление Записи Новый Эффект Сообщения, Используя Эффекты Ngrx 07:37 Отправить Внедрения Новых Сообщений - Клиентская Часть 06:13 Новый Филиал Сервер - Просмотр Отправить Новое Сообщение В Действии 04:38 Чат Обновить Сообщения Побочный Эффект Реализации 06:36 Принести Новые сообщения - реализует Редуктор логика 04:55 Закончить реализацию обновить Сообщения службы http 10:10 Реализации количество непрочитанных писем уменьшения логика 08:02 Счетчик непрочитанных сообщений - см. решение по вопросу противодействия Facebook 04:44 + Заканчиваю - Обработка Ошибок, Интеграция Маршрутизатора, Ngrx-Магазине Мерзнуть 6 Урок з - 33:06 [обработка ошибок с Ngrx-магазин - как использовать RxJs Оператор Catch] 06:02 Реализация обработки ошибок редуктора логика 02:27 Отображение ошибки на экране - реализация Сообщений авто-компонент 06:43 Неизменяемость в Редуктор функции - как использовать Ngrx заморозить хранить библиотеку 05:22 + Тюнинг производительности - неизменность и OnPush обнаружения изменений 13 Урок з - 01:23:08 [OnPush Обнаружение изменения и неизменности - в чем преимущества ?] 07:36 Почему Замораживание Выход Селектора Не Помогает Использовать OnPush Обнаружения Изменений 04:20 Понимание Того, Как OnPush Изменить Обнаружение Работает И Как Использовать Его 04:19 Как Писать Редукторы, Которые Используют OnPush Изменении Логики Обнаружения 11:36 Рефакторинг Остальные Редукторы - Будет Ли Этого Достаточно, Чтобы Использовать OnPush ? 09:13 Разработка новой концепции функционального программирования - Мемоизация 06:41 Внесение в повторно библиотеки - Как создать селектор Мемоизированную 02:58 + Создание Сервера Разработки 4 Урок з - 30:19 [дом получить все данные пользователя API-интерфейс rest от А до Я] 19:32 Запуск и отладка наш ТС-сервер разработки 06:00 Позвонив в наш API-интерфейс rest серверу от Клиента - Настройка углового КИНК 03:39​

​