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!