angular-vs-react

View Github Repository Open presentation in a new window

willyg302

See all presentation from willyg302

angular-vs-react

0 0

angular-vs-react

Course Project for ICS 419: Systems Design

On Github willyg302 / angular-vs-react

William Gaul · ICS 419 Course Project

Some Street Cred

Angular React Made By Google Facebook Powers YouTube, VEVO, DoubleClick Facebook Notifications, Instagram Appeared Jan 5, 2010 May 29, 2013 GitHub

And...companies care about this stuff.

The Web: Then

The Web: Now

Panda-ify

The Web: Now

What Changed?

  • Static → Dynamic
  • Pages and Links → Single-Page Applications (SPAs)
  • Desktop → Desktop, Mobile, Tablet, Watch...
  • Web Presence → Integration

Problems

  • Websites and web applications are getting more complex
  • A lot of code is repeated
  • Application logic is increasingly hard to reason about
  • No standard way of doing things

Web Frameworks

Hello world!

HelloSo long

Pure JavaScript

index.html

<h1>
    <span id="greeting">Hello</span>
    <span id="subject">world!</span>
</h1>
<select id="greetingInput">
    <option value="Hello">Hello</option>
    <option value="So long">So long</option>
</select>
<input id="subjectInput" type="text" value="world!">

Pure JavaScript

app.js

var g = document.getElementById('greetingInput');
var s = document.getElementById('subjectInput');

g.onchange = function() {
    document.getElementById('greeting').innerHTML = this.value;
};

s.onkeypress = s.onkeyup = function() {
    document.getElementById('subject').innerHTML = this.value;
};

Angular

index.html

<body ng-app="App">
    <div ng-controller="Example">
        <h1>{{greeting}} {{subject}}</h1>
        <select ng-model="greeting"
                ng-options="g for g in greetings">
        </select>
        <input type="text" ng-model="subject">
    </div>
</body>

Angular

app.js

angular.module('App', [])
       .controller('Example', ['$scope', function($scope) {
    $scope.greetings = ['Hello', 'So long'];
    $scope.greeting = $scope.greetings[0];
    $scope.subject = 'world!';
}]);

React

app.js

var App = React.createClass({
    getInitialState: function() {
        return { greeting: 'Hello', subject: 'world!' };
    },
    render: function() {
        return ( /* Partial here */ );
    },
    onGreetingChange: function(event) {
        this.setState({ greeting: event.target.value });
    },
    onSubjectChange: function(event) {
        this.setState({ subject: event.target.value });
    }
});

React.renderComponent(<App/>, document.body);

React

Partial

<div>
    <h1>{this.state.greeting} {this.state.subject}</h1>
    <select value={this.state.greeting}
            onChange={this.onGreetingChange}>
        <option value="Hello">Hello</option>
        <option value="So long">So long</option>
    </select>
    <input type="text" value={this.state.subject}
           onChange={this.onSubjectChange} />
</div>

“It is very helpful indeed if the framework guides developers through the entire journey of building an app.”

— The Zen of Angular

“We should do our utmost to shorten the conceptual gap between the static program and the dynamic process.”

— Edsger Dijkstra

Angular exists to aid the developer as much as possible in the present.

React is a preparation for the future.

Interview Time!

What is the best sorting algorithm?

It Depends

Which is better, Angular or React?

It Depends

“If the only tool you have is a hammer, you tend to see every problem as a nail.”

— Abraham Maslow

The Boring Stuff

  • Google. (2014) Guide to AngularJS Documentation. [Online]. Available: https://docs.angularjs.org/guide
  • B. Green and M. Hevery, "Design Principles of AngularJS," presented at the Google I/O Developer Conference, 2013.
  • P. Hunt. (2013, June) Why did we build React? [Online]. Available: http://facebook.github.io/react/blog/2013/06/05/why-react.html
  • ——, “The Secrets of React’s Virtual DOM,” presented at the Barcelona FutureJS Conference, 2014.
  • C. Schlensker and J. Lipper, "The Evolution of Frontend," presented at the Bloc Online Tech Talk, 2014.
  • J. Sklar, Principles of Web Design, 5th ed. Boston, MA: Course Technology, 2012.

The End

Thank You!