Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
From Angular to React...
and back again
You might be thinking…
@simona_cotin @hackawaye
One framework.
Mobile & desktop.
Release date: September, the 14th 2014
Contributors: 462
License: MIT
Intro - Angular
History - misko hevery
Keep Your
Minds Open
ES6
Web Components
React
RxJs
TypeScript
ember-cli
Performance
is not a single number
Startup
Speed
First Time
Render
U
pdate
R
ender
RouteTransition
Change
Detection
Memory...
Lazy
Loading
AoT
• Faster rendering
• Fewer asynchronous requests
• Smaller Angular framework download
size
• Detect template errors ea...
AoT
Tree
Shaking
Angular
Cli
REACT
A JAVASCRIPT LIBRARY FOR BUILDING
USER INTERFACES
Release date: May, the 26th 2013
Contributors: 1034
License: BSD-3 with Patent Clause
Component based architecture
Flow (strongly typed)
ES6
Predictable state management
(Redux + Middlewares)
Virtual dom
● Reconciliation algorithm v1 a.k.a. Stack
reconciler (2013)
● Reconciliation algorithm v2 a.k.a Fiber
(2016)
Getting started
vs
vs
vsvs
vs
vs
vs
vs
Wait, how do I manage state?
vs
predictable state container for JavaScript apps
REDUX
vs
vs
vs
Where did $http go?
vs
“..not a framework”
-every React developer out there
• axios
• superagent
• fetch
Wait, how do I pass data between components?
vs
Parent
To
child
Wait, how do I pass data between components?
vs
Child
To
Parent
Wait, how do I pass data between components?
vs
Component
To
Component
REDUX
Back to Angular
Back to Angular
Back to Angular
Stateful
vs
Stateless
Angular CLI
by
Angular Augury Language ServicesProtractor
Linter: eslint-config-airbnb.
Editor: any editor that allows you to
configure linting
React Developer Tools
Redux Dev Tools
Remote Redux Dev Tools
Coding and Arch Guides: provided by
the community with
● Angular Style Guide
● Typescript
● UpgradeModule
● Upgrade cheatsheet
● Asim’s migration blog https://goo.gl/G2rnF2
● Can prove difficult to architect a large
app
● State management and asynchronous
data can be confusing
● There is no uni...
How to choose?
• How mature are the frameworks/libraries ?
Who wins?
Thank you!
@simona_cotin @hackawaye
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Angular and react an overview
Prochain SlideShare
Chargement dans…5
×

Angular and react an overview

144 vues

Publié le

Angular and React side by side they are very much alike

Publié dans : Technologie
  • Soyez le premier à commenter

Angular and react an overview

  1. 1. From Angular to React... and back again
  2. 2. You might be thinking…
  3. 3. @simona_cotin @hackawaye
  4. 4. One framework. Mobile & desktop.
  5. 5. Release date: September, the 14th 2014 Contributors: 462 License: MIT
  6. 6. Intro - Angular History - misko hevery
  7. 7. Keep Your Minds Open ES6 Web Components React RxJs TypeScript ember-cli
  8. 8. Performance is not a single number Startup Speed First Time Render U pdate R ender RouteTransition Change Detection Memory Pressure
  9. 9. Lazy Loading
  10. 10. AoT • Faster rendering • Fewer asynchronous requests • Smaller Angular framework download size • Detect template errors earlier • Better security
  11. 11. AoT
  12. 12. Tree Shaking
  13. 13. Angular Cli
  14. 14. REACT A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
  15. 15. Release date: May, the 26th 2013 Contributors: 1034 License: BSD-3 with Patent Clause
  16. 16. Component based architecture Flow (strongly typed) ES6 Predictable state management (Redux + Middlewares)
  17. 17. Virtual dom
  18. 18. ● Reconciliation algorithm v1 a.k.a. Stack reconciler (2013) ● Reconciliation algorithm v2 a.k.a Fiber (2016)
  19. 19. Getting started
  20. 20. vs
  21. 21. vs
  22. 22. vsvs
  23. 23. vs
  24. 24. vs
  25. 25. vs
  26. 26. vs
  27. 27. Wait, how do I manage state? vs predictable state container for JavaScript apps REDUX
  28. 28. vs
  29. 29. vs
  30. 30. vs
  31. 31. Where did $http go? vs “..not a framework” -every React developer out there • axios • superagent • fetch
  32. 32. Wait, how do I pass data between components? vs Parent To child
  33. 33. Wait, how do I pass data between components? vs Child To Parent
  34. 34. Wait, how do I pass data between components? vs Component To Component REDUX
  35. 35. Back to Angular
  36. 36. Back to Angular
  37. 37. Back to Angular Stateful vs Stateless
  38. 38. Angular CLI by Angular Augury Language ServicesProtractor
  39. 39. Linter: eslint-config-airbnb.
  40. 40. Editor: any editor that allows you to configure linting
  41. 41. React Developer Tools Redux Dev Tools Remote Redux Dev Tools
  42. 42. Coding and Arch Guides: provided by the community with
  43. 43. ● Angular Style Guide ● Typescript ● UpgradeModule ● Upgrade cheatsheet ● Asim’s migration blog https://goo.gl/G2rnF2
  44. 44. ● Can prove difficult to architect a large app ● State management and asynchronous data can be confusing ● There is no unified way of doing things, only recommendations
  45. 45. How to choose?
  46. 46. • How mature are the frameworks/libraries ?
  47. 47. Who wins?
  48. 48. Thank you! @simona_cotin @hackawaye

×