This document provides an overview and comparison of popular front-end frameworks including Angular, React, and Vue. It discusses what front-end and back-end development entail. It then covers Single Page Apps versus Multiple Page Apps. The document outlines pros and cons of each framework as well as considerations for when to use each one. Key factors include project complexity, team expertise, performance needs, and time constraints.

1. Front-End
Frameworks

2. Front vs Back End
SERVER SIDE
"Storing" and "organizing" data,
sending and receiving information to
front-end.
- Programing language
- Database
CLIENT SIDE
See and interact with on
your "Browser".
- HTML (Web content)
- CSS (Style of content)
- JavaScript (Programming language)
UI Design
2

3. Approach
building web
apps!
3

4. “SPA (Single Page App)
vs
MPA (Multiple Page App)”
4

5. Pros
× More responsive, fluid user
experience.
× Enables offline access to content.
× It’s easier to make a mobile
application.
× SPA can cache any local storage
effectively.
× SPA separates UI and data.
Cons
× The speed of initial load can be
slower (MPA).
× Negative impact on search
engine ranking because pages
are rendered in the browser, and
search engines prefer server-
generated pages. (SEO)
× Memory leaks can appear during
long periods between page
reloading. 5
When
× Frequently navigated pages.
× More similarities than
differences among pages, and
× Performance-critical pages.

6. JavaScript
The most popular language on the web
6

7. 7
"Brendan Eich created
JavaScript
for Netscape in ten days!"

8. DOM
8
The Document Object Model (DOM) is an WC3
standard application programming interface
(API) for valid HTML and well-
formed XML documents.

9. 9
DOM

10. DOM vs Virtual-DOM
10

11. Library vs Framework
11
- A collection of
implementations of
behavior, written in
terms of a language.
- They are built
blocks that can be
used anywhere.
- An abstraction, in
which software
providing generic
functionality.
- They dictate how
your project will be
structured

12. Why
we need
frameworks
12
- It makes it simple to organize the design elements of your website
(save time)
- Defined font styles and sizing that varies based on its function
(different typography for headings versus paragraphs, etc.)
(Add extra components)
- Pre-built website components like side panels, buttons, and
navigation bars

13. our office
13

14. 14
Angular
• Angular is a TypeScript-based JavaScript framework.
• Developed and maintained by Google
• Angular (also “Angular 2+”, “Angular 2” or “ng2”) is the
rewritten, mostly incompatible successor to AngularJS (also
“Angular.js” or “AngularJS 1.x”).
• Released in October 2010
• Now has stable version 5, and has roadmap plan until 2019
to release stable version 8
• It is used by Google, Forbes, Weather.com,
Wix, PayPal, Upwork, The Guardian, Nike, HBO, Sony, General
Motors

15. 15
Pros
• MVC framework
• Angular templates, modularity
• Simple Implementation of two-
way data binding
• Big community
Cons
• Doesn’t use Virtual DOM at all
• Usage of TypeScript (?)
• Lower render speed
• Heavyweight code
When
• Cross-platform mobile
development (mobile-first approach)
• Enterprise software
• Progressive web apps and
hybrid mobile apps development
Why we use & don't

16. 89,526,124
Whoa! That’s a big number, aren’t you proud?
16
React
• React is described as a JavaScript library for building user
Interfaces.
• Initially released in March 2013 from Facebook
• Facebook is working on the release of React Fiber. It will
change React under the hood
• React components are several pages
• It is used by Airbnb, Uber, Netflix, Twitter, Pinterest,
Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr,
Walmart and others

17. 17
Pros
• Component model
• Virtual DOM
• One-way data binding
• Native mobile development
framework
• Big community
Cons
• Need to use third-party
technologies
• Using JSX (?)
• Complex app structure
• Steep learning curve
When
• Dynamic Application
• Single Page Application (SPA)
• Native Mobile Apps
Why we use & don't

18. 18
Is it enough ?

19. 19
89,526,124
Whoa! That’s a big number, aren’t you proud?
Vue
• Vue is a progressive framework for building user interfaces
• Vue describes itself as a “Intuitive, Fast and Composable MVVM
for building interactive interfaces.”
• Released in February 2014 by ex-Google employee Evan You,
without the backing of a big company
• It has been able to learn from the mistakes and successes of
Angular and React.
• In 2016, version 2 was released and plans for Vue 3 release
in 2018.
• It is used by Alibaba, Baidu, Expedia, Nintendo, GitLab, Xiaomi,
EuroNews, Grammarly, Adobe, Behance, Reuters

20. 20
Pros
• MVVM Architecture
• Lightweight Solution
• Pure JavaScript
• Virtual DOM
• Low Learning Curve
Cons
• Small community and support
• Chinese roots
• LTS is uncertain
• Being too flexible can be
problematic
When
• Dynamic high-performance
• Single Page Application (SPA)
Why we use & don't

21. 21

22. 22
Choose Angular when:
• Very large and complex project
• You need easy and reliable scalability
• You have Angular developers on your team
• You can afford some time for learning
TypeScript before the project starts
Choose React when:
• Your project can accept reusable components
• Your project’s front-end is not too complex
• The performance and scalability are critical
• You have tight deadlines
Choose Vue.js when:
• Small side project
• You need high performance
• You have team members with JS knowledge
• You do not have much time to learn a new
technology

23. Thanks!
Any questions?
23