We’ll begin by building a simple music player application, and then we’ll build and add more and more functionality to our music player application. We’ll also cover different ways to modularize the application.
In the next two sections we’ll build a server and will load data from it. We’ll cover different techniques for caching, fallbacks, optimizing memory consumption and deferred actions.
About The Author
His passion is improving and passing knowledge which has been doing by teaching in University, writing blog posts, mentoring other developers and contributing to open source community.
Introduction of all the sections of the course.
Understand what a design pattern is and why it is important to know them.
Adding play functionality to the player.
Hide the specifics of components by encapsulating information into modules.
Browsers represent complex systems. In order to simplify their use, a facade pattern can be used.
Use adapter pattern to simplify the usage of setInterval and setTimeout functions.
Sometimes, there are alternative ways to match for conditions.
The application grew quite a bit, so it has become hard to manage it. Separating it into smaller modules will make it more manageable.
The Namespace pattern exposes modules through a global variable and does not resolve dependencies.
It is hard to establish a communication between modules using classical methods. We’ll use PubSub for communication between modules.
A new standard was established for defining and using modules - that is, ECMAScript 6 modules.
Make the application more robust by decoupling tracks queue from tracks player.
Treating each track as a separate component will allow an easier separation of concerns.
In MVC, communication between model and view happens through a PubSub pattern.
MVC is one of the most used patterns that separates the internal representation of information from the UI with which user interacts.
MVP is another commonly used pattern that is used to organize the UI elements.
Often, before being rendered, model data has to formatted. For such cases, patterns such as MVVM are used.
We'll add multiple types of tracks and we'll use Factory pattern to create them. Also we'll implement lazy initialization that will defer initialization of objects until they are necessary.
Track removal was not implemented. In this video we'll do that. Also we'll add methods chaining
The collection should be the only entity that manages its state. Thus, we'll move the collection iteration logic into the collection module.
Generators are powerful but have a limited set of functionality. An alternative to generators are iterators that use the same iteration protocol.
We'll add nested tracks. As each track can be both a parent and a child, we'll use the Composite pattern to make adding of nested tracks work.
After adding nested tracks, only their rendering worked as expected. Play and remove functionality worked in a wrong way. We'll fix that using an iterator that works with nested iterators.
Storing the data in application code is a bad practice. We’ll defer that to the server.
Server will return a list of parent tracks, where child tracks would be embedded into parent tracks.
AJAX requests are asynchronous. This requires that you use callbacks in order to continue application execution only after the data becomes available.
Callbacks often lead to a complex code. Also, managing errors has to be done in each callback. Promises help to overcome these complications.
Passing context scope into callbacks may lead to bugs. A much cleaner approach is to find callbacks to certain contexts.
Until now, we loaded only main data about track. Now, we need more data about each track. So, on track play, we’ll ask the server for more data about active track.
Making the same request multiple times is inefficient. We'll optimize this by implementing a caching mechanism.
Relying on a single source of data is fault-prone. We’ll implement a mechanism that will allow us to use multiple sources for tracks' additional data.
Having multiple objects consumes memory. In case of objects that have many similar attributes, a Flyweight pattern can be used to decrease memory footprint by using shared objects with data.
We’ll use the Template method pattern that will allow to have an object with main functionality and subclassed objects with a specific functionality.
We'll use inversion of control that is a widely used pattern in applications with tests.
We'll enable tracks’ models to support any string as attribute name.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.