Frontend war Angular-React-Vu Js

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