Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular vs React for Web Application Development

208 views

Published on

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu

Presented by Hasan Ahmad, DEV6 - A Division of the New Toronto Group Inc.

Overview

JavaScript has enjoyed a strong following among front-end developers for creating dynamic web applications because it’s the fastest way to get up and offloading server-side computation to the client-side. Developers also have many choices when it comes to choosing a client-side tool, and not surprisingly, two of the most popular libraries for JavaScript that have emerged are open source projects. Google and Facebook, giants when it comes to developing the largest web applications in production today, are sharing their expertise using Angular and React, which have a lot in common, but also have significant differences. Both allow developers to work on application features in parallel by splitting them into self-contained components, and both ensure the codebase maintains minimum level of accessibility to developers of varying JavaScript experience.

Angular and React are well-supported with guides, tooling, and an open source community, but they also relieve developers of several burdens. JavaScript’s use of the client offers many advantages, but that makes it dependent on the web browser. Frameworks such as Angular and React keep track of ever-changing APIs and the capabilities of the web so that developers don’t have to do the resource-intensive work to update individual parts of the application. These frameworks also enforce certain minimal assumptions about the structure of the code to handle complex tasks with the latest and best-known techniques so developers don’t have to maintain them. They also provide real-time debugging support and unit tests that are required by enterprise applications that place high priority on performance and reliability.

Both Angular and React offer the enterprise-class JavaScript support developers require as they both solve the same set of problems. However, they tackle them in different ways, and it’s those differences that should decide which framework works best for their project.

Objective

Compare and contrast two leading front-end web application frameworks and highlighting how to help large enterprises choose what frameworks are productive for them.

Target Audience

JavaScript developers, project managers at large enterprise corporations

Five Things Audience Members Will Learn

Why are applications increasingly being built on the front-end?
What requirements drive the decisions of an enterprise web development team?
What problems are Angular and React providing a solution for?
The difference in approach and implementation between Angular and React?
What criteria your team should use when determining if Angular or React are a good fit for their project?

Published in: Technology
  • Be the first to comment

Angular vs React for Web Application Development

  1. 1. Hasan @ DEV6 – #WEBU17 ?
  2. 2. Hasan @ DEV6 – #WEBU17
  3. 3. Hasan @ DEV6 – #WEBU17 Hasan Ahmad Senior Consultant @ DEV6 Lead @ DevC Toronto https://www.dev6.com/ https://www.facebook.com/groups/DevCToronto/
  4. 4. Hasan @ DEV6 – #WEBU17 Front-end frameworks have more in common than you might expect Component based architecture View-Model / State management Routing views with URLs
  5. 5. Hasan @ DEV6 – #WEBU17 Components Angular: Decorate classes with component life-cycle hooks React: ES6 inheritance provides interfaces for life-cycle hooks
  6. 6. Hasan @ DEV6 – #WEBU17 @Component({selector: 'greet', template: 'Hello {{name}}!’}) class Greet { name: string = 'World'; } class Welcome extends React.component { render() { return <h1>Hello, {this.props.name}</h1> } }
  7. 7. Hasan @ DEV6 – #WEBU17 ngOnChanges() – when a data binding has changed ngOnInit() – when angular has already displayed bound data ngOnCheck() – manual change detection ngAfterContentInit() - … ngAfterContentInitChecked() - … ngAfterViewInit() - … ngAfterViewInitChecked() - … ngOnDestroy() – right before angular removes a component
  8. 8. Hasan @ DEV6 – #WEBU17 constructor() – component is created componentWillMount() – before a component has been attached to view render() – return the react view element componentDidMount() – after react has attached component to view componentWillRecieveProps() - … shouldComponentUpdate() - … componentWillUpdate() - … componentDidUpdate() - after react has updated a component componentWillUnmount() – before react removes a component
  9. 9. Hasan @ DEV6 – #WEBU17 export class PeekABoo implements OnInit { constructor(private logger: LoggerService) { } // implement OnInit's `ngOnInit` method ngOnInit() { this.logIt(`OnInit`); } logIt(msg: string) { this.logger.log(`#${nextId++} ${msg}`); } }
  10. 10. Hasan @ DEV6 – #WEBU17 class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } //... }
  11. 11. Hasan @ DEV6 – #WEBU17 Data Binding Angular - flexible data binding options, including two-way React - One-way data binding, lift state up
  12. 12. Hasan @ DEV6 – #WEBU17 Component to DOM Interpolation and Property Binding One-way binding: Value goes from component data property to a target element property DOM to Component Event Binding: user interacted with page, bring that back to the component Both Two-Way Binding: update data as soon as it has been changed by the user
  13. 13. Hasan @ DEV6 – #WEBU17 Handling State Angular – Mutable data, services as singletons (can opt for immutable too) React – state & props, flux, redux
  14. 14. Hasan @ DEV6 – #WEBU17 Service is a singleton – only one instance in memory Components can mutate data in services, everyone who injects a service can see the altered state Angular will automatically re-draw the UI with the new data (Change Detection + Zones + Data Binding)
  15. 15. Hasan @ DEV6 – #WEBU17 Components have their own state, react renders components when their state changes By default, you have to maintain parent-child relationships to state, using props redux: have one giant state object
  16. 16. Hasan @ DEV6 – #WEBU17 Store Single big JSON, all state for entire application Reducer Update store, return a new state Action Dispatched to trigger a state change Follow up on redux.js.org
  17. 17. Hasan @ DEV6 – #WEBU17 Layout & Styling Angular has embraced Shadow DOM +View Encapsulation for styling components React is compatible with many styling approaches: traditional CSS, bootstrap, and flexbox
  18. 18. Hasan @ DEV6 – #WEBU17 @Component({ selector: 'hero-details', template: ` <h2>{{hero.name}}</h2> <hero-team [hero]=hero></hero-team> <ng-content></ng-content> `, styleUrls: ['app/hero-details.component.css'] }) export class HeroDetailsComponent { /* . . . */ }
  19. 19. Hasan @ DEV6 – #WEBU17 What is Shadow DOM? Shadow DOM is included in the Web Components standard by W3C Refers to the ability to include a subtree of DOM elements Allows DOM implementation to be hidden from the rest of the document
  20. 20. Hasan @ DEV6 – #WEBU17 <hero-details _nghost-pmm-5> <h2 _ngcontent-pmm-5>Mister Fantastic</h2> <hero-team _ngcontent-pmm-5 _nghost-pmm-6> <h3 _ngcontent-pmm-6>Team</h3> </hero-team> </hero-detail>
  21. 21. Hasan @ DEV6 – #WEBU17 render(props, context) { const notes = this.props.notes; return <ul className='notes'>{notes.map(this.renderNote)}</ul>; } render(props, context) { const notes = this.props.notes; const style = { margin: '0.5em', paddingLeft: 0, listStyle: 'none' }; return <ul style={style}>{notes.map(this.renderNote)}</ul>; } https://survivejs.com/react/advanced-techniques/styling-react/
  22. 22. Hasan @ DEV6 – #WEBU17 import React from 'react' import injectSheet from 'react-jss' const styles = { button: { background: props => props.color }, label: { fontWeight: 'bold' } } const Button = ({classes, children}) => ( <button className={classes.button}> <span className={classes.label}> {children} </span> </button> ) export default injectSheet(styles)(Button) https://github.com/cssinjs/jss
  23. 23. Hasan @ DEV6 – #WEBU17 var Block = require('jsxstyle/Block'); var React = require('react'); var MyComponent = React.createClass({ render: function() { return <Block color="red">Hello, world!</Block>; } }); https://github.com/smyte/jsxstyle
  24. 24. Hasan @ DEV6 – #WEBU17 Routing Angular has one routing model, driven by the URL @angular/router is engineered for many scenarios React has many different options, depending on your app architecture react-router, fluxxor-react-router, react-redux-router
  25. 25. Hasan @ DEV6 – #WEBU17 template: ` <h1>Angular Router</h1> <nav> <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> <a routerLink="/heroes" routerLinkActive="active">Heroes</a> </nav> <router-outlet></router-outlet> ` const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, { path: 'hero/:id', component: HeroDetailComponent }, { path: 'heroes', component: HeroListComponent, data: { title: 'Heroes List' } }, { path: '', redirectTo: '/heroes', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ];
  26. 26. Hasan @ DEV6 – #WEBU17 // ./src/index.jsx import React, { Component } from 'react'; import { render } from 'react-dom'; // Import routing components import {Router, Route} from 'react-router'; class Home extends Component { render(){ return (<h1>Hi</h1>); } } render( <Router> <!--Each route is defined with Route--> <Route path="/" component={Home}/> </Router>, document.getElementById('container') ); https://scotch.io/tutorials/routing-react-apps-the-complete-guide
  27. 27. Hasan @ DEV6 – #WEBU17 import React from 'react' import ReactDOM from 'react-dom' import { createStore, combineReducers } from 'redux' import { Provider } from 'react-redux' import { Router, Route, browserHistory } from 'react-router' import { syncHistoryWithStore, routerReducer } from 'react-router-redux' import reducers from '<project-path>/reducers' const store = createStore( combineReducers({ ...reducers, routing: routerReducer }) ) // Create an enhanced history that syncs navigation events with the store const history = syncHistoryWithStore(browserHistory, store) ReactDOM.render( <Provider store={store}> <Router history={history}> <Route path="/" component={App}> <Route path="foo" component={Foo}/> <Route path="bar" component={Bar}/> </Route> </Router> </Provider>, document.getElementById('mount') ) https://github.com/reactjs/react-router-redux
  28. 28. Hasan @ DEV6 – #WEBU17 Testing Angular comes with extensive support for jasmine with karma and protractor React varies by project, some use Jest, others use Mocha/Chai/Enzyme
  29. 29. Hasan @ DEV6 – #WEBU17 Cross-platform apps Extend cross platform experience beyond the browser Progressive Web Applications Cordova / Hybrid Applications NativeScript / React Native
  30. 30. Hasan @ DEV6 – #WEBU17 Angular + React = ? react-native-renderer – Angular project in a react native app ng-redux – Use redux (popularized by React) in your Angular projects
  31. 31. Hasan @ DEV6 – #WEBU17 Summary Equal, yet different:Two approaches to solving common problems all developers face. Choice between Angular and React is ultimately driven by an organization’s development philosophy.
  32. 32. Hasan @ DEV6 – #WEBU17 ThankYou! Questions?

×