Downloaded 41 times
![Angular $resource
$resource(url, [paramDefaults], [actions], options);
A factory which creates a resource object
that lets you interact with RESTful server-side
data sources.](https://image.slidesharecdn.com/netmeetforit-reactvsangular-160310091532/85/React-vs-Angular-ups-downs-speaker-Oleksandr-Kovalov-Binary-Studio-45-320.jpg)
Uploaded byBinary Studio
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
The document provides a detailed comparison between Angular and React, outlining their architectures, features, and performance strengths. It discusses the evolution of both frameworks, key principles such as unidirectional data flow in React, and various tools and libraries used within their ecosystems. Ultimately, the choice between Angular and React is suggested based on project requirements, with Angular being more suited for quick setups and React for long-term, component-based projects.
More Related Content
Similar to React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
![Angular vs React 2019 [UPDATED] - tecHindustan](https://cdn.slidesharecdn.com/ss_thumbnails/angularvsreact2019updated-techindustan-190102083521-thumbnail.jpg?width=640&height=640&fit=bounds)
More from Binary Studio
React vs Angular: ups & downs (speaker Oleksandr Kovalov, Binary Studio)
- 1.
- 2.
- 3. Agenda 1. Overview 2. Angular 3.React 4. ES2015 5. Angular 2 6. Dev Tools 7. Summary
- 4. The most popularframeworks
- 5.
- 6.
- 9. Angular.js First version wascreated in 2009 as service for store data in JSON. Created by Google
- 10.
- 11. Walk through Angularapp architecture Templates Controllers Services / Factories Directives
- 12.
- 13.
- 14.
- 15. Dirty checking -watchers etc.
- 16. Angular world Dependency Injection Providers Filters IsolatedScope Config Events: $emit, $broadcast Resources
- 17.
- 18. Summary Quick creation ofinitial version of application Many created directives Problems with current state control
- 19. React.JS React was createdby Jordan Walke, a software engineer at Facebook Become open-source in 2013
- 20.
- 21.
- 22. Angular, Ember andKnockout put “JS” in your HTML. React puts “HTML” in your JS. Cory House React’s JSX: The Other Side of the Coin Single Responsibility Principle
- 23. JSX ● The samefile for code/template ● XML-like syntax ● Build components, not templates. ○ Reusable ○ Composable ○ Unit testable
- 24. React render React re-renderentire component Re-render on every change makes life simple Declarative JSX Re-render on every change? That seems expensive http://www.slideshare.net/floydophone/react-preso-v2
- 25. VirtualDOM Reactive, Component-based UIswith React
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. Flux Action Dispatcher Store View ● Instead ofMVC for React ● Unidirectional data flow ● Created by Facebook ● Many stores Store Store ...
- 32. Redux ● Evolution ofFlux ● One immutable state ● Hot reload View layer Action Dispatcher Store View Provider Connect
- 33. Redux flow -Store Create store. Connect store to Root element
- 34. Redux flow -Connect State/Actions to Components
- 35. Redux flow -Action Whenever you want to change the state of the application, you shoot off an action. Action function returns a formatted action object
- 36. Redux flow -Root Reducer Creation of Root reducer
- 37. Redux flow -Reducer Every reducer: receive state return new state Not mutated old state! new one!
- 38. Summary State changes onlyin reducers Structured code We have access to state in every moment
- 39.
- 40. Router organisation -Angular
- 41.
- 42. Angular validation Property ClassDescription $valid ng-valid Boolean Tells whether an item is currently valid based on the rules you placed. $invalid ng-invalid Boolean Tells whether an item is currently invalid based on the rules you placed. $pristine ng-pristine Boolean True if the form/input has not been used yet. $dirty ng-dirty Boolean True if the form/input has been used. $touched ng-touched Boolean True if the input has been blurred.
- 43. React validation (formsy-react) Validationslist: ● matchRegexp ● isEmail ● isUrl ● isExisty ● isUndefined ● isEmptyString ● isTrue ● isFalse ● isAlpha ● isNumeric ● isAlphanumeric ● isInt ● isFloat ● isWords ● isSpecialWords ● equals:value ● equalsField:fieldName ● isLength:length ● minLength:length ● maxLength:length
- 44. Angular $http Methods: ●.delete() ● .get() ● .head() ● .jsonp() ● .patch() ● .post() ● .put() Response properties: ● .config ● .data ● .headers ● .status ● .statusText
- 45. Angular $resource $resource(url, [paramDefaults],[actions], options); A factory which creates a resource object that lets you interact with RESTful server-side data sources.
- 46. React HTTP (superagent) Responseproperties: ● .text ● .body ● .header ● .type ● .status Methods: ● .get() ● .delete() ● .head() ● .post() ● .put()
- 47. Opinion Unix philosophy: The philosophyof small, composable, single-purpose tools never goes out of style. Angular 2 versus React: There Will Be Blood
- 48.
- 49.
- 50. Performance is notthe reason Improvements: track by Minimize watchers :: one-time binding debounce ng-model ng-show/ng-if use VanillaJS (native JavaScript)
- 51. Performance is notthe reason http://blog.500tech.com/is-reactjs-fast/ React Performance: http://speed.examples.500tech.com/ngrepeat/before/react.html Angular before optimisation: http://speed.examples.500tech.com/ngrepeat/before/angular.html Angular after optimisation: http://speed.examples.500tech.com/ngrepeat/after/angular.html
- 52. Performance is notthe reason React’s true strengths: composition, unidirectional data flow, freedom from DSLs, explicit mutation and static mental model. Dan Abramov Redux Author https://medium.com/@dan_abramov/youre-missing-the-point-of-react- a20e34a51e1a
- 53. Readability To read Angular:Learn a long list of Angular-specific syntax. To read React: Learn JavaScript. Angular 2 versus React: There Will Be Blood Ember: {{# each}} Angular 1: ng-repeat Angular 2: ngFor Knockout: data-bind=”foreach” React: JUST USE JS. :)
- 54. Who uses? Angular: Google Youtube forPS3 Nike General Motors Guardian Wolphram alpha NBC Intel React: Facebook Instagram Atlassian Dropbox Flipboard IMDb Netflix PayPal WhatsApp
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. Universal (Isomorphic) applications https://react.rocks/tag/Isomorphic ServerClient REST API, DB Access, etc. Node.JS Browser Universal JavaScript HTML 5, DOM events, etc.
- 64. Summary React + Redux: VirtualDOM Uni-directionaldata flow Low entry barrier Easily manageable state. Immutable. React Native for mobile development Angular: Full-featured MV* framework Fast to start-off 2-way binding TypeScript (Angular 2) Remember about optimization
- 65. P.S. Looking to buildsomething quickly that can be picked up by new developers without long lead times? Pick Angular. Building a long term project that requires a specific set of components and a componentized architecture? Pick React. Prefer Angular? Pick Angular. Prefer React? Pick React. Mike W. Waracle Project ManagementAngular vs React
- 66.