JS - Frontend - CL1 Flashcards
Event handling (bubbling and capturing)
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events
SPA:
- main ideas
- advantages and disadvantages
Single Page Application (SPA) is the greatest sensation at the moment. We have
countless JavaScript frameworks available to ease our work. We cannot deny that
JavaScript, as just a scripting language, has become the largest technology evolution
since the rise of the Web, and of course, the browser’s support is much better than
the old times. Now, we can use the JavaScript language on both sides, that is, from
the frontend to the backend (Node.js) and also include databases with MongoDB
(we will talk about them briely in the next chapters). Now, we focus on
understanding the MVC/MVVM pattern on SPA. We will cover the
following topics:
• Getting acquainted with SPAs
• Understanding the working of SPAs
• Understanding the MVC/MVVM/MV* pattern
• Peculiarities between SPA and traditional web development
• Choosing a library or framework
• Introducing the MEAN stack
• The available tools
• It’s all about JavaScript
• HTML, CSS, and the responsive way
Getting acquainted with SPA
SPA is a web application or website that its on a single web page with the goal of
providing a more luid user experience and a rich interface. Also, only one page is
not limited to only one ile; we can have many templates in many different iles.
Such applications can vary from a small simple create, read, update, and delete
(CRUD), like a to-do list, until it reaches a more complex level with countless
views, libraries, templates, scripts, and validations.
For a better example of a simple SPA, you can check out http://todomvc.com/ ;
here, you can ind a lot of information about many MVC frontend frameworks.
The next paragraphs will show more about MVC on the client side.
The main goal about this kind of web application is to be able to update parts of an
interface without sending or receiving a full-page request; this is perhaps the most
interesting point about SPA.
SPA’s popularity has been increasing in recent times, mainly because of its relative
ease of development. This is because from the start, everything is done from the
front-end of a web application using Ajax (to interacting with the server), HTML
templates, a good MVC/MVVM framework, and of course, a lot of JavaScript.
Surely, we have a plethora of JavaScript frameworks that greatly facilitate our life
as a developer, but how do we choose one from all these options? Which is the best
option? What about the learning curve?
Throughout this chapter, we will understand the interaction models available
between the most popular frameworks.
Before we begin our journey on SPAs, let’s see the basic concept of the
MVC/MVVM architecture.
Understanding the work of SPAs
What we see in this new world of web applications is an analogy to what had
formerly been in software development on the server side, such as Model View
Controller (MVC) or Model View Presenter (MVP). We will see Model View
ViewModel (MVVM) in more detail in the next chapters.
SPA has attracted a large number of developers lately, but what’s so special or
controversial in this development mode? What do these acronyms, MVC, MVP,
and MVVM mean?
The answer to these questions is very simple; we can say this is all about JavaScript!
Wait a minute, JavaScript? You should be asking, “But what about HTML, CSS,
server languages, and databases?” We’ll understand it all and introduce what we
call the full-stack developer using MEAN. However, we will take one step at a time.
Before we dive into the working of SPA, we need to learn about the MVC architecture.
Understanding the MVC/MVVM/MV* pattern
MVC is a software architecture pattern that emerged in the 1980s, and it separates
the visual representation of information from the user’s interaction.
However, we are talking about the MVC pattern on the client side, for example,
JavaScript running on the client side, to be more speciic, the web browser. Note that
the majority of SPAs transfer to a web browser all the MVC logic used on the server
with languages such as Java, C#, and Ruby.
We use JavaScript to model our application according to the standards of MVC on
the client side and not on the server.
Another very important aspect is to understand what represents each development
model, take a look at the following:
• Presentation Model (PM)
• Model View Presenter (MVP)
• Model View Controller (MVC)
• Model View ViewModel (MVVM)
Later in this chapter, we will see in more detail about these concepts. For now,
let’s take a look at the irst appearance of MVVM.
Peculiarities between SPA and traditional
web development
Let’s now review some important points of employing the MVC/ MVVM pattern,
to build web applications, instead of traditional web applications.
One of the important points is that the MVC pattern can be applied on the server
side or client side. For example, we can use the MVC pattern that runs on the server
using some JavaScript library as Express and build a SPA only on the server (in this
case, Node.js). This is because MVC is a software architecture pattern and can be
applied on both sides, frontend with MVC frontend frameworks and on server-side
frameworks such as Ruby on Rails and .NET.
On SPA, everything happens on just one page; as mentioned before, there’s no
refresh on page request, such as in multipage applications where we have page
reload on each request. All the necessary content is injected into the page through
the use of Ajax and HTML templates to render the content.
We consider this the main difference between SPA and applications with multiple
pages, where for each new page that is requested, we have a new request.
There are many other differences to consider, but the best tool is the one that
makes you more productive. Then, the choice should be based on the project’s
scope, budget, and technical knowledge of the development team.
JavaScript MVVM or MV* facilitates easier parallel development of a UI and the
building blocks that power it. You can have a frontend developer working on the
UI, HTML templates, and data-bindings and another developer working on the
server-side logic of the same page.
Comunication with server-side:
- HTTP
- HTTPS
- WS
https: //en.wikipedia.org/wiki/Hypertext_Transfer_Protocol
https: //en.wikipedia.org/wiki/HTTPS
https: //en.wikipedia.org/wiki/WebSocket
REST concept
- HTTP methods and their using
- additional headers
https://en.wikipedia.org/wiki/Representational_state_transfer
AJAX
https: //en.wikipedia.org/wiki/Ajax_(programming)
https: //www.w3schools.com/xml/ajax_intro.asp
JSON vs XML:
- similarities and differences
- pros and cons
http://www.json.org/xml.html
