Software Engineer @ Red Hat
github.com/rohitkrai03
@rohitkrai293
Every framework can be viewed as an attempt to say "the hardest part of writing a webapp is {X}, so here's some code to make that easier".
Knockoutjs
The hardest part of writing a webapp is implementing two-way data binding.
Backbonejs
The hardest parts are fetching and persisting models to a REST API, and client side routing.
Angular
Angular is what you get if you think the biggest problem with writing webapps is that Javascript isn't Java.
The hardest part of writing a webapp is data-binding, decouped modular architecture that supports unit testing, and having to do XHR with callbacks.
React + Redux
The hardest part of writing webapps is non-deterministic behaviour and unclear data flow.
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug
Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '/customers',
type: 'POST',
data: $(this).serialize(),
success: function(data) {
$('.status')
.append('<h3>' + data + '</h3>');
}
});
});
class NoteBox extends React.Component {
// ... more code ...
render() {
return (
<div className="NoteBox">
<h1>Notes</h1>
<NoteList data={this.state.data} />
<NoteForm onPost={this.handlePost} />
</div>
);
}
};
Completely recreating the entire UI on every update is not efficient
Rendering a component returns descriptions of what the UI should look like now
React uses those descriptions to update the UI efficiently
Declarative
Write code that describes what you want, but not necessarily how to get it.
Clear syntax
JSX in React feels just like HTML, there’s no special syntax to learn.
const Greetings = ({ firstName }) => (
<div>Hi, {firstName}</div>
);
Learning curve
React has the least abstractions. If you know JavaScript then you can probably start writing React code in a single day.
Functional
In React, all of the UI can be expressed as a set of pure functions, and using pure functions to render the UI feels like a breath of fresh air.
React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent. In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way
Just like functions take parameters and return a result, components take in values and return UI output. Given the same input values, a component will return the same UI output.
Often described as UI = f(state)
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
);
const HelloMessage = (props) => (
<div>
Hello {props.name}
</div>
);
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
);
Class Components
Functional Components