![Code Examples
Simple onClick
Angulars own API again
What does () and [] mean?
To read React
Just learn JavaScript
To read Angular
Learn angular syntax](https://image.slidesharecdn.com/reactorangular-160403143907/85/ReactJS-or-Angular-10-320.jpg)
![Learning
]](https://image.slidesharecdn.com/reactorangular-160403143907/85/ReactJS-or-Angular-11-320.jpg)
ReactJS or Angular
- 2. Legacy Front-end problems VM VM VM VM VM VM VM Coupled architecture Application state issues Impure (buggy) Lack of reuse across teams Lack of design Developer skills are dated HTML
- 3. Decoupled architecture Composition architecture Uni-directional flow Pure Reuse (Components) FE Architecture New patterns Front-end Future Component HTML JavaScript CSS Component HTML JavaScript CSS Component HTML JavaScript CSS Component HTML JavaScript CSS HTML
- 4. Can they be compared?
- 5. Components ES6/ES7/Modules Opinionated from start Everything in the box (764k) TypeScript (doesn't have to be ; highly recommend) Beta - 22% into their release Low number of people using in production? HTML outside component Hard integration model Hard to build around business use cases Huge learning curve ? Key Differences Components ES6/ES7/Modules Opinionated at pattern level Lightweight (React + Redux 151k) JavaScript Version 15.0 High number of people using in production JSX inside Component Easier integration model Easy to build around business use case React is easy to learn. Ecosystem hard? Virtual Dom and performance
- 6. Current versions Launch in May at ngconf? 15.0 https://facebook.github.io/react/blog/2016/02/19/new-versioning-scheme.html
- 7. ?
- 9. Code Examples JSX (HTML) inside JS allows us to utilise the power of JS Angular has to have its own API JS inside HTML…. *, ngFor, # all seem unintuitive? Just a map… To read React Just learn JavaScript To read Angular Learn angular syntax
- 10. Code Examples Simple onClick Angulars own API again What does () and [] mean? To read React Just learn JavaScript To read Angular Learn angular syntax
- 11. Learning ]
- 12. What can React offer Good Bad Just JavaScript (enthesis on functional programming) Developers have to up skill in JavaScript Simple API Ecosystem Components Library based system Major version Release High risk of churn A lot of companies using it in production Small (151k) Uni-directional flow Focus on minimising state change Great workflow and supporting tools Compile time feedback (Fails fast and explicitly) Easy toTest Components Can test againstVDOM Puts HTML in JS Easy integration with UI Framework Pure > Inpure functions Recommends functional programming Scales Flexable Intuative Performant (vDOM) VDom offers 3-10x improvements in performance Huge community
- 13. What can Angular2 offer Good Bad Typescript (Compile time errors, IDE support) Typescript .net developers might like it (Typescript) Big learning curve (Have to learn another FW) Provides framework out the box Non transferable skills? Components Still in Beta (MajorVersion in May) Opinionated Not a lot of people using in Production (yet) 4 x faster than Angular 1 Not very intuitive? Huge improvement (rewrite) over Angular 1 Opinionated VDom offers 3-10x improvements in performance Cant drop into existing projects Access to ES6/ES7 functionality Size (760k) Embrace the Web Component standard Puts JS inside HTML Uses RxJS Fails slow? (Runtime vs compile time) Low risk of churn Have to learn RxJS? Community just starting You have to relearn Angular
- 14. Some more…
- 15. Highlights Simple easy API Just have to learn JavaScript Skills can be transferred Multiple companies using it .net developers might preferTypeScript Provides framework out the box Have to learn eco system Risk of churn Developers have to learn JS Still in Beta Skills are tied down (TS and Angular) Ang1 1 doesn't mean you know Ang2 Devs have to learnTS and Angular