Jquery vs React vs Angular: when you should use which ?

1. Frontend
Málaga

2. AGENDA
1. jQuery vs React vs Angular (Rafa)
2. Break (15 min)
3. Design in developers eyes (Dan)
4. Announcements
5. The minute round
6. Networking

3. Join us at:
https://frontendmalaga.slack.com
Subscribe at: http://bit.ly/1Suvbjj
#frontendmalaga
or at:

4. JQuery vs React vs
Angular
Frontend
Málaga

5. Hello. I’m Rafa
Rafael David Latorre López - Villalta
• Lead Frontend & UX Chief at Tolq.com
• resetsociety.com founder
9 years of experience developing
experiences which try to be easy for the
user

6. Today we are going to
be talking about movies

10. Is that true?
Nope

11. Lets give a closer look
to them

12. JQuery (or zepto)
• It’s just a library
• It allows us to access and
change the DOM easily
• Unifies cross-browser
inconsistent functionalities
• It is really easy to do
interaction design with it

13. JQuery vs Vainilla JS
vs

14. Sample app
.element .toggle
.details.hidden

15. Easiest and most common way:
• Backend with templating
system renders everything
(php, .net, rails, etc)
• Jquery just toggles a class to
hide and show the extra
content
• No Javascript rendering
• No AJAX

16. Easiest and most common way:

17. What if I want to
render with JS ?

18. Rendering markup with JS

19. Rendering markup with JS

20. if the markup is complex
you should use
http://handlebarsjs.com/

21. Loading from the server

22. Pagination: better in the server

23. Pagination: better in the server
• The code begins to become more unreadable
• Organising the code is not easy.

24. Is then Jquery a bad
choice for dynamic apps?
Nope

25. This was created with Jquery

26. The code

27. Angular
• It’s a complete framework
with:
• Data-binding, basic templating directives,
form validation, routing, deep-linking,
reusable components and dependency
injection.
• Getting started is easy,
mastering it is quite difficult.
• Double data binding
• Low Decision Fatigue

28. Angular is BIG

29. Sample app

30. Easiest and most common way:
• Render full Angular template
from the backend
• Everything is rendered via
Javascript
• Doing AJAX is easy and
advisable

31. The view template

32. The controller

33. Paginating with AJAX

34. Refactoring

35. Refactoring
index.html

36. Composing
personDetails.html
index.html
person-details.js
a piece of hell

37. Angular 2 is coming
• In no more than a few months
the beta will be stable
• Breaking changes
everywhere
• Copies several good
practices from React

38. React
• It’s just a library to render views
and give them more
functionality with JS.
• It includes a Virtual DOM
• Simple to use and learn
• Can be rendered in the Server
(Isomorphic JS)
• Unidirectional data flow
• Can create native mobile
functionalities with React Native

39. Sample app

40. Easiest and most common way:
• Initialise a div with JSON
props where React
components will be rendered
• Everything is rendered via JSX
+ Javascript
• Doing AJAX is easy and
advisable

41. Normally you start with this:

42. But quickly turns into this:

43. Composing

44. Paginating with AJAX:
{page}

45. Recap

46. Pros

47. ReactAngularJQuery
• Low entry barrier
• Trivial to set up
anywhere
• Easier and
simpler on basic
DOM interactions
• Extremely popular
• It provides a big
set of tools to deal
with everything in
the frontend
• Low decision
fatigue
• Currently popular,
plenty of apps
that will need
maintenance
• It’s easy to learn
and master
• Fastest rendering
• Opens mobile
development for
frontend
developers
• Isomorphic JS

48. Cons

49. ReactAngularJQuery
• Rendering
markup is not
elegant
• Requires very
strict development
strategies on
complex products
• Mastering it is really
hard
• It has unnecessarily
complex features
(some of which will disappear in 2.0)
• It’s going to be
outdated in the
coming months
• Restrictive in some
cases
• Difficult to set up
properly
• Decision fatigue
• Difficult to set up
properly

50. When should you use
them?

51. JQuery if:
• There is no need to render a lot of templates
• You are starting out
• You are doing mostly DOM & CSS manipulation
• You need the extra functionality it comes with
($.get, $.map, $.each)

52. Angular if:
• You are an experienced programmer
• You already have experience with it
• You want one tool that deals with everything
• You framework allows it

53. React if:
• You need fast rendering
• You are a beginner/intermediate programmer
• Your framework needs some flexibility

54. Keep digging in:
• https://www.airpair.com/angularjs/posts/angular-
vs-react-the-tie-breaker
• https://medium.freecodecamp.com/angular-2-
versus-react-there-will-be-
blood-66595faafd51#.midi90woe

55. Thanks!