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
12. JQuery (or zepto)
⢠Itâs just a library
⢠It allows us to access and
change the DOM easily
⢠UniďŹes cross-browser
inconsistent functionalities
⢠It is really easy to do
interaction design with it
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
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 difďŹcult.
⢠Double data binding
⢠Low Decision Fatigue
30. Easiest and most common way:
⢠Render full Angular template
from the backend
⢠Everything is rendered via
Javascript
⢠Doing AJAX is easy and
advisable
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 ďŹow
⢠Can create native mobile
functionalities with React Native
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
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
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
⢠DifďŹcult to set up
properly
⢠Decision fatigue
⢠DifďŹcult to set up
properly
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 ďŹexibility