Jquery react angular
-
Upload
rafa-d-latorre-lopez-villalta -
Category
Software
-
view
191 -
download
0
Transcript of Jquery react angular
Frontend
Málaga
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
Join us at:
https://frontendmalaga.slack.comSubscribe at: http://bit.ly/1Suvbjj
#frontendmalagaor at:
JQuery vs React vs Angular
Frontend
Málaga
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
Today we are going to be talking about movies
Is that true?
Nope
Lets give a closer look to them
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
JQuery vs Vainilla JS
vs
Sample app
.element .toggle
.details.hidden
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
Easiest and most common way:
What if I want to render with JS ?
Rendering markup with JS
Rendering markup with JS
if the markup is complex you should use
http://handlebarsjs.com/
Loading from the server
Pagination: better in the server
Pagination: better in the server
• The code begins to become more unreadable
• Organising the code is not easy.
Is then Jquery a bad choice for dynamic apps?
Nope
This was created with Jquery
The code
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
Angular is BIG
Sample app
Easiest and most common way:
• Render full Angular template from the backend
• Everything is rendered via Javascript
• Doing AJAX is easy and advisable
The view template
The controller
Paginating with AJAX
Refactoring
Refactoringindex.html
Composing
personDetails.html
index.html
person-details.js
a piece of hell
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
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
Sample app
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
Normally you start with this:
But quickly turns into this:
Composing
Paginating with AJAX:
{page}
Recap
Pros
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
Cons
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
When should you use them?
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)
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
React if:
• You need fast rendering
• You are a beginner/intermediate programmer
• Your framework needs some flexibility
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
Thanks!