Front End Frameworks: But why?

Disclaimer

A Disclaimer

On learning your first JavaScript Framework

first know JavaScript
first master a web framework
don’t try to do it in 1 day
HB Fellows: probably don’t do it for your Hackbright project

JavaScript History

A Storied Past

1998-early 2000s JavaScript gets standardized for multiple browsers
2006- jQuery released, ends up winning the battle of the JS libraries for the timebeing

Front End Frameworks Come on the Scene

2009- AngularJS (Brat Tech LLC, Google and community)
2010- Backbone (Jeremy Ashkenas)
2011- Ember.js (Yehuda Katz, Tom Dale, community)
2013- React.js (Facebook, Instagram, community)

The Case for Front End Frameworks

Why FEFs Are Awesome, Apparently

Easily testable
More maintainable
Safer
Faster
Easy on the eyes

Designing an Application Without a Front End Framework

Let’s Talk About...

Database design
Designing your controllers (a.k.a. routes)
Designing web page’s behavior with JavaScript

Database Design - elegant?

Designing Your Controllers - elegant?

@app.route('/submit')
def submit_form():
    pass

@app.route('/process_form')
def process_profile():
    pass

@app.route('/form')
def process_async_form():
    pass

Designing Your Controllers - elegant?

(Cont.)

@app.route('/users/<int:user_id>/save')
def create_user():
    pass

@app.route('/users/<int:user_id>/profile')
def profile():
    pass

@app.route('/save_profile')
def save_profile_async():
    pass

Designing Page Behavior with only JavaScript: elegant?

Live Demo! A textbox that shows the character count when the user clicks a button.
User: be the user of the web page.
Event listener: when the user presses the button, bring the event post-it note to the event handler.
Event handler: count the letters and write it in the DOM next to the text box.

Designing Page Behavior with only JavaScript: elegant?

(Cont.)

Kind of. jQuery and JavaScript encourage imperative programming.

When some event happens, do something else.

Getting Acquainted with React.js

React.js

Component lifecycles

var TextBox = React.createClass({
    getInitialState: function(){
        // pass
    },
    componentDidMount: function(){
        // pass
    },
    componentShouldUpdate: function(){
        // pass
    },
    render: function(){
        // pass
    }
});

No More HTML (kind of.)

var TextBox = React.createClass({
    getInitialState: function(){
        // pass
    },
    componentDidMount: function(){
        // pass
    },
    componentShouldUpdate: function(){
        // pass
    },
    render: function(){
        return (<textarea></textarea>);
    }
});

Components Composed of Other Components

var TextBox = React.createClass({
    getInitialState: function(){
        // pass
    },
    componentDidMount: function(){
        // pass
    },
    componentShouldUpdate: function(){
        // pass
    },
    render: function() {
        return (<textarea rows="5">
                </textarea>
        );
    }
});

var MeggiesForm = React.createClass({
    render: function(){
        return (
            <div>
                <p>Howdy. Try typing in the text box below.</p>
                <TextBox />
            </div>
        );
    }
});

Components

Event Listeners Are Different

var TextBox = React.createClass({
    getInitialState: function(){
        count: 0
    },
    componentDidMount: function(){
        // pass
    },
    componentShouldUpdate: function(){
        // pass
    },
    countChars: function(evt){
        var count = this.refs.input.value.length;
        this.setState('count', count);
    },
    render: function() {
        return (<textarea
                    ref="input"
                    onChange={this.countChars}
                    rows="5">
                </textarea>
                <StatusDiv count={this.state.count} />
        );
    }
});

Event Listeners and State

var TextBox = React.createClass({
    getInitialState: function(){
        count: 0
    },
    componentDidMount: function(){
        // pass
    },
    componentShouldUpdate: function(){
        // pass
    },
    countChars: function(evt){
        var count = this.refs.input.value.length;
        this.setState('count', count);
    },
    render: function() {
        return (<textarea
                    ref="input"
                    onChange={this.countChars}
                    rows="5">
                </textarea>
                <StatusDiv count={this.state.count} />
        );
    }
});

React is Quick.

Audio Visualization Demo at http://localhost:8000/pronounce_gaelic/start

React is quick because it’s declarative.

Declarative: “I want to live in a world where the number next to the text box IS the number of letters in that text box.”
Imperative: “When the user types in the text box, count the characters in the text box and then update the number next to the text box.”

How Does React Re-Render the DOM So Quickly?

Reconciliation Algorithm: generating the minimum number of operations to transform one tree into another

Gotchas

JSX gotchas

/** @jsx React.DOM */ needs to be at the top of any file with React code (JSX) in it.
Add type="text/jsx" to the <script> tag for any of YOUR JavaScript files that contain React code (JSX)
You can’t use class="blah" in JSX because class is a reserved word in JavaScript. Use className instead.

Component Lifecycle gotchas

componentDidMount means the render function got called.
Always use this.setState to change a component’s state. Other than that function, state should be thought of as being immutable.

React.js isn’t all kittens and pizza.

React is hard on designer workflows.
JSX is hard to look at.
The error messages are cryptic.
- Facebook React developers, if you can hear me, please make this better.

FEF Patterns

Independent modules or units that have their own behaviors
An interest in fewer “pages”
- Single Page Applications
Faster development and faster onboarding
“Declarative is better than imperative.”
HTML, CSS, Bootstrap, and JQuery are still welcome to the party
“does the heavy lifting for you”.

Resources/ bibliography

Resources

Other Resources

AngularJS: Up and Running (by Shyam Seshadri and Brad Green)
React’s Reconciliation Algorithm: https://facebook.github.io/react/docs/reconciliation.html
React Docs and Tutorials: https://facebook.github.io/react/docs/getting-started.html