In this lecture, we are going to talk about one of the most difficult topics in angular, the main
focus of this section, and we'll cover the SJS library stepping away from the master project.
We are going to focus our attention solely on our SJS after gaining a good grasp of our exchanges.
We will come back to our project.
We need to take a detour from our main project because of the upcoming topics.
It's going to require knowledge of our SJS.
There isn't another way around it to begin this discussion.
I want to bring up the word responsibility.
It's a word I've brought up dozens of times.
We constantly need to ask ourselves a series of questions before writing a single line of code.
What type of action is our code need to perform?
What does our code need?
What is our code?
Provide Angular provides a set of features for helping us organize our project by responsibility.
Components can be broken down into classes, templates and style sheets.
It does a good job of keeping the pieces of a component separate from one another.
In addition, we have services, directives and pipes for extending the behavior of a component based
on our answers to these questions.
It'll be easier to decide where to write our code.
Let's talk about asynchronous operations.
JavaScript is an asynchronous language.
Events and API requests are examples of asynchronous operations.
Whenever these operations emit data, we need to send this data to a component.
Data is fed directly to the component.
Angular won't complain, but there is one question we need to ask ourselves before sending data to a
component should components be responsible for handling raw data from asynchronous operations?
I want you to think about this question.
I'll give you a moment to think about it.
The answer is no.
Components shouldn't have to worry about handling raw data.
That doesn't mean components will never have to handle data, but we should avoid this scenario whenever
possible.
Before feeding data to a component, we should process data.
This problem compounds if we need to feed data to multiple components, each component would have to
process raw data independently.
That's not good.
We need a solution for acting as a middleman between the response from an asynchronous operation and
a component.
This is where our SJS comes into play.
Our SJS is a library for filtering, sorting and coordinating data.
It completely focuses on the data for an application.
Instead of implementing a solution for dealing with this sort of task, the angular team recommends
our edges.
It's prevalent within the angular community.
With that being said, it's completely optional.
If our SJS is not to your liking, you can altogether avoid it.
However, I strongly encourage you to give it a try.
This section is going to be dedicated to learning our eggs independently.
There are a lot of concepts to go over.
The best way to learn our eggs is to learn it without a framework or additional libraries.
After we've covered the basics, we will come back to our project.
In the resource section of this lecture, I provide a zip file with a couple of starter files.
Download the zip file, unpack the files and point your editor to the files.
Let's examine the files together.
First, open the package file.
We are going to be installing two dependencies called Parcel, and our SJS parcel is an application
bundler.
One of the most interesting features of parcel is its zero configuration approach.
It works straight out of the box, so we won't need to configure a parcel to get started.
Other features include a development server, file watching and support for the latest JavaScript syntax.
I want to jump straight into our SJS.
Therefore, Passel is perfect.
We can skip configuring a bundler.
Unlike Web Pack, Parcel just works.
I promise we won't be using parcel for very long.
It'll only be used in this section after we've learned our SJS parcel will not be relevant anymore.
The other library is our SJS.
For obvious reasons, we need to install this library if we want to start using it.
Moving along, we have a directory called source.
It holds three files.
None of the files have anything worth mentioning.
Feel free to explore them.
They're very simple.
We will be working inside the script file for most of this section.
Let's install the dependencies for this project and the command line.
Run the npm install command.
Next, we can start parcel by running the 21:00 Start Command.
After running, this command parcel will perform a couple of tasks.
First, it'll bundle our files.
Next, a development server will be launched.
We can view our app in the browser by clicking this link.
We've got an app running in the browser on top of a server par, so we'll watch our files for changes
if a change occurs.
The app will be reloaded with the latest changes.
Everything we need is ready.
In the next lecture, we're going to begin learning our SJS.