Download as PDF, PPTX
More Related Content
Jquery react angular
- 1.
- 2. AGENDA 1. jQuery vsReact 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 Subscribeat: http://bit.ly/1Suvbjj #frontendmalaga or at:
- 4. JQuery vs Reactvs Angular Frontend Málaga
- 5. Hello. I’m Rafa RafaelDavid 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 aregoing to be talking about movies
- 10.
- 11. Lets give acloser 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 VainillaJS vs
- 14.
- 15. Easiest and mostcommon 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 mostcommon way:
- 17. What if Iwant to render with JS ?
- 18.
- 19.
- 20. if the markupis complex you should use http://handlebarsjs.com/
- 21. Loading from theserver
- 22. Pagination: better inthe server
- 23. Pagination: better inthe server • The code begins to become more unreadable • Organising the code is not easy.
- 24. Is then Jquerya bad choice for dynamic apps? Nope
- 25. This was createdwith Jquery
- 26.
- 27. Angular • It’s acomplete 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.
- 29.
- 30. Easiest and mostcommon way: • Render full Angular template from the backend • Everything is rendered via Javascript • Doing AJAX is easy and advisable
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. Angular 2 iscoming • 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 justa 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.
- 40. Easiest and mostcommon 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 startwith this:
- 42. But quickly turnsinto this:
- 43.
- 44.
- 45.
- 46.
- 47. ReactAngularJQuery • Low entrybarrier • 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.
- 49. ReactAngularJQuery • Rendering markup isnot 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 youuse them?
- 51. JQuery if: • Thereis 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: • Youare an experienced programmer • You already have experience with it • You want one tool that deals with everything • You framework allows it
- 53. React if: • Youneed 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.